Painikeryhmä
Ryhmittele painikkeiden sarja yhdelle riville painikeryhmän avulla ja tehosta niitä JavaScriptillä.
Perusesimerkki
Kääri useita painikkeita .btn
sisään -merkillä .btn-group
. Lisää valinnainen JavaScript-radio ja valintaruututyylikäyttäytyminen painikelaajennuksellamme .
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Varmista, että se on oikein role
ja anna tarra
Jotta aputekniikat (kuten näytönlukijat) voisivat kertoa, että sarja painikkeita on ryhmitelty, on annettava asianmukainen role
attribuutti. Painikeryhmille tämä olisi role="group"
, kun taas työkaluriveissä pitäisi olla role="toolbar"
.
Lisäksi ryhmille ja työkaluriveille tulisi antaa selkeä tunniste, koska useimmat avustavat tekniikat eivät muutoin ilmoita niistä huolimatta oikean roolimääritteen olemassaolosta. Tässä esitetyissä esimerkeissä käytämme aria-label
, mutta myös vaihtoehtoja, kuten aria-labelledby
voidaan käyttää.
Painiketyökalupalkki
Yhdistä painikeryhmien joukot painiketyökalurivejä monimutkaisempia osia varten. Käytä hyödyllisyysluokkia tarpeen mukaan ryhmien, painikkeiden ja muun välilyönnissä.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-secondary">5</button>
<button type="button" class="btn btn-secondary">6</button>
<button type="button" class="btn btn-secondary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-secondary">8</button>
</div>
</div>
Voit vapaasti sekoittaa syöttöryhmiä työkalurivien painikeryhmiin. Kuten yllä olevassa esimerkissä, tarvitset todennäköisesti joitain apuohjelmia asioiden sijoittamiseksi oikein.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text" id="btnGroupAddon2">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
</div>
Mitoitus
Sen sijaan, että käyttäisit painikkeiden kokoluokkia ryhmän jokaisessa painikkeessa, lisää .btn-group-*
vain jokaiseen .btn-group
, mukaan lukien jokainen, kun sisäkkäsit useita ryhmiä.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
Pesivä
Aseta a .btn-group
toisen sisään, .btn-group
kun haluat avata valikot, joissa on useita painikkeita.
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
Pystysuuntainen vaihtelu
Saa painikkeet näyttämään pystysuorassa pinossa vaakasuoran sijaan. Jakopainikkeen avattavia valikoita ei tueta tässä.
<div class="btn-group-vertical">
...
</div>