如何在R中使tabsetPanel的tabPanel可滚动？

Question

如何使

tabPanel

的

tabsetPanel

可滚动？ 我把

tabsetPanel

放在一个小

div()

中。 我只能让整个

tabsetpanel

通过

div(style = "overflow-y: auto")

滚动，但我希望选项卡的名称始终可见！

我想要的与示例中源代码的行为类似： https://shiny.posit.co/r/gallery/dynamic-user-interface/update-input-demo/

这是我的例子：

library(shiny)

generate_content <- function() {
  content <- lapply(1:100, function(i) {
    p(i)
  })
  
  tagList(content)
}

ui <- fluidPage(
  tabPanel("test",
    fluidRow(
      column(width = 2,
        fluidRow(style = "height: 50vh; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px; background-color: #f8f8f8; padding: 10px;",
          div(id = "necessaryforsomereason",
              tabsetPanel(
                    tabPanel("tab1", generate_content()),
                    tabPanel("tab2", generate_content()),
                    tabPanel("tab3", generate_content()),
                    tabPanel("tab4", generate_content()),
                    tabPanel("tab5", generate_content()),
                    tabPanel("tab6", generate_content()),
                    tabPanel("tab7", generate_content()),
                    tabPanel("tab8", generate_content()),
                    tabPanel("tab9", generate_content()),
              )
          )
        )
      ),
      column(width = 10,
          fluidRow(
            plotOutput("plot")
        )
      )
    )
  )
)

server <- function(input, output) {

}

shinyApp(ui, server)

Answer 1

无需将

overflow-y: auto;

应用于整个

tabSetPanel

，您只需将其应用于

tab-content

以保持选项卡名称可见，例如使用

div.tab-content {
  height: 50vh;
  overflow-y: auto;
  padding: 10px;
}

library(shiny)

generate_content <- function() {
    content <- lapply(1:100, function(i) {
        p(i)
    })
    
    tagList(content)
}

ui <- fluidPage(
    tags$head(tags$style(HTML("
                              div.tab-content {
                                height: 50vh;
                                overflow-y: auto;
                                padding: 10px;
                              }
                              "))),
    tabPanel("test",
             fluidRow(
                 column(width = 2,
                        fluidRow(style = "
                                         border: 1px solid #ddd; 
                                         border-radius: 5px; 
                                         background-color: #f8f8f8; 
                                         ",
                                 div(id = "necessaryforsomereason",
                                     tabsetPanel(
                                         tabPanel("tab1", generate_content()),
                                         tabPanel("tab2", generate_content()),
                                         tabPanel("tab3", generate_content()),
                                         tabPanel("tab4", generate_content()),
                                         tabPanel("tab5", generate_content()),
                                         tabPanel("tab6", generate_content()),
                                         tabPanel("tab7", generate_content()),
                                         tabPanel("tab8", generate_content()),
                                         tabPanel("tab9", generate_content()),
                                     )
                                 )
                        )
                 ),
                 column(width = 10,
                        fluidRow(
                            plotOutput("plot")
                        )
                 )
             )
    )
)

server <- function(input, output) {
    
}

shinyApp(ui, server)