只更改导航栏颜色。

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

Bslib change only navbar color

问题

在我的Shiny应用中，我有一个选项可以更改应用的主题。是否有一种方法可以创建一个主题，其中只有导航栏有颜色，而主体是黑色或白色的？我知道可以使用CSS来做到这一点，但由于我可以在应用中更改主题，所以无法进行自定义修复。

英文:

In my shiny app, I have an option allowing to change the theme app.
Is there a way to create a theme where only the navbar is colored and the body is black or white ?
I know it's possible to do it with CSS but as I could change the theme in the app it's not possible to do a custom fix.

只更改导航栏颜色。

  1. library(shiny)
  2. library(markdown)
  3. library(bslib)
  5. main_theme = bslib::bs_theme(
  6.   bg = "#86cecb",
  7.   fg = "#e12885",
  8.   primary = "#89cff0",
  9. )
  11. ui = navbarPage(
  12.   "Navbar!",
  13.   theme = main_theme,
  14.   tabPanel("Plot",
  15.            sidebarLayout(
  16.              sidebarPanel(radioButtons(
  17.                "plotType", "Plot type",
  18.                c("Scatter" = "p", "Line" = "l")
  19.              )),
  20.              mainPanel(plotOutput("plot"))
  21.            )),
  22.   navbarMenu(title = "Ressources",
  23.              tabPanel(
  24.                "Options d'interface",
  25.                selectInput(
  26.                  "theme",
  27.                  "Themes :",
  28.                  c(
  29.                    "Custom" = "custom",
  30.                    "Dark" = "dark",
  31.                    "Light" = "light"
  32.                  )
  33.                )
  34.              ))
  35. )
  37. server = function(input, output, session) {
  38.   light <- bs_theme()
  39.   
  40.   dark <- bslib::bs_theme(
  41.     bg = "#222222",
  42.     fg = "#FFFFFF",
  43.     primary = "#FFFFFF",
  44.     secondary = "#434343"
  45.   )
  46.   main_theme = bslib::bs_theme(
  47.     bg = "#86cecb",
  48.     fg = "#e12885",
  49.     primary = "#89cff0",
  50.   )
  51.   
  52.   observe(session$setCurrentTheme({
  53.     if (input$theme == "dark")
  54.       dark
  55.     else if (input$theme == "light")
  56.       light
  57.     else if (input$theme == "custom")
  58.       main_theme
  59.   }))
  60. }
  62. if (interactive())
  63.   shinyApp(ui, server)

答案1

得分: 3

你可以使用 Bootstrap 变量 navbar-bg 单独设置导航栏的背景颜色：

  1. library(shiny)
  2. library(markdown)
  3. library(bslib)
  5. ui <- navbarPage(
  6.   "导航栏！",
  7.   theme = bslib::bs_theme(
  8.     "navbar-bg" = "#86cecb",
  9.     bg = "#222222",
  10.     fg = "#e12885",
  11.     primary = "#89cff0",
  12.   ),
  13.   tabPanel(
  14.     "图表",
  15.     sidebarLayout(
  16.       sidebarPanel(radioButtons(
  17.         "plotType", "图表类型",
  18.         c("散点图" = "p", "折线图" = "l")
  19.       )),
  20.       mainPanel(plotOutput("plot"))
  21.     )
  22.   ),
  23.   navbarMenu(
  24.     title = "资源",
  25.     tabPanel(
  26.       "界面选项",
  27.       selectInput(
  28.         "theme",
  29.         "主题：",
  30.         c(
  31.           "自定义" = "custom",
  32.           "暗色" = "dark",
  33.           "亮色" = "light"
  34.         )
  35.       )
  36.     )
  37.   )
  38. )
  40. server <- function(input, output, session) {
  41.   
  42. }
  44. shinyApp(ui, server)
  45. #> 
  46. #> 正在监听 http://127.0.0.1:5052

只更改导航栏颜色。<!-- -->

英文:

You could set the background color for the navbar individually using the Bootstrap variable navbar-bg:

  1. library(shiny)
  2. library(markdown)
  3. library(bslib)
  5. ui &lt;- navbarPage(
  6.   &quot;Navbar!&quot;,
  7.   theme = bslib::bs_theme(
  8.     &quot;navbar-bg&quot; = &quot;#86cecb&quot;,
  9.     bg = &quot;#222222&quot;,
  10.     fg = &quot;#e12885&quot;,
  11.     primary = &quot;#89cff0&quot;,
  12.   ),
  13.   tabPanel(
  14.     &quot;Plot&quot;,
  15.     sidebarLayout(
  16.       sidebarPanel(radioButtons(
  17.         &quot;plotType&quot;, &quot;Plot type&quot;,
  18.         c(&quot;Scatter&quot; = &quot;p&quot;, &quot;Line&quot; = &quot;l&quot;)
  19.       )),
  20.       mainPanel(plotOutput(&quot;plot&quot;))
  21.     )
  22.   ),
  23.   navbarMenu(
  24.     title = &quot;Ressources&quot;,
  25.     tabPanel(
  26.       &quot;Options d&#39;interface&quot;,
  27.       selectInput(
  28.         &quot;theme&quot;,
  29.         &quot;Themes :&quot;,
  30.         c(
  31.           &quot;Custom&quot; = &quot;custom&quot;,
  32.           &quot;Dark&quot; = &quot;dark&quot;,
  33.           &quot;Light&quot; = &quot;light&quot;
  34.         )
  35.       )
  36.     )
  37.   )
  38. )
  40. server &lt;- function(input, output, session) {
  41.   
  42. }
  44. shinyApp(ui, server)
  45. #&gt; 
  46. #&gt; Listening on http://127.0.0.1:5052

只更改导航栏颜色。<!-- -->

huangapple
  • 本文由 发表于 2023年3月7日 23:34:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/75664021.html
  • bslib
  • navbar
  • r
  • shiny
匿名

发表评论

匿名网友

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

确定