Personalizare cu formatare CSS

Crearea dashboardurilor cu shinydashboard

Png Kee Seng

Researcher

Cum se poate personaliza în continuare un shinydashboard?

O temă întunecată poate fi obținută alegând skin-ul "black"
Se poate modifica aspectul obiectelor individuale?
Acest lucru se realizează prin foi de stil în cascadă (CSS)
Urmează un curs rapid de CSS
- Nu vă concentrați prea mult pe detalii

Introducere în CSS: adăugarea comentariilor

CSS este un limbaj de stilizare
- Controlează aspectul fiecărui obiect
Un cod CSS este alcătuit din blocuri de selectori
- Cu proprietăți, subproprietăți etc.
- Formează un dicționar care urmărește aspectul fiecărei caracteristici
Codul CSS va fi salvat ca șir de caractere
- Folosiți ghilimele simple '...'
Comentariile pot fi inserate în codul CSS

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

Introducere în CSS: selectori

Într-un bloc există un selector
- Corespunde unei anumite caracteristici
.selector se referă la o clasă CSS

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

  property1: value1;
  property2: value2;

}
`

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

Introducere în CSS: combinații de selectori

Doi selectori .class1 și .class2 pot fi combinați ca .class1 .class2
- În .class1, se selectează o subclasă numită .class2
Spațiul este important
- În caz contrar, codul nu va funcționa corect

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

Un exemplu concret

Pentru a modifica setările fontului în antetul unui shinydashboard
- Necesită .main-header .logo
- Selectați clasa .main-header, apoi căutați subclasa .logo
Pentru a schimba culoarea de fundal în negru
- Necesită .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; 
}
'

Un exemplu complet

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Există multe alte combinații de selectori

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

Aplicarea formatării CSS într-un shinydashboard

Codul CSS trebuie inserat în dashboardBody()

Shinydashboard formatat cu CSS.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Să exersăm!

Crearea dashboardurilor cu shinydashboard