ჩეკები და რადიოები

შექმენით თანმიმდევრული ბრაუზერისა და მოწყობილობების შორის მოსანიშნი ველები და რადიოები ჩვენი მთლიანად გადაწერილი შემოწმების კომპონენტით.

ამ გვერდზე

მიდგომა

ბრაუზერის ნაგულისხმევი ყუთები და რადიოები ჩანაცვლებულია .form-check, კლასების სერიის დახმარებით ორივე შეყვანის ტიპისთვის, რომელიც აუმჯობესებს მათი HTML ელემენტების განლაგებასა და ქცევას, რაც უზრუნველყოფს უფრო მეტ პერსონალიზაციას და ბრაუზერის ჯვარედინი თანმიმდევრულობას. მოსანიშნი ველები არის სიაში ერთი ან რამდენიმე ვარიანტის ასარჩევად, ხოლო რადიოები მრავალი ვარიანტიდან ერთის ასარჩევად.

სტრუქტურულად, ჩვენი <input>s და <label>s არის ძმური ელემენტები, განსხვავებით in- <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>

განუსაზღვრელი

ჩამრთველებს შეუძლიათ გამოიყენონ :indeterminateფსევდო კლასი, როდესაც ხელით დაყენებულია JavaScript-ის საშუალებით (არ არის ხელმისაწვდომი 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>s ავტომატურად შეირჩევა უფრო ღია ფერის შესატყვისად, რაც დაგეხმარებათ მიუთითოთ შეყვანის მდგომარეობა.

გამორთულია განუსაზღვრელი ჩამრთველი

გამორთულია მოსანიშნი ველი

გამორთულია მონიშნული ველი

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>

Ხაზში

დააჯგუფეთ მოსანიშნი ველები ან რადიოები იმავე ჰორიზონტალურ მწკრივზე .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>

სას

ცვლადები

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