更改“`shinydashboardPlus：：descriptionBlock()”的默认CSS样式

Question

我觉得shinydashboardPlus::descriptionBlock()很不错，但是我有点沮丧，不能在R中改变它的样式。我们怎么能做到这一点？

• header是必需的粗体，
• text必须大写，
• 使用HTML() in number将图标放到下一行。

展示柜：

library(shiny)
library(shinydashboard)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        footer = fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = "17%", 
              numberColor = "green", 
              numberIcon = "caret-up",
              header = "not bold please", 
              text = "set me in lowercase please", 
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = HTML("<h4>icon?</h4>"), 
              numberColor = "red", 
              numberIcon = "skull-crossbones",
              header = "using html put", 
              text = "icon to next line", 
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      )
    ),
    title = "Description Blocks"
  ),
  server = function(input, output) { }
)

Answer 1

要解决这个问题，您需要插入css语句，这些语句与包提供的css代码相同。

删除始终大写的插入图标问题，以唯一的粗体标题插入.description-block>.description-header { font-weight: 500; }

• to。问题是您使用的是<h4>标记。默认情况下，这是一个块元素，它将下一个对象移动到一个新行。在这里，您可以使用不同的标记(如<span> )，也可以将显示属性设置为inline-block。在下面的示例中，我使用了后面的解决方案

合在一起看上去就像这样

library(shiny)
library(shinydashboard)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$head(
        tags$style(
HTML("
.description-block>.description-text {
    text-transform: none;
  }
.description-block>.description-header {
    font-weight: 500;
}
.description-percentage>h4 {
  display: inline-block;
}
")
        )
      ),
      box(
        solidHeader = FALSE,
        title = "Status summary",
        background = NULL,
        width = 4,
        status = "danger",
        footer = fluidRow(
          column(
            width = 6,
            descriptionBlock(
              number = "17%", 
              numberColor = "green", 
              numberIcon = "caret-up",
              header = "not bold please", 
              text = "set me in lowercase please", 
              rightBorder = TRUE,
              marginBottom = FALSE
            )
          ),
          column(
            width = 6,
            descriptionBlock(
              number = HTML("<h4>icon?</h4>"), 
              numberColor = "red", 
              numberIcon = "skull-crossbones",
              header = "using html put", 
              text = "icon to next line", 
              rightBorder = FALSE,
              marginBottom = FALSE
            )
          )
        )
      )
    ),
    title = "Description Blocks"
  ),
  server = function(input, output) { }
)