EditorStatusBar

Pasek pod edytorem kodu: pozycja kursora jako przycisk „przejdź do linii”, zaznaczenie, stan niezapisany, język, kodowanie i końce linii.

EditorStatusBar

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: EditorStatusBar

export function cx(...names) {
  return names.filter(Boolean).join(' ')
}

UTF-8LF

Noc, podgląd: EditorStatusBar

export function cx(...names) {
  return names.filter(Boolean).join(' ')
}

UTF-8LF

Wysoki kontrast, podgląd: EditorStatusBar

export function cx(...names) {
  return names.filter(Boolean).join(' ')
}

UTF-8LF

UżycieLink do sekcji Użycie

tsx

import { EditorStatusBar } from '@skribly/ui/code'

tsx

<EditorStatusBar label={t('editor.status')} position={t('editor.position', cursor)}
  onPositionPress={goToLine} positionTip={t('editor.goToLine')} isDirty={tab.dirty}
  unsavedLabel={t('editor.unsaved')} facts={[{ id: 'lang', label: language }, { id: 'eol', label: 'LF' }]} />

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

Nazwana grupa zamiast landmarku stopki, więc kilka edytorów nie dodaje landmarków.
Pozycja kursora nie jest regionem na żywo, bo zmienia się przy każdym klawiszu; stan niezapisany jest ogłaszany raz przez region typu polite i pokazany znakiem ostrzeżenia z jego słowem.
Przyciski pokazują dymki podpowiedzi po najechaniu i przy fokusie z klawiatury i mają co najmniej 24 px; elementy zawijają się w wąskim panelu.

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