Wireframing with boxes
A new row is defined by fluidRow().
Furthermore, box() can be added to the body to organize content. Multiple box()es can be added, each with a default width of 6, and can be adjusted with the width argument. Only two default box()es can be placed in a row, since the maximum width of a row is 12. You can also set height so that boxes of various dimensions can be added.
These box()es then serve two main purposes here. Firstly, they organize elements of your shinydashboard; and secondly, to carry out wireframing, so that you can plan the placements of each object before adding content.
You will carry out wireframing with empty boxes in this exercise.
The shiny and shinydashboard packages have been loaded. The dashboard header and sidebar are stored as header and sidebar.
This exercise is part of the course
Building Dashboards with shinydashboard
Exercise instructions
- In the first row, add three
box()es with widths 2, 2 and 8. - In the second row, add one
box()that fills the entire row and has height 200. - In the third row containing two empty boxes with equal widths, labeled as "A slider goes here" and "Some info boxes go here".
Hands-on interactive exercise
Have a go at this exercise by completing this sample code.
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)