改变闪亮选项卡的颜色,取决于另一个选项卡是否处于活动状态。

huangapple go评论64阅读模式
英文:

Change color of shiny tab conditional on another tab being active

问题

"Is there a way of changing the text color of a tab in shiny conditional on another tab being active? I know how to change the text color of the selected tab, but I want to also change the color of another specific tab at the same time.

For example, in the minimal example below, I would like to highlight both Tabs 2 and 3 labels in red whenever Tab 2 is selected:

ui <- navbarPage(
  id = "navbar",
  tags$style(HTML(".tabbable > .nav > li > a {color:blue}
                    .tabbable > .nav > li[class=active] > a {color:red}")),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
              )
  )

# server
server <- function(input, output, session) {
}

shinyApp(ui, server)

I imagine this is easily achieved, but I'm a CSS beginner. Any help would be much appreciated!"

英文:

Is there a way of changing the text color of a tab in shiny conditional on another tab being active? I know how to change the text color of the selected tab, but I want to also change the color of another specific tab at the same time.

For example, in the minimal example below, I would like to highlight both Tabs 2 and 3 labels in red whenever Tab 2 is selected:

# ui
ui <- navbarPage(
  id = "navbar",
  tags$style(HTML(".tabbable > .nav > li > a {color:blue}
                    .tabbable > .nav > li[class=active] > a {color:red}")),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
              )
  )

# server
server <- function(input, output, session) {
}

shinyApp(ui, server)

I imagine this is easily achieved, but I'm a CSS beginner. Any help would be much appreciated!

答案1

得分: 1

以下是您要翻译的代码部分:

css1 <- ".tabbable > .nav > li > a {color: blue;}
.tabbable > .nav > li[class=active] > a {color: red;}
"

css2 <- ".tabbable > .nav > li > a {color: blue;}
.tabbable > .nav > li[class=active] > a {color: red;}
.tabbable > .nav > li > a[data-value=tab3] {color: red;}
"

# ui
ui <- navbarPage(
  id = "navbar",
  uiOutput("CSS"),
  
  tabsetPanel(id="tabs&quot, 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
  )
)

# server
server <- function(input, output, session) {
  
  output[["CSS"]] <- renderUI({
    css <- ifelse(input[["tabs"]] == "tab2", css2, css1)
    tags$style(HTML(css))
  })
  
}

shinyApp(ui, server)
英文:

Not sure I understand your question, but if I understand it this is what you want:

css1 <- ".tabbable > .nav > li > a {color: blue;}
.tabbable > .nav > li[class=active] > a {color: red;}
"

css2 <- ".tabbable > .nav > li > a {color: blue;}
.tabbable > .nav > li[class=active] > a {color: red;}
.tabbable > .nav > li > a[data-value=tab3] {color: red;}
"

# ui
ui <- navbarPage(
  id = "navbar",
  uiOutput("CSS"),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
  )
)

# server
server <- function(input, output, session) {
  
  output[["CSS"]] <- renderUI({
    css <- ifelse(input[["tabs"]] == "tab2", css2, css1)
    tags$style(HTML(css))
  })
  
}

shinyApp(ui, server)

答案2

得分: 1

以下是翻译好的部分:

library(shiny)

ui <- navbarPage(
  id = "navbar",
  tags$style(HTML("
    .tabbable > .nav > li > a {color:blue}
    .tabbable > .nav > li.active > a {color:red}
    .tabbable > .nav > li > a.red_panel {color:red}
  &quot)),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
  ),
  
  # We could also append the style directly using .css()
  tags$script(HTML("
    $('#tabs').on('shiny:inputchanged', function(event) {
      console.log(event.value)
      if (event.value === 'tab2') {
        $('a[data-value = \"tab3\"]').addClass('red_panel');
      } else {
        $('a[data-value = \"tab3\"]').removeClass('red_panel');
      };
    });
  "))
)

# server
server <- function(input, output, session) {
}

shinyApp(ui, server)
英文:

The easiest (and fastest) way to do this is with a bit of JavaScript

library(shiny)

ui <- navbarPage(
  id = "navbar",
  tags$style(HTML("
    .tabbable > .nav > li > a {color:blue}
    .tabbable > .nav > li.active > a {color:red}
    .tabbable > .nav > li > a.red_panel {color:red}
  ")),
  
  tabsetPanel(id="tabs", 
              tabPanel(value = "tab1", title= "Tab1"),
              tabPanel(value = "tab2", title= "Tab2"),
              tabPanel(value = "tab3", title= "Tab3")
  ),
  
  # We could also append the style directly using .css()
  tags$script(HTML("
    $('#tabs').on('shiny:inputchanged', function(event) {
      console.log(event.value)
      if (event.value === 'tab2') {
        $('a[data-value = \"tab3\"]').addClass('red_panel');
      } else {
        $('a[data-value = \"tab3\"]').removeClass('red_panel');
      };
    });
  "))
)

# server
server <- function(input, output, session) {
}

shinyApp(ui, server)

huangapple
  • 本文由 发表于 2023年4月11日 07:04:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/75981334.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定