ButtonGroup
Komponentti painikkeiden ryhmittelyyn.
Julkaistu versiossa 0.15.3
Esikatselu
Käyttötarkoitus
ButtonGroup-komponentin avulla voit tehdä toisiinsa liittyvistä toimintopainikkeista (Button) toimintoryhmiä. Komponentin tarkoitus on helpottaa toimintoryhmän responsiivista toteutusta ja saada painikkeet asemoitumaan halutulla tavalla eri kokoisilla näytöillä.
Voit asemoida toimintoryhmän painikkeita joko pysty- tai vaakasuuntaan riippuen painikkeiden lukumäärästä ja näytön koosta.
Huomioi, että komponentin käyttö ei takaa kaikissa käyttötilanteissa parasta käyttökokemusta. Komponentin käyttäjän vastuulla on varmistaa, että painikkeet asemoituvat halutulla tavalla erilaisissa käyttötilanteissa. Joissain tilanteissa parempaan lopputulokseen saattaa päästä asemoimalla painikkeet itse. Muista kuitenkin aina noudattaa Button-komponentin ohjeita esimerkiksi painikkeiden järjestykseen ja sijaintiin liittyen.
Tee näin
- Käytä komponenttia useita painikkeita sisältäviin toimintoryhmiin, kun haluat asetella painikkeita responsiivisesti.
Älä tee näin
- Älä käytä, jos painikkeita on vain yksi.
Saavutettavuus
Komponentti ei ota kantaa saavutettavuuteen. Tarkista esimerkiksi painikkeiden järjestys Button-komponentin ohjeista.
Esimerkit
Mobiilissa painikkeet asemoidaan oletuksena allekkain. Pienellä näytöllä allekkain olevat painikkeet täyttävä niiden käytössä olevan tilan sivusuunnassa. Jos tämä asemointi ei sovi käyttötilanteeseesi, voit ottaa ominaisuuden pois päältä fluid={false}-propilla.
Kun painikkeet mahtuvat olemaan vierekkäin, voit muuttaa asettelun vaakasuuntaiseksi horizontal-propilla. Painikkeita voi asemoida eri breakpointtien mukaan. Esim. horizontal="sm" asettaa painikkeet pienillä näytöillä allekkain ja suuremmilla rinnakkain.
Painikkeet voi asemoida rinnakkain kaikilla eri kokoisilla näytöillä asettamalla horizontal-propilla.
Jos kuitenkin samalle riville asetetut painikkeet eivät mahdu niille annettuun tilaan, ne rivittyvät automaattisesti seuraavalle riville.