Cwymp

Toglo gwelededd cynnwys ar draws eich prosiect gydag ychydig o ddosbarthiadau a'n ategion JavaScript.

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-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-toggle="collapse"mae'n ofynnol.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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 .widthdosbarth 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-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      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 JQuery yn ei hrefneu data-targetbriodoledd. Lluosog <button>neu gall ddangos a chuddio elfen os yw <a>pob un ohonynt yn cyfeirio ato gyda'u hrefpriodwedddata-target

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

Enghraifft acordion

Gan ddefnyddio'r gydran cerdyn , gallwch chi ymestyn yr ymddygiad cwympo rhagosodedig i greu acordion. Er mwyn cyflawni arddull yr acordion yn iawn, gwnewch yn siŵr eich bod chi'n ei ddefnyddio .accordionfel deunydd lapio.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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 gwympadwy). 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-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 cynnwys y rhyngweithiadau bysellfwrdd amrywiol a ddisgrifir ym mhatrwm acordion ARIA Authoring Practices Guide - bydd angen i chi gynnwys y rhain eich hun gyda JavaScript wedi'i deilwra.

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-toggle="collapse"ac a data-targetat yr elfen i neilltuo rheolaeth yn awtomatig ar un neu fwy o elfennau cwympadwy. Mae'r data-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-parent="#selector". Cyfeiriwch at y demo i weld hyn ar waith.

Trwy JavaScript

Galluogi â llaw gyda:

$('.collapse').collapse()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-parent="".

Dulliau

.collapse(options)

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

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Toglo elfen sy'n cwympo i'w dangos neu ei chuddio. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei dangos neu ei chuddio (hy cyn i'r digwyddiad shown.bs.collapseneu'r hidden.bs.collapsedigwyddiad ddigwydd).

.collapse('show')

Yn dangos elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei dangos (hy cyn i'r shown.bs.collapsedigwyddiad ddigwydd).

.collapse('hide')

Yn cuddio elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei chuddio (hy cyn i'r hidden.bs.collapsedigwyddiad ddigwydd).

.collapse('dispose')

Yn dinistrio cwymp elfen.

Digwyddiadau

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})