Cwymp

Sut mae'n gweithio

Defnyddir yr ategyn cwymp JavaScript i ddangos a chuddio cynnwys. Defnyddir botymau neu angorau fel sbardunau sy'n cael eu mapio i elfennau penodol y byddwch yn eu toglo. Bydd cwympo elfen yn animeiddio'r heighto'i gwerth cyfredol i 0. O ystyried sut mae CSS yn trin animeiddiadau, ni allwch ddefnyddio paddingar .collapseelfen. Yn lle hynny, defnyddiwch y dosbarth fel elfen lapio annibynnol.

Enghraifft

Cliciwch y botymau isod i ddangos a chuddio elfen arall trwy newidiadau dosbarth:

• .collapseyn cuddio cynnwys
• .collapsingyn cael ei gymhwyso yn ystod trawsnewidiadau
• .collapse.showyn dangos cynnwys

Yn gyffredinol, rydym yn argymell defnyddio botwm gyda'r data-bs-targetpriodoledd. Er nad yw'n cael ei argymell o safbwynt semantig, gallwch hefyd ddefnyddio cyswllt â'r hrefpriodoledd (a role="button"). Yn y ddau achos, data-bs-toggle="collapse"mae'n ofynnol.

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

Llorweddol

Mae'r ategyn cwympo hefyd yn cefnogi cwympo llorweddol. Ychwanegwch y .collapse-horizontaldosbarth addasydd i drosglwyddo'r yn widthlle heighta gosodwch widthar yr elfen plentyn uniongyrchol. Mae croeso i chi ysgrifennu eich Sass arferiad eich hun, defnyddio arddulliau mewnol, neu ddefnyddio ein cyfleustodau lled .

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

Targedau lluosog

Gall A <button>neu <a>ddangos a chuddio elfennau lluosog trwy gyfeirio atynt gyda dewisydd yn ei hrefneu data-bs-targetbriodoledd. Lluosog <button>neu gall ddangos a chuddio elfen os yw <a>pob un ohonynt yn cyfeirio ato gyda'u hrefpriodwedddata-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>

Hygyrchedd

Byddwch yn siwr i ychwanegu aria-expandedat yr elfen reoli. Mae'r nodwedd hon yn cyfleu'n benodol gyflwr presennol yr elfen gwympadwy sy'n gysylltiedig â rheoli darllenwyr sgrin a thechnolegau cynorthwyol tebyg. Os yw'r elfen cwympadwy yn cael ei chau yn ddiofyn, dylai'r priodoledd ar yr elfen reoli fod â gwerth aria-expanded="false". Os ydych chi wedi gosod yr elfen cwympadwy i fod yn agored yn ddiofyn gan ddefnyddio'r showdosbarth, gosodwch aria-expanded="true"y rheolydd yn lle hynny. Bydd yr ategyn yn toglo'r nodwedd hon yn awtomatig ar y rheolydd yn seiliedig ar p'un a yw'r elfen cwympadwy wedi'i hagor neu ei chau ai peidio (trwy JavaScript, neu oherwydd bod y defnyddiwr wedi sbarduno elfen reoli arall hefyd yn gysylltiedig â'r un elfen cwympadwy). Os nad yw elfen HTML yr elfen reoli yn fotwm (ee, an <a>neu <div>), y priodoleddrole="button"dylid ei ychwanegu at yr elfen.

Os yw'ch elfen reoli yn targedu un elfen gwympadwy - hy mae'r data-bs-targetbriodwedd yn pwyntio at idddetholwr - dylech ychwanegu'r aria-controlsbriodwedd at yr elfen reoli, sy'n cynnwys yr elfen sy'n idcwympo. Mae darllenwyr sgrin modern a thechnolegau cynorthwyol tebyg yn defnyddio'r nodwedd hon i ddarparu llwybrau byr ychwanegol i ddefnyddwyr lywio'n uniongyrchol i'r elfen gwympadwy ei hun.

Sylwch nad yw gweithrediad presennol Bootstrap yn cwmpasu'r rhyngweithiadau bysellfwrdd dewisol amrywiol a ddisgrifir ym mhatrwm acordion Canllaw Arferion Awduro ARIA - bydd angen i chi gynnwys y rhain eich hun gyda JavaScript wedi'i deilwra.

Sass

Newidynnau

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

Dosbarthiadau

Gellir dod o hyd i ddosbarthiadau pontio scss/_transitions.scsscwymp gan fod y rhain yn cael eu rhannu ar draws sawl cydran (cwymp ac acordion).

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

Defnydd

Mae'r ategyn cwympo yn defnyddio ychydig o ddosbarthiadau i drin y codi trwm:

• .collapseyn cuddio'r cynnwys
• .collapse.showyn dangos y cynnwys
• .collapsingyn cael ei ychwanegu pan fydd y trawsnewid yn dechrau, a'i ddileu pan fydd yn gorffen

Gellir dod o hyd i'r dosbarthiadau hyn yn _transitions.scss.

Trwy briodoleddau data

Ychwanegwch data-bs-toggle="collapse"ac a data-bs-targetat yr elfen i neilltuo rheolaeth yn awtomatig ar un neu fwy o elfennau cwympadwy. Mae'r data-bs-targetpriodoledd yn derbyn dewisydd CSS i gymhwyso'r cwymp iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth collapseat yr elfen gwympadwy. Os hoffech iddo agor diofyn, ychwanegwch y dosbarth ychwanegol show.

I ychwanegu rheolaeth grŵp tebyg i acordion at ardal sy'n cwympo, ychwanegwch y priodoledd data data-bs-parent="#selector". Cyfeiriwch at dudalen yr acordion am fwy o wybodaeth.

Trwy JavaScript

Galluogi â llaw gyda:

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

Opsiynau

Gan y gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript, gallwch atodi enw opsiwn i data-bs-, fel yn data-bs-animation="{value}". Gwnewch yn siŵr eich bod yn newid math achos yr enw opsiwn o “ camelCase ” i “ kebab-case ” wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, defnyddiwch data-bs-custom-class="beautifier"yn lle data-bs-customClass="beautifier".

O Bootstrap 5.2.0, mae'r holl gydrannau'n cefnogi priodoledd data neilltuedig arbrofoldata-bs-config a all gynnwys cyfluniad cydran syml fel llinyn JSON. Pan fydd gan elfen data-bs-config='{"delay":0, "title":123}'a data-bs-title="456"phriodoleddau, y gwerth terfynol titlefydd 456a bydd y priodoleddau data ar wahân yn diystyru'r gwerthoedd a roddir ar data-bs-config. Yn ogystal, mae priodoleddau data presennol yn gallu cynnwys gwerthoedd JSON fel data-bs-delay='{"show":0,"hide":150}'.

Dulliau

Yn actifadu'ch cynnwys fel elfen y gellir ei dymchwel. Yn derbyn opsiwn dewisol object.

Gallwch greu enghraifft cwymp gyda'r adeiladwr, er enghraifft:

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

Digwyddiadau

Mae dosbarth cwymp Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth cwympo.

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