![](/img/trans.png)
[英]How to add a button in navbar to show/hide a sidebar in shiny like in shinydashboard
[英]Hide and show sidebar panel in shiny
我闪亮的应用程序在 mainPanel 中有 3 个 tabPanel,每个 tabPanel 都有自己的侧边栏面板。 我使用shinyBS来设置sidebarPanel“显示和隐藏”
bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE)
在服务器
observeEvent(input$showpanel, {
if(input$showpanel == TRUE) {
removeCssClass("Main", "col-sm-12")
addCssClass("Main", "col-sm-8")
shinyjs::show(id = "Sidebar")
shinyjs::enable(id = "Sidebar")
}
else {
removeCssClass("Main", "col-sm-8")
addCssClass("Main", "col-sm-12")
shinyjs::hide(id = "Sidebar")
}
})
我测试了几次,2 个选项卡按我的预期工作,但是带有绘图的选项卡(我使用 plotly),它似乎隐藏了侧边栏,但绘图不会自动伸展,直到我单击另一个选项卡并返回 Plot 选项卡。 因此,如果我想以全屏方式查看绘图,我需要通过单击另一个选项卡来执行额外操作,然后返回。
我该如何解决这个问题?
谢谢
下次请发布可复制的示例 ...
library(shiny)
library(shinydashboard)
library(plotly)
library(shinyjs)
library(shinyBS)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
useShinyjs(),
extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse");
$(window).trigger("resize"); }'),
extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse");
$(window).trigger("resize"); }'),
bsButton("showpanel", "Show/Hide sidebar",icon = icon("toggle-off"), type = "toggle",style = "info", value = TRUE),
fluidRow(tabsetPanel(id='tabs',
tabPanel(value=1,title="Tab1"),
tabPanel(value=2,title="Tab2"),
tabPanel(value=3, title="Plot",
fluidRow(
column(12,
plotlyOutput('plot', height=800))))
)
)))
server <- function(input, output, session) {
output$plot <- renderPlotly({
plot_ly(data = iris, x = ~Sepal.Length, y = ~Petal.Length)
})
observe({
if(input$showpanel == TRUE) {
js$showSidebar()
}
else {
js$hideSidebar()
}
})
}
shinyApp(ui, server)
一种方法是在添加/删除侧栏时触发窗口调整大小事件,以强制在显示/隐藏侧栏后以正确的大小重新绘制图。 为此,我使用了:
useShinyjs(),
extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse");
$(window).trigger("resize"); }'),
extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse");
$(window).trigger("resize"); }')
职能。
缺少函数参数
extendShinyjs(text = 'shinyjs.hideSidebar = function(params) { $("body").addClass("sidebar-collapse");
$(window).trigger("resize"); }', functions=c("hideSidebar")),
extendShinyjs(text='shinyjs.showSidebar = function(params) { $("body").removeClass("sidebar-collapse");
$(window).trigger("resize"); }', functions=c("showSidebar")),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.