AppShell

Jedna powłoka aplikacji Skribly, złożona z części opisanych niżej: przełącznik aplikacji w lewym górnym rogu, panel boczny z sekcjami For you i Recent, wyszukiwanie, które otwiera CommandPalette, Create, miejsce na powiadomienia dla Inbox, ustawienia i konto. Wybierz ją dla każdego ekranu Hub i Trackera po zalogowaniu. Każde słowo jest propem, a linki renderuje linkComponent, więc aplikacja przekazuje link swojego routera, na przykład ten z Next.js, a biblioteka nie importuje żadnego routera.

AppShell

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Dzień, podgląd: AppShell

My issues

Press Ctrl+[ or Cmd+[ to hide the sidebar, Ctrl+K or Cmd+K to search.

Noc, podgląd: AppShell

My issues

Press Ctrl+[ or Cmd+[ to hide the sidebar, Ctrl+K or Cmd+K to search.

Wysoki kontrast, podgląd: AppShell

My issues

Press Ctrl+[ or Cmd+[ to hide the sidebar, Ctrl+K or Cmd+K to search.

UżycieLink do sekcji Użycie

tsx

import { AppShell } from '@skribly/ui/shell'

tsx

<AppShell
  labels={labels}
  apps={registryApps}
  currentAppId="tracker"
  forYou={[{ href: '/inbox', label: 'Inbox' }]}
  recent={recent}
  current={pathname}
  commands={commands}
  create={{ label: 'Create', onPress: openCreate }}
  notifications={{ label: 'Notifications, 2 new', title: 'Notifications', badge: 2, content: <Inbox compact … /> }}
  settings={{ label: 'Settings', href: '/settings' }}
  account={{ name, links: [{ href: '/profile', label: 'Profile' }], actions: [{ id: 'out', label: 'Sign out', onPress: signOut }] }}
  linkComponent={Link}
>
  <MainContent>…</MainContent>
</AppShell>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

DostępnośćLink do sekcji Dostępność

Klawisz Tab przechodzi przez linki pomijające, przycisk panelu bocznego, przełącznik aplikacji, wyszukiwanie, Create, powiadomienia, ustawienia i konto, a potem przez linki panelu bocznego i stronę.
Ctrl+[ i Cmd+[ chowają i pokazują panel boczny.
Przycisk zgłasza aria-expanded, a region statusu typu polite ogłasza nowy stan.
Poniżej 48 rem ten sam przycisk i te same klawisze otwierają panel boczny jako arkusz modalny.
Wyszukiwanie oraz Ctrl+K i Cmd+K otwierają paletę poleceń.
Escape ją zamyka, a fokus wraca tam, gdzie był.
Bieżąca aplikacja ma aria-current i znak zaznaczenia, nie tylko kolor.
Każda kontrolka ma co najmniej 44 px na ekranie dotykowym, a powłoka mieści się w 320 px bez przewijania w bok: długie nazwy się zawijają albo są skracane, a pełna nazwa jest w panelu.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.