Esquisses (wireframing) avec des boîtes
Une nouvelle rangée est définie par fluidRow().
De plus, box() peut être ajouté au corps pour organiser le contenu. Plusieurs box() peuvent être ajoutés, chacun ayant une largeur par défaut de 6, et cette largeur peut être ajustée avec l'argument width. Seules deux box() par défaut peuvent être placées dans une rangée, puisque la largeur maximale d'une rangée est de 12. Vous pouvez aussi définir height afin d'ajouter des boîtes de différentes dimensions.
Ces box() servent ici deux objectifs principaux. D'une part, elles organisent les éléments de votre shinydashboard; d'autre part, elles permettent de faire l'esquisse (wireframing) pour planifier l'emplacement de chaque objet avant d'ajouter le contenu.
Vous allez réaliser une esquisse avec des boîtes 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 enregistrés sous header et sidebar.
Cette activité fait partie du cours
Créer des tableaux de bord avec shinydashboard
Instructions de l’exercice
- Dans la première rangée, ajoutez trois
box()avec des largeurs de 2, 2 et 8. - Dans la deuxième rangée, ajoutez un
box()qui occupe toute la rangée et a une hauteur de 200. - Dans la troisième rangée, ajoutez deux boîtes vides de largeur égale, avec les étiquettes « 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)