根据输入动态改变侧边栏宽度

Question

有没有根据输入值动态改变侧边栏宽度的方法？在下面的示例中，我希望侧边栏的宽度基于 sidebarWidth 输入：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(width = 230),
  dashboardBody(
    numericInput("sidebarWith", "Select Sidebar Width", min = 300, max = 500, value = 230)
  )
)

server <- function(input, output) { }

shinyApp(ui, server)

Answer 1

我想你可以尝试以下方法。在 ui 中使用 uiOutput 以动态更改 server 和 renderUI。请注意，我更正了示例中 sidebarWidth 的拼写。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = uiOutput("sidebar"),
  body = dashboardBody(
    numericInput("sidebarWidth", "Select Sidebar Width", min = 300, max = 500, value = 230)
  )
)

server <- function(input, output) {
  output$sidebar <- renderUI({
    dashboardSidebar(width = input$sidebarWidth)
  })
}

shinyApp(ui, server)

Answer 2

让我们试试这个快速、响应迅速、无服务器代码的版本，纯粹 Javascript。

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(width = 230),
    dashboardBody(
        numericInput("sidebarWith", "Select Sidebar Width", min = 230, max = 500, value = 230),
        tags$script(HTML(
        '
        $(function(){
            var mainContent = $(".wrapper > .content-wrapper");
            var curWidth = 230;
            $("#sidebarWith").on("change", function() {
                if(parseFloat($(this).val()) < 230 || parseFloat($(this).val()) > 500) {return false}
                curWidth = $(this).val();
                mainContent.css("margin-left", `${curWidth}px`);
                $(".main-header .navbar").css("margin-left", `${curWidth}px`);
                $(".main-header .logo").css("width", `${curWidth}px`);
            });
            $(".sidebar-toggle").on("click", function() {
                if(!$("body").hasClass("sidebar-collapse")) {
                    mainContent.css("margin-left", `0px`);
                    $(".main-header .navbar").css("margin-left", `0px`);
                    $(".main-header .logo").css("width", `0px`);
                } else {
                    mainContent.css("margin-left", `${curWidth}px`);
                    $(".main-header .navbar").css("margin-left", `${curWidth}px`);
                    $(".main-header .logo").css("width", `${curWidth}px`);
                }
            })
        });
        '
        ))
    )
)

server <- function(input, output) { }

shinyApp(ui, server)

不需要服务器代码。应用UI，服务器分离设计：如果只用UI就能解决问题，就在UI做。 UI only 解决方案通常比 UI-server 通信具有更好的性能和速度。
我注意到顶部有一个折叠边栏的按钮，因此我进行了相应的更改。单击它时，它会折叠并恢复到您在数字输入中设置的正确宽度。
单击折叠按钮时，左侧的原始页眉不会折叠，其宽度也不会改变。我使它与侧边栏的宽度对齐，并在您单击按钮时使其折叠。

根据输入动态改变侧边栏宽度

Dynamically changing sidebar width based on an input

r

shiny

shinydashboard