Burbur
Ku beddel muuqalka nuxurka mashruucaaga oo dhan dhowr fasal iyo pluginsyadayada JavaScript.
Sida ay u shaqeyso
Burburka borotiinka JavaScript waxaa loo isticmaalaa si loo muujiyo oo loo qariyo waxa ku jira. Badhamada ama barroosinnada waxaa loo isticmaalaa kiciyeyaasha kuwaas oo lagu sawiray walxo gaar ah oo aad beddesho. Burburinta curiye waxay ka soo noolayn doontaa height
qiimaha uu hadda joogo ilaa 0
. Marka la eego sida CSS u maamulo animations, ma isticmaali kartid padding
shay .collapse
. Taa beddelkeeda, u isticmaal fasalka sidii curiye duubid oo madaxbannaan.
prefers-reduced-motion
waydiinta warbaahinta. Eeg
qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .
Tusaale
Guji badhamada hoose si aad u muujiso oo aad u qariso shay kale adigoo isticmaalaya isbeddelada fasalka:
.collapse
qariyaa waxa ku jira.collapsing
waxaa lagu dabaqaa xilliga kala-guurka.collapse.show
waxay muujinaysaa nuxurka
Guud ahaan, waxaan kugula talineynaa inaad isticmaasho badhan leh data-bs-target
sifada. Iyadoo aan lagu talineynin dhinaca aragtida semantic, waxaad sidoo kale isticmaali kartaa xiriiriye leh href
sifada (iyo a role="button"
). Labada xaaladoodba, data-bs-toggle="collapse"
waa loo baahan yahay.
<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>
Horizontal
Plugin-ka burburka sidoo kale wuxuu taageeraa burburka jiifka ah. Ku dar .collapse-horizontal
fasalka beddelka si aad u beddesho beddelka width
oo height
deji width
qaybta u dhow ee ilmaha. Dareen xor u ah inaad qorto caadadaada Sass, isticmaal qaababka khadadka, ama isticmaal adeegyadayada ballaca .
min-height
si looga fogaado dib-u-qaabaynta xad-dhaafka ah ee dukumiintiyadayada, tan si cad looma baahna.
Kaliya width
waxa loo baahan yahay xubinta ilmaha.
<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>
Bartilmaameedyo badan
A <button>
ama <a>
waxay tusi kartaa oo qarin kartaa waxyaalo badan oo kala duwan iyadoo la tixraacayo xushay href
ama data-bs-target
sifada. Dhawr <button>
ama <a>
muujin kara oo qarin kara shay haddii mid kastaa u tixraaco tiisa href
ama data-bs-target
sifada
<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>
Helitaanka
Hubi inaad ku darto aria-expanded
qaybta xakamaynta. Sifadani waxay si cad u gudbinaysaa xaaladda hadda jirta ee walxaha la dumin karo ee ku xidhan xakamaynta si loo eego akhristayaasha iyo tignoolajiyada caawimada ee la midka ah. Haddii curiyaha dumaya uu si caadi ah u xidhan yahay, sifada ku jirta curiyaha kontoroolka waa inuu lahaadaa qiime aria-expanded="false"
. Haddii aad dejisay curiyaha dumin kara inuu si caadi ah u furmo adoo isticmaalaya show
fasalka, beddel aria-expanded="true"
kontaroolada. Plugin-ku si toos ah ayuu u rogi doonaa sifadan kontoroolka iyadoo lagu saleynayo in la furay ama la xidhay cunsurka burburi karaya (iyada oo loo sii marayo JavaScript, ama sababtoo ah isticmaaluhu wuxuu kiciyay curiye kale oo kontorool ah oo sidoo kale ku xidhan isla curiyaha burburi kara). Haddii curiyaha kontoroolka HTML uusan ahayn badhan (tusaale, an <a>
ama <div>
), sifadarole="button"
waa in lagu daraa curiyaha.
Haddii curiyahaaga koontaroolku uu beegsanayo hal unug oo dumin kara - tusaale ahaan data-bs-target
sifadu waxay tilmaamaysaa id
doore - waa inaad ku darto aria-controls
sifada curiyaha kontoroolka, oo ka kooban id
curiyaha burburi kara. Akhristayaasha shaashada casriga ah iyo tignoolajiyada la midka ah ee caawinta ayaa isticmaala sifadan si ay u siiyaan isticmaalayaasha habab gaagaaban oo dheeri ah si ay si toos ah ugu socdaan walxaha burburi kara laftiisa.
Ogsoonow in hirgelinta hadda ee Bootstrap aysan daboolin isdhexgalka kiiboodhka ikhtiyaariga ah ee kala duwan ee lagu qeexay Hab-dhaqanka Qorista ee WAI-ARIA 1.1 - waxaad u baahan doontaa inaad kuwan ku darto JavaScript caadadii.
Sass
Kala duwanaansho
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Fasallada
Fasallada kala-guurka ee burburay waxaa laga heli karaa scss/_transitions.scss
iyadoo kuwan la wadaago qaybo badan (burbur iyo is-raac).
.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);
}
}
Isticmaalka
Plugin-ka burburku wuxuu isticmaalaa dhawr fasal si uu u maareeyo qaadista culus:
.collapse
qariya waxa ku jira.collapse.show
waxay muujinaysaa nuxurka.collapsing
waxa lagu daraa marka kala guurku bilaabmo, lagana saaro marka uu dhamaado
Fasaladaan waxaa laga heli karaa _transitions.scss
.
Iyada oo loo marayo sifooyinka xogta
Kaliya ku dar data-bs-toggle="collapse"
oo a data-bs-target
curiyaha si si toos ah loogu qoondeeyo kantaroolka hal ama in ka badan oo walxo burburi kara. Sifadu data-bs-target
waxay aqbashaa xulashada CSS si loogu dabaqo burburka. U hubso inaad fasalka ku darto collapse
walxaha duminaya. Haddii aad rabto in uu furmo, ku dar fasalka dheeraadka ah show
.
Si loogu daro maamulka kooxda accordion u eg aag burburi kara, ku dar xogta sifada data-bs-parent="#selector"
. Ka eeg bogga accordion wixii macluumaad dheeraad ah.
Iyadoo loo marayo JavaScript
Ku oggolow gacanta:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Ikhtiyaarada
Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-
, sida ku jira data-bs-parent=""
.
Magaca | Nooca | Asal ahaan | Sharaxaada |
---|---|---|---|
parent |
xule | shayga jQuery | Qaybta DOM | false |
Haddii waalid la bixiyo, markaas dhammaan walxaha burburi kara ee hoos yimaada waalidka la cayimay waa la xidhi doonaa marka shaygan dumin kara la muujiyo. (oo la mid ah hab-dhaqanka wadajirka ah ee dhaqanka - tani waxay ku xiran tahay card fasalka). Sifada waa in lagu dejiyaa aagga la beegsanayo ee burburi kara. |
toggle |
booliyan | true |
Wuxuu beddelaa cunsurka burburi kara marka la codsado |
Hababka
Hababka iyo kala-guurka aan isku midka ahayn
Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .
Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .
Waxay u hawlgelisaa macluumaadkaaga sidii shay burburi kara. Aqbala ikhtiyaarka ikhtiyaariga ah object
.
Waxaad ku abuuri kartaa tusaale burbur dhisaha, tusaale ahaan:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Habka | Sharaxaada |
---|---|
toggle |
U rogaa shay burburi kara si loo muujiyo ama loo qariyo. Ku soo noqda qofka soo wacay ka hor inta aan la muujin ama la qarin walxaha burburi kara (tusaale ka hor intaanay dhacdada shown.bs.collapse ama hidden.bs.collapse dhacdada dhicin). |
show |
Wuxuu muujiyaa shay burburi kara. Ku soo noqda qofka soo wacay ka hor inta aan dhab ahaantii la soo bandhigin walxaha burburi kara (tusaale, ka hor intaanay shown.bs.collapse shilku dhicin). |
hide |
Qariyaa shay burburi kara. Ku soo noqda qofka soo wacay ka hor inta aan la qarin walxaha burburi kara (tusaale, ka hor intaanay hidden.bs.collapse dhacdada dhicin). |
dispose |
Waxay baabi'isaa burburka curiye. (Waxay tirtirtaa xogta kaydsan ee cunta DOM) |
getInstance |
Habka istaatigga ah ee kuu oggolaanaya inaad hesho tusaale burburka la xidhiidha curiyaha DOM, waxaad u isticmaali kartaa sidan:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Qaabka taagan ee soo celiya tusaale burbur ah oo la xidhiidha curiyaha DOM ama abuura mid cusub haddii aan la bilaabin. Waxaad u isticmaali kartaa sidan:bootstrap.Collapse.getOrCreateInstance(element) |
Dhacdooyinka
Fasalka burburka Bootstrap wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xirida shaqeynta burburka.
Nooca dhacdada | Sharaxaada |
---|---|
show.bs.collapse |
Dhacdadani waxay isla markaaba gubataa marka show habka tusaalaha la yiraahdo. |
shown.bs.collapse |
Dhacdadan waxa la eryaa marka curiyaha burburay loo muujiyo isticmaalaha (waxay sugi doontaa inta CSS ka wareejinta la dhamaystirayo). |
hide.bs.collapse |
Dhacdadan ayaa isla markiiba la eryaa marka hide habka loo waco. |
hidden.bs.collapse |
Dhacdadan waxa la eryaa marka walxaha burburay laga qariyay isticmaalaha (waxa ay sugi doontaa inta uu CSS ka gudbayo dhamaystirka). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})