Փլուզվել

Ինչպես է դա աշխատում

Կլպված 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>

Հորիզոնական

The collapse plugin-ն աջակցում է նաև հորիզոնական փլուզմանը: Ավելացրե՛ք .collapse-horizontalմոդիֆիկատորի դասը, որպեսզի անցում կատարեք և տեղադրեք a- ն անմիջական երեխայի տարրի վրա width: Ազատորեն գրեք ձեր սեփական Sass-ը, օգտագործեք ներկառուցված ոճեր կամ օգտագործեք մեր լայնության կոմունալ ծառայությունները :heightwidth

<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-ի ընթացիկ իրականացումը չի ներառում տարբերը ընտրովի ստեղնաշարի փոխազդեցությունները, որոնք նկարագրված են 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տարրին՝ մեկ կամ մի քանի ծալվող տարրերի կառավարումը ավտոմատ կերպով նշանակելու համար: Հատկանիշն data-bs-targetընդունում է CSS ընտրիչ՝ կիրառման համար փլուզումը: Համոզվեք, որ ավելացրեք դասը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...
})