List
The List (List) component consists of multiple Item elements (items) and can contain text, buttons, toggles, icons, image thumbnails, and much more. Sheets generally contain items with the same content and group them into a larger whole.
Basic usage
The demonstration presents the sheet as a basic container for multiple items with a uniform rhythm and indentation.
Nested leaf
Setting the value of the inset property to true adds a margin to the element's surroundings to create a nested list.
Line separation
Vlastnosť lines upravuje spodný okraj itemov. Nastavením tejto vlastnosti na hodnotu "none" sa nezobrazia žiadne okraje medzi položkami zoznamu.
When to use
Use wje-list 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 description.
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 with no added value.
Attributes and properties
Pre tento komponent nie sú dostupné žiadne vlastnosti.
Events
Pre tento komponent nie sú dostupné žiadne udalosti.
Metódy
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-list-inset-padding | Vlastná CSS premenná, ktorá riadi inset padding. |
--wje-list-border-radius | Vlastná CSS premenná, ktorá riadi zaoblenie rohov. |
--wje-list-background | Vlastná CSS premenná na štýlovanie komponentu (background). |
Sloty
| Názov | Popis |
|---|---|
default | Predvolený slot pre hlavný obsah komponentu. |