Exercise

Wireframing with boxes

A new row is defined by fluidRow().

Furthermore, box() can be added to the body to organize content. You can add several box()es, but the default width of each box is 6. This means that only two unaltered 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. The first is to help organize elements of your shinydashboard, and the second is to help with wireframing, so that you get to decide the placements of each object.

You will now carry out wireframing with empty boxes in this exercise.

The shiny and shinydashboard packages have already been loaded for you. The dashboard header and sidebar have been stored as header and sidebar.

Instructions

100 XP
  • 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.
  • Add a third row containing two empty boxes with equal widths, labeled as "A slider goes here" and "Some info boxes go here".