ClosableTabs

Pasek otwartych dokumentów albo stron, które czytelnik może zamknąć, jak w edytorze lub przeglądarce. Kropka oznacza niezapisane zmiany i zamienia się w przycisk zamknięcia po najechaniu lub przy fokusie.

ClosableTabs

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ClosableTabs

App.tsx

README.md

a-very-long-file-name-that-does-not-fit.config.ts

Documentation

Status page

Noc, podgląd: ClosableTabs

App.tsx

README.md

a-very-long-file-name-that-does-not-fit.config.ts

Documentation

Status page

Wysoki kontrast, podgląd: ClosableTabs

App.tsx

README.md

a-very-long-file-name-that-does-not-fit.config.ts

Documentation

Status page

UżycieLink do sekcji Użycie

tsx

import { ClosableTabs } from '@skribly/ui/navigation'

tsx

<ClosableTabs label="Open files" items={files} selectedId={active} onSelect={setActive}
  onClose={close} closeLabel="Close" dirtyLabel="unsaved changes" emptyLabel="No open files" />

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

Klawisze strzałek przechodzą między kartami, Enter lub Spacja otwiera jedną, Delete lub Backspace zamyka kartę z fokusem, a fokus przechodzi na sąsiednią.
Każdy przycisk zamknięcia jest prawdziwym przyciskiem 24 px nazwanym razem z kartą, na przykład „Close App.tsx”, więc dosięgają go czytniki ekranu obsługiwane wskaźnikiem i dotykiem.
Stan niezapisany jest odczytywany jako część nazwy karty, a nie tylko pokazany kropką.

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