Topbar

Pasek nad główną kolumną z wyszukiwaniem i akcjami z ikonami. TopbarIcon to przycisk z ikoną i dymkiem podpowiedzi; nadaj mu isSelected dla przełącznika, takiego jak tryb ciemny, albo owiń go w MenuTrigger.

Topbar
TopbarIcon

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Topbar

Projects

Noc, podgląd: Topbar

Projects

Wysoki kontrast, podgląd: Topbar

Projects

UżycieLink do sekcji Użycie

tsx

import { Topbar, TopbarIcon } from '@skribly/ui/shell'

tsx

<Topbar menuLabel="Open navigation">
  <SearchField … />
  <TopbarIcon label="Notifications, 3 new" badge="3"><Bell /></TopbarIcon>
  <TopbarIcon label="Dark mode" isSelected={dark} onChange={setDark}><Moon /></TopbarIcon>
</Topbar>

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

Górny pasek jest landmarkiem banner i zawija się zamiast ucinać treść przy 320 px.
TopbarIcon jest nazwany swoją etykietą, pokazuje ją jako dymek podpowiedzi po najechaniu i przy fokusie z klawiatury, a przełącznik zgłasza aria-pressed.
Plakietka jest ukryta przed czytnikami ekranu, więc liczbę niesie etykieta.

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