Ĉekoj kaj radioj

Kreu konsekvencajn trans-retumilon kaj trans-aparatajn markobutonojn kaj radiojn kun nia tute reverkita ĉekkomponento.

Sur ĉi tiu paĝo

Alproksimiĝo

Retumilo-defaŭltaj markobutonoj kaj radioj estas anstataŭigitaj per la helpo de .form-check, serio de klasoj por ambaŭ enigtipoj, kiuj plibonigas la aranĝon kaj konduton de siaj HTML-elementoj, kiuj disponigas pli grandan personigon kaj krucretumilon konsistencon. Markobutonoj estas por elekti unu aŭ plurajn opciojn en listo, dum radioj estas por elekti unu opcion el multaj.

Strukture, niaj <input>s kaj <label>s estas gefrataj elementoj kontraste al <input>ene de <label>. Ĉi tio estas iomete pli multvorta ĉar vi devas specifi idkaj foratributojn por rilatigi la <input>kaj <label>. Ni uzas la gefratan elektilon ( ~) por ĉiuj niaj <input>ŝtatoj, kiel :checkedaŭ :disabled. Se kombinite kun la .form-check-labelklaso, ni povas facile stiligi la tekston por ĉiu ero surbaze de la <input>stato de la '.

Niaj ĉekoj uzas kutimajn Bootstrap-ikonojn por indiki kontrolitajn aŭ nedeterminitajn ŝtatojn.

Ĉekoj

Defaŭlta markobutono

Markita markobutono

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

Nedeterminita

Markobutonoj povas uzi la :indeterminatepseŭdoklason kiam mane fiksitaj per JavaScript (ne ekzistas disponebla HTML-atributo por specifi ĝin).

Nedeterminita markobutono

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

Malebligita

Aldonu la disabledatributon kaj la rilataj <label>s estas aŭtomate stilitaj por kongrui kun pli hela koloro por helpi indiki la staton de la enigo.

Maleblita markobutono

Malŝaltita markobutono

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

Radioaparatoj

Defaŭlta radio

Defaŭlta kontrolita 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>

Malebligita

Aldonu la disabledatributon kaj la rilataj <label>s estas aŭtomate stilitaj por kongrui kun pli hela koloro por helpi indiki la staton de la enigo.

Malfunkciigita radio

Malŝaltita kontrolita 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>

Ŝaltiloj

Ŝaltilo havas la markadon de kutima markobutono sed uzas la .form-switchklason por bildigi baskulon. Ŝaltiloj ankaŭ subtenas la disabledatributon.

Defaŭlta ŝaltilo markobutono enigo

Markita ŝaltilo markobutono enigo

Maleblita ŝaltila markobutono enigo

Malŝaltita markita ŝaltila markobutono enigo

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

Defaŭlte (stakita)

Defaŭlte, ajna nombro da markobutonoj kaj radioj kiuj estas tujaj gefratoj estos vertikale stakigitaj kaj taŭge interspacigitaj per .form-check.

Defaŭlta markobutono

Maleblita markobutono

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

Defaŭlta radio

Dua defaŭlta radio

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

En linio

Grupigu markobutonojn aŭ radiojn sur la sama horizontala vico aldonante .form-check-inlineal iu ajn .form-check.

3 (malkapabla)

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

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

Sen etikedoj

Forlasu la envolvadon .form-checkpor markobutonoj kaj radioj, kiuj ne havas etikedtekston. Memoru ankoraŭ provizi iun formon de alirebla nomo por helpaj teknologioj (ekzemple, uzante aria-label). Vidu la formularan superrigardan alireblan sekcion por detaloj.

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

Ŝaltigu butonojn

Kreu buton-similajn markobutonojn kaj radiobutonojn uzante .btnstilojn prefere ol .form-check-labelsur la <label>elementoj. Ĉi tiuj ŝaltilbutonoj povas plu esti grupigitaj en butongrupo se necese.

Markobutono baskuli butonojn

Ununura baskulo

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

Kontrolita

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

Malebligita

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

Vide, ĉi tiuj markobutonaj baskulimaj butonoj estas identaj al la butonaj aldonaĵaj baskulimaj butonoj . Tamen, ili estas transdonitaj alimaniere per helpaj teknologioj: la markobutonoj baskuloj estos anoncitaj de ekranlegiloj kiel "markitaj"/"ne kontrolitaj" (ĉar, malgraŭ sia aspekto, ili esence ankoraŭ estas markobutonoj), dum la butonaldonaĵaj baskutbutonoj estos anoncita kiel "butono"/"butono premita". La elekto inter ĉi tiuj du aliroj dependos de la speco de baskulo, kiun vi kreas, kaj ĉu aŭ ne la baskulo havos sencon por uzantoj kiam anoncite kiel markobutono aŭ kiel fakta butono.

Butonoj de radio-ŝaltilo

Kontrolita Radio Malebligita 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>

Skizitaj stiloj

Malsamaj variantoj de .btn, kiel ĉe la diversaj skizitaj stiloj, estas subtenataj.

Ununura baskulo
Kontrolita
Kontrolita sukcesa radio Danĝera 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

Variabloj

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