Tjeks en radio's

Skep konsekwente kruisblaaier- en kruistoestel-merkblokkies en radio's met ons heeltemal herskryfde tjekskomponent.

Op hierdie bladsy

Benadering

Blaaier verstek-merkblokkies en radio's word vervang met behulp van .form-check, 'n reeks klasse vir beide invoertipes wat die uitleg en gedrag van hul HTML-elemente verbeter, wat groter aanpassing en kruisblaaierkonsekwentheid bied. Merkblokkies is om een of meer opsies in 'n lys te kies, terwyl radio's is om een opsie uit baie te kies.

Struktureel is ons <input>s en <label>s broers en susters elemente in teenstelling met 'n <input>binne 'n <label>. Dit is effens meer breedvoerig aangesien jy moet spesifiseer iden forkenmerke om die <input>en in verband te bring <label>. Ons gebruik die broer of suster ( ~) vir al ons <input>state, soos :checkedof :disabled. Wanneer dit met die klas gekombineer .form-check-labelword, kan ons die teks vir elke item maklik styl op grond van die <input>se toestand.

Ons tjeks gebruik pasgemaakte Bootstrap-ikone om gemerkte of onbepaalde toestande aan te dui.

Tjeks

Verstek merkblokkie

Merkblokkie gemerk

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

Onbepaald

Merkblokkies kan die :indeterminatepseudo-klas gebruik wanneer dit met die hand ingestel word via JavaScript (daar is geen beskikbare HTML-kenmerk om dit te spesifiseer nie).

Onbepaalde merkblokkie

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

Gestrem

Voeg die disabledkenmerk by en die geassosieerde <label>s word outomaties gestileer om by 'n ligter kleur te pas om te help om die toevoer se toestand aan te dui.

Gedeaktiveerde merkblokkie

Gedeaktiveer gemerkte merkblokkie

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

Radio's

Standaard radio

Standaard gekontroleerde radio

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

Gestrem

Voeg die disabledkenmerk by en die geassosieerde <label>s word outomaties gestileer om by 'n ligter kleur te pas om te help om die toevoer se toestand aan te dui.

Gedeaktiveerde radio

Gedeaktiveerde gemerkte radio

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

Skakelaars

'n Skakelaar het die opmaak van 'n pasgemaakte merkblokkie, maar gebruik die .form-switchklas om 'n wisselskakelaar te lewer. Oorweeg dit om te gebruik role="switch"om die aard van die beheer meer akkuraat oor te dra aan ondersteunende tegnologieë wat hierdie rol ondersteun. In ouer ondersteunende tegnologieë sal dit bloot as 'n gewone merkblokkie as 'n terugval aangekondig word. Skakelaars ondersteun ook die disabledkenmerk.

Verstekskakelaar-merkblokkie-invoer

Gemerk skakelaar-merkblokkie-invoer

Gedeaktiveerde skakelaar-merkblokkie-invoer

Gedeaktiveerde gemerkte skakelaar-merkblokkie-invoer

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" 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" role="switch" 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" role="switch" 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" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Verstek (gestapel)

By verstek sal enige aantal merkblokkies en radio's wat onmiddellike broers en susters is, vertikaal gestapel word en toepaslik gespasieer word met .form-check.

Verstek merkblokkie

Gedeaktiveerde merkblokkie

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

Standaard radio

Tweede verstek radio

Gedeaktiveerde radio

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

In lyn

Groepeer merkblokkies of radio's op dieselfde horisontale ry deur by .form-check-inlineenige .form-check.

3 (gestrem)

<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 (gestrem)

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

Sonder etikette

Laat die omvou weg .form-checkvir merkblokkies en radio's wat geen etiketteks het nie. Onthou om steeds 'n vorm van toeganklike naam vir hulptegnologieë te verskaf (byvoorbeeld deur gebruik te maak van aria-label). Sien die vormoorsig-toeganklikheidafdeling vir besonderhede.

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

Wissel knoppies

Skep knoppie-agtige merkblokkies en radioknoppies deur .btnstyle eerder as .form-check-labelop die <label>elemente te gebruik. Hierdie skakelknoppies kan verder in 'n knoppiegroep gegroepeer word indien nodig.

Merkblokkie-wisselknoppies

Enkelwissel

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

Gekontroleer

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

Gestrem

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

Visueel is hierdie boks-wisselknoppies identies aan die knoppie-inprop-wisselknoppies . Hulle word egter anders oorgedra deur ondersteunende tegnologieë: die merkblokkie-skakelaars sal deur skermlesers aangekondig word as "gemerk"/"nie gemerk" (aangesien hulle, ten spyte van hul voorkoms, fundamenteel steeds merkblokkies is), terwyl die knoppie-inprop-wisselknoppies sal wees aangekondig as “knoppie”/“knoppie gedruk”. Die keuse tussen hierdie twee benaderings sal afhang van die tipe skakelaar wat u skep, en of die skakelaar vir gebruikers sin sal maak of nie wanneer dit as 'n merkblokkie of as 'n werklike knoppie aangekondig word.

Radio skakel knoppies

Gekontroleer Radio Gestrem Radio

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

Omlynde style

Verskillende variante van .btn, soos by die verskillende uiteengesit style, word ondersteun.

Enkelwissel
Gekontroleer
Het suksesradio nagegaan Gevaar radio

<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

Veranderlikes

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