Чектер мен радиостанциялар

Толығымен қайта жазылған тексерулер құрамдасымызбен дәйекті кросс-шолғыш пен құрылғылар арасындағы құсбелгілер мен радиоларды жасаңыз.

Бұл бетте

Тәсіл

.form-checkБраузердің әдепкі құсбелгілері мен радиостанциялары HTML элементтерінің орналасуын және әрекетін жақсартатын, үлкен теңшеуді және браузердің қиылысуының үйлесімділігін қамтамасыз ететін енгізу түрлерінің екеуіне арналған сыныптар қатарының көмегімен ауыстырылады . Құсбелгілер тізімдегі бір немесе бірнеше опцияны таңдауға арналған, ал радиолар көптеген опциялардың біреуін таңдауға арналған.

Құрылымдық жағынан, біздің <input>s және s - ішіндегі a ішінен <label>айырмашылығы туысты элементтер . Бұл сәл егжей-тегжейлі, өйткені және байланыстыру үшін және атрибуттарын көрсету керек . Біз немесе сияқты барлық күйлеріміз үшін бауыр селекторын ( ) қолданамыз . Сыныппен біріктірілгенде , біз күйіне негізделген әрбір элемент үшін мәтінді оңай стильдей аламыз .<input><label>idfor<input><label>~<input>:checked:disabled.form-check-label<input>

Біздің тексерулеріміз белгіленген немесе анықталмаған күйлерді көрсету үшін теңшелетін Bootstrap белгішелерін пайдаланады.

Тексерулер

Әдепкі құсбелгі

Құсбелгі қойылды

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

Анықталмаған

Құсбелгілер :indeterminateJavaScript арқылы қолмен орнатылған кезде жалған сыныпты пайдалана алады (оны көрсету үшін қолжетімді 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>s кіріс күйін көрсетуге көмектесу үшін ашық түспен сәйкестендіру үшін автоматты түрде мәнерленеді.

Өшірілген құсбелгі

Өшірілген құсбелгі қойылады

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

Радиолар

Әдепкі радио

Әдепкі тексерілген радио

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

Өшірілген

Өшірілген радио

Өшірілген, тексерілген радио

<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атрибутты қолдайды.

Әдепкі қосқыш құсбелгісін енгізу

Қосқыш құсбелгісінің кірісі белгіленді

Қосқыш құсбелгісін енгізу өшірілді

Белгіленген қосқыш құсбелгісін енгізу өшірілді

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

Әдепкі құсбелгі

Өшірілген құсбелгі

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

Әдепкі радио

Екінші әдепкі радио

Өшірілген радио

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

Кезекте

.form-check-inlineКез келген жолға қосу арқылы бір көлденең жолдағы құсбелгілерді немесе радиоларды топтаңыз .form-check.

3 (мүгедек)

<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 (мүгедек)

<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Белгі мәтіні жоқ құсбелгілер мен радиолар үшін орауды өткізбеңіз . Көмекші технологиялар үшін қол жетімді атаулардың қандай да бір түрін беруді ұмытпаңыз (мысалы, пайдалану aria-label). Мәліметтер алу үшін пішіндерге шолу қол жетімділік бөлімін қараңыз.

<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>, бұл ауыстырып-қосқыш түймелерді одан әрі түймелер тобына топтастыруға болады.

Құсбелгіні ауыстыру түймелері

Жалғыз ауыстырып қосқыш

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

Тексерілді

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

Өшірілген

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

Көрнекі түрде бұл құсбелгіні ауыстырып-қосқыш түймелері плагинді ауыстырып қосу түймелерімен бірдей . Дегенмен, олар көмекші технологиялар арқылы басқаша жеткізіледі: құсбелгіні ауыстырып-қосқыштарды экраннан оқу құралдары «белгіленген»/«белгіленбеген» деп жариялайды (өйткені сыртқы түріне қарамастан, олар әлі де құсбелгілер болып табылады), ал плагинді ауыстыру түймелері «түйме»/«түйме басылды» деп жарияланды. Осы екі тәсілдің арасындағы таңдау сіз жасап жатқан ауыстырып-қосқыштың түріне және құсбелгі немесе нақты түйме ретінде жарияланған кезде ауыстырып-қосқыштың пайдаланушыларға мағынасы бар-жоғына байланысты болады.

Радио ауыстырып қосу түймелері

Тексерілді Радио Өшірілген Радио

<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қолдау көрсетіледі.

Жалғыз ауыстырып қосқыш
Тексерілді
Сәтті радио тексерілді Қауіпті радио

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

Сасс

Айнымалылар

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