如何解决argonDash与Shiny搭配使用时横向布局失效问题

核心原因 #

• 你的代码缺少argonDashPage要求的必填body参数，缺少该组件时布局渲染逻辑异常，导致侧边栏vertical = FALSE的横向配置不生效
• 侧边栏菜单的tabName需要和body内的tab容器一一对应，才能触发正常的布局渲染

修正后可运行代码 #

library(shiny)
library(argonDash)
library(argonR)
shinyApp(
  ui = argonDashPage(title = 'Sync the City',
                     description = 'Testing',
                     header = argonDashHeader(color = 'primary', separator = TRUE),
                     sidebar = argonDashSidebar(vertical = FALSE,
                                                brand_logo = "https://elpacientecolombiano.com/wp-content/uploads/2015/09/LOGO-SALUD-MORADO.png",
                                                id = 'sidebar',
                                                argonSidebarHeader(title = 'Main Menu'),
                                                
                                                argonSidebarMenu(
                                                  argonSidebarItem(tabName = 'landing_page', 'Landing Page'),
                                                  argonSidebarItem(tabName = 'map', 'Map'),
                                                  argonSidebarItem(tabName = 'network', 'Network')
                                                )
                     ),
                     # 新增必填的body组件
                     body = argonDashBody(
                       argonTabItems(
                         argonTabItem(tabName = "landing_page"),
                         argonTabItem(tabName = "map"),
                         argonTabItem(tabName = "network")
                       )
                     )
  ),
  server = function(input, output){}
)

运行上述代码即可实现顶部横向布局的侧边栏效果，符合预期。

内容的提问来源于stack exchange，提问作者Jorge Hernández