Цвет фона навигационной панели

Question

Я на самом деле хочу что-то подобное, как опубликовано здесь Изменить цвет фона tabPanel, когда он активен или наведен на Shiny

вместо navbarpage. Я хочу использовать navlistpanel.

У меня есть две досадные проблемы, связанные с компоновкой панели инструментов. Я добавил картинку, чтобы показать, что я имею в виду. По умолчанию используется синий цвет sh, но я бы хотел, чтобы он был красным в качестве фона, а цвет - белым в качестве шрифта. Теперь мне это как-то удалось, но все же, если вы стоите или выбираете topi c test1, тогда он синий. Как я могу изменить или исправить это?

Далее, желательно, чтобы у меня было test1, а затем подменю прямо под test 1, чтобы выполнить фильтрацию. Затем я вызываю эти фильтры, а затем я хотел бы добавить переменную группы из двух фильтров и опцию фильтра.

Может кто-нибудь, пожалуйста, помогите мне!

Теперь фильтры расположены за пределами панели navlist.

С уважением,

Steff ie

 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, чтобы изменить цвет таблеток навигации при выборе. Поместите теги css в fluidpage, используя tags$head. Чтобы иметь опции на панели вкладок, используйте navbarMenu и звоните tabPanel с помощью звонка navbarMenu.

Что касается ваших вопросов в комментариях, вы изначально установили WELL=FALSE в своем navlistPanel вызов. Если вы установите его на TRUE, вокруг бара navlistPanel появится поле. Чтобы изменить цвет фона, мы снова используем CSS, используя свойство .well. При этом вы можете изменить размер шрифта, шрифт, цвет шрифта, цвет фона, максимальную ширину и высоту navlistPanel и многое другое.

Что означает синтаксис? Большая часть этого довольно интуитивна. Я рекомендую изменить некоторые значения, например font-family, чтобы увидеть, что на самом деле происходит. Также используйте тег css прямо здесь, на Stackoverflow. Вы также можете узнать больше о css здесь .

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)