如何控制Shiny App折叠和展开时主面板的宽度？

Question

我有一个带有侧栏和主面板的

shiny

应用程序，单击切换按钮时，侧栏会折叠，主面板会展开（宽度也会增加）。但是，当我尝试再次单击切换按钮时，主面板宽度与侧边栏扩展和侧边栏下方的主面板保持相同。

示例代码：

library(shiny)
library(bsplus)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  
  tags$style(HTML(
    "#mainPanel {
       background-color: blue;
       color: white; 
    }"
  )),
  titlePanel("Toggler"),
  tags$div(id = "sidebar",
           sidebarPanel(
             bs_accordion(
               id = "accordion"
             ) %>%  
               bs_set_opts(
                 use_heading_link = TRUE
               ) %>%  
               bs_append(
                 title = tags$div(tags$i(class = "fa-solid fa-upload"),"Upload"),
                 content = fileInput("upload", "Upload a Excel File", 
                                     accept = c(".xlsx",".csv"))
               ) ,
             use_bs_accordion_sidebar()
           )
  ),
  mainPanel(
    id = "mainPanel",
    actionButton("toggle_btn", "Toggle"))
)

server <- function(input, output, session) {
  options(shiny.maxRequestSize = 100*1024^2) # Upload file Size Limit (100mb)
  
  session$onSessionEnded(function() {
    stopApp()
  })
  
  observeEvent(input$toggle_btn, {
    shinyjs::toggle(id = "sidebar")
    
    if (input$toggle_btn) {
      runjs('$("#mainPanel").css("width", "100%");')
    } else {
      runjs('$("#mainPanel").css("width","20%");')
    }
  })
}

shinyApp(ui, server)

结果：

我希望主面板返回到其原始位置以及切换宽度。

Answer 1

if

上的

input$toggle_btn

条件不起作用。您可以在

reactiveValues

内放置一个布尔值来测量按钮的状态，并在单击切换按钮时更改此状态。我们还编辑

CSS

，使格式恢复为原始样式。

library(shiny)
library(bsplus)
library(shinyjs)

ui <- fluidPage(
    useShinyjs(),
    
    tags$style(HTML(
        "#mainPanel {
       background-color: blue;
       color: white; 
    }"
    )),
    titlePanel("Toggler"),
    tags$div(id = "sidebar",
             sidebarPanel(
                 bs_accordion(
                     id = "accordion"
                 ) %>%  
                     bs_set_opts(
                         use_heading_link = TRUE
                     ) %>%  
                     bs_append(
                         title = tags$div(tags$i(class = "fa-solid fa-upload"),"Upload"),
                         content = fileInput("upload", "Upload a Excel File", 
                                             accept = c(".xlsx",".csv"))
                     ) ,
                 use_bs_accordion_sidebar()
             )
    ),
    mainPanel(
        id = "mainPanel",
        actionButton("toggle_btn", "Toggle"))
)

server <- function(input, output, session) {
    options(shiny.maxRequestSize = 100*1024^2) # Upload file Size Limit (100mb)
    
    session$onSessionEnded(function() {
        stopApp()
    })
    
    bln <- reactiveValues(hidden = FALSE)
    
    observeEvent(input$toggle_btn, {
        shinyjs::toggle(id = "sidebar")
        
        if (!bln$hidden) {
            runjs('$("#mainPanel").css("width", "100%");')
            bln$hidden <- TRUE
        } else {
            runjs('$("#mainPanel").css("width","66.66%");')
            bln$hidden <- FALSE
        }
    })
}

shinyApp(ui, server)