Web app layout

Rama strony aplikacji webowych: linki pomijające, panel boczny, górny pasek i główna kolumna. Wybierz ją dla każdego ekranu po zalogowaniu; useAppLayout daje własnej kontrolce ten sam stan co przycisk menu.

AppLayout

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Web app layout

Board

Website relaunch

Issues grouped by status.

useAppLayout: wide layout. The sidebar stands beside the content.

Noc, podgląd: Web app layout

Board

Website relaunch

Issues grouped by status.

useAppLayout: wide layout. The sidebar stands beside the content.

Wysoki kontrast, podgląd: Web app layout

Board

Website relaunch

Issues grouped by status.

useAppLayout: wide layout. The sidebar stands beside the content.

UżycieLink do sekcji Użycie

tsx

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

tsx

<AppLayout
  skipLinkLabel="Skip to content"
  skipToNavLabel="Skip to navigation"
  sidebar={<Sidebar label="Sidebar" closeLabel="Close navigation">…</Sidebar>}
  topbar={<Topbar menuLabel="Open navigation">…</Topbar>}
>
  <MainContent>…</MainContent>
</AppLayout>

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ść

Pierwszy Tab pokazuje link pomijający do landmarku main, a drugi do nawigacji, która w wąskim układzie otwiera arkusz.
Poniżej 48 rem panel boczny staje się arkuszem modalnym: fokus wchodzi do niego, zostaje w środku i wraca na przycisk menu po klawiszu Escape.
Ustaw embedded dla podglądów, aby strona zachowała jeden zestaw landmarków.

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