Diseñando con cajas (wireframing)
Una nueva fila se define con fluidRow().
Además, puedes añadir box() al cuerpo para organizar el contenido. Se pueden añadir múltiples box(), cada uno con un ancho predeterminado de 6, y se pueden ajustar con el argumento width. Solo se pueden colocar dos box() predeterminados en una fila, ya que el ancho máximo de una fila es 12. También puedes establecer height para añadir cajas de distintas dimensiones.
Estas box() cumplen aquí dos objetivos principales. Primero, organizan los elementos de tu shinydashboard; y segundo, permiten hacer un wireframing para planificar dónde irá cada objeto antes de añadir contenido.
En este ejercicio harás el wireframing usando cajas vacías.
Los paquetes shiny y shinydashboard ya se han cargado. La cabecera y la barra lateral del panel se han guardado como header y sidebar.
Este ejercicio forma parte del curso
Creación de paneles con shinydashboard
Instrucciones del ejercicio
- En la primera fila, añade tres
box()con anchos 2, 2 y 8. - En la segunda fila, añade un
box()que ocupe toda la fila y tenga altura 200. - En la tercera fila, incluye dos cajas vacías con anchos iguales, etiquetadas como "A slider goes here" y "Some info boxes go here".
ejercicio interactivo práctico
Prueba este ejercicio completando este código de ejemplo.
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)