如何在 Shiny 应用中悬停在 navbarPage 链接上时更改文本颜色？

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

How to change text colour of navbarPage links when hovered on (in shiny app)?

问题

这是我的闪亮应用的经过编辑的版本：

  1. ui <- tagList(
  2.   fluidPage(
  3.     titlePanel(""),
  4.     tags$head(tags$style(HTML(
  5.       "
  6.         .navbar-default {
  7.             color: red !important;'
  8.         }
  9.         
  10.         "
  11.       ))),
  12.     navbarPage(
  13.       windowTitle = "应用名称",
  14.       theme = bs_theme(bootswatch = "flatly",
  15.                        base_font = font_google("Lato"),
  16.                        primary = "#333F50",
  17.                        bg = "white",
  18.                        fg = "#D67540"),
  19.       title = "我是标题",
  20.       selected = "主选项卡 1",
  21.       tabPanel(title = "主选项卡 1",
  22.                fluidPage(
  23.                  sidebarLayout(
  24.                    sidebarPanel(textInput(inputId = "text_input", label = "输入文本：")),
  25.                    mainPanel(textOutput(outputId = "text_output"))
  26.                  )
  27.                )
  28.                ),
  29.       tabPanel(title = "主选项卡 2",
  30.                fluidPage(
  31.                    fluidRow(
  32.                      column(7,
  33.                             navlistPanel(
  34.                               tabPanel("选项卡 1"),
  35.                               tabPanel("选项卡 2"),
  36.                               tabPanel("选项卡 3"),
  37.                               widths = c(2, 10),
  38.                               well = FALSE)
  39.                             )))
  40.                )
  41.       )
  42.     )
  43.   )
  45. server <- function(input, output){
  46.   output$text_output <- renderText(input$text_input)
  47. }
  49. shinyApp(ui, server)

这是"主选项卡 1"的外观：
如何在 Shiny 应用中悬停在 navbarPage 链接上时更改文本颜色？

我想将"主选项卡 1"和"主选项卡 2"的文本颜色从白色更改为粉红色，链接在悬停/选择时从水鸭绿色更改为红色。

到目前为止，我尝试了许多以下代码的变化，但没有成功：

  1. .navbar-default {
  2.    color: red !important;
  3. }

有人知道如何修复这个问题吗？

非常感谢任何帮助 如何在 Shiny 应用中悬停在 navbarPage 链接上时更改文本颜色？

英文:

Here is the a redacted version of my shiny app:

  1. ui <- tagList(
  2.   fluidPage(
  3.     titlePanel(""),
  4.     tags$head(tags$style(HTML(
  5.       "
  6.         .navbar-default {
  7.             color: red !important;'
  8.         }
  9.         
  10.         "
  11.       ))),
  12.     navbarPage(
  13.       windowTitle = "App Name",
  14.       theme = bs_theme(bootswatch = "flatly",
  15.                        base_font = font_google("Lato"),
  16.                        primary = "#333F50",
  17.                        bg = "white",
  18.                        fg = "#D67540"),
  19.       title = "I am the title",
  20.       selected = "Main Tab 1",
  21.       tabPanel(title = "Main Tab 1",
  22.                fluidPage(
  23.                  sidebarLayout(
  24.                    sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
  25.                    mainPanel(textOutput(outputId = "text_output"))
  26.                  )
  27.                )
  28.                ),
  29.       tabPanel(title = "Main Tab 2",
  30.                fluidPage(
  31.                    fluidRow(
  32.                      column(7,
  33.                             navlistPanel(
  34.                               tabPanel("Tab 1"),
  35.                               tabPanel("Tab 2"),
  36.                               tabPanel("Tab 3"),
  37.                               widths = c(2, 10),
  38.                               well = FALSE)
  39.                             )))
  40.                )
  41.       )
  42.     )
  43.   )
  45. server <- function(input, output){
  46.   output$text_output <- renderText(input$text_input)
  47. }
  49. shinyApp(ui, server)

This is what "Main Tab 1" looks like:
如何在 Shiny 应用中悬停在 navbarPage 链接上时更改文本颜色？

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:

  1. .navbar-default {
  2.    color: red !important;
  3. }

Does anyone know how to fix this?

