带有 CSS 的 tabsetPanel 样式（不止一种样式），R Shiny答案

【问题标题】：tabsetPanel stylings with CSS (more than one style), R Shiny带有 CSS 的 tabsetPanel 样式（不止一种样式），R Shiny
【发布时间】：2020-10-12 10:33:28
【问题描述】：

我只想将修改后的 tabsetPanel 样式用于站点的主菜单。它居中，没有边框或灰色阴影。

我想再次使用 tabsetPanel，所以我想，改变整个样式并不是一个好主意。

我怎样才能让我的样式只适用于主菜单？我尝试使用tabsetPanel(...) %>% tagAppendAttributes(class = "mainmenu") 添加一个类“mainmenu”，但该类没有放在正确的位置（我认为它需要在<ul ...> 中）。

这是我的代码：

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      
      .nav {
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        margin: 0;
        width: 100%;
        padding: 10px;
        display: block;
      }

      .nav-tabs > li {
        float:none;
        display:inline-block;
        zoom:1;
      }

      .nav-tabs {
        text-align:center;
        border-bottom: #cccccc !important;
        border-bottom-style: solid !important;
        border-bottom-width: 1px !important;
        font-size: initial;
      }
      
      .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
        color: #555;
          cursor: default;
        background-color: #fff;
          border: none;
        border-bottom-color: transparent;
      }
      
      .nav>li>a:focus, .nav>li>a:hover {
        text-decoration: none;
        background-color: transparent;
      }
      
      .nav-tabs>li>a {
        margin-right: 2px;
        line-height: 1.42857143;
        border: 0px solid transparent;
        border-radius: 0px 0px 0 0;
      }
    "))
  ),
  
  fluidRow(
    column(width = 2),
    column(width = 8,
           tabsetPanel(
             tabPanel("main", "MENU"),
             tabPanel("more", uiOutput("hello"))
           ) %>% tagAppendAttributes(class = "mainmenu")),
    column(width = 2)
  )
)

server <- function(input, output, session) {
  output$hello <- renderUI({
    list(
      fluidRow(
        column(width = 4, "menu"),
        column(width = 8,
               tabsetPanel(
                 tabPanel("first", "one"),
                 tabPanel("second", "two")
               ))
      )
    )
  })
}

shinyApp(ui, server)

【问题讨论】：

标签： css r shiny

【解决方案1】：

您可以将您的每个元素（在本例中为 fluidRow）包装在一个具有唯一类的 div 中。然后，您可以分别为每个 div 定义 css。下面的代码为“.main_menu_theme”和一个虚构的sn-p截取了你的css片段来演示与“.inner_menu_theme”的区别。

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
      
      .main_menu_theme {
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        margin: 0;
        width: 100%;
        padding: 10px;
        display: block;
        text-align:center;
        border-bottom: #cccccc !important;
        border-bottom-style: solid !important;
        border-bottom-width: 1px !important;
        font-size: initial;
      }
    .inner_menu_theme {
    
    background-color: cornflowerblue;
    text-align: right;
    font-size: 20px;
    }
    

    ")
    )
  ),
  
  fluidRow(
    column(width = 2),
    column(width = 8,
           tags$div(class = 'main_menu_theme',
                    tabsetPanel(
                      tabPanel("main", "MENU"),
                      tabPanel("more", uiOutput("hello"))
                    ))),
    column(width = 2)
  )
)

server <- function(input, output, session) {
  output$hello <- renderUI({
    list(
      fluidRow(
        column(width = 4, "menu"),
        column(width = 8,
               tags$div(class = 'inner_menu_theme',
                        tabsetPanel(
                          tabPanel("first", "one"),
                          tabPanel("second", "two")
                        )))
      )
    )
  })
}

shinyApp(ui, server)

【讨论】：