AppShell
Layout eines Produkts in Regionen. Geboren auf Mobile: Header oben, Inhalt darunter, Navigation in einem Drawer; auf breiten Bildschirmen wird der Drawer zur Seitenleiste.
Auf dieser Seite
Playground
Termine
Erinnerung 1: jede Woche, 8h.
Erinnerung 2: jede Woche, 9h.
Erinnerung 3: jede Woche, 10h.
Erinnerung 4: jede Woche, 11h.
Erinnerung 5: jede Woche, 12h.
Erinnerung 6: jede Woche, 13h.
Erinnerung 7: jede Woche, 14h.
Erinnerung 8: jede Woche, 15h.
Erinnerung 9: jede Woche, 16h.
Erinnerung 10: jede Woche, 17h.
Angemeldet
Hintergrund
<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">Produkt</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>Schließen</button></div><div class="drawer-body"><nav class="feitio-nav"><div class="group"><p class="group-title">Arbeit</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>Termine</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-task"></use></svg>Aufgaben</a></li></ul></div><div class="group"><p class="group-title">Produkt</p><ul><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-sliders"></use></svg>Einstellungen</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>Termine</h3><p>Erinnerung 1: jede Woche, 8h.</p><p>Erinnerung 2: jede Woche, 9h.</p><p>Erinnerung 3: jede Woche, 10h.</p><p>Erinnerung 4: jede Woche, 11h.</p><p>Erinnerung 5: jede Woche, 12h.</p><p>Erinnerung 6: jede Woche, 13h.</p><p>Erinnerung 7: jede Woche, 14h.</p><p>Erinnerung 8: jede Woche, 15h.</p><p>Erinnerung 9: jede Woche, 16h.</p><p>Erinnerung 10: jede Woche, 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>Nach oben</a></div></div></div>Wann verwenden
- Auf jedem Bildschirm eines Produkts mit mehr als einem Zielort: ein Dashboard, eine Admin-Oberfläche.
Wann nicht verwenden
- Ein selbstständiger Leseseite oder Dokumentation: nur der Inhalt, oder DocPage.
Beispiele
Auf Mobilgeräten
Scrollen Sie im Rahmen und tippen auf Menü: die Schiebemenü öffnet sich von rechts, mit dem Konto und „Abmelden" im Footer. Am Ende des Inhalts ScrollFade und BackToTop.
Code anzeigen
<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>Bei großen Bildschirmen
Von einem 64rem-Rahmen wird die Schiebemenü zur Seitenleiste, mit dem Footer unten; Menü verschwindet. Das Beispiel wird auf die Hälfte geschrumpft.
Code anzeigen
<!-- o mesmo HTML: a moldura mede a própria largura -->Die Regionen
| Region | Was dort hingehört |
|---|---|
brand | Der Produktnamen, der nach Hause führt. Erforderlich. |
actions | Optional, maximal zwei Elemente, die immer verwendet werden. Nie das Konto oder „Abmelden". |
menu | Der Button, der die Schiebemenü öffnet, zuletzt rechts. Auf großen Bildschirmen verschwunden. |
nav | Eine Navigation, in einer Schiebemenü auf Mobilgeräten. |
nav-footer | Optional: wer ist angemeldet, "Abmelden", die Version. |
main | Der Bildschirm selbst, mit der Hauptaufgabe zuerst. Trägt ScrollFade und BackToTop. |
Anatomie
Inhalt
- Marke: führt nach Hause.
- Aktionen, optional: was ständig genutzt wird.
- Menü: öffnet die Schublade, rechts, am Daumen.
- Hauptinhalt: der Bildschirm selbst.
States
- Runter scrollen: der Header gleitet weg; nach oben scrollen, kehrt er zurück. Nahe dem oberen Rand oder mit Fokus darin bleibt er im Sichtfeld.
- Große Bildschirme: Inhalt stoppt bei 72rem und bleibt zentriert.
Do and don't
Do
Marke und Menü im Header; Konto und "Abmelden" im Footer der Schublade.
Was ständig genutzt wird, bleibt zur Hand; das Restliche wird weggeklappt.
Don’t
"Abmelden" fest verankert im Header, neben dem Menü, auf jedem Bildschirm.
Der beste Ort auf dem Bildschirm für die am wenigsten genutzte Aktion.
Barrierefreiheit
- Echte Regionen:
<header>, ein benanntes<nav>,<main>. - Der SkipLink ist das erste Element der Seite.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-app-frame" | um | Misst seine eigene Breite und wählt die Form. |
class="feitio-app" | erforderlich | Das Raster der Regionen. |
data-hide-on-scroll | am Header | Schwindet beim Scrollen nach unten, auf mobilen Geräten. |
class="feitio-drawer feitio-app-nav" | mit popover | Zugvorlage auf Mobile, Spalte auf breiten Bildschirmen. |