ImagePlaceholder

Pole, które zastępuje brakujący, ładujący się albo uszkodzony obraz oraz pliki bez obrazu. Wybierz je wszędzie tam, gdzie obrazu może nie być, aby układ nigdy nie skakał.

ImagePlaceholder

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: ImagePlaceholder

Image could not load

Noc, podgląd: ImagePlaceholder

Image could not load

Wysoki kontrast, podgląd: ImagePlaceholder

Image could not load

UżycieLink do sekcji Użycie

tsx

import { ImagePlaceholder } from '@skribly/ui/media'

tsx

<ImagePlaceholder kind="pdf" label="PDF" />
<ImagePlaceholder state="loading" label="Loading image" />
<ImagePlaceholder state="error" label="Image could not load"
  action={<Button size="sm" variant="outline" onPress={retry}>Try again</Button>} />

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

Z label jest obrazem o tej nazwie, a opis jest z nim powiązany; bez niego jest ukryte.
Ładowanie jest oznaczone jako zajęte, a jego pulsowanie zatrzymuje się przy ograniczonym ruchu.
Stan błędu pokazuje znak uszkodzonego obrazu i słowa, a gdy zawiera akcję, staje się grupą.

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