MediaTile

Jeden plik: miniatura albo znak jego rodzaju, nazwa, rozmiar i uwaga. Użyj go osobno w panelu bocznym albo widoku szczegółów; MediaGrid używa go dla każdego kafelka.

MediaTile

PodglądLink do sekcji Podgląd

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

Dzień, podgląd: MediaTile

webp

harbour-at-dawn.webp

Image · 182 KB · 1920×1080

webp

north-ridge-panorama-from-the-upper-hut-in-late-october-final-version-2.webp

Image · 410 KB · 2400×1000

No alt text

pdf

release-notes-2026.pdf

PDF · 320 KB · 4 pages

missing-thumbnail.jpg

Image · 1.4 MB

Thumbnail missing

dunes.avif

Image (avif) · 74 KB · 1200×800

Decorative

Noc, podgląd: MediaTile

webp

harbour-at-dawn.webp

Image · 182 KB · 1920×1080

webp

north-ridge-panorama-from-the-upper-hut-in-late-october-final-version-2.webp

Image · 410 KB · 2400×1000

No alt text

pdf

release-notes-2026.pdf

PDF · 320 KB · 4 pages

missing-thumbnail.jpg

Image · 1.4 MB

Thumbnail missing

dunes.avif

Image (avif) · 74 KB · 1200×800

Decorative

Wysoki kontrast, podgląd: MediaTile

webp

harbour-at-dawn.webp

Image · 182 KB · 1920×1080

webp

north-ridge-panorama-from-the-upper-hut-in-late-october-final-version-2.webp

Image · 410 KB · 2400×1000

No alt text

pdf

release-notes-2026.pdf

PDF · 320 KB · 4 pages

missing-thumbnail.jpg

Image · 1.4 MB

Thumbnail missing

dunes.avif

Image (avif) · 74 KB · 1200×800

Decorative

UżycieLink do sekcji Użycie

tsx

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

tsx

<MediaTile file={{ id: 1, name: 'harbour.webp', kind: 'image', kindLabel: 'Image',
  src, alt: 'Hills over a calm bay', details: '182 KB · 1920×1080',
  notice: { tone: 'warn', label: 'No alt text' } }}
  brokenLabel="Preview not available"
  actions={<Button size="sm" variant="outline">Edit</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ść

Miniatura używa tekstu alternatywnego pliku, albo żadnego dla obrazów dekoracyjnych, więc nazwa nie jest odczytywana dwa razy.
Miniatura, która się nie załaduje, staje się nazwanym zastępnikiem w tonie niebezpieczeństwa.
Długie nazwy zawijają się do dwóch linii i zostają w całości dla czytników ekranu.
Przyciski są widoczne zamiast pojawiać się po najechaniu, a stan zaznaczenia to ramka i zaznaczone pole, a nie kolor.

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