Shiny - Ändern Sie die Größe anderer Fenster, wenn eines davon ausgeblendet ist.

Question

Ich benutze Shiny, um eine Web-App zu erstellen. Ich füge eine Schaltfläche hinzu, die ein Element auf der Seite anzeigen/ausblenden wird. Aber nachdem das Element ausgeblendet wurde, ändert sich die Größe der anderen Seite nicht, um den Bildschirm zu füllen. Zum Beispiel versuche ich, die Sidebar einer SidebarLayout zu verstecken, indem ich die Funktion toggle in shinyjs verwende. Hier ist der Code, den ich habe:

library(shiny) 
library(shinyjs) 
ui <- fluidPage(useShinyjs(), br(), wellPanel(sidebarLayout(
    sidebarPanel(id="sidebar"), 
    mainPanel(wellPanel(actionButton("sideBarControl", label = "Show/Hide"))) 
))) 
server <- function(input, output) { 
    observeEvent(input$sideBarControl, { 
    shinyjs::toggle(id = "sidebar") 
    # potentially some statements here to fix the layout? But what should they be? 
    }) 
} 
shinyApp(ui = ui, server = server) 

Die Seitenleiste versteckt/zeigt, wenn sidebarControl Taste richtig klicken, sondern von Mainpanel die Größe des Bildschirms zu füllen, es verschiebt Mainpanel nach links und links auf der rechten Seite einen Raum. Wie löst man das? Sehen Sie die Bilder unter:

Answer 1

Wie über Sie versuchen shinydashboard? Es hat das Verhalten, nach dem Sie standardmäßig suchen.

https://rstudio.github.io/shinydashboard/get_started.html

Answer 2

Lassen Sie mich zu meinem früheren Vorschlag auf den Kommentar antworten. Da dies ganz anders ist als vorher, schreibe ich eine neue Antwort, anstatt sie zu bearbeiten.

Im Allgemeinen können Sie überprüfen, welcher HTML-Code aus Ihrer Benutzeroberflächenbeschreibung generiert wird, indem Sie den Befehl auf der Konsole ausführen. Zum Beispiel

sidebarPanel(id="sidebar", actionButton("b", "btn")) 
##<div class="col-sm-4"> 
## <form class="well" id="sidebar"> 
## <button id="b" type="button" class="btn btn-default action-button">btn</button> 
## </form> 
##</div> 

Dies sagt uns, dass sidebarPanel Funktion einen verschachtelten Rahmen

• div mit Klasse erzeugt col-sm-4; und
• form mit dem mitgelieferten ID

Der Grund, warum Ihr Beispielcode hat nicht verschiebt sich das Hauptfeld klar ist jetzt; Selbst wenn Sie sidebar verstecken, das ist das Formular im Inneren, gibt es immer noch div, die es einschließt.

Also möchten wir eine Möglichkeit, die div zu verstecken. Leider konnte ich mit sidebarPanel Funktion keinen Weg finden, dies zu tun. Eine Alternative ist die Verwendung der column Funktion.

column(width=3, id="col", actionButton("b", "btn")) 
##<div class="col-sm-3" id="col"> 
## <button id="b" type="button" class="btn btn-default action-button">btn</button> 
##</div> 

können Sie sehen, dass die Ausgabe von column zu der sidebarPanel Art ähnlich ist. Wichtig: column ermöglicht Ihnen, dem Element div eine ID zuzuweisen.

Also, hier ist ein Spielzeug-Beispiel, das das Hauptfeld nach links verschiebt (d. H. Die Seitenleiste vollständig ausblenden). Jetzt

library(shiny) 
library(shinyjs) 
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
    column(width=4, id="spcol", actionButton("dummy", "dummy")), 
    column(width=8, wellPanel(actionButton("sideBarControl", 
             label = "Show/Hide"))) 
))) 

server <- function(input, output) { 
    observeEvent(input$sideBarControl, { 
    shinyjs::toggle(id = "spcol") 
    }) 
} 
shinyApp(ui = ui, server = server) 

, lassen Sie sich auf Ihrem zweiten Punkt angehen, das heißt, das Hauptfeld im Stich gelassen zu füllen, statt zu verschieben.

mainPanel() 
##<div class="col-sm-8"></div> 

So füllt es nicht, weil seine Breite als 8 festgelegt ist.Wir wollen es zu 12 ändern, und wir können toggleClass Funktion von shinyjs Bibliothek dafür verwenden. Kurz gesagt, toggleClass fügt einem Element eine Klasse hinzu, wenn es keine hat, und entfernt die Klasse, wenn dies bereits der Fall ist.
Ich glaube, der Code unten verhält sich wie wir wollen.

library(shiny) 
library(shinyjs) 
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
    column(width=4, id="spcol", actionButton("dummy", "dummy")), 
    column(width=8, id="main", wellPanel(actionButton("sideBarControl", 
                label = "Show/Hide"))) 
))) 

server <- function(input, output) { 
    observeEvent(input$sideBarControl, { 
    shinyjs::toggle(id = "spcol") 
    shinyjs::toggleClass("main", "col-sm-8") 
    shinyjs::toggleClass("main", "col-sm-12") 
    }) 
} 
shinyApp(ui = ui, server = server) 

Auch hier ist ein weiterer Arbeitsbeispielcode, in der zwei Versionen von Hauptplatten mit unterschiedlichen Breiten versteckt sind und wiederum gezeigt.

library(shiny) 
library(shinyjs) 
ui <- fluidPage(useShinyjs(), br(), wellPanel(fluidRow(
    column(width=4, id="spcol", actionButton("dummy", "dummy")), 
    column(width=8, id="main1", wellPanel(actionButton("sideBarControl", 
             label = "Show/Hide"))), 
    column(width=12, id="main2", wellPanel(actionButton("sideBarControl2", 
             label = "Show/Hide"))) 
))) 

server <- function(input, output) { 
    shinyjs::toggle(id = "main2") 

    observeEvent(input$sideBarControl+input$sideBarControl2, { 
    shinyjs::toggle(id = "spcol") 
    shinyjs::toggle(id = "main1") 
    shinyjs::toggle(id = "main2") 
    }) 
} 
shinyApp(ui = ui, server = server)