Začněte nyníZačněte zdarma

Wireframing s boxy

Nový řádek se definuje pomocí fluidRow().

Do těla dashboardu lze přidávat box()y, které pomáhají organizovat obsah. Každý box() má výchozí šířku 6 a tu lze upravit argumentem width. Do jednoho řádku lze umístit nejvýše dva výchozí box()y, protože maximální šířka řádku je 12. Pomocí argumentu height lze nastavit i výšku, takže boxy mohou mít různé rozměry.

Tyto box()y plní dva hlavní účely: zaprvé organizují prvky tvého shinydashboardu a zadruhé slouží k wireframingu – tedy k naplánování rozmístění jednotlivých objektů ještě před přidáním obsahu.

V tomto cvičení si wireframing vyzkoušíš s prázdnými boxy.

Balíčky shiny a shinydashboard jsou načteny. Hlavička a postranní panel dashboardu jsou uloženy jako header a sidebar.

Toto cvičení je součástí kurzu

Tvorba dashboardů pomocí shinydashboard

Zobrazit kurz

Pokyny k cvičení

  • Do prvního řádku přidej tři box()y se šířkami 2, 2 a 8.
  • Do druhého řádku přidej jeden box(), který vyplní celý řádek a má výšku 200.
  • Do třetího řádku obsahujícího dva prázdné boxy se stejnou šířkou přidej popisky "A slider goes here" a "Some info boxes go here".

Interaktivní cvičení na vyzkoušení si v praxi

Vyzkoušejte si toto cvičení dokončením tohoto ukázkového kódu.

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)
Upravit a spustit kód