你可以如何更改在闪亮应用程序中手风琴菜单的字体颜色？

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

How can I change the font color of an accordion menu in a shiny app?

问题

I want to recreate the following accordion menu:
你可以如何更改在闪亮应用程序中手风琴菜单的字体颜色？

I am using the accordion() function from the shinydashboardPlus package, and got to here so far:
你可以如何更改在闪亮应用程序中手风琴菜单的字体颜色？

I am trying to change the font color to black to match the first image, but adding the following CSS code is not working:

  1. tags$head(
  2.     tags$style(
  3.         HTML(".box-title {
  4.           color: black !important;
  5.         }")
  6.     )
  7. )

If someone could help me to change the font color, and if possible to add the well (AKA: the white rectangle with circled borders around each item of the accordion menu) it would be great!

Here is the full app code:

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinydashboardPlus)
  5. ui <- fluidPage(
  6.   tags$head(
  7.     tags$style(
  8.       HTML(".box-title {
  9.           color: black !important;
  10.       }")
  11.     )
  12.   ),
  13.   accordion(
  14.     id = "covenants",
  15.     accordionItem(
  16.       title = "Cash on cash",
  17.       status = "danger",
  18.       collapsed = TRUE,
  19.       "This is some text!"
  20.     ),
  21.     accordionItem(
  22.       title = "Net Portfolio Yield Percentage",
  23.       status = "warning",
  24.       collapsed = TRUE,
  25.       "This is some text!"
  26.     ),
  27.     accordionItem(
  28.       title = "Minimum Liquidity Amount",
  29.       status = "warning",
  30.       collapsed = TRUE,
  31.       "This is some text!"
  32.     ),
  33.     accordionItem(
  34.       title = "Maximum Debt to Equity Ratio",
  35.       status = "warning",
  36.       collapsed = TRUE,
  37.       "This is some text!"
  38.     ),
  39.     accordionItem(
  40.       title = "Most Favored Nation",
  41.       status = "warning",
  42.       collapsed = TRUE,
  43.       "This is some text!"
  44.     )
  45.   )
  46. )
  48. server <- function(input, output, session) {}
  50. shinyApp(ui, server)
英文:

I want to recreate the following accordion menu: 你可以如何更改在闪亮应用程序中手风琴菜单的字体颜色？

I am using the accordion() function from the shinydashboardPlus package, and got to here so far:

你可以如何更改在闪亮应用程序中手风琴菜单的字体颜色？

I am trying to change the font color to black to match the first image, but adding the following CSS code is not working:

  1. tags$head(
  2.     tags$style(
  3.       HTML(&quot;
  4.         .box-title {
  5.           color: black !important;
  6.         }
  7.       &quot;)
  8.     )
  9.   )

If someone could help me to change the font color, and if possible to add the well (AKA: the white rectangle with circled borders around each item of the accordion menu) it would be great!

Here is te full app code:

  1. library(shiny)
  2. library(shinydashboard)
  3. library(shinydashboardPlus)
  5. ui &lt;- fluidPage(
  6.   tags$head(
  7.     tags$style(
  8.       HTML(&quot;
  9.         .box-title {
  10.           color: black !important;
  11.         }
  12.       &quot;)
  13.     )
  14.   ),
  15.   accordion(
  16.     id = &quot;covenants&quot;,
  17.     accordionItem(
  18.       title = &quot;Cash on cash&quot;,
  19.       status = &quot;danger&quot;,
  20.       collapsed = TRUE,
  21.       &quot;This is some text!&quot;
  22.     ),
  23.     accordionItem(
  24.       title = &quot;Net Portfolio Yield Percentage&quot;,
  25.       status = &quot;warning&quot;,
  26.       collapsed = TRUE,
  27.       &quot;This is some text!&quot;
  28.     ),
  29.     accordionItem(
  30.       title = &quot;Minimum Liquidity Amount&quot;,
  31.       status = &quot;warning&quot;,
  32.       collapsed = TRUE,
  33.       &quot;This is some text!&quot;
  34.     ),
  35.     accordionItem(
  36.       title = &quot;Maximum Debt to Equity Ratio&quot;,
  37.       status = &quot;warning&quot;,
  38.       collapsed = TRUE,
  39.       &quot;This is some text!&quot;
  40.     ),
  41.     accordionItem(
  42.       title = &quot;Most Favored Nation&quot;,
  43.       status = &quot;warning&quot;,
  44.       collapsed = TRUE,
  45.       &quot;This is some text!&quot;
  46.     )
  47.   )
  48. )
  50. server &lt;- function(input, output, session) {}
  52. shinyApp(ui, server)

答案1

得分: 0

.box-title选择器针对手风琴的标题，通常是一个超链接。默认情况下，超链接具有特殊样式，包括不同颜色的已访问和未访问链接。color属性仅适用于未访问链接，而:visited选择器可用于定位已访问链接。

因此，正确的CSS代码是：

  1. .box-title a {
  2.   color: black !important;
  3. }
英文:

The .box-title selector targets the title of the accordion, which is usually a hyperlink. By default, hyperlinks have a special style that includes a different color for visited and unvisited links. The color property only applies to unvisited links, whereas the :visited selector can be used to target visited links

Therefore, the correct CSS code is:

  1. .box-title a {
  2.   color: black !important;
  3. }

huangapple
  • 本文由 发表于 2023年4月11日 01:18:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/75979190.html
  • css
  • r
  • shiny
匿名

发表评论

匿名网友

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

确定