Question

我发现shinydashboardPlus::descriptionBlock()很好，但是由于无法在R中更改其样式而感到沮丧。我们如何实现这一目标？

header必须粗体，
text一定要大写，
在HTML()中使用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; }
删除总是大写的插入.description-block>.description-text { text-transform: none; }
出现图标问题。问题是您使用的是<h4>标签。默认情况下，这是一个块元素，它将下一个对象移动到新行。在这里，您可以使用其他标签，例如<span>，也可以将display属性设置为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) { }
)

更改`shinydashboardPlus :: descriptionBlock（）`的默认CSS样式

1 个答案: