Sidebar

Ciemna kolumna nawigacji aplikacji webowych, z marką na górze i zalogowaną osobą u dołu. Zostaje ciemna w każdym motywie, tak jak Tracker.

Sidebar
SidebarUser

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Sidebar

Narrow the window: the sidebar becomes a sheet behind the menu button.

Noc, podgląd: Sidebar

Narrow the window: the sidebar becomes a sheet behind the menu button.

Wysoki kontrast, podgląd: Sidebar

Narrow the window: the sidebar becomes a sheet behind the menu button.

UżycieLink do sekcji Użycie

tsx

import { Sidebar, SidebarUser } from '@skribly/ui/shell'

tsx

<Sidebar label="Sidebar" closeLabel="Close navigation" header={<Brand />}
  footer={<SidebarUser name="Ada Lovelace" description="Admin" signOut={{ label: 'Sign out', onPress: signOut }} />}>
  <SidebarNav label="Main" current={pathname}>…</SidebarNav>
</Sidebar>

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

Nazwany landmark complementary.
Obwódka fokusa przechodzi na akcent nawigacji na ciemnej powierzchni.
Przycisk wylogowania jest nazwany swoją etykietą i pokazuje ją jako dymek podpowiedzi; długie nazwy się zawijają.
W trybie wymuszonych kolorów panel boczny zachowuje ramkę.

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