Offcanvas
Бир нече класстар жана биздин JavaScript плагинибиз менен навигация, соода арабалары жана башкалар үчүн долбооруңузга жашыруун каптал тилкелерин түзүңүз.
Бул кантип иштейт
Offcanvas - бул JavaScript аркылуу которуштурууга мүмкүн болгон каптал панелинин компоненти, аны көрүү терезесинин сол, оң же ылдый жагында пайда болот. Баскычтар же анкерлер сиз которуштуруучу белгилүү элементтерге тиркелген триггерлер катары колдонулат, ал эми data
атрибуттар биздин JavaScript'ти чакыруу үчүн колдонулат.
- Offcanvas модалдар сыяктуу эле JavaScript кодунун айрымдарын бөлүшөт. Концепция боюнча, алар абдан окшош, бирок алар өзүнчө плагиндер.
- Ошо сыяктуу эле, offcanvas стилдери жана өлчөмдөрү үчүн Sass булак өзгөрмөлөрү модалдык өзгөрмөлөрдөн мураска алынган.
- Көрсөтүлгөндө, offcanvas сырткы канвасты жашыруу үчүн чыкылдатса боло турган демейки көшөгө камтыйт.
- Модалдарга окшош, бир эле учурда бир гана тышкаркы сүрөттү көрсөтүүгө болот.
Көңүл бургула! margin
CSS анимацияларды кантип иштетээрин эске алып , translate
сиз .offcanvas
элементти колдоно албайсыз . Анын ордуна, классты көз карандысыз таңуу элементи катары колдонуңуз.
prefers-reduced-motion
медиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз
.
Мисалдар
Offcanvas компоненттери
Төмөндө демейки боюнча көрсөтүлгөн offcanvas үлгүсү ( .show
on аркылуу .offcanvas
). Offcanvas жабуу баскычы бар башты колдоону жана кээ бир башталгычтар үчүн кошумча корпус классын камтыйт padding
. Мүмкүн болушунча четке кагуу аракеттери менен offcanvas аталыштарын кошууну же ачык эле четке кагуу аракетин көрсөтүүнү сунуштайбыз.
Offcanvas
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>
Түз демо
.show
Класс менен элементте классты которуштуруучу JavaScript аркылуу offcanvas элементин көрсөтүү жана жашыруу үчүн төмөнкү баскычтарды колдонуңуз .offcanvas
.
.offcanvas
мазмунду жашырат (демейки).offcanvas.show
мазмунду көрсөтөт
href
Сиз атрибуту бар шилтемени же атрибуттуу баскычты колдоно аласыз data-bs-target
. Эки учурда тең data-bs-toggle="offcanvas"
талап кылынат.
Offcanvas
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
Жайгаштыруу
Offcanvas компоненттери үчүн демейки жайгаштыруу жок, андыктан төмөндөгү модификатор класстарынын бирин кошушуңуз керек;
.offcanvas-start
көрүнүш терезесинин сол жагына тышкаркы сүрөттөрдү жайгаштырат (жогоруда көрсөтүлгөн).offcanvas-end
көрүнүш аянтчасынын оң жагына canvas жайгаштырат.offcanvas-top
көрүнүш аянтчасынын жогору жагына полотно жок.offcanvas-bottom
көрүнүш аянтчасынын ылдый жагына полотно жок
Төмөндө жогору, оң жана төмөнкү мисалдарды байкап көрүңүз.
Offcanvas top
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas туура
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas түбү
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
Фон
Offcanvas <body>
жана анын көшөгөсү көрүнгөндө элементти сыдыруу өчүрүлөт. Сыдыруу жана фонду которуу үчүн data-bs-scroll
атрибутун колдонуңуз .<body>
data-bs-backdrop
Жылдыруу менен түстүү
Бул опцияны иш жүзүндө көрүү үчүн барактын калган бөлүгүн жылдырып көрүңүз.
Фон менен Offcanvas
.....
Фонду сыдыруу менен
Бул опцияны иш жүзүндө көрүү үчүн барактын калган бөлүгүн жылдырып көрүңүз.
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
Жеткиликтүүлүк
Offcanvas панели концептуалдык түрдө модалдык диалог болгондуктан, сөзсүз түрдө aria-labelledby="..."
-offcanvas аталышына шилтеме кылууну кошуңуз .offcanvas
. Кошуунун кереги жок экенин эске алыңыз, role="dialog"
анткени биз аны JavaScript аркылуу кошконбуз.
Sass
Өзгөрмөлөр
$offcanvas-padding-y: $modal-inner-padding;
$offcanvas-padding-x: $modal-inner-padding;
$offcanvas-horizontal-width: 400px;
$offcanvas-vertical-height: 30vh;
$offcanvas-transition-duration: .3s;
$offcanvas-border-color: $modal-content-border-color;
$offcanvas-border-width: $modal-content-border-width;
$offcanvas-title-line-height: $modal-title-line-height;
$offcanvas-bg-color: $modal-content-bg;
$offcanvas-color: $modal-content-color;
$offcanvas-box-shadow: $modal-content-box-shadow-xs;
Колдонуу
Offcanvas плагини оор жүктөрдү көтөрүү үчүн бир нече класстарды жана атрибуттарды колдонот:
.offcanvas
мазмунун жашырат.offcanvas.show
мазмунун көрсөтөт.offcanvas-start
сол жактагы полотнолорду жашырат.offcanvas-end
оң жактагы полотнолорду жашырат.offcanvas-bottom
астына полотно жашырат
data-bs-dismiss="offcanvas"
JavaScript функциясын иштеткен атрибуту менен четке кагуу баскычын кошуңуз . <button>
Бардык түзмөктөрдө туура жүрүм-туруму үчүн аны менен элементти колдонууну унутпаңыз.
Маалымат атрибуттары аркылуу
Бир canvas элементин башкарууну автоматтык түрдө дайындоо үчүн элементке кошуу data-bs-toggle="offcanvas"
жана a data-bs-target
же . href
Атрибут offcanvas data-bs-target
колдонуу үчүн CSS селекторун кабыл алат. offcanvas
Offcanvas элементине классты кошууну унутпаңыз . Эгер анын демейки ачылуусун кааласаңыз, кошумча классты кошуңуз show
.
JavaScript аркылуу
Кол менен иштетүү:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Параметрлер
Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Берилиш атрибуттары үчүн параметрдин атын data-bs-
, сыяктуу эле кошуңуз data-bs-backdrop=""
.
аты | Type | Демейки | Description |
---|---|---|---|
backdrop |
логикалык | true |
Offcanvas ачык турганда денеге фонду колдонуңуз |
keyboard |
логикалык | true |
Escape баскычы басылганда, сырткы көрүнүштү жабат |
scroll |
логикалык | false |
Offcanva ачык турганда денени сыдырууга уруксат бериңиз |
Методдор
Асинхрондук методдор жана өтүүлөр
Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталганда эле, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .
Көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди караңыз .
Мазмунуңузду canvas сырткы элемент катары иштетет. Кошумча варианттарды кабыл алат object
.
Сиз конструктор менен offcanvas инстанциясын түзө аласыз, мисалы:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Метод | Description |
---|---|
toggle |
Offcanvas элементин көрсөтүүгө же жашырууга которот. Offcanvas элементи иш жүзүндө көрсөтүлө электе же жашырылганга чейин (б.а. shown.bs.offcanvas же hidden.bs.offcanvas окуя болгонго чейин) чалуучуга кайтат. |
show |
Offcanvas элементин көрсөтөт. Offcanvas элементи иш жүзүндө көрсөтүлө электе (б.а. shown.bs.offcanvas окуя болгонго чейин) чалуучуга кайтат. |
hide |
Offcanvas элементин жашырат. Offcanvas элементи чындыгында жашырылганга чейин (б.а. hidden.bs.offcanvas окуя болгонго чейин) чалуучуга кайтат. |
getInstance |
DOM элементи менен байланышкан offcanvas инстанциясын алууга мүмкүндүк берген статикалык ыкма |
getOrCreateInstance |
DOM элементи менен байланышкан offcanvas инстанциясын алууга же ал инициализацияланбаган учурда жаңысын түзүүгө мүмкүндүк берген статикалык ыкма |
Окуялар
Bootstrap'тин offcanvas классы canvas функциясына кирүү үчүн бир нече окуяларды ачып берет.
Окуя түрү | Description |
---|---|
show.bs.offcanvas |
Бул окуя show инстанция ыкмасы чакырылганда дароо күйөт. |
shown.bs.offcanvas |
Бул окуя canvas сыртындагы элемент колдонуучуга көрүнгөндөн кийин ишке ашат (CSS өтүүлөрү бүткүчө күтөт). |
hide.bs.offcanvas |
Бул окуя hide ыкма чакырылганда дароо өчүрүлөт. |
hidden.bs.offcanvas |
Бул окуя offcanvas элементи колдонуучудан жашырылганда өчүрүлөт (CSS өтүүлөрү бүткүчө күтөт). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})