Source

Ntlawa wa swikomba-nkarhi

Hlengeleta nxaxamelo wa swikomba-nkarhi swin’we eka layini yin’we ni ntlawa wa swikomba-nkarhi, ivi u swi nyika matimba lamakulu hi JavaScript.

Xikombiso xa xisekelo

Pfuxeta nxaxamelo wa swikomba-nkarhi hi .btnin .btn-group. Engetela eka xiya-ni-moya xa JavaScript lexi nga hlawuriki ni mahanyelo ya xitayili xa bokisi ro kambela hi xiengetelo xa hina xa swikomba-nkarhi .

<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>
Tiyisisa leswaku swi lulamile rolenaswona u nyika lebula

Leswaku thekinoloji yo pfuneta (yo tanihi swihlaya-swikirini) yi hundzisela leswaku nxaxamelo wa swikomba-nkarhi wu hlengeletiwile, ku rolefanele ku nyikeriwa xihlawulekisi lexi faneleke. Eka mintlawa ya swikomba-nkarhi, leswi swi ta va role="group", kasi tibarhi ta switirhisiwa ti fanele ku va na role="toolbar".

Ku engetela kwalaho, mintlawa na tibarhi ta switirhisiwa swi fanele ku nyikiwa lebula leyi nga erivaleni, tanihileswi thekinoloji yo tala yo pfuneta handle ka sweswo yi nga ta ka yi nga ti tivisi, hambileswi ku nga na xihlawulekisi xa xiave lexi faneleke. Eka swikombiso leswi nyikiweke laha, hi tirhisa aria-label, kambe swin’wana swo fana na aria-labelledbyswona swi nga tirhisiwa.

Xitirhisiwa xa buti

Hlanganisa tisethi ta mintlawa ya swikomba-nkarhi eka tibari ta switirhisiwa swa swikomba-nkarhi swa swiphemu leswi rharhanganeke swinene. Tirhisa titlilasi ta vukorhokeri tanihilaha swi lavekaka hakona ku hambanyisa mintlawa, swikomba-nkarhi ni swin’wana.

<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>

Titwele u ntshunxekile ku hlanganisa mintlawa ya swingheniso na mintlawa ya swikomba-nkarhi eka tibarhi ta wena ta switirhisiwa. Ku fana na xikombiso lexi nga laha henhla, u ta lava switirhisiwa swin’wana hambileswi ku veka swilo hi ndlela leyinene.

<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>

Ku pima mpimo

Ematshan’weni yo tirhisa titlilasi to pima mpimo wa buti eka buti yin’wana ni yin’wana eka ntlawa, engetela ntsena .btn-group-*eka yin’wana ni yin’wana .btn-group, ku katsa ni yin’wana ni yin’wana loko u endla swisaka swa mintlawa yo tala.



<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>

Ku endla swisaka

Veka a .btn-groupendzeni ka yin’wana .btn-grouploko u lava timenyu leti nga ehansi leti pfanganisiweke ni nxaxamelo wa swikomba-nkarhi.

Xihlanganisi xa dropdown Xihlanganisi xa dropdown 
<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>

Ku cinca-cinca loku yimisiweke

Endla leswaku sete ya swikomba-nkarhi yi vonaka yi hlanganisiwe hi ndlela yo olova ematshan’weni yo rhendzeleka. Split button dropdowns a yi seketeriwi laha.

Xihlanganisi xa dropdown Xihlanganisi xa dropdown
Xihlanganisi xa dropdown Xihlanganisi xa dropdown
Xihlanganisi xa dropdown Xihlanganisi xa dropdown
Xihlanganisi xa dropdown Xihlanganisi xa dropdown 
<div class="btn-group-vertical">
  ...
</div>