Dropdown
Dropdown-komponentti toimintojen näyttämiseen valikossa. Käytä pudotusvalikkoa, kun on tarve esittää useita vaihtoehtoisia toimintoja tai linkkejä avattavassa ryhmässä.
Julkaistu versiossa 0.15.3
HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta Käyttö ilman Reactia.
Esikatselu
Valikko
Valikon painikkeiden ja linkkien eri tilat
CSS-luokat
| CSS-luokka | Arvo | Kuvaus |
|---|---|---|
kds-dropdown |
Komponentin perusluokka | |
kds-dropdown--xs |
Tiivistetty valikko | |
kds-dropdown--open |
Komponentin avattu tila | |
kds-dropdown__menu |
Valikkoelementti | |
kds-dropdown__menu--xs |
Tiivistetty valikko | |
kds-dropdown__menu--full-width |
Valikko, jonka maksimileveyttä ei ole rajoitettu | |
kds-dropdown__menu--show |
Valikkoelementin avattu tila | |
kds-dropdown__menu--max-h-[maxHeight] |
md, lg, full |
Valikon maksimikorkeus |
kds-dropdown__list |
Lista toimintoja | |
kds-dropdown__heading |
Otsikko | |
kds-dropdown__divider |
Erotinviiva | |
kds-dropdown__item |
Toiminto | |
kds-dropdown__item--active |
Aktiivinen toiminto | |
kds-dropdown__item--danger |
Toiminnon danger-variantti | |
kds-dropdown__item--disabled |
Estetty toiminto | |
kds-dropdown__item-children |
Toiminnon sisältö | |
kds-dropdown__item-icon |
Toiminnon ikoni |