StatusBar

Cienki pasek na dole aplikacji desktopowej. StatusBarItem pokazuje jeden fakt, jako tekst, przycisk albo link; StatusPill to zaokrąglone ustawienie, takie jak motyw.

StatusBar
StatusBarItem
StatusPill

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: StatusBar

Pills

SavedOfflineFailedSyncing

Noc, podgląd: StatusBar

Pills

SavedOfflineFailedSyncing

Wysoki kontrast, podgląd: StatusBar

Pills

SavedOfflineFailedSyncing

UżycieLink do sekcji Użycie

tsx

import { StatusBar, StatusBarItem, StatusPill } from '@skribly/ui/shell'

tsx

<StatusBar label="Status" end={<StatusPill icon={<Moon />} onPress={cycle} tip="Switch theme">Night</StatusPill>}>
  <StatusBarItem icon={<GitBranch />}>main</StatusBarItem>
  <StatusBarItem tone="danger" onPress={openDocker} tip="Containers that crashed">2 with problems</StatusBarItem>
</StatusBar>

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 contentinfo, który zawija się do drugiej linii w wąskim oknie.
Każdy ton łączy kolor z własnym znakiem i słowami: ptaszek dla ok, i dla info, trójkąt dla ostrzeżeń i krzyżyk dla błędów.
Elementy interaktywne mają co najmniej 24 px wysokości. isLive ogłasza element w trybie polite; jest domyślnie wyłączone, aby liczniki nie paplały.

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