Banner

Pasek na pełną szerokość u góry strony albo panelu dla stanu, który trwa, takiego jak tryb tylko do odczytu albo utrata połączenia.

Banner

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: Banner

Warning: Read-only mode

The plan has ended, so changes are not saved until it is renewed.

Error: You are offline

Changes are kept on this device and sent when the connection returns.

Information: A new version is ready

Page content

Noc, podgląd: Banner

Warning: Read-only mode

The plan has ended, so changes are not saved until it is renewed.

Error: You are offline

Changes are kept on this device and sent when the connection returns.

Information: A new version is ready

Page content

Wysoki kontrast, podgląd: Banner

Warning: Read-only mode

The plan has ended, so changes are not saved until it is renewed.

Error: You are offline

Changes are kept on this device and sent when the connection returns.

Information: A new version is ready

Page content

UżycieLink do sekcji Użycie

tsx

import { Banner } from '@skribly/ui/feedback'

tsx

<Banner tone="warn" toneLabel={t('tone.warning')} title="Read-only mode" sticky actions={<Button size="sm">Renew</Button>}>
  Changes are not saved until the plan is renewed.
</Banner>

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

Region nazwany przez słowo tonu i tytuł, więc jest wymieniany z landmarkami.
Ustaw live, gdy baner pojawia się po załadowaniu strony, na przykład po utracie połączenia.
Akcje zawijają się pod tekst na wąskich ekranach.
Przycisk zamknięcia tylko go ukrywa; stan, o którym informuje, trwa, dopóki nie zostanie naprawiony.

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