Thumbnail
Thumbnail uľahčuje zobrazenie väčších obrázkov alebo iných médií zobrazením ich menšieho náhľadu. Je ho možné použiť samostatne ale aj v iných elementoch.
Základné použitie
Ukážka zobrazuje thumbnail ako jednoduchý náhľadový prvok bez ďalších kompozičných vzťahov.
Použitie v Itemoch
Pri použití v elementoch Item. sa jeho veľkosť prispôsobí veľkosti rodiča a jeho pozíciu je možné určiť pridaním slotu s hodnotou start pre umiestnenie vľavo, alebo end pre umiestnenie vpravo.
Vlastné štýly
Ukážka sa sústreďuje na vizuálne ladenie thumbnailu cez CSS premenné, nie na zmenu jeho markupu.
Kedy použiť
Použite wje-thumbnail na zobrazenie obsahu, ktorý zlepšuje čitateľnosť, skenovateľnosť alebo kontext informácií.
Kedy nepoužiť
Nepoužívajte ho ako náhradu za štruktúrované dáta tam, kde je potrebná presná interakcia.
Prístupnosť
Doplňte alternatívny text pre obrázky, čitateľné kontrasty a textové ekvivalenty pre ikony bez popisu.
Odporúčané postupy
- Komprimujte médiá a používajte lazy loading pri veľkých zoznamoch.
- Pri kartách a zoznamoch držte konzistentné informačné priority.
- Neopakujte rovnakú informáciu súčasne textom aj ikonou bez pridanej hodnoty.
Atribúty a vlastnosti
Pre tento komponent nie sú dostupné žiadne vlastnosti.
Udalosti
Pre tento komponent nie sú dostupné žiadne udalosti.
Metódy
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS tieňové časti
Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.
CSS vlastné premenné
| Názov | Popis |
|---|---|
--wje-thumbnail-width | Vlastná CSS premenná, ktorá riadi width. |
--wje-thumbnail-height | Vlastná CSS premenná, ktorá riadi height. |
--wje-thumbnail-border-radius | Vlastná CSS premenná, ktorá riadi zaoblenie rohov. |
Sloty
| Názov | Popis |
|---|---|
thumbnail-slot | Slot pre obsah náhľadu miniatúry. |