在shinymaterial中使用tabsetPanel时标签堆叠问题的解决方法

shinymaterial包的全局CSS会覆盖原生Shiny tabsetPanel的默认样式，将标签项（.nav-tabs > li）设置为display: block，导致标签纵向堆叠。通过添加自定义CSS即可修复这一问题，让标签恢复横向排列：

修改后的UI代码 #

ui <- material_page(
    title = "Prototype",
    primary_theme_color = "#073857", 
    secondary_theme_color = "#0CA789",
    # 添加自定义CSS修复标签布局
    tags$style(HTML("
        #tabs .nav-tabs {
            display: flex;
            flex-wrap: wrap;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
            border-bottom: 1px solid #ddd;
        }
        #tabs .nav-tabs > li {
            display: inline-block;
            margin-bottom: -1px;
        }
        #tabs .nav-tabs > li > a {
            display: block;
            padding: 10px 15px;
            margin-right: 2px;
            line-height: 1.42857143;
            border: 1px solid transparent;
            border-radius: 4px 4px 0 0;
        }
        #tabs .nav-tabs > li.active > a,
        #tabs .nav-tabs > li.active > a:hover,
        #tabs .nav-tabs > li.active > a:focus {
            color: #555;
            cursor: default;
            background-color: #fff;
            border: 1px solid #ddd;
            border-bottom-color: transparent;
        }
    ")),
    material_row(
      material_column(width = 3,
                      tags$style(HTML(".radio-inline {margin-right: 
                                      42px;}")),
                      material_card(
                        title = "Select Visualization",
                        radioButtons(
                          "table_type",
                          label = NULL,
                          choices = c("Source Data" = "t1", 
                           "Aggregated Data" = "t2", 
                           "Aggregated + Raw Data" = "t3", 
                           "Pie Chart" = "c1", "Histogram" = "c2", 
                           "Scatter plot" = "c3"),
                          width = "100%"
                        )
                      )
      ),
      material_column(width = 9,
                      material_column(width = 9,
                             tabsetPanel(id="tabs",
                             tabPanel(title="Current", 
                              material_card(title = "Visualization", 
                                        uiOutput("vis_current"))),
                                      )
                      ),
                      material_column(width = 3,
                                      material_button(
                                        input_id="new_tab",
                                        label="+"
                                      )
                      )
      )
    )
)

代码说明 #

1. 针对#tabs（你的tabsetPanel的ID）下的.nav-tabs容器设置flex布局，支持标签自动换行（flex-wrap: wrap）
2. 强制标签项（.nav-tabs > li）为inline-block，确保横向排列
3. 还原标签链接（.nav-tabs > li > a）的默认padding和边框样式，匹配原生Shiny的tab外观
4. 修复激活标签的样式，保证底部边框消失，与内容区衔接自然

Server代码无需修改，点击"+"按钮新增标签时，标签会自动横向排列，超出容器宽度时会换行显示。如果需要标签区域横向滚动，可以将.nav-tabs的flex-wrap: wrap改为flex-wrap: nowrap，并添加overflow-x: auto。

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