Home > other >  How to change the color of the lines in the tabset on shiny?
How to change the color of the lines in the tabset on shiny?

Time:05-19

Hi and thanks for reading me. Im trying to change the color of this specifically line inside a shiny app, but in not sure of how to do that:

enter image description here

Im using the following code:

ui <- fluidPage(sidebarLayout(
    sidebarPanel(
      selectInput("controller", "Controller", choices = 1:3)
    ),
    mainPanel(
      tabsetPanel(id = "inTabset",
                 
                  tabPanel(
                    div("mytabtitle", style = "color: transparent; background-color: transparent;"), value = "panel1", "Panel 1 content"),
                  tabPanel(div("mytabtitle", style = "color: transparent;  background-color: transparent;"), value = "panel2", "Panel 2 content"),
                  tabPanel(div("mytabtitle", style = "color: transparent;  background-color: transparent;"), value = "panel3", "Panel 3 content")
      )
    )
  ))
  
  server <- function(input, output, session) {
  }
  
  shinyApp(ui, server)

Specifically, on this part:

mainPanel(
      tabsetPanel(id = "inTabset",
                 
                  tabPanel(
                    div("mytabtitle", style = "color: transparent; background-color: transparent;"), value = "panel1", "Panel 1 content"),
                  tabPanel(div("mytabtitle", style = "color: transparent;  background-color: transparent;"), value = "panel2", "Panel 2 content"),
                  tabPanel(div("mytabtitle", style = "color: transparent;  background-color: transparent;"), value = "panel3", "Panel 3 content")
      )
    )

What tag could I use to change the color of that line? I haven't found anything on the internet so far :(

CodePudding user response:

css <- "
/* for the active tab */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  border: 1px solid red;
  border-bottom-color: transparent;
}
/* for the line */
.nav-tabs {
  border-bottom-color: green;
}
"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  ......
  • Related