css 如何控制主面板的宽度在闪亮的应用程序在折叠和展开?

zbsbpyhn  于 2023-08-09  发布在  其他
关注(0)|答案(1)|浏览(105)

我有一个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)

字符串
测试结果:


的数据
我希望主面板返回到其原来的位置沿着随着切换宽度。

8yoxcaq7

8yoxcaq71#

input$toggle_btn上的if条件将不起作用。您可以在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)

字符串

相关问题