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 height
o'i gwerth cyfredol i 0
. O ystyried sut mae CSS yn trin animeiddiadau, ni allwch ddefnyddio padding
ar .collapse
elfen. Yn lle hynny, defnyddiwch y dosbarth fel elfen lapio annibynnol.
prefers-reduced-motion
ymholiad y cyfryngau. Gweler
adran cynnig gostyngol ein dogfennaeth hygyrchedd .
Enghraifft
Cliciwch y botymau isod i ddangos a chuddio elfen arall trwy newidiadau dosbarth:
.collapse
yn cuddio cynnwys.collapsing
yn cael ei gymhwyso yn ystod trawsnewidiadau.collapse.show
yn dangos cynnwys
Yn gyffredinol, rydym yn argymell defnyddio botwm gyda'r data-bs-target
priodoledd. Er nad yw'n cael ei argymell o safbwynt semantig, gallwch hefyd ddefnyddio cyswllt â'r href
priodoledd (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-horizontal
dosbarth addasydd i drosglwyddo'r yn width
lle height
a gosodwch width
ar yr elfen plentyn uniongyrchol. Mae croeso i chi ysgrifennu eich Sass arferiad eich hun, defnyddio arddulliau mewnol, neu ddefnyddio ein cyfleustodau lled .
min-height
set i osgoi ail-baentiadau gormodol yn ein dogfennau, nid yw hyn yn ofynnol yn benodol.
Dim ond yr width
elfen ar y plentyn sydd ei angen.
<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 href
neu data-bs-target
briodoledd. Lluosog <button>
neu gall ddangos a chuddio elfen os yw <a>
pob un ohonynt yn cyfeirio ato gyda'u href
priodwedddata-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-expanded
at 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 show
dosbarth, 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-bs-target
briodwedd yn pwyntio at id
ddetholwr - dylech ychwanegu'r aria-controls
briodwedd at yr elfen reoli, sy'n cynnwys yr elfen sy'n id
cwympo. 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 dewisol amrywiol a ddisgrifir ym mhatrwm acordion 1.1 Arferion Awduro WAI-ARIA 1.1 - 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.scss
cwymp 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:
.collapse
yn cuddio'r cynnwys.collapse.show
yn dangos y cynnwys.collapsing
yn 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-target
at yr elfen i neilltuo rheolaeth yn awtomatig ar un neu fwy o elfennau cwympadwy. Mae'r data-bs-target
priodoledd yn derbyn dewisydd CSS i gymhwyso'r cwymp iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth collapse
at 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:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Opsiynau
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-
, fel yn data-bs-parent=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
parent |
dewiswr | jQuery gwrthrych | elfen DOM | false |
Os darperir rhiant, yna bydd yr holl elfennau cwympadwy o dan y rhiant penodedig yn cael eu cau pan ddangosir yr eitem hon y gellir ei dymchwel. (yn debyg i ymddygiad acordion traddodiadol - mae hyn yn dibynnu ar y card dosbarth). Mae'n rhaid gosod y priodoledd ar yr ardal darged lle gellir cwympo. |
toggle |
boolaidd | true |
Toglo'r elfen cwympadwy ar alw |
Dulliau
Dulliau a thrawsnewidiadau anghydamserol
Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .
Yn actifadu'ch cynnwys fel elfen y gellir ei dymchwel. Yn derbyn opsiwn dewisol object
.
Gallwch greu enghraifft cwymp gyda'r adeiladwr, er enghraifft:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Dull | Disgrifiad |
---|---|
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.collapse neu'r hidden.bs.collapse digwyddiad ddigwydd). |
show |
Yn dangos elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei dangos mewn gwirionedd (ee, cyn i'r shown.bs.collapse digwyddiad ddigwydd). |
hide |
Yn cuddio elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei chuddio mewn gwirionedd (ee, cyn i'r hidden.bs.collapse digwyddiad ddigwydd). |
dispose |
Yn dinistrio cwymp elfen. (Yn dileu data sydd wedi'i storio ar yr elfen DOM) |
getInstance |
Dull statig sy'n eich galluogi i gael yr enghraifft cwymp yn gysylltiedig ag elfen DOM, gallwch ei ddefnyddio fel hyn:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Dull statig sy'n dychwelyd enghraifft cwymp sy'n gysylltiedig ag elfen DOM neu greu un newydd rhag ofn na chafodd ei gychwyn. Gallwch ei ddefnyddio fel hyn:bootstrap.Collapse.getOrCreateInstance(element) |
Digwyddiadau
Mae dosbarth cwymp Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth cwympo.
Math o ddigwyddiad | Disgrifiad |
---|---|
show.bs.collapse |
Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. |
shown.bs.collapse |
Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen cwympo wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
hide.bs.collapse |
Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull wedi'i alw. |
hidden.bs.collapse |
Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen cwympo wedi'i chuddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})