Thumbnail
Thumbnail makes it easier to view larger images or other media by displaying a smaller preview of them. It can be used alone but also in other elements.
Basic usage
The sample shows the thumbnail as a simple thumbnail element with no other compositional relationships.
Use in Items
When used in Item. elements, its size adjusts to the size of the parent, and its position can be specified by adding a slot with a value of start for left positioning, or end for right positioning.
Custom styles
The demonstration focuses on visually tweaking the thumbnail via CSS variables, not on changing its markup.
When to use
Use wje-thumbnail to display content that improves the readability, scannability, or context of the information.
When not to use
Do not use it as a substitute for structured data where precise interaction is needed.
Accessibility
Add alternative text for images, legible contrasts and text equivalents for icons without descriptions.
Recommended practices
- Compress media and use lazy loading for large lists.
- Keep information priorities consistent for tabs and lists.
- Do not repeat the same information in text and icon at the same time without adding value.
Attributes and properties
Pre tento komponent nie sú dostupné žiadne vlastnosti.
Events
Pre tento komponent nie sú dostupné žiadne udalosti.
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.
CSS custom variables
| 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. |
Slots
| Názov | Popis |
|---|---|
thumbnail-slot | Slot pre obsah náhľadu miniatúry. |