0

I have 2 tabs. Tab1 is where the user enters the options of choice and hits "GO". Tab2 is where the Plots and Tables are shown. These have 2 options "A" and "B"

Is there any way to change color of tabPanel() or create some sort of fading effect depending on inputs chosen by user?

Simply put, if i choose option A in my Tab1, I want Tab2 color to change to green, etc.

PS - I have not attached any code because this is a question I had and not anything related to a bug! Thanks

pzs
  • 3
  • 2
  • Answer [here](https://stackoverflow.com/questions/35025145/background-color-of-tabs-in-shiny-tabpanel) might be useful. – YBS May 13 '21 at 10:54
  • @YBS, thanks! I looked at this - but I want to change the color based on which inout the user chooses so the user can get into that tab and can expect there is a plot which will print there. – pzs May 13 '21 at 14:17

1 Answers1

0

You can use js to modify tab colors as shown below.

library(shiny) 
library(shinydashboard)
library(DT)
js <- ".nav-tabs-custom .nav-tabs li a {background-color: green;   color:white;}
.nav-tabs-custom .nav-tabs li.active {border-top-color: #d73925; }
.nav-tabs-custom .nav-tabs li.active a {background-color: black; color:orange; !important;}
"
jsb <- ".nav-tabs-custom .nav-tabs li a[data-value='t1'] {background-color: red;   color:white;}
"
jsa <- ".nav-tabs-custom .nav-tabs li a[data-value='t1'] {background-color: blue;   color:white;}
"
ui <- dashboardPage(   
  dashboardHeader(
  ),   
  dashboardSidebar(
    selectInput(inputId="1", label = "Label1", choices = "variable", "Variable:"),
    selectInput(inputId="2", label = "Label2", choices = "variable", "Variable:")   ),   
  dashboardBody( 
    tags$style(js),
    fluidRow(
      tabBox(width =10, 
             tabPanel("t0",h2("normal tab"), uiOutput("tt"),
                      selectInput(inputId="t0in", label = "Choose: ", choices = c("A","B"))),
             tabPanel("t1",uiOutput("tb")),
             tabPanel("t2",h2("normal tab")),
             tabPanel("t3",h2("normal tab"))
      )
    )
  )
)

server <- function(input, output){
  output$tt <- renderUI({
    if (input$t0in == "B"){
      tags$style(jsb)
    }else {tags$style(jsa)}
  })
  
  output$table1 <- renderDT(mtcars)
  output$plot1 <- renderPlot(plot(cars))
  
  output$tb <- renderUI({
    if (input$t0in == "B"){
      plotOutput("plot1")
    }else {DTOutput("table1")}
  })
}

shinyApp(ui, server)
YBS
  • 19,324
  • 2
  • 9
  • 27