Фурӯпошӣ
Намоиши мундариҷаро дар лоиҳаи худ бо якчанд синфҳо ва плагинҳои JavaScript-и мо иваз кунед.
Он чӣ гуна кор мекунад
Васлкунаки colapse JavaScript барои нишон додан ва пинҳон кардани мундариҷа истифода мешавад. Тугмаҳо ё лангарҳо ҳамчун триггерҳо истифода мешаванд, ки ба унсурҳои мушаххасе, ки шумо иваз мекунед, харита карда мешаванд. Ҷойгиркунии элемент height
онро аз арзиши ҷории он ба 0
. Бо назардошти он ки чӣ тавр CSS аниматсияҳоро идора мекунад, шумо наметавонед padding
дар .collapse
элемент истифода баред. Ба ҷои ин, синфро ҳамчун унсури печонидани мустақил истифода баред.
prefers-reduced-motion
дархости медиа вобаста аст. Ба
қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .
Мисол
Барои нишон додан ва пинҳон кардани унсури дигар тавассути тағироти синф тугмаҳои зерро клик кунед:
.collapse
мундариҷаро пинҳон мекунад.collapsing
хангоми гузариш ба кор бурда мешавад.collapse.show
мазмун нишон медихад
Умуман, мо тавсия медиҳем, ки тугмаро бо атрибут истифода барем data-bs-target
. Гарчанде ки аз нуқтаи назари семантикӣ тавсия дода намешавад, шумо инчунин метавонед истинодро бо href
атрибут (ва a role="button"
) истифода баред. Дар ҳарду ҳолат, data-bs-toggle="collapse"
зарур аст.
<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>
Уфуқӣ
Васлкунаки фурӯпошӣ инчунин фурӯпошии уфуқиро дастгирӣ мекунад. Барои .collapse-horizontal
гузариш ба width
ҷои он синфи тағирдиҳандаро илова кунед height
ва width
дар унсури кӯдаки фаврӣ a муқаррар кунед. Озод ҳис кунед, ки Sass-и фармоишии худро нависед, услубҳои дохилиро истифода баред ё утилитаҳои паҳнии моро истифода баред .
min-height
барои пешгирӣ кардани рангҳои аз ҳад зиёд дар ҳуҷҷатҳои мо маҷмӯи мавҷуд аст, ин ба таври возеҳ талаб карда намешавад.
Танҳо width
унсури оид ба кўдак лозим аст.
<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>
Ҳадафҳои сершумор
A <button>
ё <a>
метавонад унсурҳои сершуморро бо истинод ба онҳо бо селектор дар атрибут href
ё атрибут нишон диҳад ва пинҳон кунад data-bs-target
. Якчанд <button>
ё <a>
метавонад як унсурро нишон диҳад ва пинҳон кунад, агар онҳо ҳар кадоми онҳо ба он бо аттрибут href
ё атрибут муроҷиат кунандdata-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>
Дастрасӣ
Боварӣ ҳосил кунед aria-expanded
, ки ба элементи назорат илова кунед. Ин атрибут ба таври возеҳ ҳолати кунунии унсури пӯшидашавандаро, ки ба идора вобаста аст, ба хонандагони экран ва технологияҳои ёрирасони шабеҳ мерасонад. Агар унсури ҷамъшаванда ба таври нобаёнӣ баста бошад, атрибут дар элементи назорат бояд арзиши aria-expanded="false"
. Агар шумо унсури ҷамъшавандаро бо нобаёнӣ бо истифода аз show
синф муқаррар aria-expanded="true"
карда бошед, ба ҷои он назоратро насб кунед. Васлкунак ба таври худкор ин атрибутро дар идоракунӣ вобаста ба кушода ё баста шудани элементи ҷамъшаванда иваз мекунад (тавассути JavaScript ё аз сабаби он ки корбар як унсури дигари идоракуниро ба ҳамон унсури пӯшидашаванда пайваст кардааст). Агар элементи HTML-и элементи идоракунӣ тугма набошад (масалан, <a>
ё <div>
), аттрибутrole="button"
бояд ба элемент илова карда шавад.
Агар элементи идоракунии шумо як унсури пӯшидашавандаро ҳадаф қарор диҳад, яъне data-bs-target
атрибут ба id
селектор ишора кунад - шумо бояд aria-controls
атрибутро ба унсури идоракунӣ илова кунед, ки дорои id
унсури пӯшидашаванда аст. Хонандагони экрани муосир ва технологияҳои ёрирасони шабеҳ аз ин атрибут истифода мебаранд, то ба корбарон миёнабурҳои иловагӣ фароҳам оранд, то бевосита ба худи унсури пӯшидашаванда ҳаракат кунанд.
Аҳамият диҳед, ки татбиқи ҷории Bootstrap амалҳои гуногуни ихтиёрии клавиатураро, ки дар шакли аккордеони WAI-ARIA Authoring Practices 1.1 тавсиф шудаанд, фаро намегирад - шумо бояд онҳоро худатон бо JavaScript фармоишӣ дохил кунед.
Сасс
Тағйирёбандаҳо
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Синфҳо
Синфҳои гузариши фурӯпоширо дар он пайдо кардан мумкин аст, scss/_transitions.scss
зеро онҳо дар байни ҷузъҳои сершумор тақсим карда мешаванд (коллапс ва аккордеон).
.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);
}
}
Истифода
Васлкунаки пошхӯрӣ чанд синфро барои идора кардани борбардории вазнин истифода мебарад:
.collapse
мундариҷаро пинҳон мекунад.collapse.show
мазмунро нишон медихад.collapsing
ҳангоми оғози гузариш илова карда мешавад ва ҳангоми ба охир расиданаш хориҷ карда мешавад
Ин синфҳоро дар _transitions.scss
.
Тавассути атрибутҳои додаҳо
data-bs-toggle="collapse"
Барои ба таври худкор таъин кардани назорати як ё якчанд унсурҳои пӯшидашаванда танҳо ва data-bs-target
ба элемент илова кунед . Аттрибут data-bs-target
интихобкунандаи CSS-ро барои татбиқи шикастхӯрӣ қабул мекунад. Боварӣ ҳосил кунед, ки синфро collapse
ба унсури пӯшидашаванда илова кунед. Агар шумо хоҳед, ки он пешфарз кушода шавад, синфи иловагиро илова кунед show
.
Барои илова кардани идоракунии гурӯҳи ба аккордеон монанд ба минтақаи ҷамъшаванда, аттрибутии маълумотро илова кунед data-bs-parent="#selector"
. Барои маълумоти бештар ба саҳифаи аккордеон муроҷиат кунед .
Тавассути JavaScript
Ба таври дастӣ бо:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Имконот
Имконотро тавассути атрибутҳои додаҳо ё JavaScript интиқол додан мумкин аст. Барои атрибутҳои додаҳо, номи опсияро ба data-bs-
монанди замима кунед data-bs-parent=""
.
Ном | Навъи | Пешфарз | Тавсифи |
---|---|---|---|
parent |
интихобкунанда | объекти jQuery | Унсури DOM | false |
Агар волидайн таъмин карда шуда бошад, пас ҳамаи унсурҳои ҷамъшаванда дар зери волидайни нишондодашуда ҳангоми нишон додани ин ашёи ҷамъшаванда баста мешаванд. (ба рафтори анъанавии аккордеон монанд - ин аз card синф вобаста аст). Аттрибут бояд дар майдони мавриди ҳадаф ҷойгир карда шавад. |
toggle |
булӣ | true |
Элементи ҷамъшавандаро ҳангоми даъват иваз мекунад |
Усулҳо
Усулҳо ва гузаришҳои асинхронӣ
Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.
Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .
Мундариҷаи шуморо ҳамчун унсури пӯшидашаванда фаъол мекунад. Вариантҳои ихтиёриро қабул мекунад object
.
Шумо метавонед бо конструктор як мисоли фурӯпоширо эҷод кунед, масалан:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Усул | Тавсифи |
---|---|
toggle |
Элементи ҷамъшавандаро ба нишон ё пинҳон иваз мекунад. Пеш аз он ки унсури ҷамъшаванда воқеан нишон дода ё пинҳон карда шавад (яъне пеш аз рух додани ҳодиса shown.bs.collapse ё ҳодиса) ба зангзан бармегардад.hidden.bs.collapse |
show |
Элементи ҷамъшавандаро нишон медиҳад. Ба зангзананда пеш аз намоиш додани унсури ҷамъшаванда бармегардад (масалан, пеш аз shown.bs.collapse рух додани ҳодиса). |
hide |
Элементи пӯшидашавандаро пинҳон мекунад. Ба зангзананда пеш аз он ки унсури ҷамъшаванда воқеан пинҳон карда шавад, бармегардад (масалан, пеш аз hidden.bs.collapse рух додани ҳодиса). |
dispose |
Фурӯпошии элементро нест мекунад. (Маълумоти захирашударо дар элементи DOM нест мекунад) |
getInstance |
Усули статикӣ, ки ба шумо имкон медиҳад, ки мисоли вайроншавии бо унсури DOM алоқамандро ба даст оред, шумо метавонед онро чунин истифода баред:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Усули статикӣ, ки як мисоли фурӯпошии бо унсури DOM алоқамандро бармегардонад ё дар сурати оғоз нашудани он як нав эҷод мекунад. Шумо метавонед онро чунин истифода баред:bootstrap.Collapse.getOrCreateInstance(element) |
Ҳодисаҳо
Синфи пошхӯрии Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи харобшавӣ фош мекунад.
Навъи ҳодиса | Тавсифи |
---|---|
show.bs.collapse |
Ин ҳодиса фавран ҳангоми show даъват кардани усули мисол сар мешавад. |
shown.bs.collapse |
Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста ба корбар намоён карда шуд (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
hide.bs.collapse |
Ин ҳодиса фавран вақте ки hide усул даъват шудааст, барканор карда мешавад. |
hidden.bs.collapse |
Ин ҳодиса вақте оғоз мешавад, ки унсури шикаста аз корбар пинҳон карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})