Згарнуць
Пераключыце бачнасць кантэнту ў вашым праекце з дапамогай некалькіх класаў і нашых плагінаў JavaScript.
Як гэта працуе
Плагін JavaScript для згортвання выкарыстоўваецца для паказу і схавання змесціва. Кнопкі або якары выкарыстоўваюцца ў якасці трыгераў, якія супастаўляюцца з пэўнымі элементамі, якія вы перамыкаеце. Згортванне элемента анімуе height
яго бягучае значэнне да 0
. Улічваючы, як CSS апрацоўвае анімацыю, вы не можаце выкарыстоўваць padding
для .collapse
элемента. Замест гэтага выкарыстоўвайце клас як незалежны элемент абгорткі.
prefers-reduced-motion
медыя-запыту. Глядзіце раздзел аб
паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .
Прыклад
Націсніце кнопкі ніжэй, каб паказаць і схаваць іншы элемент праз змены класа:
.collapse
хавае змест.collapsing
ужываецца пры пераходах.collapse.show
паказвае кантэнт
Як правіла, мы рэкамендуем выкарыстоўваць кнопку з data-bs-target
атрыбутам. Хоць гэта не рэкамендуецца з семантычнага пункту гледжання, вы таксама можаце выкарыстоўваць спасылку з href
атрыбутам (і 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
непасрэднага даччынага элемента. Не саромейцеся пісаць свой уласны 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>
Некалькі мэтаў
Аб'ект <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 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...
})