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

html

<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

html

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

Onbepaalde merkblokkie gedeaktiveer

Gedeaktiveerde merkblokkie

Gedeaktiveer gemerkte merkblokkie

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
    Disabled indeterminate checkbox
  </label>
</div>
<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

html

<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

html

<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

html

<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

html

<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

html

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

html

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

html

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

Omgekeerde

Plaas jou merkblokkies, radio's en skakelaars aan die teenoorgestelde kant met die .form-check-reversewysigerklas.

Omgekeerde merkblokkie

Gedeaktiveerde omgekeerde merkblokkie

Omgekeerde skakelaar-merkblokkie-invoer

html

<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
  <label class="form-check-label" for="reverseCheck1">
    Reverse checkbox
  </label>
</div>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
    Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</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.

html

<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

html

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

Gekontroleer

html

<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

html

<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

html

<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

html

<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 10 3 3 6-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;