Esikatselu
function ExampleDropdown() {
const [isOpen, setIsOpen] = useState(false);
return (
<Dropdown isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
<DropdownToggle>Lorem ipsum</DropdownToggle>
<DropdownMenu>
<DropdownMenuGroup>
<DropdownMenuItem href="#">Dolor</DropdownMenuItem>
<DropdownMenuItem href="#">Sit amet</DropdownMenuItem>
<DropdownMenuItem href="#">Consectetur</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenu>
</Dropdown>
);
}
Käyttötarkoitus
Voit näyttää toiminnot pudotusvalikossa, jos kaikkien toimintojen esittäminen painikkeina veisi liikaa tilaa
tai kiinnittäisi tarpeettoman paljon asiakkaan huomiota.
- Ä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.
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.
function ExampleDropdown() {
const [isOpen, setIsOpen] = useState(false);
const toggleRef = useRef(null);
const handleClose = () => {
setIsOpen(false);
setTimeout(() => toggleRef.current.focus(), 50);
};
return (
<Dropdown isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
<DropdownToggle variant="primary" ref={toggleRef}>
Toiminnot
</DropdownToggle>
<DropdownMenu>
<DropdownMenuGroupHeading>Valitse toiminto</DropdownMenuGroupHeading>
<DropdownMenuGroup>
<DropdownMenuItem as="button" onClick={handleClose}>
Sulje valikko
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenu>
</Dropdown>
);
}
Tiiviimpi asettelu
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-komponentilla usePortal-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 avulla. Oletuksena se on 50 % ruudunkorkeudesta ja sen voi poistaa käytöstä null-arvolla.
function ExampleDropdown() {
const [isOpen, setIsOpen] = useState(false);
return (
<Dropdown isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
<DropdownToggle>Toiminnot</DropdownToggle>
<DropdownMenu maxHeight="md">
<DropdownMenuGroupHeading>Valitse toiminto</DropdownMenuGroupHeading>
<DropdownMenuGroup>
{[...Array(15)].map((_, i) => (
<DropdownMenuItem href="#">Toiminto {i + 1}</DropdownMenuItem>
))}
</DropdownMenuGroup>
</DropdownMenu>
</Dropdown>
);
}