如何解决更改`shinydashboardPlus :: descriptionBlock`的默认CSS样式
我发现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) { }
)
解决方法
要解决此问题,您需要插入与软件包提供的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) { }
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。