Փլուզվել
Միացրեք ձեր նախագծում բովանդակության տեսանելիությունը մի քանի դասերի և մեր 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>
Հորիզոնական
The collapse plugin-ն աջակցում է նաև հորիզոնական փլուզմանը: Ավելացրե՛ք .collapse-horizontal
մոդիֆիկատորի դասը, որպեսզի անցում կատարեք և տեղադրեք a- ն անմիջական երեխայի տարրի վրա width
: Ազատորեն գրեք ձեր սեփական Sass-ը, օգտագործեք ներկառուցված ոճեր կամ օգտագործեք մեր լայնության կոմունալ ծառայությունները :height
width
min-height
շարք՝ մեր փաստաթղթերում ավելորդ ներկումներից խուսափելու համար, դա բացահայտորեն չի պահանջվում:
Պահանջվում է միայն width
on the child տարրը:
<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 տարրը կոճակ չէ (օրինակ՝ an <a>
կամ <div>
), հատկանիշըrole="button"
պետք է ավելացվի տարրին:
Եթե ձեր կառավարման տարրը թիրախավորում է մեկ ծալվող տարր, այսինքն՝ data-bs-target
հատկանիշը մատնացույց է անում id
ընտրիչին, դուք պետք է ավելացնեք aria-controls
ատրիբուտը կառավարման տարրին, որը պարունակում id
է ծալվող տարրը: Էկրանի ժամանակակից ընթերցիչները և նմանատիպ օժանդակ տեխնոլոգիաները օգտագործում են այս հատկանիշը՝ օգտատերերին լրացուցիչ դյուրանցումներ տրամադրելու համար՝ անմիջապես դեպի ծալվող տարրը նավարկելու համար:
Նկատի ունեցեք, որ Bootstrap-ի ընթացիկ իրականացումը չի ներառում ստեղնաշարի տարբեր կամընտիր փոխազդեցությունները, որոնք նկարագրված են WAI-ARIA Authoring Practices 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
տարրին՝ մեկ կամ մի քանի ծալվող տարրերի կառավարումը ավտոմատ կերպով նշանակելու համար: Հատկանիշն data-bs-target
ընդունում է CSS ընտրիչ՝ կիրառման համար փլուզումը: Համոզվեք, որ դասը ավելացրե՛ք 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...
})