如何在Shiny应用程序中控制主面板在折叠和展开时的宽度?

huangapple go评论73阅读模式
英文:

How to control the main panel width in Shiny App during collapse and expand?

问题

我想让主面板在切换时恢复到原始位置,同时还原宽度。

英文:

I have a shiny app with side bar and main panel where on clicking the toggle button, sidebar collapses and main panel expands (width also increases). But when I try to click the toggle button again the main panel width stays the same with Sidebar expanded and Main panel underneath the Sidebar.

Example Code:

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)

Result:

如何在Shiny应用程序中控制主面板在折叠和展开时的宽度?

I want the main Panel to return back to its original position along with width on toggle.

答案1

得分: 1

The if condition on input$toggle_btn won't work. You can put a boolean value which measures the state of the button inside an reactiveValues and change this state when the toggle button is clicked. Also we edit the CSS such that the formatting will return to the original style.

如何在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()
    })
    
    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)
英文:

The if condition on input$toggle_btn won't work. You can put a boolean value which measures the state of the button inside an reactiveValues and change this state when the toggle button is clicked. Also we edit the CSS such that the formatting will return to the original style.

如何在Shiny应用程序中控制主面板在折叠和展开时的宽度?

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

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

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

shinyApp(ui, server)

huangapple
  • 本文由 发表于 2023年8月4日 22:20:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/76836789.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定