Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
in English

Փլուզվել

Միացրեք ձեր նախագծում բովանդակության տեսանելիությունը մի քանի դասերի և մեր 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"էլ պահանջվում է.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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-ը, օգտագործեք ներկառուցված ոճեր կամ օգտագործեք մեր լայնության կոմունալ ծառայությունները :heightwidth

Խնդրում ենք նկատի ունենալ, որ թեև ստորև բերված օրինակն ունի մի min-heightշարք՝ մեր փաստաթղթերում ավելորդ ներկումներից խուսափելու համար, դա բացահայտորեն չի պահանջվում: Պահանջվում է միայն widthon the child տարրը:

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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հատկանիշով

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.
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.
<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...
})