Any help is much appreciated 如何在 Shiny 应用中悬停在 navbarPage 链接上时更改文本颜色？

答案1

得分: 1

我们可以使用以下CSS代码块来实现：

  1. library(bslib)
  2. library(shiny)
  4. ui <- tagList(
  5.   fluidPage(
  6.     titlePanel(""),
  7.     tags$head(tags$style(HTML(
  8.       "
  9.         .navbar-default {
  10.             color: red !important;'
  11.         }
  12.         .navbar-default .navbar-nav > .active > a,
  13.         .navbar-default .navbar-nav > li > a:hover {
  14.             color: red !important;
  15.         }
  16.         .navbar-default .navbar-nav > li > a {
  17.             color: pink !important;
  18.         }
  19.         "
  20.     ))),
  21.     navbarPage(
  22.       windowTitle = "App Name",
  23.       theme = bs_theme(bootswatch = "flatly",
  24.                        base_font = font_google("Lato"),
  25.                        primary = "#333F50",
  26.                        bg = "white",
  27.                        fg = "#D67540"),
  28.       title = "I am the title",
  29.       selected = "Main Tab 1",
  30.       tabPanel(title = "Main Tab 1",
  31.                fluidPage(
  32.                  sidebarLayout(
  33.                    sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
  34.                    mainPanel(textOutput(outputId = "text_output"))
  35.                  )
  36.                )
  37.       ),
  38.       tabPanel(title = "Main Tab 2",
  39.                fluidPage(
  40.                  fluidRow(
  41.                    column(7,
  42.                           navlistPanel(
  43.                             tabPanel("Tab 1"),
  44.                             tabPanel("Tab 2"),
  45.                             tabPanel("Tab 3"),
  46.                             widths = c(2, 10),
  47.                             well = FALSE)
  48.                    )))
  49.       )
  50.     )
  51.   )
  52. )
  54. server <- function(input, output){
  55.   output$text_output <- renderText(input$text_input)
  56. }
  58. shinyApp(ui, server)

如何在 Shiny 应用中悬停在 navbarPage 链接上时更改文本颜色？

英文:

We can do it with the following CSS code block:

  1. library(bslib)
  2. library(shiny)
  3. ui <- tagList(
  4. fluidPage(
  5. titlePanel(""),
  6. tags$head(tags$style(HTML(
  7. "
  8. .navbar-default {
  9. color: red !important;'
  10. }
  11. .navbar-default .navbar-nav > .active > a,
  12. .navbar-default .navbar-nav > li > a:hover {
  13. color: red !important;
  14. }
  15. .navbar-default .navbar-nav > li > a {
  16. color: pink !important;
  17. }
  18. "
  19. ))),
  20. navbarPage(
  21. windowTitle = "App Name",
  22. theme = bs_theme(bootswatch = "flatly",
  23. base_font = font_google("Lato"),
  24. primary = "#333F50",
  25. bg = "white",
  26. fg = "#D67540"),
  27. title = "I am the title",
  28. selected = "Main Tab 1",
  29. tabPanel(title = "Main Tab 1",
  30. fluidPage(
  31. sidebarLayout(
  32. sidebarPanel(textInput(inputId = "text_input", label = "Enter text:")),
  33. mainPanel(textOutput(outputId = "text_output"))
  34. )
  35. )
  36. ),
  37. tabPanel(title = "Main Tab 2",
  38. fluidPage(
  39. fluidRow(
  40. column(7,
  41. navlistPanel(
  42. tabPanel("Tab 1"),
  43. tabPanel("Tab 2"),
  44. tabPanel("Tab 3"),
  45. widths = c(2, 10),
  46. well = FALSE)
  47. )))
  48. )
  49. )
  50. )
  51. )
  52. server <- function(input, output){
  53. output$text_output <- renderText(input$text_input)
  54. }
  55. shinyApp(ui, server)

如何在 Shiny 应用中悬停在 navbarPage 链接上时更改文本颜色？

huangapple
  • 本文由 发表于 2023年2月18日 02:42:43
  • 转载请务必保留本文链接：https://go.coder-hub.com/75488188.html
  • css
  • nav
  • navbar
  • r
  • shiny
匿名

发表评论

匿名网友

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

确定