Настройка с помощью 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()

Shinydashboard с CSS-оформлением.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Давайте потренируемся!

Создание дашбордов с помощью shinydashboard