Laghdaigh

Conas a oibríonn sé

Úsáidtear an breiseán JavaScript collapse chun ábhar a thaispeáint agus a cheilt. Úsáidtear cnaipí nó ancairí mar thruicear a dhéantar a mhapáil d’eilimintí sonracha a scorálann tú. Má thiteann eilimint, beochtófar an heightluach reatha go 0. Mar gheall ar an gcaoi a láimhseálann CSS beochan, ní féidir leat é a úsáid paddingar .collapseeilimint. Ina áit sin, bain úsáid as an rang mar eilimint timfhilleadh neamhspleách.

Sampla

Cliceáil ar na cnaipí thíos chun eilimint eile a thaispeáint agus a cheilt trí athruithe ranga:

• .collapseseithí ábhar
• .collapsinga chuirtear i bhfeidhm le linn aistrithe
• .collapse.showléiríonn ábhar

Go ginearálta, molaimid úsáid a bhaint as cnaipe leis an data-bs-targettréith. Cé nach moltar é ó thaobh séimeantach de, is féidir leat nasc a úsáid leis an hreftréith (agus a role="button"). Sa dá chás, data-bs-toggle="collapse"tá an gá.

<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>

Cothrománach

Tacaíonn an breiseán collapsing freisin le titim cothrománach. Cuir an .collapse-horizontalrang mionathraithe leis an trasdul widthin ionad heightagus socraigh widthar an neasghné páiste. Ná bíodh drogall ort do Sass saincheaptha féin a scríobh, stíleanna inlíne a úsáid, nó ár bhfóntais leithead a úsáid .

<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>

Spriocanna iolracha

A <button>nó is féidir leis ileilimintí a thaispeáint agus a cheilt trí thagairt a dhéanamh <a>dóibh le roghnóir ina shaintréith. Iolrú nó is féidir dúil a thaispeáint agus a cheilt má thagraíonn siad dó lena n - airíonnahrefdata-bs-target<button><a>hrefdata-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>

Inrochtaineacht

Bí cinnte a chur aria-expandedleis an eilimint rialaithe. Cuireann an tréith seo in iúl go sainráite staid reatha na heiliminte collapsible a bhaineann le rialú do léitheoirí scáileáin agus teicneolaíochtaí cúnta dá samhail. Má dhúntar an eilimint infhillte de réir réamhshocraithe, ba cheart go mbeadh luach aria-expanded="false". Má tá an eilimint infhillte socraithe agat le bheith oscailte de réir réamhshocraithe ag baint úsáide as an showrang, socraigh aria-expanded="true"ar an rialtán ina ionad sin. Scoránóidh an breiseán an tréith seo go huathoibríoch ar an rialú bunaithe ar cibé acu ar osclaíodh nó nár dúnadh an eilimint infhillte (trí JavaScript, nó toisc gur spreag an t-úsáideoir eilimint rialaithe eile atá ceangailte leis an eilimint infhillte chéanna freisin). Mura cnaipe é eilimint HTML na heiliminte rialaithe (m.sh., an <a>nó <div>), an tréithrole="button"Ba chóir a chur leis an eilimint.

Má tá d’eilimint rialaithe ag díriú ar eilimint infhillte amháin – .i. tá an data-bs-targetaitreabúid dírithe ar idroghnóir – ba cheart duit an aria-controlsaitreabúid a chur leis an eilimint rialaithe, ina bhfuil an ideilimint infhillte. Baineann léitheoirí scáileáin nua-aimseartha agus teicneolaíochtaí cúnta comhchosúla úsáid as an tréith seo chun aicearraí breise a sholáthar d’úsáideoirí chun dul go díreach chuig an eilimint infhillte féin.

Tabhair faoi deara nach gclúdaíonn cur i bhfeidhm reatha Bootstrap na hidirghníomhaíochtaí méarchláir roghnacha éagsúla a bhfuil cur síos orthu i bpatrún bosca ceoil ARIA Authoring Practices Guide - beidh ort iad seo a chur san áireamh le JavaScript saincheaptha duit féin.

Sass

Athróga

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Ranganna

Is féidir ranganna trasdula laghdaithe a fháil scss/_transitions.scssmar go roinntear iad seo thar ilchodanna (titim agus bosca ceoil).

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

Úsáid

Úsáideann an breiseán collapse roinnt ranganna chun an t-ardú trom a láimhseáil:

• .collapseseithí an t-ábhar
• .collapse.showléiríonn an t-ábhar
• .collapsingcuirtear leis nuair a thosaíonn an t-aistriú, agus baintear é nuair a chríochnaíonn sé

Is féidir na ranganna seo a fháil i _transitions.scss.

Trí tréithe sonraí

Ní gá ach cuir data-bs-toggle="collapse"leis data-bs-targetan eilimint chun rialú a shannadh go huathoibríoch ar eilimint infhillte amháin nó níos mó. Glacann an data-bs-targettréith le roghnóir CSS chun an cliseadh a chur i bhfeidhm air. Bí cinnte an rang collapsea chur leis an eilimint infhillte. Más mian leat é a oscailt roimh ré, cuir an rang breise show.

Chun bainistíocht grúpa cosúil le bosca ceoil a chur le limistéar infhillte, cuir an tréith sonraí data-bs-parent="#selector". Féach ar an leathanach bosca ceoil le haghaidh tuilleadh eolais.

Trí JavaScript

Cumasaigh de láimh le:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Roghanna

Toisc gur féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript, is féidir leat ainm rogha a chur i gceangal le data-bs-, mar atá i data-bs-animation="{value}". Bí cinnte cineál an cháis den ainm rogha a athrú ó “ camelCase ” go “ kebab-case ” agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, úsáid data-bs-custom-class="beautifier"in ionad data-bs-customClass="beautifier".

Amhail Bootstrap 5.2.0, tacaíonn na comhpháirteanna go léir le tréith sonraí forchoimeádta turgnamhachadata-bs-config ar féidir cumraíocht chomhpháirt shimplí a áireamh mar theaghrán JSON. data-bs-config='{"delay":0, "title":123}'Nuair a bhíonn agus tréithe ag eilimint , is é an luach data-bs-title="456"deiridh a bheidh ann agus sáróidh na tréithe sonraí ar leith na luachanna a thugtar ar . Ina theannta sin, tá tréithe sonraí atá ann cheana in ann luachanna JSON cosúil le .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Modhanna

Gníomhachtaíonn sé d'ábhar mar eilimint infhillte. Glacann rogha roghnach object.

Is féidir leat sampla titim a chruthú leis an cruthaitheoir, mar shampla:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Imeachtaí

Nochtann rang titim Bootstrap roinnt imeachtaí chun dul i ngleic leis an bhfeidhmiúlacht leite.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})