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.
Sur cette page
Playground
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.
Connecté
Fond
<div class="feitio-app-frame" style="block-size: 22rem; inline-size: min(100%, 24rem); overflow-y: auto; border: var(--feitio-border-width) solid var(--feitio-color-line)"><div class="feitio-app"><header class="feitio-app-header" data-hide-on-scroll><a class="brand" href="#pg-app-content">Produit</a><button type="button" class="feitio-button menu" data-size="small" popovertarget="pg-app" aria-controls="pg-app">Menu<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-menu"></use></svg></button></header><nav class="feitio-drawer feitio-app-nav" id="pg-app" popover aria-label="Menu"><div class="drawer-header"><h2>Menu</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-app" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Fermer</button></div><div class="drawer-body"><nav class="feitio-nav"><div class="group"><p class="group-title">Travail</p><ul><li><a href="#playground" aria-current="page"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg>Rendez-vous</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-task"></use></svg>Tâches</a></li></ul></div><div class="group"><p class="group-title">Produit</p><ul><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-sliders"></use></svg>Réglages</a></li></ul></div></nav></div></nav><div class="feitio-app-main" id="pg-app-content" tabindex="-1"><div style="padding: var(--feitio-space-4)"><h3>Rendez-vous</h3><p>Rappel 1: chaque semaine, 8h.</p><p>Rappel 2: chaque semaine, 9h.</p><p>Rappel 3: chaque semaine, 10h.</p><p>Rappel 4: chaque semaine, 11h.</p><p>Rappel 5: chaque semaine, 12h.</p><p>Rappel 6: chaque semaine, 13h.</p><p>Rappel 7: chaque semaine, 14h.</p><p>Rappel 8: chaque semaine, 15h.</p><p>Rappel 9: chaque semaine, 16h.</p><p>Rappel 10: chaque semaine, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span><a class="feitio-button feitio-back-to-top" data-size="small" href="#pg-app-content"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg>Haut</a></div></div></div>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
<div class="feitio-app-frame">
<div class="feitio-app">
<header class="feitio-app-header" data-hide-on-scroll>
<a class="brand" href="/">Produto</a>
<button type="button" class="feitio-button menu" data-size="small" popovertarget="menu">Menu…</button>
</header>
<nav class="feitio-drawer feitio-app-nav" id="menu" popover aria-label="Principal">…</nav>
<main class="feitio-app-main" id="conteudo" tabindex="-1">
…
<span class="feitio-scroll-fade" aria-hidden="true"></span>
<a class="feitio-button feitio-back-to-top" data-size="small" href="#conteudo">…Topo</a>
</main>
</div>
</div>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
<!-- o mesmo HTML: a moldura mede a própria largura -->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
Contenu
- brand : mène à l'accueil.
- actions, optionnel : ce qui est utilisé constamment.
- menu : ouvre le tiroir, sur la droite, par le pouce.
- 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 :
<header>, un<nav>nommé,<main>. - Le SkipLink est le premier élément de la page.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-app-frame" | autour | Il mesure sa propre largeur et choisit le formulaire. |
class="feitio-app" | obligatoire | La grille des régions. |
data-hide-on-scroll | sur l'en-tête | Caché lors du défilement vers le bas, sur mobile. |
class="feitio-drawer feitio-app-nav" | avec popover | Menu latéral sur mobile, colonne sur grands écrans. |