Painikeryhmä

Ryhmittele painikkeiden sarja yhdelle riville painikeryhmän avulla ja tehosta niitä JavaScriptillä.

Perusesimerkki

Kääri useita painikkeita .btnsisää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 roleattribuutti. 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-labelledbyvoidaan käyttää.

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-grouptoisen sisään, .btn-groupkun 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 id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <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>