Налаштування за допомогою форматування CSS

Створення панелей керування з shinydashboard

Png Kee Seng

Researcher

Як глибше налаштувати shinydashboard?

Темну тему можна отримати, вибравши обкладинку "black"
Чи можна змінювати вигляд окремих об'єктів?
Це робиться за допомогою к каскадних таблиць стилів (CSS)
Далі — експрес-курс із CSS
- Не переймайтеся дрібницями

Вступ до CSS: додавання коментарів

CSS — це мова стилів
- Керує виглядом кожного об'єкта
CSS-код складається з блоків — селекторів
- Зі властивостями, підвластивостями тощо
- Утворює «словник», що фіксує вигляд кожної сутності
Ми збережемо CSS-код як рядок
- Використовуйте одинарні лапки '...'
У CSS-код можна додавати коментарі

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

Вступ до 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;
}
`

Вступ до CSS: комбінації селекторів

Два селектори .class1 і .class2 можна поєднати як .class1 .class2
- У межах .class1 вибрати підклас .class2
Пробіл має значення
- Інакше код працюватиме неправильно

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

Більш конкретний приклад

Щоб змінити шрифт у заголовку 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; 
}
'

Повний приклад

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

Застосування CSS-форматування в shinydashboard

CSS-код слід вставляти в dashboardBody()

Оформлений за допомогою CSS shinydashboard.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Давайте потренуємось!

Створення панелей керування з shinydashboard