Notification-Center
Glocke mit Unread-Badge, gruppierter Liste und Segmentfilter. Auf dem Desktop öffnet ein Popover, auf dem Smartphone ein Bottom-Sheet; ungelesene Einträge lassen sich wischen oder über einen Button als gelesen markieren. Die Anzahl ungelesener Einträge wird als Satz angesagt.
In der Kopfzeile
Die Glocke sitzt in einer App-Kopfzeile und trägt die Zahl der ungelesenen Einträge. Ein Klick öffnet auf dem Desktop ein Popover, auf dem Smartphone ein Bottom-Sheet.
Station 3B
Dienstplan · Mittwoch
Verhalten
Die Liste gruppiert nach lokalem Datum, filtert über ein Segment und lässt sich per Wischgeste oder Button aufräumen.
- Gruppen„Heute“, „Gestern“ und „Älter“ entstehen aus dem lokalen Datum; Zeit und Datum formatiert `Intl` in der Provider-Sprache.
- FilterDas Segmented-Steuerelement wechselt zwischen allen und nur ungelesenen Einträgen. Ohne Treffer erscheint ein eigener Leerzustand.
- Gelesen markierenAuf Touch-Geräten wischt die Zeile nach rechts; der Button daneben ist die Tastatur- und Maus-Alternative.
- Neue EinträgeNeue Zeilen blenden mit `m` und `AnimatePresence` ein; bei reduzierter Bewegung bleibt ein kurzer Crossfade.
Barrierefreiheit
Die Glocke ist ein benannter Button, der Badge ist dekorativ. Die Anzahl ungelesener Einträge steht als ganzer Satz in einer Live-Region, die schon vor dem ersten Eintrag im DOM liegt.
Auf schmalen Viewports wird aus dem Popover ein Bottom-Sheet; Escape schließt beide und gibt den Fokus an die Glocke zurück. Die Zeilen tragen Zeitpunkt und Kategorie als Text, nicht nur als Farbe.