კოლაფსი

Როგორ მუშაობს

ჩაკეცვის JavaScript მოდული გამოიყენება შინაარსის საჩვენებლად და დასამალად. ღილაკები ან წამყვანები გამოიყენება როგორც ტრიგერები, რომლებიც შედგენილია კონკრეტულ ელემენტებზე, რომლებსაც გადართავთ. ელემენტის ჩაკეცვა გამოიწვევს ანიმაციას heightმისი ამჟამინდელი მნიშვნელობიდან 0. იმის გათვალისწინებით, თუ როგორ ამუშავებს CSS ანიმაციებს, თქვენ არ შეგიძლიათ გამოიყენოთ paddingელემენტზე .collapse. ამის ნაცვლად, გამოიყენეთ კლასი, როგორც დამოუკიდებელი შეფუთვის ელემენტი.

მაგალითი

დააწკაპუნეთ ქვემოთ მოცემულ ღილაკებზე, რათა ნახოთ და დამალოთ სხვა ელემენტი კლასის ცვლილებების მეშვეობით:

• .collapseმალავს შინაარსს
• .collapsingგამოიყენება გადასვლების დროს
• .collapse.showაჩვენებს შინაარსს

ზოგადად, ჩვენ გირჩევთ გამოიყენოთ ღილაკი data-bs-targetატრიბუტით. მიუხედავად იმისა, რომ არ არის რეკომენდებული სემანტიკური თვალსაზრისით, თქვენ ასევე შეგიძლიათ გამოიყენოთ ბმული hrefატრიბუტით (და a role="button"). ორივე შემთხვევაში data-bs-toggle="collapse"აუცილებელია.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Ჰორიზონტალური

დაშლის მოდული ასევე მხარს უჭერს ჰორიზონტალურ კოლაფსს. დაამატეთ .collapse-horizontalმოდიფიკატორის კლასი, რომ widthგადავიტანოთ heightდა დააყენოთ a widthუშუალო შვილი ელემენტზე. მოგერიდებათ დაწეროთ თქვენი საკუთარი Sass, გამოიყენეთ inline სტილები ან გამოიყენეთ ჩვენი სიგანის უტილიტები .

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

მრავალი სამიზნე

A-ს <button>შეუძლია <a>მრავალი ელემენტის ჩვენება და დამალვა, მათზე მითითებით სელექტორით მის hrefან data-bs-targetატრიბუტში. მრავალჯერადი <button>ან <a>შეუძლია ელემენტის ჩვენება და დამალვა, თუ თითოეული მათგანი მიუთითებს მას თავისი hrefან data-bs-targetატრიბუტით

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

ხელმისაწვდომობა

დარწმუნდით, რომ დაამატეთ aria-expandedსაკონტროლო ელემენტს. ეს ატრიბუტი ცალსახად გადმოსცემს დასაკეცი ელემენტის ამჟამინდელ მდგომარეობას, რომელიც დაკავშირებულია ეკრანის წამკითხველებთან და მსგავს დამხმარე ტექნოლოგიებთან კონტროლთან. თუ დასაკეცი ელემენტი ნაგულისხმევად დახურულია, საკონტროლო ელემენტზე ატრიბუტს უნდა ჰქონდეს მნიშვნელობა aria-expanded="false". თუ თქვენ დააყენეთ დასაკეცი ელემენტი ნაგულისხმევად ღიად showკლასის გამოყენებით, aria-expanded="true"სანაცვლოდ დააყენეთ კონტროლზე. დანამატი ავტომატურად გადართავს ამ ატრიბუტს კონტროლზე იმის მიხედვით, გაიხსნა თუ არა დასაკეცი ელემენტი (JavaScript-ის საშუალებით, ან იმის გამო, რომ მომხმარებელმა გაააქტიურა სხვა საკონტროლო ელემენტი, რომელიც ასევე დაკავშირებულია იმავე დასაკეც ელემენტთან). თუ საკონტროლო ელემენტის HTML ელემენტი არ არის ღილაკი (მაგ., <a>ან ან <div>), ატრიბუტიrole="button"ელემენტს უნდა დაემატოს.

