Wireframing avec des boxes
Une nouvelle ligne est définie par fluidRow().
De plus, box() peut être ajouté au corps pour organiser le contenu. Plusieurs box() peuvent être ajoutés, chacun avec une largeur par défaut de 6, et peuvent être ajustés avec l’argument width. Seuls deux box() par défaut peuvent être placés sur une ligne, puisque la largeur maximale d’une ligne est de 12. Vous pouvez aussi définir height pour ajouter des boxes de dimensions variées.
Ces box() remplissent ici deux rôles principaux. Premièrement, ils organisent les éléments de votre shinydashboard ; deuxièmement, ils servent au wireframing, afin que vous puissiez planifier l’emplacement de chaque objet avant d’ajouter du contenu.
Vous allez réaliser un wireframing avec des boxes vides dans cet exercice.
Les packages shiny et shinydashboard ont été chargés. L’en-tête et la barre latérale du tableau de bord sont stockés dans header et sidebar.
Cet exercice fait partie du cours
<cours>Créer des tableaux de bord avec shinydashboard</cours>Instructions de l’exercice
- Dans la première ligne, ajoutez trois
box()avec des largeurs 2, 2 et 8. - Dans la deuxième ligne, ajoutez un
box()qui occupe toute la ligne et a une hauteur de 200. - Dans la troisième ligne, ajoutez deux boxes vides de largeur égale, étiquetés « A slider goes here » et « Some info boxes go here ».
Exercice interactif pratique
Essayez cet exercice en complétant ce code d’exemple.
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)