Dropdown-komponentti toimintojen näyttämiseen valikossa. Käytä pudotusvalikkoa, kun on tarve esittää useita vaihtoehtoisia toimintoja tai linkkejä avattavassa ryhmässä.
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ä.
Ä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 huomioi saavutettavuuden seuraavasti:
Komponentti lisää valikkoa kontrolloivalle painikkeelle automaattisesti aria-haspopup- ja aria-expanded-attribuutit ruudunlukijoita varten.
Komponentti muodostaa vaihtoehdoista listan, joita voi olla useampia, jos valintoja on tarve ryhmitellä.
Kohdistus ja ruudunlukijan virtuaalikursori pysyvät auki olevassa valikossa ja sitä kontrolloivassa painikkeessa.
Muut elementit sivulta piilotetaan aria-hidden-attribuutilla.
a11yHideSelectors-propin kautta voi tarvittaessa antaa lisää elementtien selektoreita, jotka piilotetaan ruudunlukijalta.
hasFocusTrap-propin kautta voi estää aria-hidden-attribuutin lisäämisen esimerkiksi mobiililaitteissa, jolloin valikosta pääsee helpommin pois.
Sovelluksen vastuulle jää huomioida seuraavat asiat:
Jos käytät DropdownMenuItem-komponentin active-tilaa korostamaan aktiivista tai 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.
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.
Esimerkit
Valikko
function ExampleDropdown() {
const [isOpen, setIsOpen] = useState(false);
return (
<Dropdown isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
<DropdownToggle variant="primary">Toiminnot</DropdownToggle>
<DropdownMenu>
<DropdownMenuGroupHeading>Valitse toiminto</DropdownMenuGroupHeading>
<DropdownMenuGroup>
<DropdownMenuItem href="#" iconBefore={<IconUiEdit />}>
Päivitä omia tietoja
</DropdownMenuItem>
<DropdownMenuItem href="#" iconBefore={<IconUiPersons />}>
Asioi toisen henkilön puolesta
</DropdownMenuItem>
<DropdownMenuItem divider />
<DropdownMenuItem href="#" iconBefore={<IconUiDoorExit />} variant="danger">
Kirjaudu ulos
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenu>
</Dropdown>
);
}
Valikon painikkeiden ja linkkien eri tilat
function ExampleDropdown() {
const [isOpen, setIsOpen] = useState(false);
return (
<Dropdown isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
<DropdownToggle variant="primary">Toiminnot</DropdownToggle>
<DropdownMenu>
<DropdownMenuGroupHeading>Linkit</DropdownMenuGroupHeading>
<DropdownMenuGroup>
<DropdownMenuItem href="#">Linkki</DropdownMenuItem>
<DropdownMenuItem active href="#">
Linkki, aktiivinen
</DropdownMenuItem>
<DropdownMenuItem disabled href="#">
Linkki, estetty
</DropdownMenuItem>
<DropdownMenuItem active disabled href="#">
Linkki, aktiivinen ja estetty
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuItem divider />
<DropdownMenuGroupHeading>Painikkeet</DropdownMenuGroupHeading>
<DropdownMenuGroup>
<DropdownMenuItem as="button">Painike</DropdownMenuItem>
<DropdownMenuItem as="button" active>
Painike, aktiivinen
</DropdownMenuItem>
<DropdownMenuItem as="button" disabled>
Painike, estetty
</DropdownMenuItem>
<DropdownMenuItem as="button" active disabled>
Painike, aktiivinen ja estetty
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenu>
</Dropdown>
);
}
Kohdistuksen palauttaminen painikkeeseen
Kohdistuksen palauttamisen valikon avaavaan painikkeeseen voi toteuttaa DropdownToggle-komponentille välitettävän ref-propin avulla.
Valikkoa voi tiivistää asettamalla size="xs" propin. Tiivistä asettelua käytetään tarvittaessa asiantuntijakäyttöliittymissä.
function ExampleDropdown() {
const [isOpen, setIsOpen] = useState(false);
return (
<Dropdown isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} size="xs">
<DropdownToggle variant="primary">Toiminnot</DropdownToggle>
<DropdownMenu>
<DropdownMenuGroupHeading>Valitse toiminto</DropdownMenuGroupHeading>
<DropdownMenuGroup>
<DropdownMenuItem href="#" iconBefore={<IconUiEdit />}>
Päivitä omia tietoja
</DropdownMenuItem>
<DropdownMenuItem href="#" iconBefore={<IconUiPersons />}>
Asioi toisen henkilön puolesta
</DropdownMenuItem>
<DropdownMenuItem divider />
<DropdownMenuItem href="#" iconBefore={<IconUiDoorExit />} variant="danger">
Kirjaudu ulos
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenu>
</Dropdown>
);
}
Valikon renderöinti Portalin avulla
Valikko voidaan renderöidä Portal-komponentillausePortal-proppia käyttäen. Tämä on tarpeellista silloin, kun ympäröivä elementti ei salli sisällön näyttämistä sen ulkopuolella.
function ExampleDropdown() {
const [isOpen, setIsOpen] = useState(false);
return (
<Dropdown isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} usePortal>
<DropdownToggle variant="primary">Toiminnot</DropdownToggle>
<DropdownMenu>
<DropdownMenuGroupHeading>Valitse toiminto</DropdownMenuGroupHeading>
<DropdownMenuGroup>
<DropdownMenuItem href="#" iconBefore={<IconUiEdit />}>
Päivitä omia tietoja
</DropdownMenuItem>
<DropdownMenuItem href="#" iconBefore={<IconUiPersons />}>
Asioi toisen henkilön puolesta
</DropdownMenuItem>
<DropdownMenuItem divider />
<DropdownMenuItem href="#" iconBefore={<IconUiDoorExit />} variant="danger">
Kirjaudu ulos
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenu>
</Dropdown>
);
}
Valikon maksimikorkeuden asettaminen
Valikon korkeutta voi muuttaa maxHeight-propin tai --kds-dropdown-menu-max-height CSS-muuttujan avulla. Oletuksena se on 50 % ruudunkorkeudesta ja sen voi poistaa käytöstä null-arvolla.
Komponentin hasFocusTrap-propilla voi vaikuttaa lukitaanko ruudunlukijoiden kohdistus valikkoon.
Arvo false poistaa lukitsemisen käytöstä kokonaan ja arvo desktop säilyttää sen vain työpöytäselaimilla, jolloin mobiiliselaimilla pääsee helpommin pois valikosta.
Huomioi seuraavat asiat:
Painikkeesta valikkoon siirtyminen ei toimi oikein ruudunlukijoilla usePortal-propin kanssa.
Valikko ei välttämättä sulkeudu, kun siitä siirrytään ulos mobiililaitteiden ruudunlukijoilla pyyhkäisytoiminnolla.
function ExampleDropdown() {
const [isOpen, setIsOpen] = useState(false);
return (
<Dropdown isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} hasFocusTrap="desktop">
<DropdownToggle variant="primary">Toiminnot</DropdownToggle>
<DropdownMenu>
<DropdownMenuGroupHeading>Valitse toiminto</DropdownMenuGroupHeading>
<DropdownMenuGroup>
<DropdownMenuItem href="#" iconBefore={<IconUiEdit />}>
Päivitä omia tietoja
</DropdownMenuItem>
<DropdownMenuItem href="#" iconBefore={<IconUiPersons />}>
Asioi toisen henkilön puolesta
</DropdownMenuItem>
<DropdownMenuItem divider />
<DropdownMenuItem href="#" iconBefore={<IconUiDoorExit />} variant="danger">
Kirjaudu ulos
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenu>
</Dropdown>
);
}