使用 CSS 进行自定义

使用 shinydashboard 构建仪表板

Png Kee Seng

Researcher

如何进一步自定义 shinydashboard？

  • 选择 "black" 皮肤可实现深色主题
  • 能否更改单个对象的外观？
  • 可以，使用层叠样式表（CSS）实现
  • 下面是一个 CSS 速成
    • 细节先不必深究
使用 shinydashboard 构建仪表板

CSS 入门：添加注释

  • CSS 是一种样式语言
    • 控制每个对象的外观
  • CSS 代码由多个选择器块组成
    • 包含属性、子属性等
    • 形成一个跟踪各特性外观的字典
  • 我们将 CSS 代码保存为字符串
    • 使用单引号 '...'
  • 可以在 CSS 代码中加入注释
css_code <- '
/* 这是注释 */
'
使用 shinydashboard 构建仪表板

CSS 入门：选择器

  • 在一个块中，有一个选择器
    • 对应某个特性
  • .selector 指代一个 CSS 类
css_code <- '
/* 这是一个选择器 */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* 这是一个选择器类 */
.selector {
  property1: value1;
  property2: value2;
}
`
使用 shinydashboard 构建仪表板

CSS 入门：选择器组合

  • 可将两个选择器 .class1 与 .class2 组合为 .class1 .class2
    • 在 .class1 内选择名为 .class2 的子类
  • 空格很重要
    • 否则代码无法正常工作
css_code <- '
.class1 .class2 {
  property1: value1;
  property2: value2;
  property3: value3;
}
`
使用 shinydashboard 构建仪表板

更具体的示例

  • 更改 shinydashboard 页眉的字体设置
    • 需要 .main-header .logo
    • 选择 .main-header 类，然后查找 .logo 子类
  • 将背景色改为黑色
    • 需要 .skin-blue .main-header .logo
css_code <- '
/* 设置主页眉中的文字样式 */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* 将背景色改为黑色 */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'
使用 shinydashboard 构建仪表板

完整示例

  • .main-header .logo, .skin-blue .main-header .logo
    • .skin-blue .main-header .logo:hover
    • .skin-blue .main-header .navbar
  • 还有更多选择器组合
css_code <- '
.main-header .logo {
  font-family: "helvetica",  serif, Times, "Times New Roman";
  font-weight: bold;
  font-size: 24px;
}
.skin-blue .main-header .logo {
          background-color: #000000; 
}

.skin-blue .main-header .logo:hover {
          background-color: blue; 
}

.skin-blue .main-header .navbar {
          background-color: #999999;
}
'
使用 shinydashboard 构建仪表板

将 CSS 应用于 shinydashboard

  • 将 CSS 代码插入 dashboardBody()

已应用 CSS 格式的 shinydashboard。

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)
使用 shinydashboard 构建仪表板

Passons à la pratique !

使用 shinydashboard 构建仪表板

Preparing Video For Download...