Phuhlama
Fetoša go bonagala ga diteng go ralala le porojeke ya gago ka diklase tše mmalwa le di-plugin tša rena tša JavaScript.
Kamoo e šomago ka gona
Plugin ya JavaScript ya go phuhlama e šomišwa go bontšha le go uta diteng. Dikonope goba ditshetledi di šomišwa bjalo ka dihlohleletši tšeo di beakantšwego go dielemente tše itšego tšeo o di fetošago. Go phušola elemente go tla phediša go height
tšwa go boleng bja yona bja bjale go ya go 0
. Ka ge CSS e swara ditshwantšho tša go phela, o ka se šomiše padding
godimo ga .collapse
elemente. Go e na le moo, šomiša sehlopha bjalo ka elemente ya go phuthela ye e ikemetšego.
prefers-reduced-motion
potšišo ya methopo ya ditaba. Bona
karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .
Mohlala
Klika dikonope tše di lego ka mo tlase go bontšha le go uta elemente ye nngwe ka diphetogo tša sehlopha:
.collapse
e uta diteng.collapsing
e dirišwa nakong ya diphetogo.collapse.show
e bontšha diteng
Ka kakaretšo, re kgothaletša go diriša konope yeo e nago le data-bs-target
seka. Le ge e sa kgothaletšwe go tšwa go ntlha ya semantiki, o ka šomiša gape kgokagano le href
seka (le a role="button"
). Maemong a mabedi, the data-bs-toggle="collapse"
e a nyakega.
<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>
Rapamego
Plugin ya go phuhlama e thekga gape go phuhlama mo go rapaletšego. Oketša .collapse-horizontal
sehlopha sa sefetoši go fetoša go width
e na height
le gomme o beakantše a width
godimo ga elemente ya ngwana ya kgauswi. Ikwe o lokologile go ngwala Sass ya gago ya tlwaelo, diriša mekgwa ya ka gare ga mothaladi, goba o diriša didirišwa tša rena tša bophara .
min-height
sete ya go efoga go penta gape ka mo go feteletšego ka go di-doc tša rena, se ga se nyakege ka go lebanya.
Ke fela width
elemente ya godimo ga ngwana yeo e nyakegago.
<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>
Diphetho tše dintši
A <button>
goba <a>
e ka bontšha le go uta dielemente tše ntši ka go di šupa ka mokgethi ka go seka sa yona href
goba data-bs-target
. Multiple <button>
goba <a>
e ka bontšha le go uta elemente ge e le gore yo mongwe le yo mongwe o e šupa ka bona href
goba data-bs-target
seka
<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>
Phihlelelo
Kgonthiša gore o tlaleletša aria-expanded
go elemente ya taolo. Seka se se fetišetša ka go lebanya boemo bja bjale bja elemente yeo e phuhlamago yeo e tlemilwego go taolo go babadi ba skrine le theknolotši ya go thuša ye e swanago. Ge e le gore elemente ye e phuhlamago e tswaletšwe ka go ikemela, seka godimo ga elemente ya taolo se swanetše go ba le boleng bja aria-expanded="false"
. Ge e le gore o beakantše elemente ye e phuhlamago gore e bule ka go ikemela o šomiša show
sehlopha, beakanya aria-expanded="true"
godimo ga taolo go e na le moo. Plugin e tla fetola seka se ka go iketla taolong go ya ka gore goba aowa elemente ye e phuhlamago e butšwe goba e tswaletšwe (ka JavaScript, goba ka lebaka la gore mosediriši o hlohleleditše elemente ye nngwe ya taolo yeo le yona e tlemilwego go elemente ye e swanago ye e phuhlamago). Ge e le gore elemente ya HTML ya elemente ya taolo ga se konope (mohlala, an <a>
goba <div>
), sekarole="button"
e swanetše go tlaleletšwa go elemente.
Ge e le gore elemente ya gago ya taolo e nepiša elemente e tee ye e phuhlamago – ke gore data-bs-target
seka se šupa id
mokgethi – o swanetše go oketša aria-controls
seka go elemente ya taolo, yeo e nago le id
ya elemente ye e phuhlamago. Dibadi tša sebjalebjale tša skrine le theknolotši ye e swanago ya go thuša di šomiša seka se go fa badiriši dikgaoletšo tša tlaleletšo tša go sepela thwii go elemente yeo e phuhlamago ka boyona.
Hlokomela gore phethagatšo ya bjale ya Bootstrap ga e akaretše ditirišano tša go fapafapana tša khiiboto tša boikhethelo tšeo di hlalošitšwego ka go mohlala wa accordion wa WAI-ARIA Authoring Practices 1.1 - o tla swanelwa ke go akaretša tše ka bowena ka JavaScript ya tlwaelo.
Sass
Diphetogo
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Diklase
Diklase tša phetogo ya go phuhlama di ka hwetšwa ka scss/_transitions.scss
ge tše di abelanwa go ralala le dikarolo tše ntši (go phuhlama le accordion).
.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);
}
}
Tšhomišo
Plugin ya go phuhlama e šomiša diklase tše mmalwa go swaragana le go phagamiša boima:
.collapse
e uta diteng.collapse.show
e bontšha diteng.collapsing
e tlaleletšwa ge phetogo e thoma, gomme ya tlošwa ge e fedile
Diklase tše di ka hwetšwa go _transitions.scss
.
Ka dika ya data
E no tlaleletša data-bs-toggle="collapse"
le a data-bs-target
go elemente go abela ka go iketla taolo ya elemente e tee goba tše ntši tše di phuhlamago. Sebopego data-bs-target
se amogela mokgethi wa CSS go diriša go phuhlama go. Kgonthiša gore o tlaleletša sehlopha collapse
go elemente ye e phuhlamago. Ge e ba o rata gore e bulege ka go ikemela, oketša sehlopha sa tlaleletšo show
.
Go oketša taolo ya sehlopha ya go swana le accordion go lefelo leo le phuhlamago, oketša seka sa datha data-bs-parent="#selector"
. Lebelela letlakala la accordion bakeng sa tsebišo e oketšegilego.
Ka JavaScript
Kgontšha ka seatla ka:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Dikgetho
Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-bs-
, bjalo ka go data-bs-parent=""
.
Leina | Mohuta | Hlokomologa | Tlhalošo |
---|---|---|---|
parent |
mokgethi wa | jQuery selo sa | DOM elemente | false |
Ge e le gore motswadi o filwe, gona dielemente ka moka tše di phuhlamago ka fase ga motswadi yo a laeditšwego di tla tswalelwa ge selo se se se phuhlamago se bontšhwa. (e tšoanang le boitšoaro ba setso accordion - sena se itšetlehile ka card sehlopha). Sebopego se swanetše go bewa godimo ga lefelo leo le phuhlamago leo le nepišitšwego. |
toggle |
boolean ya go swana | true |
Toggles elements collapsible ka pitso |
Mekgwa ya go šoma
Mekgwa ya asynchronous le diphetogo
Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .
Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .
E dira gore diteng tša gago di šome bjalo ka elemente ye e phuhlamago. E amogela dikgetho tša boikhethelo object
.
O ka hlama mohlala wa go phuhlama ka moagi, mohlala:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Mokgwa | Tlhalošo |
---|---|
toggle |
E fetola elemente ye e phuhlamago go bontšhwa goba ye e utilwego. E boela go mogala pele ga ge elemente ye e phuhlamago e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.collapse goba hidden.bs.collapse e direga). |
show |
E bontšha elemente yeo e ka phuhlamago. E boela go mogala pele ga ge elemente ye e phuhlamago e bontšhitšwe e le ka kgonthe (mohlala, pele ga ge shown.bs.collapse tiragalo e direga). |
hide |
E uta elemente yeo e ka phuhlamago. E boela go mogala pele ga ge elemente ye e phuhlamago e tloga e utilwe (mohlala, pele ga ge hidden.bs.collapse tiragalo e direga). |
dispose |
E senya go phuhlama ga elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM) |
getInstance |
Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa go phuhlama wo o amanago le elemente ya DOM, o ka e šomiša ka tsela ye:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Mokgwa wa go se fetoge wo o bušetšago mohlala wa go phuhlama wo o amanago le elemente ya DOM goba go hlama ye mpsha ge go ka direga gore e se ya thongwa. O ka e diriša ka tsela ye:bootstrap.Collapse.getOrCreateInstance(element) |
Ditiragalo
Sehlopha sa go phuhlama sa Bootstrap se pepentšha ditiragalo tše mmalwa tša go goketša ka mošomo wa go phuhlama.
Mohuta wa tiragalo | Tlhalošo |
---|---|
show.bs.collapse |
Tiragalo ye e thunya ka pela ge show mokgwa wa mohlala o bitšwa. |
shown.bs.collapse |
Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe). |
hide.bs.collapse |
Tiragalo ye e thuntšhwa ka pela ge hide mokgwa o biditšwe. |
hidden.bs.collapse |
Tiragalo ye e thuntšhwa ge elemente ya go phuhlama e utilwe go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})