使用 CSS 進行自訂格式

使用 shinydashboard 建立儀表板

Png Kee Seng

Researcher

如何進一步自訂 shinydashboard？

  • 深色主題可用 "black" skin 達成
  • 能否只改個別物件外觀？
  • 可用層疊樣式表（CSS）程式碼達成
  • 接下來是 CSS 速成
    • 細節先不用太在意
使用 shinydashboard 建立儀表板

CSS 入門：加入註解

  • CSS 是樣式語言
    • 控制每個物件的外觀
  • CSS 由多個「選擇器」區塊組成
    • 內含屬性、子屬性等
    • 形成記錄各項外觀的字典
  • 我們會把 CSS 存成字串
    • 使用單引號 '...'
  • 可在 CSS 中加入註解
css_code <- '
/* This is a comment */
'
使用 shinydashboard 建立儀表板

CSS 入門：選擇器

  • 每個區塊內有一個選擇器
    • 對應特定元件
  • .selector 代表 CSS 類別
css_code <- '
/* This is a selector */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* This is a selector class */
.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 <- '
/* Format the text in the main header */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* Change the background-color to black */
.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 建立儀表板

在 shinydashboard 套用 CSS 格式

  • 應將 CSS 置於 dashboardBody() 中

已套用 CSS 的 shinydashboard。

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)
使用 shinydashboard 建立儀表板

一起來練習吧！

使用 shinydashboard 建立儀表板

Preparing Video For Download...