R bslib主题不接受某些变量

zc0qhyus  于 2023-09-27  发布在  其他
关注(0)|答案(2)|浏览(109)

我有一个bslib应用程序,我想自定义导航栏,品牌和其他一些元素。具体来说,我想自定义navbar-brand-colornavbar-brand-hover-colornavbar-active-color颜色。
根据我对bslib的理解,这应该可以完成这项工作,但有些值没有被采用,而是使用了默认值。当我手动覆盖CSS值时,它可以工作,但这违背了bs_theme的目的。

library(shiny)
library(bslib)

theme <- bs_theme(
  version = 5,
  "navbar-bg" = "green",                    # works
  "navbar-brand-color" = "red !important",  # does not work!!!
  "navbar-brand-hover-color" = "salmon !important", # does not work!!!
  "navbar-active-color" = "gray !important", # does not work!!!
  "nav-link-color" = "yellow !important",   # works
  "nav-link-hover-color" = "orange !important", # works
)

ui <- page(
  theme = theme,
  # # manually overriding the CSS values works, but defeats the purpose of theme
  # tags$head(tags$style("
  #    .navbar-brand {color: red;}
  #    .navbar-brand:hover, .navbar-brand:focus {color: salmon !important;}
  #    a.nav-link.active {color: gray !important;}
  #   ")),
  navset_bar(
    title = "Brand Name",
    nav_panel("Active Tab", h2("Active")),
    nav_panel("Inctive Tab", h2("Inactive"))
  )
)

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

shinyApp(ui, server)
e0uiprwp

e0uiprwp1#

如果您查看here,您会注意到需要使用"navbar-light-brand-color" = "red !important",。你的变量中缺少了“光”。
试试这个

library(shiny)
library(bslib)

theme <- bs_theme(
  version = 5,
  "navbar-bg" = "green",                    # works
  "navbar-light-active-color" = "gray !important", # does work!!!
  "navbar-light-brand-color" = "red !important",  # does work!!!
  "navbar-light-brand-hover-color" = "salmon !important", # does work!!!
  "nav-link-color" = "yellow !important",   # works
  "nav-link-hover-color" = "orange !important", # works
)

ui <- page(
  theme = theme,
  # # manually overriding the CSS values works, but defeats the purpose of theme
  # tags$head(tags$style("
  #    .navbar-brand {color: red;}
  #    .navbar-brand:hover, .navbar-brand:focus {color: salmon !important;}
  #    a.nav-link.active {color: gray !important;}
  #   ")),
  navset_bar(
    title = "Brand Name",
    nav_panel("Active Tab", h2("Active")),
    nav_panel("Inactive Tab", h2("Inactive"))
  )
)

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

shinyApp(ui, server)

kse8i1jr

kse8i1jr2#

就我从文档中得到的信息而言,对于非工作情况,没有bootstrap 5 Sass变量。当然,你也可以使用bs_add_variables()添加自己的代码。这些变量可以通过bs_add_rules应用并在bs_add_rules中使用:

library(shiny)
library(bslib)
#> 
#> Attaching package: 'bslib'
#> The following object is masked from 'package:utils':
#> 
#>     page

theme <- bs_theme(
  version = 5,
  "navbar-bg" = "green", # works
  "nav-link-color" = "yellow !important", # works
  "nav-link-hover-color" = "orange !important" # works
) |> 
  bs_add_variables(
    "navbar-brand-color" = "red !important",
    "navbar-active-color" = "gray !important",
    "navbar-brand-hover-color" = "salmon !important"
  ) |> 
  bs_add_rules(
    list(
      ".navbar-brand { color: $navbar-brand-color}",
      ".navbar-brand:hover { color: $navbar-brand-hover-color}",
      ".navbar .active { color: $navbar-active-color}"  
    )
  )

ui <- page(
  theme = theme,
  navset_bar(
    title = "Brand Name",
    nav_panel("Active Tab", h2("Active")),
    nav_panel("Inctive Tab", h2("Inactive"))
  )
)

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

shinyApp(ui, server)
#> 
#> Listening on http://127.0.0.1:5661

相关问题