navset_pill: dynamic change of colors

[RegularnaMatrica]

I'm dynamically adding nav_panel to navset_pill. Each nav_panel contains module. I would like to dynamically change colors of nav_panel tabs to green or red depending if inputs within panel are valid.

I would need some guidance on how to do it. For start, I'm trying to change colors of all tabs but I'm failing to do so. Next step would be change color of only one tab.

ui <- fluidPage(
  
  shinyjs::useShinyjs(),
  
  actionButton("btn", "Click"),
  
  bslib::navset_pill(
    id = "menu",
    bslib::nav_panel(
      title = "first",
      h1("First Panel")
    ),
    bslib::nav_panel(
      title = "second",
      h1("Second Panel")
    )
  )
)

server <- function(input, output, session){
  
  observeEvent(input$btn, ignoreInit = TRUE, {
    shinyjs::runjs("
      document.querySelectorAll('.nav-link').forEach(function(tab) {
        tab.style.backgroundColor = 'red'; 
      });
    ")
  })
}

shiny::shinyApp(ui, server)

[nirgrahamuk]

library(bslib)
library(shiny)
library(shinyjs)
ui <- fluidPage(
  useShinyjs()
   ,
  tags$head(tags$style(HTML("
  .red {
  background-color:red;
  }
                        "))),
  actionButton("btn", "Click"),
  
  bslib::navset_pill(
    id = "menu",
    bslib::nav_panel(
      title = "first",
      div(id="first_panel_content",
          class="red",
          h1("First Panel"))
    ),
    bslib::nav_panel(
      title = "second",
      h1("Second Panel")
    )
  )
)

server <- function(input, output, session){
  
   observeEvent(input$btn,
                {
                  toggleClass(id = "first_panel_content",
                              class = "red")
                })
}

shiny::shinyApp(ui, server)

[RegularnaMatrica]

Thank you for the answer. I was not clear enough. I would like to change color of pills, and not of nav_panel body.

[nirgrahamuk]

same concept, have a class that you can toggle. apply the class to an element (divs are very generic)

library(bslib)
library(shiny)
library(shinyjs)
ui <- fluidPage(
  useShinyjs()
  ,
  tags$head(tags$style(HTML("
  .red {
  background-color:red;
  }
                        "))),
  actionButton("btn", "Click"),
  
  bslib::navset_pill(
    id = "menu",
    bslib::nav_panel(
      title = div(id="first_panel_pill",
                  class="red",
                  "first"),
          h1("First Panel")
    ),
    bslib::nav_panel(
      title = "second",
      h1("Second Panel")
    )
  )
)

server <- function(input, output, session){
  
  observeEvent(input$btn,
               {
                 toggleClass(id = "first_panel_pill",
                             class = "red")
               })
}

shiny::shinyApp(ui, server)

[RegularnaMatrica]

This will just color div inside the pill and not the entire pill. Is it possible to somehow target the pill css itself and change its color?

[nirgrahamuk]

The out of the box behaviour of pills is to show you with a highlight colour wich one is selected , are you happy to lose that ?