css - 使用 R Shiny 调整 tabPanel 标题的宽度

Question

在布局我的 R Shiny Web 应用程序时，我遇到了一个问题，我无法在论坛中找到解决方案。

我的目标是在我的页面中有一个 tabPanel，其中的标题占据了页面本身的整个宽度。

library(shiny)
ui <- fluidPage(
   tabsetPanel(
    tabPanel("Title1", tags$h1("text")),
    tabPanel("Title2", tags$h1("text")),
    tabPanel("Title3", tags$h1("text")),
    tabPanel("Title4", tags$h1("text"))
   )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

如果你运行这个 Shiny 的应用程序，标题只占宽度的 10% 左右(尤其是在全屏模式下)。但是，我希望它们跨越整个宽度，每个标题占据相同的空间。

我很确定这可以用 CSS 解决。

非常感谢任何帮助!

Answer 1

我不擅长 CSS，但这应该给您(或其他贡献者)一个开始。我面临的问题是标题前面出现一个幻影选项卡，如果您将屏幕设置得非常窄(执行到某个点然后失败)，它不会正确调整大小。

希望这对您有所帮助!

library(shiny)
ui <- fluidPage(
  tabsetPanel(
    tags$head(tags$style(HTML('
                            /* HEADER */
                            .nav>li>a {
                            padding: 1vh 8vw;;
                            }'
))),



    tabPanel("Title1", tags$h1("text")),
    tabPanel("Title2", tags$h1("text")),
    tabPanel("Title3", tags$h1("text")),
    tabPanel("Title4", tags$h1("text"))
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)