გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

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

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

მიდგომა

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

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

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

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

გამორთულია

დაამატეთ disabledატრიბუტი და ასოცირებული <label>s ავტომატურად შეირჩევა უფრო ღია ფერის შესატყვისად, რაც დაგეხმარებათ მიუთითოთ შეყვანის მდგომარეობა.

<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კლასს გადართვის გადამრთველის გამოსატანად. კონცენტრატორები ასევე მხარს უჭერენ disabledატრიბუტს.

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

ნაგულისხმევი (დაწყობილი)

ნაგულისხმევად, ნებისმიერი რაოდენობის მოსანიშნი ველები და რადიოები, რომლებიც უშუალო და-ძმაა, იქნება ვერტიკალურად დაწყობილი და შესაბამისი ინტერვალით .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.

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