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
Esikatselu
Käyttötarkoitus
Voit näyttää toiminnot pudotusvalikossa, jos kaikkien toimintojen esittäminen painikkeina veisi liikaa tilaa tai kiinnittäisi tarpeettoman paljon asiakkaan huomiota.
Tee näin
- Käytä pudotusvalikkoa, kun valittavat kohteet ovat toimintoja tai linkkejä.
- Käytä tarvittaessa käyttöliittymäkuvakkeita.
Älä tee näin
- Älä käytä pudotusvalikkoa, kun valittavia kohteita tulee pystyä valitsemaan useita.
- Älä käytä pudotusvalikkoa, kun asiakkaan tulee nähdä selkeästi kaikki valittavissa olevat vaihtoehdot. Esitä silloin toiminnot esim. painikkeina.
Saavutettavuus
Komponentti lisää painikkeelle automaattisesti aria-haspopup ja aria-expanded -attribuutit ruudunlukijoita varten.
Komponentti muodostaa vaihtoehdoista <ul></ul>-listan.
Jos käytät DropdownMenuItem-komponentin active-tilaa korostamaan aktiivista/valittua toimintoa, muista lisätä aria-current-attribuutti ruudunlukijoille.
Komponentti tukee näppäimistönavigaatiota alla olevilla näppäimillä. Huom. ruudunlukijan käyttö saattaa vaikuttaa näppäimiin.
Kohdistus pysyy auki olevassa valikossa näppäimistöllä selatessa. Tarvittaessa a11yHideSelectors-propin kautta voi antaa listan elementtien selektoreita, jotka piilotetaan ruudunlukijalta.
| Näppäin | Toiminto |
|---|---|
| Enter | Avaa / sulje valikko. Valitsee toiminnon, kun kohdistus on valikon toiminnossa. |
| Välilyönti | Avaa / sulje valikko. |
| Esc | Sulje valikko. |
| Tab | Siirry seuraavaan toimintoon. Valikko suljetaan ja kohdistus palaa avauspainikkeeseen, kun kohdistus poistuu valikosta. |
| Shift + Tab | Siirry edelliseen toimintoon. Kohdistus palaa avauspainikkeeseen ja siitä poistuessa valikko suljetaan. |
| ↓ | Siirry seuraavaan toimintoon. Ensimmäinen painallus avaa valikon. |
| ↑ | Siirry edelliseen toimintoon. |