R Shiny如何实现tabsetPanel可折叠以适配移动设备

Shiny原生tabsetPanel未内置折叠配置，可通过以下两种方案实现移动端自适应折叠效果，避免小屏显示混乱：

方案一：使用bslib扩展包（官方推荐，无需手写自定义代码） #

bslib是RStudio官方维护的Shiny UI增强包，其提供的navset_tab组件原生支持折叠配置，可直接替换原生tabsetPanel使用，可运行代码如下：

library(shiny)
library(bslib)

# Define UI 
ui <- fluidPage(
  theme = bs_theme(version = 5), # 启用Bootstrap 5适配bslib组件
  navbarPage("Hello",
    collapsible = T,
    tabPanel("a",
      # 替换原tabsetPanel为支持折叠的navset_tab
      navset_tab(
        collapsible = TRUE,
        breakpoint = "sm", # 自定义触发折叠的屏幕阈值，可选xs/sm/md/lg/xl
        nav_panel("1"),
        nav_panel("2"),
        nav_panel("3"),
        nav_panel("4"),
        nav_panel("5")
      )
    ),
    tabPanel("b"),
    tabPanel("c"),
    tabPanel("d"),
    tabPanel("e")
  )
)

server <- function(session,input, output) {
}

shinyApp(ui = ui, server = server)

• 参数说明：breakpoint对应触发折叠的屏幕宽度，sm表示屏幕宽度小于768px时自动转为折叠样式，可根据业务场景调整阈值。

方案二：原生Shiny无额外依赖实现 #

如果你不想引入额外依赖包，可通过插入自定义CSS实现小屏横向滚动适配，避免标签折行混乱：

library(shiny)

# Define UI 
ui <- fluidPage(
  tags$head(
    # 小屏适配样式
    tags$style(HTML("
      @media (max-width: 576px) {
        .nav-tabs {
          flex-wrap: nowrap;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          border-bottom: 1px solid #ddd;
        }
        .nav-tabs>li {
          float: none;
          white-space: nowrap;
        }
        .nav-tabs>li>a {
          border: 1px solid transparent;
          border-radius: 4px 4px 0 0;
          margin-right: 2px;
        }
      }
    "))
  ),
  navbarPage("Hello",
    collapsible=T,
    tabPanel("a",
      tabsetPanel(type = "tabs",
        tabPanel("1"),
        tabPanel("2"),
        tabPanel("3"),
        tabPanel("4"),
        tabPanel("5"))),
    tabPanel("b"),
    tabPanel("c"),
    tabPanel("d"),
    tabPanel("e")
  )
)

server <- function(session,input, output) {
}

shinyApp(ui = ui, server = server)

内容的提问来源于stack exchange，提问作者person