Kustomisasi dengan pemformatan CSS

Membangun Dashboard dengan shinydashboard

Png Kee Seng

Researcher

Cara menyesuaikan shinydashboard lebih lanjut

Tema gelap dapat dicapai dengan memilih skin "black"
Bisakah kita mengubah tampilan objek tertentu?
Dapat dilakukan dengan kode Cascading Style Sheets (CSS)
Berikut ringkasannya tentang CSS
- Jangan terlalu khawatir soal detailnya

Pengantar CSS: menambahkan komentar

CSS adalah bahasa styling
- Mengatur tampilan tiap objek
Kode CSS terdiri dari kumpulan selector
- Dengan properti, subproperti, dll.
- Membentuk kamus yang melacak tampilan tiap fitur
Kita akan menyimpan kode CSS sebagai string
- Gunakan tanda kutip tunggal '...'
Komentar dapat dimasukkan ke dalam kode CSS

css_code <- '
/* Ini komentar */
'

Pengantar CSS: selector

Dalam satu blok, ada selector
- Sesuai dengan fitur tertentu
.selector merujuk ke kelas CSS

css_code <- '
/* Ini sebuah selector */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* Ini kelas selector */
.selector {
  property1: value1;
  property2: value2;
}
`

Pengantar CSS: kombinasi selector

Dua selector .class1 dan .class2 dapat dikombinasikan menjadi .class1 .class2
- Di dalam .class1, pilih subkelas bernama .class2
Spasi sangat penting
- Jika tidak, kodenya tidak akan berfungsi benar

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

Contoh yang lebih konkret

Ubah pengaturan font di header shinydashboard
- Gunakan .main-header .logo
- Pilih kelas .main-header, lalu cari subkelas .logo
Ubah warna latar menjadi hitam
- Gunakan .skin-blue .main-header .logo

css_code <- '
/* Format teks di header utama */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* Ubah background-color menjadi hitam */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'

Contoh lengkap

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Masih banyak kombinasi selector lainnya

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

Menerapkan pemformatan CSS pada shinydashboard

Kode CSS sebaiknya dimasukkan ke dalam dashboardBody()

Shinydashboard dengan CSS terformat.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Ayo berlatih!

Membangun Dashboard dengan shinydashboard