Чек жана радио

Толугу менен кайра жазылган текшерүүлөр компонентибиз менен ырааттуу кайчылаш браузер жана кайчылаш түзмөктөрдү белгилөө кутучаларын жана радиолорду түзүңүз.

Бул бетте

мамиле

Серепчинин демейки белгилөө кутучалары жана радиолорунун жардамы менен алмаштырылат .form-check, эки киргизүү түрүнүн тең бир катар класстары алардын HTML элементтеринин жайгашуусун жана жүрүм-турумун жакшыртат, алар көбүрөөк ыңгайлаштыруу жана кайчылаш серепчи ырааттуулугун камсыз кылат. Белгилөө кутучалары тизмедеги бир же бир нече варианттарды тандоо үчүн, ал эми радиолор көптөрдүн арасынан бир параметрди тандоо үчүн.

Структуралык жактан, биздин <input>s жана <label>s бир тууган элементтер болуп <input>саналат <label>. Бул бир аз кененирээк, idанткени forсиз <input>жана <label>. Биз же сыяктуу ~бардык мамлекеттерибиз үчүн бир тууган селекторду ( ) колдонобуз . Класс менен айкалышканда , биз ар бир элементтин абалына жараша текстти оңой эле стилдей алабыз .<input>:checked:disabled.form-check-label<input>

Биздин текшерүүлөр текшерилген же аныкталбаган абалдарды көрсөтүү үчүн ыңгайлаштырылган Bootstrap сүрөтчөлөрүн колдонот.

Текшерүүлөр

Демейки белги кутучасы

Белгиленген кутуча

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>

Белгисиз

Кол менен JavaScript аркылуу коюлганда, белгилөө кутучалары псевдо классты колдоно алат :indeterminate(аны көрсөтүү үчүн HTML атрибуту жок).

Белгисиз кутуча

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>

Өчүрүлгөн

Атрибутту кошуңуз disabledжана ага байланыштуу <label>лар киргизүүнүн абалын көрсөтүүгө жардам берүү үчүн ачык түскө дал келүү үчүн автоматтык түрдө стилделет.

Белгисиз белгилөө кутучасы өчүрүлгөн

Өчүрүлгөн белги кутучасы

Өчүрүлгөн белгилөө кутучасы

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>

Радиолор

Демейки радио

Демейки текшерилген радио

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>

Өчүрүлгөн

Өчүрүлгөн радио

Текшерилген радио өчүрүлгөн

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>

Которгучтар

Которуштурууда ыңгайлаштырылган белги кутучасынын белгиси бар, бирок .form-switchкоторгучту көрсөтүү үчүн классты колдонот. role="switch"Бул ролду колдогон жардамчы технологияларга контролдун мүнөзүн так жеткирүү үчүн колдонууну карап көрүңүз . Эски жардамчы технологияларда ал жөн гана резервдик кутуча катары жарыяланат. Которгучтар да disabledатрибутун колдойт.

Демейки которуштуруу кутучасын киргизүү

Белгиленген которуштуруу кутучасынын киргизүү

Которуштуруу кутучасын киргизүү өчүрүлгөн

Белгиленген которуштуруу кутучасын киргизүү өчүрүлгөн

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>

Демейки (жыйылган)

Демейки боюнча, дароо бир тууган болгон каалаган сандагы белги кутучалары жана радиолор вертикалдуу тизилип, менен тиешелүү аралыкта жайгаштырылат .form-check.

Демейки белги кутучасы

Өчүрүлгөн белги кутучасы

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>

Демейки радио

Экинчи демейки радио

Өчүрүлгөн радио

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>

Inline

Белгилөө кутучаларын же радиолорду бир горизонталдуу сапта .form-check-inlineкаалаганга кошуу менен топтоңуз .form-check.

3 (өчүрүлгөн)

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 (өчүрүлгөн)

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>

Тескери

.form-check-reverseМодификатор классы менен карама-каршы тарапка белги кутучаларыңызды, радиолорду жана өчүргүчтөрдү коюңуз .

Тескери белгилөө кутучасы

Өчүрүлгөн тескери белгилөө кутучасы

Тескери которуштуруу кутучасын киргизүү

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>

Белгисиз

.form-checkБелги тексти жок белгилөө кутучалары жана радиолор үчүн таңууларды калтырыңыз . Көмөкчү технологиялар үчүн жеткиликтүү аталыштын кандайдыр бир түрүн көрсөтүүнү унутпаңыз (мисалы, колдонуу менен aria-label). Чоо-жайын билүү үчүн формаларга сереп салуу мүмкүнчүлүгү бөлүмүн караңыз.

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>

Которуу баскычтары

Элементтерге .btnэмес, стилдерди .form-check-labelколдонуу менен баскыч сыяктуу белги кутучаларын жана радио баскычтарын түзүңүз . <label>Керек болсо , бул которуштуруу баскычтарын баскычтар тобуна топтоого болот .

Белгилөө кутучасын которуштуруу баскычтары

Жалгыз которуштуруу

html

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

Текшерилди

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>

Өчүрүлгөн

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>

Көрүнүп тургандай, бул белгилөө кутучасынын которуштуруу баскычтары баскыч плагининин которуштуруу баскычтарына окшош . Бирок, алар жардамчы технологиялар аркылуу ар кандай жеткирилет: кутучанын которуштуруулары экрандагы окурмандар тарабынан "текшерилген"/"белгиленген эмес" деп жарыяланат (анткени, алардын сырткы көрүнүшүнө карабастан, алар түпкүлүгүндө дагы эле белги кутучалары), ал эми баскыч плагиндерин которуу баскычтары "баскыч"/"басылды" деп жарыяланды. Бул эки ыкманын ортосундагы тандоо сиз түзүп жаткан которгучтун түрүнө жараша болот жана которуштуруу колдонуучуларга белгилөө кутучасы же иш жүзүндө баскыч катары жарыяланганда мааниге ээ болобу же жокпу.

Радио которуштуруу баскычтары

Текшерилди Радио Өчүрүлгөн Радио

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>

Белгиленген стилдер

нын ар кандай варианттары .btn, мисалы, ар кандай белгиленген стилдер колдоого алынат.

Жалгыз которуштуруу
Текшерилди
Ийгилик радиосу текшерилди Коркунучтуу радио

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

Өзгөрмөлөр

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