Tutoriel Shiny
Partie 3: Panels et layouts

janvier 2018

Panels(1)

Les panels permettent de réunir différents éléments (widgets, textes, images…). Les différents types de panels correspondent à différents styles (par exemple, fonds gris pour wellPanel(), caractères colorés pour titlePanel(), etc.)

Il est possible de combiner différents types de panels en les juxtaposant ou en les emboîtant, comme dans l’exemple ci-contre.

Tout ce que je vais vous montrer dans cette partie concerne la partie UI des Shiny Apps!!

Panels (2)

wellPanel("Des chats plus ou moins mignons",
         numericInput("sliderMagni",
                      "mignonnitude",
                      min=1,max=10,value=8),
          img(src="www/funny_cats.jpg")
)#wellPanel

Des chats plus ou moins mignons

mignonnitude

Dans la partie UI, il y a souvent des parenthèses et des virgules dans tous les sens… alors pour m’y retrouver j’indique parfois ce qui est fermé par les parenthèses fermantes en commentaire…

Layouts prédéfinis

On peut par ailleurs utiliser des types de layouts prédéfinis pour organiser son appli…

fluidRow() permet de définir précisément l’organisation de l’appli, en lignes et colonnes. Chaque ligne compte 12 unités de largeur au total.
flowLayout() adapte le layout en fonction de la taille totale de l’élément et la taille des éléments qui le composent.

Vous pouvez tester la différence entre ces types de layout en modifiant la taille de la fenêtre…

Layouts prédéfinis

sidebarLayout() permet de diviser la fenêtre en deux éléments: un élément latéral plus étroit (qui contiendra généralement des input widgets) et un élément principal (qui contiendra généralement des outputs).
splitLayout() permet de diviser la fenêtre en éléments de taille égale. Si le contenu des éléments est trop important l’élément devient “scrollable”.
verticalLayout() dispose les éléments les uns en dessous des autres.

Layouts en couches/menus/onglets

Plusieurs types de menus (en terme d’apparence) sont possibles:

tabsetPanel correspond à un menu de type “onglets”.
navlistPanel correspond à un menu vertical
navbarPage correspond à un menu horizontal.

Tutoriel Shiny Partie 3: Panels et layouts

Panels(1)

Panels (2)

Layouts prédéfinis

Layouts prédéfinis

Layouts en couches/menus/onglets

Tutoriel Shiny
Partie 3: Panels et layouts