Čeki un radioaparāti

Izveidojiet konsekventas starppārlūkprogrammu un vairāku ierīču izvēles rūtiņas un radio, izmantojot mūsu pilnībā pārrakstīto pārbaužu komponentu.

Šajā lapā

Pieeja

Pārlūkprogrammas noklusējuma izvēles rūtiņas un radioaparāti tiek aizstāti ar .form-check, abu ievades veidu klašu sēriju, kas uzlabo to HTML elementu izkārtojumu un uzvedību, kas nodrošina lielāku pielāgošanu un vairāku pārlūkprogrammu konsekvenci. Izvēles rūtiņas ir paredzētas, lai sarakstā atlasītu vienu vai vairākas opcijas, savukārt radio ir paredzētas vienas opcijas atlasei no daudzām.

Strukturāli mūsu <input>s un s ir brāļu un māsu elementi , <label>nevis iekšējie elementi . Tas ir nedaudz detalizētāks, jo jums ir jānorāda un atribūti, lai saistītu ar un . Mēs izmantojam brāļa atlasītāju ( ) visiem mūsu stāvokļiem, piemēram, vai . Apvienojot to ar klasi, mēs varam viegli veidot katra vienuma tekstu, pamatojoties uz statusu .<input><label>idfor<input><label>~<input>:checked:disabled.form-check-label<input>

Mūsu pārbaudēs tiek izmantotas pielāgotas Bootstrap ikonas, lai norādītu uz pārbaudītiem vai nenoteiktiem stāvokļiem.

Pārbaudes

Noklusējuma izvēles rūtiņa

Atzīmēta izvēles rūtiņa

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>

Nenoteikts

Izvēles rūtiņas var izmantot :indeterminatepseidoklasi, ja tās ir manuāli iestatītas, izmantojot JavaScript (nav pieejams HTML atribūts, lai to norādītu).

Nenoteikta izvēles rūtiņa

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>

Atspējots

Pievienojiet disabledatribūtu, un saistītie <label>s tiek automātiski veidoti, lai tie atbilstu gaišākai krāsai, lai palīdzētu norādīt ievades stāvokli.

Nenoteikta izvēles rūtiņa ir atspējota

Atspējota izvēles rūtiņa

Atspējota ir atzīmēta izvēles rūtiņa

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>

Radioaparāti

Noklusējuma radio

Pēc noklusējuma pārbaudīts 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>

Atspējots

Pievienojiet disabledatribūtu, un saistītie <label>s tiek automātiski veidoti, lai tie atbilstu gaišākai krāsai, lai palīdzētu norādīt ievades stāvokli.

Atspējots radio

Atspējots pārbaudīts 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>

Slēdži

Slēdžam ir pielāgotas izvēles rūtiņas atzīme, bet tas izmanto .form-switchklasi, lai renderētu pārslēgšanas slēdzi. Apsveriet iespēju izmantot role="switch", lai precīzāk nodotu vadības būtību palīgtehnoloģijām, kas atbalsta šo lomu. Vecākajās palīgtehnoloģijās tā vienkārši tiks paziņota kā parasta izvēles rūtiņa kā rezerves variants. Slēdži arī atbalsta disabledatribūtu.

Noklusējuma slēdža izvēles rūtiņas ievade

Atzīmēta slēdža izvēles rūtiņas ievade

Atspējota slēdža izvēles rūtiņas ievade

Atspējota atzīmēta slēdža izvēles rūtiņas ievade

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>

Noklusējums (stacked)

Pēc noklusējuma jebkurš izvēles rūtiņu un radioaparātu skaits, kas ir tiešās brālis, tiks novietoti vertikāli un atbilstoši izvietoti ar .form-check.

Noklusējuma izvēles rūtiņa

Atspējota izvēles rūtiņa

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>

Noklusējuma radio

Otrais noklusējuma radio

Atspējots 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>

Rindā

Grupējiet izvēles rūtiņas vai radio vienā un tajā pašā horizontālajā rindā, pievienojot .form-check-inlinejebkurai .form-check.

3 (invalīds)

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 (invalīds)

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>

Reverss

Ievietojiet izvēles rūtiņas, radio un slēdžus pretējā pusē ar .form-check-reversemodifikatoru klasi.

Apgrieztā izvēles rūtiņa

Atspējota reversā izvēles rūtiņa

Apgrieztā slēdža izvēles rūtiņas ievade

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>

Bez etiķetēm

Izlaidiet iesaiņojumu .form-checkizvēles rūtiņām un radioaparātiem, kuriem nav etiķetes teksta. Atcerieties, ka palīgtehnoloģijām joprojām ir jānorāda kāds pieejams nosaukums (piemēram, izmantojot aria-label). Plašāku informāciju skatiet veidlapu pārskata pieejamības sadaļā.

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>

Pārslēgšanas pogas

Izveidojiet pogām līdzīgas izvēles rūtiņas un radio pogas, izmantojot .btnstilus, nevis .form-check-labelelementus <label>. Ja nepieciešams , šīs pārslēgšanas pogas var grupēt pogu grupā .

Izvēles rūtiņas pārslēgšanas pogas

Viens pārslēgs

html

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

Pārbaudīts

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>

Atspējots

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>

Vizuāli šīs izvēles rūtiņas pārslēgšanas pogas ir identiskas pogu spraudņa pārslēgšanas pogām . Tomēr palīgtehnoloģijas tos pārraida atšķirīgi: ekrāna lasītāji paziņos par izvēles rūtiņu pārslēgšanu kā “atzīmētas”/“nav atzīmētas” (jo, neskatoties uz to izskatu, būtībā tās joprojām ir izvēles rūtiņas), savukārt pogu spraudņa pārslēgšanas pogas būs paziņots kā "poga"/"poga nospiesta". Izvēle starp šīm divām pieejām būs atkarīga no jūsu izveidotā pārslēgšanas veida un no tā, vai lietotājiem būs jēga pārslēgšanai, kad tā tiks paziņota kā izvēles rūtiņa vai faktiska poga.

Radio pārslēgšanas pogas

Pārbaudīts Radio Atspējots 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>

Iezīmētie stili

Tiek atbalstīti dažādi varianti .btn, piemēram, dažādos ieskicētajos stilos.

Viens pārslēgs
Pārbaudīts
Pārbaudīts veiksmes radio Bīstams 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

Mainīgie lielumi

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