英文:
How to change text colour of navbarPage links when hovered on (in shiny app)?
问题
这是我的闪亮应用的经过编辑的版本：
ui <- tagList(
fluidPage(
titlePanel(""),
tags$head(tags$style(HTML(
"
.navbar-default {
color: red !important;'
}
"
))),
navbarPage(
windowTitle = "应用名称",
theme = bs_theme(bootswatch = "flatly",
base_font = font_google("Lato"),
primary = "#333F50",
bg = "white",
fg = "#D67540"),
title = "我是标题",
selected = "主选项卡 1",
tabPanel(title = "主选项卡 1",
fluidPage(
sidebarLayout(
sidebarPanel(textInput(inputId = "text_input", label = "输入文本：")),
mainPanel(textOutput(outputId = "text_output"))
)
)
),
tabPanel(title = "主选项卡 2",
fluidPage(
fluidRow(
column(7,
navlistPanel(
tabPanel("选项卡 1"),
tabPanel("选项卡 2"),
tabPanel("选项卡 3"),
widths = c(2, 10),
well = FALSE)
)))
)
)
)
)
server <- function(input, output){
output$text_output <- renderText(input$text_input)
}
shinyApp(ui, server)
这是"主选项卡 1"的外观：
我想将"主选项卡 1"和"主选项卡 2"的文本颜色从白色更改为粉红色，链接在悬停/选择时从水鸭绿色更改为红色。
到目前为止，我尝试了许多以下代码的变化，但没有成功：
.navbar-default {
color: red !important;
}
有人知道如何修复这个问题吗？
非常感谢任何帮助 
英文:
Here is the a redacted version of my shiny app:
ui <- tagList(
fluidPage(
titlePanel(""),
tags$head(tags$style(HTML(
"
.navbar-default {
color: red !important;'
}
"
))),
navbarPage(
windowTitle = "App Name",
theme = bs_theme(bootswatch = "flatly",
base_font = font_google("Lato"),
primary = "#333F50",
bg = "white",
fg = "#D67540"),
title = "I am the title",
selected = "Main Tab 1",
tabPanel(title = "Main Tab 1",
fluidPage(
sidebarLayout(
sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
mainPanel(textOutput(outputId = "text_output"))
)
)
),
tabPanel(title = "Main Tab 2",
fluidPage(
fluidRow(
column(7,
navlistPanel(
tabPanel("Tab 1"),
tabPanel("Tab 2"),
tabPanel("Tab 3"),
widths = c(2, 10),
well = FALSE)
)))
)
)
)
)
server <- function(input, output){
output$text_output <- renderText(input$text_input)
}
shinyApp(ui, server)
This is what "Main Tab 1" looks like:
I would like to change the text colour of "Main Tab 1" and "Main Tab 2" from white to pink, and from teal green to red when the links are hovered/selected.
So far I've tried many variations of the following but without success:
.navbar-default {
color: red !important;
}
Does anyone know how to fix this?
Any help is much appreciated
答案1
得分: 1
我们可以使用以下CSS代码块来实现：
library(bslib)
library(shiny)
ui <- tagList(
fluidPage(
titlePanel(""),
tags$head(tags$style(HTML(
"
.navbar-default {
color: red !important;'
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover {
color: red !important;
}
.navbar-default .navbar-nav > li > a {
color: pink !important;
}
"
))),
navbarPage(
windowTitle = "App Name",
theme = bs_theme(bootswatch = "flatly",
base_font = font_google("Lato"),
primary = "#333F50",
bg = "white",
fg = "#D67540"),
title = "I am the title",
selected = "Main Tab 1",
tabPanel(title = "Main Tab 1",
fluidPage(
sidebarLayout(
sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
mainPanel(textOutput(outputId = "text_output"))
)
)
),
tabPanel(title = "Main Tab 2",
fluidPage(
fluidRow(
column(7,
navlistPanel(
tabPanel("Tab 1"),
tabPanel("Tab 2"),
tabPanel("Tab 3"),
widths = c(2, 10),
well = FALSE)
)))
)
)
)
)
server <- function(input, output){
output$text_output <- renderText(input$text_input)
}
shinyApp(ui, server)
英文:
We can do it with the following CSS code block:
library(bslib)
library(shiny)
ui <- tagList(
fluidPage(
titlePanel(""),
tags$head(tags$style(HTML(
"
.navbar-default {
color: red !important;'
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover {
color: red !important;
}
.navbar-default .navbar-nav > li > a {
color: pink !important;
}
"
))),
navbarPage(
windowTitle = "App Name",
theme = bs_theme(bootswatch = "flatly",
base_font = font_google("Lato"),
primary = "#333F50",
bg = "white",
fg = "#D67540"),
title = "I am the title",
selected = "Main Tab 1",
tabPanel(title = "Main Tab 1",
fluidPage(
sidebarLayout(
sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
mainPanel(textOutput(outputId = "text_output"))
)
)
),
tabPanel(title = "Main Tab 2",
fluidPage(
fluidRow(
column(7,
navlistPanel(
tabPanel("Tab 1"),
tabPanel("Tab 2"),
tabPanel("Tab 3"),
widths = c(2, 10),
well = FALSE)
)))
)
)
)
)
server <- function(input, output){
output$text_output <- renderText(input$text_input)
}
shinyApp(ui, server)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论