Aan de slagBegin gratis

Wireframing met boxes

Een nieuwe rij definieer je met fluidRow().

Daarnaast kun je box() aan de body toevoegen om content te organiseren. Je kunt meerdere box()es toevoegen, elk met een standaardbreedte van 6, en aanpasbaar met het argument width. In één rij passen standaard slechts twee box()es, omdat de maximale breedte van een rij 12 is. Je kunt ook height instellen zodat boxes met verschillende afmetingen kunnen worden toegevoegd.

Deze box()es hebben hier twee hoofddoelen. Ten eerste organiseren ze de elementen van je shinydashboard; en ten tweede kun je ermee wireframen, zodat je de plaatsing van elk object kunt plannen voordat je content toevoegt.

In deze oefening ga je wireframen met lege boxes.

De pakketten shiny en shinydashboard zijn geladen. De dashboardheader en -sidebar zijn opgeslagen als header en sidebar.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met shinydashboard

Bekijk cursus

Oefeninstructies

  • Voeg in de eerste rij drie box()es toe met breedtes 2, 2 en 8.
  • Voeg in de tweede rij één box() toe die de hele rij vult en hoogte 200 heeft.
  • Voeg in de derde rij twee lege boxes met gelijke breedte toe, met de labels "A slider goes here" en "Some info boxes go here".

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren