Оффцанвас
Уградите скривене бочне траке у свој пројекат за навигацију, колица за куповину и још много тога помоћу неколико класа и нашег ЈаваСцрипт додатка.
Како то ради
Оффцанвас је компонента бочне траке која се може пребацити преко ЈаваСцрипт-а да би се појавила са леве, десне или доње ивице прозора за приказ. Дугмад или сидра се користе као покретачи који су причвршћени за одређене елементе које пребацујете, а data
атрибути се користе за позивање нашег ЈаваСцрипт-а.
- Оффцанвас дели неке од истог ЈаваСцрипт кода као и модали. Концептуално, они су прилично слични, али су одвојени додаци.
- Слично томе, неке изворне Сасс променљиве за стилове и димензије ван платна наслеђују се од модалних варијабли.
- Када је приказано, оффцанвас укључује подразумевану позадину на коју можете кликнути да бисте сакрили оффцанвас.
- Слично модалима, истовремено се може приказати само једно ван платна.
Главу горе! С обзиром на то како ЦСС рукује анимацијама, не можете користити margin
или translate
на .offcanvas
елементу. Уместо тога, користите класу као независни елемент омотача.
prefers-reduced-motion
медијског упита. Погледајте одељак о
смањеном покрету наше документације о приступачности .
Примери
Компоненте ван платна
Испод је пример ван платна који се подразумевано приказује (преко .show
на .offcanvas
). Оффцанвас укључује подршку за заглавље са дугметом за затварање и опциону класу тела за неки почетни padding
. Предлажемо да укључите заглавља ван платна са радњама одбацивања кад год је то могуће или да наведете експлицитну радњу одбацивања.
Оффцанвас
<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
класу на елементу са .offcanvas
класом.
.offcanvas
сакрива садржај (подразумевано).offcanvas.show
приказује садржај
Можете користити везу са href
атрибутом или дугме са data-bs-target
атрибутом. У оба случаја data-bs-toggle="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-start
поставља ван платна лево од прозора за приказ (приказано изнад).offcanvas-end
поставља ван платна десно од прозора за приказ.offcanvas-top
поставља ван платна на врх прозора за приказ.offcanvas-bottom
поставља ван платна на дно прозора за приказ
Испробајте горњи, десни и доњи пример у наставку.
Оффцанвас топ
<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>
Оффцанвас десно
<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>
Оффцанвас боттом
<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>
Позадина
Померање <body>
елемента је онемогућено када су видљиви ван платна и његова позадина. Користите data-bs-scroll
атрибут да бисте променили <body>
померање и data-bs-backdrop
променили позадину.
Обојено померањем
Покушајте да скролујете остатак странице да бисте видели ову опцију у акцији.
Ванплатно са позадином
.....
Позадина са померањем
Покушајте да скролујете остатак странице да бисте видели ову опцију у акцији.
<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>
Приступачност
Пошто је панел ван платна концептуално модални дијалог, обавезно додајте aria-labelledby="..."
— позивајући се на наслов ван платна — у .offcanvas
. Имајте на уму да не морате да додајете role="dialog"
пошто га већ додајемо преко ЈаваСцрипт-а.
Сасс
Променљиве
$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.show
приказује садржај.offcanvas-start
сакрива ванплатно са леве стране.offcanvas-end
сакрива ванплатно са десне стране.offcanvas-bottom
сакрива ванплатно на дну
Додајте дугме за одбацивање са data-bs-dismiss="offcanvas"
атрибутом, које покреће ЈаваСцрипт функционалност. Обавезно користите <button>
елемент са њим за правилно понашање на свим уређајима.
Преко атрибута података
Додајте data-bs-toggle="offcanvas"
и а data-bs-target
или href
елементу да бисте аутоматски доделили контролу над једним елементом ван платна. Атрибут data-bs-target
прихвата ЦСС селектор да примени оффцанвас на. Обавезно додајте класу offcanvas
елементу оффцанвас. Ако желите да се подразумевано отвори, додајте додатну класу show
.
Преко ЈаваСцрипт-а
Омогућите ручно помоћу:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Опције
Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-bs-
, као у data-bs-backdrop=""
.
Име | Тип | Уобичајено | Опис |
---|---|---|---|
backdrop |
боолеан | true |
Нанесите позадину на тело док је ван платна отворено |
keyboard |
боолеан | true |
Затвара ван платна када се притисне тастер за излаз |
scroll |
боолеан | false |
Дозволите померање тела док је ван платна отворено |
Методе
Асинхроне методе и прелази
Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .
Погледајте нашу ЈаваСцрипт документацију за више информација .
Активира ваш садржај као елемент ван платна. Прихвата опционе опције object
.
Можете да креирате инстанцу ван платна помоћу конструктора, на пример:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Метод | Опис |
---|---|
toggle |
Пребацује елемент ван платна на приказан или скривен. Враћа позиваоцу пре него што елемент оффцанвас заиста буде приказан или сакривен (тј. пре него што се деси догађај shown.bs.offcanvas или ).hidden.bs.offcanvas |
show |
Приказује елемент ван платна. Враћа позиваоцу пре него што је елемент оффцанвас стварно приказан (тј. пре него што се shown.bs.offcanvas догађај деси). |
hide |
Сакрива елемент ван платна. Враћа позиваоцу пре него што је елемент оффцанвас заправо сакривен (тј. пре него што се hidden.bs.offcanvas догађај деси). |
getInstance |
Статичка метода која вам омогућава да добијете инстанцу ван платна повез��ну са ДОМ елементом |
getOrCreateInstance |
Статичка метода која вам омогућава да добијете инстанцу оффцанвас-а повезану са ДОМ елементом или креирате нову у случају да није иницијализована |
Догађаји
Боотстрап-ова класа оффцанвас излаже неколико догађаја за спајање на оффцанвас функционалност.
Тип догађаја | Опис |
---|---|
show.bs.offcanvas |
Овај догађај се покреће одмах када show се позове метод инстанце. |
shown.bs.offcanvas |
Овај догађај се покреће када елемент ван платна постане видљив кориснику (сачекаће да се ЦСС транзиције доврше). |
hide.bs.offcanvas |
Овај догађај се покреће одмах када се hide метода позове. |
hidden.bs.offcanvas |
Овај догађај се покреће када је елемент ван платна скривен од корисника (сачекаће да се ЦСС транзиције доврше). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})