navlistpanel/tabpanel 的背景颜色

Question

我实际上想要与这里发布的类似的东西

我想使用 navlistpanel 而不是 navbarpage。

关于仪表板的布局，我有两个烦人的问题。我添加了一张图片来说明我的意思。默认是这种蓝色，但我希望它是红色的背景和白色的字体。现在我有点设法做到了，但如果您是 standig/selecting 主题 test1，那么它仍然是蓝色的。我该如何更改或修复此问题？

接下来，最好是我想要测试 1，然后在测试 1 正下方有一个子菜单来进行过滤。然后我调用那个过滤器，然后我想添加两个过滤器组变量和过滤器操作数据。

谁能帮帮我！

现在过滤器位于导航列表面板之外。

亲切的问候，

史黛菲

 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 来更改选中时导航丸的颜色。使用 tags$head 将 css 标签放在 fluidpage 中。要在选项卡面板下使用选项，请使用 navbarMenu 并将 tabPanel 调用与 navbarMenu 调用一起放置。

关于您在评论中提出的问题，您最初在 navlistPanel 调用中设置了 WELL=FALSE。如果将其设置为 TRUE，则会在 navlistPanel 栏周围放置一个框。要更改此背景颜色，我们再次使用 CSS，使用 .well 属性。有了这个，您可以更改 navlistPanel 的字体大小、字体、字体颜色、背景颜色、最大宽度和高度等等。

语法是什么意思？其中大部分是非常直观的。我建议更改一些值，例如 font-family 以查看实际发生的情况。还可以在 Whosebug 上使用 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)

navlistpanel/tabpanel 的背景颜色

Background color of navlistpanel/tabpanel

css

r

filter

shinydashboard

tabpanel