Přizpůsobení pomocí CSS formátování

Tvorba dashboardů pomocí shinydashboard

Png Kee Seng

Researcher

Jak dále přizpůsobit shinydashboard?

Tmavý barevný motiv lze dosáhnout volbou skinu "black"
Lze změnit vzhled jednotlivých objektů?
Toho lze dosáhnout pomocí kaskádových stylů (CSS)
Následuje rychlý úvod do CSS
- Nedělejte si starosti s detaily

Úvod do CSS: přidávání komentářů

CSS je stylovací jazyk
- Řídí vzhled každého objektu
Kód CSS se skládá z bloků selektorů
- S vlastnostmi, podvlastnostmi atd.
- Tvoří slovník sledující vzhled každého prvku
Kód CSS uložíme jako řetězec
- Používejte jednoduché uvozovky '...'
Do kódu CSS lze vkládat komentáře

css_code <- '
/* This is a comment */
'

Úvod do CSS: selektory

V bloku se nachází selektor
- Odpovídá určitému prvku
.selector označuje třídu CSS

css_code <- '
/* This is a selector */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* This is a selector class */
.selector {
  property1: value1;
  property2: value2;
}
`

Úvod do CSS: kombinace selektorů

Dva selektory .class1 a .class2 lze kombinovat jako .class1 .class2
- V rámci .class1 vyberte podtřídu .class2
Mezera je důležitá
- Bez ní kód nebude fungovat správně

css_code <- '
.class1 .class2 {
  property1: value1;
  property2: value2;
  property3: value3;
}
`

Konkrétní příklad

Změna nastavení písma v záhlaví shinydashboard
- Potřebujeme .main-header .logo
- Vyberte třídu .main-header a hledejte podtřídu .logo
Změna barvy pozadí na černou
- Potřebujeme .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; 
}
'

Úplný příklad

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Existuje mnoho dalších kombinací selektorů

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;
}
'

Použití CSS formátování v shinydashboard

Kód CSS musí být vložen do dashboardBody()

CSS formátovaný shinydashboard.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Pojďme si procvičit!

Tvorba dashboardů pomocí shinydashboard