Bắt đầu ngayBắt đầu miễn phí

Vẽ khung bố cục với boxes

Một hàng mới được định nghĩa bằng fluidRow().

Ngoài ra, bạn có thể thêm box() vào phần body để tổ chức nội dung. Có thể thêm nhiều box(), mỗi cái có chiều rộng mặc định là 6, và có thể điều chỉnh bằng tham số width. Chỉ có thể đặt hai box() mặc định trên một hàng, vì chiều rộng tối đa của một hàng là 12. Bạn cũng có thể đặt height để thêm các box với nhiều kích thước khác nhau.

Các box() này phục vụ hai mục đích chính. Thứ nhất, chúng giúp bạn tổ chức các thành phần của shinydashboard; và thứ hai, dùng để vẽ khung bố cục (wireframing), để bạn có thể lên kế hoạch vị trí của từng đối tượng trước khi thêm nội dung.

Bạn sẽ vẽ khung bố cục bằng các box trống trong bài tập này.

Các gói shiny và shinydashboard đã được nạp. Phần header và sidebar của dashboard được lưu lần lượt là header và sidebar.

Bài tập này là một phần của khóa học

Xây dựng Dashboard với shinydashboard

Xem khóa học

Hướng dẫn bài tập

  • Ở hàng đầu tiên, thêm ba box() với chiều rộng lần lượt là 2, 2 và 8.
  • Ở hàng thứ hai, thêm một box() chiếm toàn bộ hàng và có chiều cao 200.
  • Ở hàng thứ ba, thêm hai box trống có chiều rộng bằng nhau, được gắn nhãn "A slider goes here" và "Some info boxes go here".

Bài tập tương tác thực hành trực tiếp

Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.

body <- dashboardBody(
  # Add three boxes with widths 2, 2 and 8
  fluidRow(box("Some buttons go here", ___, height = 100), 
           ___("Checkboxes go here", ___, height = 50),
           ___("A chart goes here", ___, height = 150)),
  # Add one box that fills the entire row and has height 200
  fluidRow(___("Data table goes here"), ___, ___),
  # Add a third row containing two boxes with equal widths
  fluidRow(___)
)

ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
Chỉnh sửa và Chạy Mã