კოლაფსი
შეცვალეთ კონტენტის ხილვადობა თქვენს პროექტში რამდენიმე კლასებით და ჩვენი JavaScript დანამატებით.
Როგორ მუშაობს
ჩაკეცვის JavaScript მოდული გამოიყენება შინაარსის საჩვენებლად და დასამალად. ღილაკები ან წამყვანები გამოიყენება როგორც ტრიგერები, რომლებიც შედგენილია კონკრეტულ ელემენტებზე, რომლებსაც გადართავთ. ელემენტის ჩაკეცვა გამოიწვევს ანიმაციას height
მისი ამჟამინდელი მნიშვნელობიდან 0
. იმის გათვალისწინებით, თუ როგორ ამუშავებს CSS ანიმაციებს, თქვენ არ შეგიძლიათ გამოიყენოთ padding
ელემენტზე .collapse
. ამის ნაცვლად, გამოიყენეთ კლასი, როგორც დამოუკიდებელი შეფუთვის ელემენტი.
prefers-reduced-motion
მედიის მოთხოვნაზე. იხილეთ
ჩვენი ხელმისაწვდომობის დოკუმენტაციის შემცირებული მოძრაობის განყოფილება .
მაგალითი
დააწკაპუნეთ ქვემოთ მოცემულ ღილაკებზე, რათა ნახოთ და დამალოთ სხვა ელემენტი კლასის ცვლილებების მეშვეობით:
.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 სტილები ან გამოიყენეთ ჩვენი სიგანის უტილიტები .
min-height
ნაკრები, რათა თავიდან იქნას აცილებული ზედმეტი შეღებვა ჩვენს დოკუმენტებში, ეს აშკარად არ არის საჭირო.
საჭიროა მხოლოდ width
on ბავშვის ელემენტი.
<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-ის ამჟამინდელი იმპლემენტაცია არ მოიცავს კლავიატურის სხვადასხვა არჩევით ურთიერთქმედებებს, რომლებიც აღწერილია WAI-ARIA საავტორო პრაქტიკის 1.1 აკორდეონის შაბლონში - თქვენ მოგიწევთ მათი ჩართვა მორგებული 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-ის საშუალებით
ხელით ჩართეთ:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Პარამეტრები
ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-bs-
, როგორც data-bs-parent=""
.
სახელი | ტიპი | ნაგულისხმევი | აღწერა |
---|---|---|---|
parent |
სელექტორი | jQuery ობიექტი | DOM ელემენტი | false |
თუ მშობელი არის მოწოდებული, მაშინ ყველა დასაკეცი ელემენტი მითითებული მშობლის ქვეშ დაიხურება, როდესაც ეს დასაკეცი ელემენტი გამოჩნდება. (ტრადიციული აკორდეონის ქცევის მსგავსი - ეს კლასზეა დამოკიდებული card ). ატრიბუტი უნდა იყოს დაყენებული სამიზნე დასაკეცი ზონაზე. |
toggle |
ლოგიკური | true |
რთავს დასაკეც ელემენტს გამოძახებისას |
მეთოდები
ასინქრონული მეთოდები და გადასვლები
ყველა API მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .
იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .
ააქტიურებს თქვენს კონტენტს, როგორც დასაკეცი ელემენტს. იღებს არასავალდებულო ვარიანტებს object
.
თქვენ შეგიძლიათ შექმნათ კოლაფსის მაგალითი კონსტრუქტორით, მაგალითად:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
მეთოდი | აღწერა |
---|---|
toggle |
გადართავს დასაკეც ელემენტს ჩვენებაზე ან დამალვაზე. უბრუნდება აბონენტს მანამ, სანამ დასაკეცი ელემენტი რეალურად იქნება ნაჩვენები ან დამალული (ანუ, სანამ shown.bs.collapse ან hidden.bs.collapse მოვლენა მოხდება). |
show |
აჩვენებს დასაკეც ელემენტს. უბრუნდება აბონენტს მანამ, სანამ დასაკეცი ელემენტი რეალურად გამოჩნდება (მაგ., shown.bs.collapse მოვლენის დადგომამდე). |
hide |
მალავს დასაკეც ელემენტს. უბრუნდება აბონენტს მანამ, სანამ დასაკეცი ელემენტი რეალურად დამალული იქნება (მაგ., hidden.bs.collapse მოვლენის დადგომამდე). |
dispose |
ანადგურებს ელემენტის კოლაფსს. (შლის DOM ელემენტზე შენახულ მონაცემებს) |
getInstance |
სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ DOM ელემენტთან დაკავშირებული კოლაფსის მაგალითი, შეგიძლიათ გამოიყენოთ იგი შემდეგნაირად:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
სტატიკური მეთოდი, რომელიც აბრუნებს DOM ელემენტთან დაკავშირებულ კოლაფსის მაგალითს ან ქმნის ახალს, თუ ის არ იყო ინიციალიზებული. თქვენ შეგიძლიათ გამოიყენოთ იგი შემდეგნაირად:bootstrap.Collapse.getOrCreateInstance(element) |
Ივენთი
Bootstrap-ის კოლაფსის კლასი ავლენს რამდენიმე მოვლენას კოლაფსის ფუნქციონირებაში ჩასართავად.
ღონისძიების ტიპი | აღწერა |
---|---|
show.bs.collapse |
ეს მოვლენა მაშინვე ირთვება, როდესაც show გამოიძახება ეგზემპლარის მეთოდი. |
shown.bs.collapse |
ეს ღონისძიება გააქტიურებულია, როდესაც კოლაფსის ელემენტი მომხმარებლისთვის ხილული გახდება (დაელოდება CSS გადასვლების დასრულებას). |
hide.bs.collapse |
ეს ღონისძიება ჩართულია მაშინვე, როდესაც hide მეთოდი გამოიძახება. |
hidden.bs.collapse |
ეს ღონისძიება გააქტიურებულია, როდესაც მომხმარებლისგან დამალულია კოლაფსის ელემენტი (დაელოდება CSS გადასვლების დასრულებას). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})