Tšekid ja raadiod

Looge meie täielikult ümber kirjutatud kontrollide komponendiga ühtsed brauseri- ja seadmeteülesed märkeruudud ja raadiod.

Sellel lehel

Lähenemine

Brauseri vaikemärkeruudud ja raadiod asendatakse .form-checkmõlema sisenditüübi klasside sarjaga, mis parandab nende HTML-elementide paigutust ja käitumist, mis tagab suurema kohandamise ja brauseriülese järjepidevuse. Märkeruudud on mõeldud loendis ühe või mitme valiku valimiseks, raadiod aga ühe valiku valimiseks paljude hulgast.

Struktuuriliselt on meie <input>s ja <label>s vend-elemendid, mitte <input>sees olevad elemendid <label>. See on pisut üksikasjalikum, kuna peate määrama idja foratribuudid, et seostada <input>ja <label>. Kasutame õdede-vendade valijat ( ~) kõigi oma <input>olekute jaoks, nagu :checkedvõi :disabled. Klassiga kombineerituna .form-check-labelsaame iga üksuse teksti <input>oleku alusel hõlpsalt stiilida.

Meie kontrollid kasutavad kontrollitud või määramata olekute näitamiseks kohandatud Bootstrapi ikoone.

Kontrollid

Vaikimisi märkeruut

Märkeruut on märgitud

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

Määramatu

Märkeruudud võivad kasutada :indeterminatepseudoklassi, kui need on käsitsi määratud JavaScripti kaudu (selle määramiseks pole saadaval HTML-i atribuuti).

Määramatu märkeruut

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
  <label class="form-check-label" for="flexCheckIndeterminate">
    Indeterminate checkbox
  </label>
</div>

Keelatud

Lisage disabledatribuut ja seotud <label>s-id kujundatakse automaatselt nii, et need sobiksid heledama värviga, mis aitab sisendi olekut näidata.

Märkeruut on keelatud

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
  <label class="form-check-label" for="flexCheckDisabled">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
    Disabled checked checkbox
  </label>
</div>

Raadiod

Vaikimisi raadio

Vaikimisi kontrollitud raadio

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

Keelatud

Lisage disabledatribuut ja seotud <label>s-id kujundatakse automaatselt nii, et need sobiksid heledama värviga, mis aitab sisendi olekut näidata.

Keelatud raadio

Keelatud kontrollitud raadio

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

Lülitid

Lülitil on kohandatud märkeruudu märgistus, kuid see kasutab .form-switchlülituslüliti renderdamiseks klassi. disabledAtribuuti toetavad ka lülitid .

Vaikimisi lüliti märkeruudu sisend

Märkitud lüliti märkeruudu sisend

Keelatud lüliti märkeruudu sisend

Keelatud on märgitud lüliti märkeruudu sisend

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Vaikimisi (virnastatud)

Vaikimisi paigutatakse suvaline arv märkeruutusid ja raadiosid, mis on otsene vend, vertikaalselt virnastatud ja sobivate vahedega .form-check.

Vaikimisi märkeruut

Märkeruut on keelatud

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Vaikimisi raadio

Teine vaikimisi raadio

Keelatud raadio

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Järjekorras

Grupeerige märkeruudud või raadiod samale horisontaalsele reale, lisades .form-check-inlineneed mis tahes .form-check.

3 (keelatud)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

3 (keelatud)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Ilma siltideta

Jätke .form-checkmärge välja märkeruutude ja raadiote puhul, millel pole sildi teksti. Ärge unustage anda abitehnoloogiatele ikkagi mingi juurdepääsetav nimi (nt kasutades aria-label). Üksikasju vaadake vormide ülevaate juurdepääsetavuse jaotisest.

<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

Lülitusnupud

Looge nuputaolisi märkeruutusid ja raadionuppe, kasutades elementide .btnasemel stiile . Neid lülitusnuppe saab vajadusel täiendavalt rühmitada nuppude rühma ..form-check-label<label>

Märkeruudu lülitusnupud

Üks lüliti

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

Kontrollitud

<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>

Keelatud

<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Visuaalselt on need märkeruutude lülitusnupud identsed nuppude pistikprogrammide lülitusnuppudega . Abitehnoloogiad edastavad need aga erinevalt: ekraanilugejad teatavad märkeruutude lülitustest kui "märgitud"/"mitte märgistatud" (kuna välimusele vaatamata on need põhimõtteliselt ikkagi märkeruudud), samas kui nupuplugina lülitusnupud on teatatakse kui "nupp"/"nupp vajutatud". Valik nende kahe lähenemisviisi vahel sõltub loodava lüliti tüübist ja sellest, kas see lüliti on kasutajatele mõttekas, kui see teatatakse märkeruudu või tegeliku nupuna.

Raadio lülitusnupud

Kontrollitud Raadio Keelatud Raadio

<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>

Piiratud stiilid

Toetatud on erinevad variandid .btn, näiteks erinevad väljatoodud stiilid.

Üks lüliti
Kontrollitud
Kontrollitud edu raadio Ohtlik raadio

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

Sass

Muutujad

$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 1px solid rgba($black, .25);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow;

$form-check-input-checked-color:          $component-active-color;
$form-check-input-checked-bg-color:       $component-active-bg;
$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>");
$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");

$form-check-input-indeterminate-color:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;