Tùy chỉnh với định dạng CSS

Xây dựng Dashboard với shinydashboard

Png Kee Seng

Researcher

Tùy chỉnh shinydashboard sâu hơn thế nào?

Chủ đề tối có thể đạt được bằng cách chọn skin "black"
Có thể đổi giao diện từng đối tượng không?
Có thể, bằng cách dùng mã CSS (cascading style sheets)
Tiếp theo là phần giới thiệu nhanh về CSS
- Đừng lo về chi tiết nhỏ

Giới thiệu CSS: thêm chú thích

CSS là ngôn ngữ tạo kiểu
- Kiểm soát giao diện của từng đối tượng
Mã CSS gồm các khối bộ chọn (selectors)
- Có thuộc tính, thuộc tính con, v.v.
- Tạo “từ điển” theo dõi giao diện của từng tính năng
Ta sẽ lưu CSS dưới dạng chuỗi
- Dùng dấu nháy đơn '...'
Có thể chèn chú thích vào mã CSS

css_code <- '
/* Đây là chú thích */
'

Giới thiệu CSS: bộ chọn

Trong một khối có bộ chọn
- Tương ứng với một tính năng
.selector là lớp CSS

css_code <- '
/* Đây là một bộ chọn */
selector {

  property1: value1;
  property2: value2;

}
`

css_code <- '
/* Đây là một lớp bộ chọn */
.selector {
  property1: value1;
  property2: value2;
}
`

Giới thiệu CSS: kết hợp bộ chọn

Có thể kết hợp hai bộ chọn .class1 và .class2 thành .class1 .class2
- Trong .class1, chọn lớp con .class2
Khoảng trắng là quan trọng
- Nếu không, mã sẽ không chạy đúng

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

Ví dụ cụ thể hơn

Để đổi cài đặt phông chữ trong header shinydashboard
- Cần .main-header .logo
- Chọn lớp .main-header, rồi tìm lớp con .logo
Để đổi nền thành màu đen
- Cần .skin-blue .main-header .logo

css_code <- '
/* Định dạng văn bản trong header chính */
.main-header .logo {

  font-family: "Times New Roman";

  font-weight: bold;

  font-size: 24px;

}
'

css_code <- '
/* Đổi background-color thành đen */
.skin-blue .main-header .logo {

          background-color: #000000; 
}
'

Ví dụ đầy đủ

.main-header .logo, .skin-blue .main-header .logo
- .skin-blue .main-header .logo:hover
- .skin-blue .main-header .navbar
Còn nhiều tổ hợp bộ chọn khác

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

Áp dụng định dạng CSS cho shinydashboard

Nên chèn mã CSS vào dashboardBody()

Shinydashboard đã định dạng CSS.

body <- dashboardBody(

  tags$head(

    tags$style(

      HTML(css_code)

      )

    ),

  ...)

Ayo berlatih!

Xây dựng Dashboard với shinydashboard