ActivityBar

Kolumna ikon widoków na krawędzi początku aplikacji desktopowej. ActivityItem pokazuje widok z dymkiem podpowiedzi, skrótem i plakietką; ustawienia i pomoc przypnij na dole przez footer.

ActivityBar
ActivityItem

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ActivityBar

Noc, podgląd: ActivityBar

Wysoki kontrast, podgląd: ActivityBar

UżycieLink do sekcji Użycie

tsx

import { ActivityBar, ActivityItem } from '@skribly/ui/shell'

tsx

<ActivityBar label="Views" footer={<ActivityItem label="Settings" onPress={…}><Settings /></ActivityItem>}>
  <ActivityItem label="Agents" tip="Terminals and chats" shortcut="⌘2" badge={2} badgeLabel="2 waiting" isCurrent><Bot /></ActivityItem>
</ActivityBar>

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

Landmark nawigacji z listą przycisków 40 px nazwanych swoimi etykietami.
Bieżący widok ma aria-current="page", akcent i linię na krawędzi. badgeLabel jest odczytywane razem z nazwą i pokazane w dymku podpowiedzi, więc liczba nigdy nie opiera się na swoim kolorze.
Dymki otwierają się po najechaniu i przy fokusie z klawiatury, zamykają klawiszem Escape i zostają, gdy są najechane.

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