Kollass
Aqleb il-viżibilità tal-kontenut fil-proġett tiegħek bi ftit klassijiet u l-plugins JavaScript tagħna.
Kif taħdem
Il-plugin JavaScript kollass jintuża biex juri u jaħbi l-kontenut. Buttuni jew ankri jintużaw bħala triggers li huma mmappjati għal elementi speċifiċi li taqleb. Il-kollass ta' element se janima l- height
mill-valur attwali tiegħu għal 0
. Minħabba kif is-CSS jimmaniġġja l-animazzjonijiet, ma tistax tuża padding
fuq .collapse
element. Minflok, uża l-klassi bħala element indipendenti tat-tgeżwir.
prefers-reduced-motion
-mistoqsija tal-midja. Ara t-
taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .
Eżempju
Ikklikkja l-buttuni hawn taħt biex turi u taħbi element ieħor permezz ta' bidliet fil-klassi:
.collapse
jaħbi l-kontenut.collapsing
hija applikata waqt transizzjonijiet.collapse.show
juri kontenut
Ġeneralment, nirrakkomandaw li tuża buttuna bl- data-bs-target
attribut. Filwaqt li mhux rakkomandat mil-lat semantiku, tista' wkoll tuża link mal- href
attribut (u role="button"
). Fiż-żewġ każijiet, data-bs-toggle="collapse"
huwa meħtieġ.
<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>
Miri multipli
A <button>
jew <a>
jista 'juri u jaħbi elementi multipli billi jirreferenzjahom b'selettur fl- attribut tiegħu href
jew . data-bs-target
Multipli <button>
jew <a>
jistgħu juru u jaħbu element jekk kull wieħed jirreferu għalih bl- attribut href
jew tagħhomdata-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>
Aċċessibilità
Kun żgur li żżid aria-expanded
mal-element ta 'kontroll. Dan l-attribut iwassal b'mod espliċitu l-istat attwali tal-element kollassabbli marbut mal-kontroll lill-qarrejja tal-iskrin u teknoloġiji assistivi simili. Jekk l-element kollassabbli jingħalaq awtomatikament, l-attribut fuq l-element ta 'kontroll għandu jkollu valur ta' aria-expanded="false"
. Jekk issettjajt l-element kollassabbli biex ikun miftuħ awtomatikament billi tuża l- show
klassi, issettja aria-expanded="true"
fuq il-kontroll minflok. Il-plugin awtomatikament ibiddel dan l-attribut fuq il-kontroll ibbażat fuq jekk l-element kollassabbli infetaħx jew ingħalaq jew le (permezz ta’ JavaScript, jew minħabba li l-utent qajjem element ta’ kontroll ieħor marbut ukoll mal-istess element kollassabbli). Jekk l-element HTML tal-element ta' kontroll mhuwiex buttuna (eż., <a>
jew <div>
), l-attributrole="button"
għandhom jiġu miżjuda mal-element.
Jekk l-element ta' kontroll tiegħek qed jimmira għal element wieħed li jista' jiġġarraf – jiġifieri l- data-bs-target
attribut qed jindika id
selettur – għandek iżżid l- aria-controls
attribut ma' l-element ta' kontroll, li jkun fih l id
-element li jista' jiġġarraf. Screen readers moderni u teknoloġiji ta' assistenza simili jagħmlu użu minn dan l-attribut biex jipprovdu lill-utenti b'shortcuts addizzjonali biex jinnavigaw direttament lejn l-element kollassabbli innifsu.
Innota li l-implimentazzjoni attwali ta' Bootstrap ma tkoprix id-diversi interazzjonijiet fakultattivi tat- tastiera deskritti fil- mudell tal-accordion WAI-ARIA Authoring Practices 1.1 - ser ikollok bżonn tinkludi dawn lilek innifsek b'JavaScript personalizzat.
Sass
Varjabbli
$transition-collapse: height .35s ease;
Klassijiet
Il-klassijiet tat-tranżizzjoni tal-kollass jistgħu jinstabu fi scss/_transitions.scss
peress li dawn huma kondiviżi bejn komponenti multipli (kollass u accordion).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Użu
Il-plugin tal-kollass juża ftit klassijiet biex jimmaniġġja l-irfigħ tqil:
.collapse
jaħbi l-kontenut.collapse.show
juri l-kontenut.collapsing
tiżdied meta tibda t-tranżizzjoni, u titneħħa meta tispiċċa
Dawn il-klassijiet jistgħu jinstabu fi _transitions.scss
.
Via attributi tad-data
Żid biss data-bs-toggle="collapse"
u a data-bs-target
mal-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli wieħed jew aktar. L- data-bs-target
attribut jaċċetta selettur CSS biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapse
mal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali show
.
Biex iżżid ġestjoni tal-gruppi bħal accordion f'żona li tista 'tiġġarraf, żid l-attribut tad-dejta data-bs-parent="#selector"
. Irreferi għad-demo biex tara dan fl-azzjoni.
Via JavaScript
Ippermetti manwalment ma':
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Għażliet
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-bs-
, bħal f' data-bs-parent=""
.
Isem | Tip | Default | Deskrizzjoni |
---|---|---|---|
parent |
selettur | Oġġett jQuery | Element DOM | false |
Jekk jiġi pprovdut ġenitur, allura l-elementi kollha li jistgħu jiġġarfu taħt il-ġenitur speċifikat jingħalqu meta jintwera dan l-oġġett kollassabbli. (simili għall-imġieba tradizzjonali tal-accordion - dan jiddependi fuq il- card klassi). L-attribut għandu jiġi stabbilit fuq iż-żona mira kollassabbli. |
toggle |
boolean | true |
Jiddawwar l-element kollassabbli fuq l-invokazzjoni |
Metodi
Metodi asinkroniċi u tranżizzjonijiet
Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .
Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .
Jattiva l-kontenut tiegħek bħala element kollassabbli. Jaċċetta għażliet fakultattivi object
.
Tista 'toħloq istanza ta' kollass mal-kostruttur, pereżempju:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Metodu | Deskrizzjoni |
---|---|
toggle |
Jitbiddel element kollassabbli biex jintwera jew moħbi. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie muri jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.collapse jew ).hidden.bs.collapse |
show |
Juri element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli jkun fil-fatt intwera (eż., qabel ma shown.bs.collapse jseħħ l-avveniment). |
hide |
Jaħbi element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie moħbi (eż., qabel ma hidden.bs.collapse jseħħ l-avveniment). |
dispose |
Jeqred il-kollass ta' element. (Tneħħi d-dejta maħżuna fuq l-element DOM) |
getInstance |
Metodu statiku li jippermettilek li tikseb l-istanza tal-kollass assoċjata ma 'element DOM, tista' tużah bħal dan:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Metodu statiku li jirritorna istanza ta' kollass assoċjata ma' element DOM jew toħloq waħda ġdida f'każ li ma kinitx inizjalizzata. Tista' tużah bħal dan:bootstrap.Collapse.getOrCreateInstance(element) |
Avvenimenti
Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.
Tip ta' avveniment | Deskrizzjoni |
---|---|
show.bs.collapse |
Dan l-avveniment jispara immedjatament meta show jissejjaħ il-metodu tal-istanza. |
shown.bs.collapse |
Dan l-avveniment jiġi sparat meta element ta 'kollass ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
hide.bs.collapse |
Dan l-avveniment jiġi sparat immedjatament meta l- hide metodu jkun ġie msejjaħ. |
hidden.bs.collapse |
Dan l-avveniment jiġi sparat meta element ta 'kollass ikun ġie moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})