navlistpanel / tabpanel的背景颜色

Question

我实际上想要类似此处发布的内容Change background color of tabPanel when it is active or hover over in Shiny

我想使用navlistpanel代替navbarpage。

关于仪表板的布局，我有两个烦人的问题。我加了一张图片来说明我的意思。默认是这种蓝色，但是我希望它是红色作为背景，颜色是白色作为字体。现在，我可以设法做到这一点，但是如果您仍处于待机状态/选择主题test1，则它为蓝色。我该如何更改或解决此问题？

[下一件事情，最好是我想要拥有test1，然后在test 1下方有一个子菜单来进行过滤。然后我将其称为过滤器，然后我想添加两个过滤器组变量和过滤器操作数据。

有人可以帮我吗！

现在将过滤器放置在导航列表面板的外部。

亲切的问候，

Steffie

 navlistPanel(well = FALSE, 



      tabPanel(new="", windowTitle="Test",
               h4(id = "new","Test"),
               tags$style("#new{color: white; background-color: #d52b1e;}"),    

        fluidRow(
        # column(1), ## this put an extra space, dont like the look
        column(2,
               sidebarMenu(
                 uiOutput("groups")), 

        ),
        # fluidRow(
          # column(2,offset = 1),
          column(3,
                 sidebarMenu(
                 dateRangeInput('dateRange',
                                label = 'Filter op datum',
                                start = as.Date('2019-01-01') , end = as.Date('2019-12-31')
                 )
               ),
          ),

Answer 1

选择后，我们可以使用CSS更改导航栏的颜色。使用fluidpage将css标签放置在tags$head中。要在选项卡面板下具有选项，请使用navbarMenu并将tabPanel调用与navbarMenu调用一起放置。

关于注释中的问题，最初是在WELL=FALSE通话中设置navlistPanel。如果将其设置为TRUE，则会在navlistPanel条周围放置一个框。要更改其背景色，我们再次使用.well属性使用CSS。这样，您可以更改字体大小，字体，字体颜色，背景颜色，navlistPanel的最大宽度和高度等等。

语法是什么意思？大部分是非常直观的。我建议更改某些值，例如font-family，以查看实际情况。也可以在Stackoverflow的此处使用css标签。您还可以了解有关CSS here的更多信息。

library(shiny)
library(shinydashboard)
library(shinythemes)

ui <- fluidPage(

  tags$head(tags$style(HTML(".nav.nav-pills.nav-stacked > .active > a, .nav.nav-pills.nav-stacked > .active > a:hover {
    background-color: #d52b1e;
  }

.well {
    min-height: 20px;
    max-width: 200px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #2c3e50;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    font-family: 'Rock Salt', cursive;

}

                            "))),

  navlistPanel(well = TRUE,

               navbarMenu("Tests",

                          tabPanel("Test1",
                                   fluidRow(
                                     # column(1), ## this put an extra space, dont like the look
                                     column(2,
                                            sidebarMenu(
                                              uiOutput("groups")), 

                                     ),
                                     # fluidRow(
                                     # column(2,offset = 1),
                                     column(3,
                                            sidebarMenu(
                                              dateRangeInput('dateRange',
                                                             label = 'Filter op datum',
                                                             start = as.Date('2019-01-01') , end = as.Date('2019-12-31')
                                              )
                                            ),
                                     )
                                   )

                          ),
                          tabPanel("Test 2",
                                   "UI elements here")

               ),


               tabPanel("Other",
                        "UI elements here")
  )

)


server <- function(input, output){}

shinyApp(ui, server)