时间戳

首页 > 解决方案 > 使用 R Shiny 调整 tabPanel 标题的宽度

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

问题描述

在布局我的 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)

如果你运行这个闪亮的应用程序，标题只占宽度的 10% 左右（尤其是在全屏时）。但是，我希望它们跨越整个宽度，每个标题占用相同的空间。

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

任何帮助是极大的赞赏！

标签： cssrshinytabpanel

解决方案

我不擅长 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)

推荐阅读