shinydashboard如何通过Release按钮实现侧边栏默认关闭滑动切换
功能实现说明
你提的两个侧边栏交互需求完全可以实现,不需要依赖额外扩展包,直接复用shinydashboard原生能力即可,修改逻辑非常简单:
- 初始状态设置:给
dashboardPage()传入参数sidebarCollapsed = TRUE,即可让应用首次加载时侧边栏默认处于关闭收起状态 - 按钮切换逻辑:在页面中嵌入一段极短的JS监听代码,监听id为
release的按钮点击事件,每次点击时触发shinydashboard原生的侧边栏切换动作,直接复用组件自带的平滑滑入/滑出动画,不需要额外手写动画效果,不会出现样式兼容问题。
修改后完整可运行代码
library(shinydashboard) ui <- dashboardPage( # 配置侧边栏默认关闭 sidebarCollapsed = TRUE, dashboardHeader(title = "Basic dashboard"), dashboardSidebar(), dashboardBody( # 绑定按钮点击触发侧边栏切换的逻辑 tags$script( "$(document).on('click', '#release', function() { $('[data-toggle=\"offcanvas\"]').trigger('click'); });" ), fluidRow( box(plotOutput("plot1", height = 250)), box( title = "Controls", sliderInput("slider", "Number of observations:", 1, 100, 50) ), box(actionButton("release", "Release")) ) ) ) server <- function(input, output) { set.seed(122) histdata <- rnorm(500) output$plot1 <- renderPlot({ data <- histdata[seq_len(input$slider)] hist(data) }) } shinyApp(ui, server)
实现逻辑说明:shinydashboard的侧边栏开关本质是顶部导航栏内置的切换按钮(带
data-toggle="offcanvas"属性)控制的,我们不需要自己重写侧边栏的显隐、动画、布局适配逻辑,只需要在自定义的release按钮被点击时,模拟触发这个原生切换按钮的点击事件即可,和系统自带的切换效果完全一致。
内容的提问来源于stack exchange,提问作者manu p
相关产品推荐
相关产品推荐

