# 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. ## Playground ```html

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.

Nach oben

``` ## 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 ```html

… …Topo

``` ### 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 ```html ``` ## 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 1. **Marke:** führt nach Hause. 2. **Aktionen**, optional: was ständig genutzt wird. 3. **Menü:** öffnet die Schublade, rechts, am Daumen. 4. **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: `

`, ein benanntes `