# AppShell Un produit's layout of regions. Born on mobile: header on top, content below, navigation in a Drawer; on wide screens, the drawer becomes the side column. ## Playground ```html
Produit

Rendez-vous

Rappel 1: chaque semaine, 8h.

Rappel 2: chaque semaine, 9h.

Rappel 3: chaque semaine, 10h.

Rappel 4: chaque semaine, 11h.

Rappel 5: chaque semaine, 12h.

Rappel 6: chaque semaine, 13h.

Rappel 7: chaque semaine, 14h.

Rappel 8: chaque semaine, 15h.

Rappel 9: chaque semaine, 16h.

Rappel 10: chaque semaine, 17h.

Haut
``` ## Quand l'utiliser - Sur chaque écran d'un produit avec plus d'un endroit pour aller: un tableau de bord, un admin. ## Quand ne pas l'utiliser - **Une page de lecture autonome** ou documentation : juste le contenu, ou DocPage. ## Exemples ### Sur mobile Faites défiler à l'intérieur du cadre et appuyez sur Menu : le tiroir glisse depuis la droite, avec le compte et "Se déconnecter" dans son pied de page. À la fin du contenu, ScrollFade et BackToTop. Afficher le code ```html
Produto
… …Topo
``` ### Sur les écrans larges À partir d'un cadre de 64rem, le tiroir devient la colonne latérale, avec son pied de page en bas ; Menu disparaît. L'exemple est réduit de moitié. Afficher le code ```html ``` ## Les régions Région Ce qui s'y trouve `brand` Le nom du produit, menant à l'accueil. Requis. `actions` Optionnel, au maximum deux éléments utilisés constamment. Jamais le compte ou "Se déconnecter". `menu` Le bouton qui ouvre le tiroir, dernier, à droite. Disparaît sur les écrans larges. `nav` Une navigation, à l'intérieur d'un Tiroir sur mobile. `nav-footer` Optionnel : qui est connecté, "Se déconnecter", la version. `main` L'écran lui-même, avec la tâche principale en premier. Porte ScrollFade et BackToTop. ## Anatomie 1. **brand :** mène à l'accueil. 2. **actions**, optionnel : ce qui est utilisé constamment. 3. **menu :** ouvre le tiroir, sur la droite, par le pouce. 4. **main :** l'écran lui-même. ## États - **Défilement vers le bas :** l'en-tête glisse ; vers le haut, il revient. Près du sommet, ou avec un focus à l'intérieur, il reste visible. - **Grandes écrans :** le contenu s'arrête à 72rem et reste centré. ## Faire et ne pas faire Do Marque et Menu dans l'en-tête ; compte et "Se déconnecter" dans le pied de page du tiroir. Ce qui est utilisé constamment reste à portée de main ; le reste, rangé. Don’t "Se déconnecter" fixé dans l'en-tête, à côté de Menu, sur chaque écran. Lieux de l'écran où se trouve l'action la moins utilisée. ## Accessibilité - Régions réelles : `
`, un `