Wireframing z użyciem pudełek
Nowy wiersz definiuje się za pomocą fluidRow().
Do treści dashboardu można dodawać box()e, które pomagają porządkować zawartość. Możesz umieszczać wiele box()ów – każdy ma domyślną szerokość 6 i można ją zmieniać za pomocą argumentu width. W jednym wierszu mieszczą się co najwyżej dwa domyślne box()e, ponieważ maksymalna szerokość wiersza wynosi 12. Za pomocą argumentu height możesz też ustalać wysokość pudełek, nadając im różne wymiary.
box()e pełnią tu dwie główne funkcje: po pierwsze, porządkują elementy twojego shinydashboarda; po drugie, umożliwiają wireframing, czyli planowanie rozmieszczenia poszczególnych obiektów jeszcze przed dodaniem treści.
W tym ćwiczeniu przeprowadzisz wireframing, używając pustych pudełek.
Biblioteki shiny i shinydashboard są już załadowane. Nagłówek i pasek boczny dashboardu są zapisane jako header i sidebar.
To ćwiczenie jest częścią kursu
Tworzenie dashboardów z shinydashboard
Instrukcje do ćwiczenia
- W pierwszym wierszu dodaj trzy
box()e o szerokościach 2, 2 i 8. - W drugim wierszu dodaj jeden
box(), który wypełnia cały wiersz i ma wysokość 200. - W trzecim wierszu umieść dwa puste pudełka o równych szerokościach, z etykietami "A slider goes here" i "Some info boxes go here".
Interaktywne ćwiczenie praktyczne
Spróbuj tego ćwiczenia, uzupełniając ten przykładowy kod.
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)