How to set the css class of a bslib::navset_card_tab container

shiny
,
1

Hi

The bslib::card function has a class argument which allows to set the class of a card container. In contrast, the navset_card_tab function does not have such argument. However, when I explore the content of the Shiny app using the web developper tools, I can add the 'bg-dark' class to the div defining the header area (which is already assigned to class="card-header bslib-navs-card-title") and change this element to "dark mode".

Is there a way to do that throught the Shiny app code?

Thanks

1 Like
2

Please check htmltools::tagQuery() or htmltools::tagAppendAttributes().

3

Thanks for your suggestion.

This works great to apply a class to the entire card, but not to the card header only.

4

Okay - it's almost always a good idea to work on example code.
I'm assuming you specifically want to modify navset_card_tab headers (otherwise I'd suggest looking into this article on theming with bslib).

We can modify the classes of the header via JS, please check the following:

library(shiny)
library(bslib)
library(htmltools)

ui <- page_sidebar(
  tags$head(
    tags$script(HTML(
    "$(document).on('shiny:connected', function(event) {
       const collection = document.getElementsByClassName('card-header bslib-navs-card-title');
         if(collection){
           for (let i = 0; i < collection.length; i++) {
             var targetelement = collection[i];
             targetelement.classList.add('bg-dark');
           };
       };
     });"
    ))
  ),
  title = "My dashboard",
  sidebar = "Sidebar",
  navset_card_tab(
    height = 450,
    full_screen = TRUE,
    title = "HTML Widgets",
    nav_panel(
      "Plotly",
      card_title("A plotly plot")
    ),
    nav_panel(
      "Leaflet",
      card_title("A leaflet plot")
    ),
    nav_panel(
      shiny::icon("circle-info"),
      markdown("Learn more about [htmlwidgets](http://www.htmlwidgets.org/)")
    )
  )
)

shinyApp(ui, function(input, output, session) {})

grafik
grafik932×676 11.2 KB

5

Thanks for this addendum. This works very nicely.

Am I correct in assuming that this would apply the "bg-dark" class to all navset_card_tab's ?

6

Exactly. To add the class only to a single navset_card_tab we would need to provide it with an id and use getElementById in JS.