英文:
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",
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}
")),
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)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论