CSS biçimlendirme ile özelleştirme

shinydashboard ile Panolar Oluşturma

Png Kee Seng

Researcher

Bir shinydashboard nasıl daha fazla özelleştirilir?

Koyu bir tema "black" skin seçilerek elde edilebilir
Tek tek nesnelerin görünümü değiştirilebilir mi?
Basamaklı stil sayfaları (CSS) ile yapılabilir
Sırada CSS’ye hızlı bir giriş
- İnce ayrıntılar için endişelenmeyin

CSS’ye giriş: yorum ekleme

CSS bir biçimlendirme dilidir
- Her nesnenin görünümünü kontrol eder
CSS kodu, seçici parçalarından oluşur
- Özellikler, alt özellikler vb. ile
- Her özelliğin görünümünü izleyen bir sözlük oluşturur
CSS kodunu bir string olarak kaydedeceğiz
- Tek tırnak '...' kullanın
CSS koduna yorum eklenebilir

css_code <- '
/* Bu bir açıklamadır */
'

CSS’ye giriş: seçiciler

Bir parçada bir seçici vardır
- Belirli bir özelliğe karşılık gelir
.selector bir CSS sınıfını ifade eder

css_code <- '
/* Bu bir seçicidir */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* Bu bir seçici sınıfıdır */
.selector {
  property1: value1;
  property2: value2;
}
`

CSS’ye giriş: seçici kombinasyonları

İki seçici .class1 ve .class2, .class1 .class2 olarak birleştirilebilir
- .class1 içinde .class2 adlı bir alt sınıfı seçin
Boşluk önemlidir
- Aksi halde kod doğru çalışmaz

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

Daha somut bir örnek

shinydashboard başlığında yazı tipi ayarlarını değiştirmek için
- .main-header .logo gerekir
- .main-header sınıfını seçin, sonra .logo alt sınıfını bulun
Arka plan rengini siyaha çevirmek için
- .skin-blue .main-header .logo gerekir

css_code <- '
/* Ana başlıktaki metni biçimlendir */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* Arka plan rengini siyaha değiştir */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'

Tam bir örnek

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Daha birçok seçici kombinasyonu vardır

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

Bir shinydashboard'a CSS biçimlendirme uygulama

CSS kodu dashboardBody() içine eklenmelidir

CSS ile biçimlendirilmiş shinydashboard.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Ayo berlatih!

shinydashboard ile Panolar Oluşturma