კოლაფსი

შეცვალეთ კონტენტის ხილვადობა თქვენს პროექტში რამდენიმე კლასებით და ჩვენი JavaScript დანამატებით.

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

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

მაგალითი

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

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

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

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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>

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

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

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

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

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

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

აკორდეონის მაგალითი

ბარათის კომპონენტის გამოყენებით , შეგიძლიათ გააფართოვოთ ნაგულისხმევი კოლაფსის ქცევა აკორდეონის შესაქმნელად. აკორდეონის სტილის სწორად მისაღწევად, აუცილებლად გამოიყენეთ .accordionროგორც შესაფუთი.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>

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

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

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

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

გამოყენება

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

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

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

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

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

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

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

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

$('.collapse').collapse()

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-parent="".

მეთოდები

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

გადართავს დასაკეც ელემენტს ჩვენებაზე ან დამალვაზე. უბრუნდება აბონენტს მანამ, სანამ დასაკეცი ელემენტი რეალურად იქნება ნაჩვენები ან დამალული (ანუ, სანამ shown.bs.collapseან hidden.bs.collapseმოვლენა მოხდება).

.collapse('show')

აჩვენებს დასაკეც ელემენტს. უბრუნდება აბონენტს, სანამ დასაკეცი ელემენტი რეალურად გამოჩნდება (ანუ shown.bs.collapseმოვლენის დადგომამდე).

.collapse('hide')

მალავს დასაკეც ელემენტს. უბრუნდება აბონენტს, სანამ დასაკეცი ელემენტი რეალურად დამალული იქნება (ანუ hidden.bs.collapseმოვლენის დადგომამდე).

.collapse('dispose')

ანადგურებს ელემენტის კოლაფსს.

Ივენთი

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})