თუ თქვენი საკონტროლო ელემენტი მიზნად ისახავს ერთ დასაკეც ელემენტს - ანუ data-bs-targetატრიბუტი მიუთითებს idამომრჩეველზე - თქვენ უნდა დაამატოთ aria-controlsატრიბუტი საკონტროლო ელემენტს, რომელიც შეიცავს idდასაკეც ელემენტს. თანამედროვე ეკრანის წამკითხველები და მსგავსი დამხმარე ტექნოლოგიები იყენებენ ამ ატრიბუტს, რათა მომხმარებლებს მიაწოდონ დამატებითი მალსახმობები, რათა ნავიგაციონ უშუალოდ თვით დასაკეც ელემენტზე.

გაითვალისწინეთ, რომ Bootstrap-ის ამჟამინდელი იმპლემენტაცია არ მოიცავს კლავიატურის სხვადასხვა არჩევით ურთიერთქმედებებს, რომლებიც აღწერილია ARIA საავტორო პრაქტიკის სახელმძღვანელოში აკორდეონის შაბლონში - თქვენ მოგიწევთ მათი ჩართვა მორგებული JavaScript-ით.

სას

ცვლადები

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

კლასები

კოლაფსის გარდამავალი კლასები შეიძლება მოიძებნოს, scss/_transitions.scssრადგან ისინი გაზიარებულია მრავალ კომპონენტში (კოლაფსი და აკორდეონი).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

გამოყენება

კოლაფსის დანამატი იყენებს რამდენიმე კლასს მძიმე აწევისთვის:

• .collapseმალავს შინაარსს
• .collapse.showაჩვენებს შინაარსს
• .collapsingემატება გადასვლის დაწყებისას და ამოღებულია როცა დასრულდება

ამ კლასების ნახვა შეგიძლიათ _transitions.scss.

მონაცემთა ატრიბუტების მეშვეობით

უბრალოდ დაამატეთ data-bs-toggle="collapse"და a data-bs-targetელემენტს, რათა ავტომატურად მიენიჭოთ კონტროლი ერთი ან მეტი დასაკეცი ელემენტის. ატრიბუტი იღებს CSS ამომრჩეველს data-bs-targetკოლაფსის გამოსაყენებლად. დარწმუნდით, რომ დაამატეთ კლასი collapseდასაკეც ელემენტს. თუ გსურთ ნაგულისხმევად გახსნა, დაამატეთ დამატებითი კლასი show.

აკორდეონის მსგავსი ჯგუფის მართვის დასამატებლად დასაკეცი ზონაში, დაამატეთ მონაცემთა ატრიბუტი data-bs-parent="#selector". დამატებითი ინფორმაციისთვის ეწვიეთ აკორდეონის გვერდს .

JavaScript-ის საშუალებით

ხელით ჩართეთ:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Პარამეტრები

იმის გამო, რომ ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით, შეგიძლიათ დაამატოთ ოფციის სახელი data-bs-, როგორც data-bs-animation="{value}". დარწმუნდით, რომ შეცვალეთ ოფციის სახელის ქეისის ტიპი „ camelCase “-დან „ kebab-case “-ზე ოფციების მონაცემთა ატრიბუტების მეშვეობით გადაცემისას. მაგალითად, გამოიყენეთ data-bs-custom-class="beautifier"ნაცვლად data-bs-customClass="beautifier".

როგორც Bootstrap 5.2.0, ყველა კომპონენტი მხარს უჭერს ექსპერიმენტულ რეზერვირებული მონაცემთა ატრიბუტს data-bs-config, რომელსაც შეუძლია მარტივი კომპონენტის კონფიგურაცია JSON სტრიქონის სახით. როდესაც ელემენტს აქვს data-bs-config='{"delay":0, "title":123}'და data-bs-title="456"ატრიბუტები, საბოლოო titleმნიშვნელობა იქნება 456და ცალკეული მონაცემთა ატრიბუტები გადალახავს მნიშვნელობებს, რომლებიც მოცემულია data-bs-config. გარდა ამისა, არსებულ მონაცემთა ატრიბუტებს შეუძლიათ JSON მნიშვნელობების შენახვა, როგორიცაა data-bs-delay='{"show":0,"hide":150}'.

მეთოდები

ააქტიურებს თქვენს კონტენტს, როგორც დასაკეცი ელემენტს. იღებს არასავალდებულო ვარიანტებს object.

თქვენ შეგიძლიათ შექმნათ კოლაფსის მაგალითი კონსტრუქტორით, მაგალითად:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Ივენთი

Bootstrap-ის კოლაფსის კლასი ავლენს რამდენიმე მოვლენას კოლაფსის ფუნქციონირებაში ჩასართავად.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})