Оффцанвас

Уградите скривене бочне траке у свој пројекат за навигацију, колица за куповину и још много тога помоћу неколико класа и нашег ЈаваСцрипт додатка.

На овој страници

Како то ради

Оффцанвас је компонента бочне траке која се може пребацити преко ЈаваСцрипт-а да би се појавила са леве, десне или доње ивице прозора за приказ. Дугмад или сидра се користе као покретачи који су причвршћени за одређене елементе које пребацујете, а 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">Backdrop 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-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Употреба

Додатак оффцанвас користи неколико класа и атрибута да би се носио са тешким подизањем:

.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.

Одбаци

Отпуштање се може постићи помоћу dataатрибута на дугмету унутар ванплатна као што је приказано у наставку:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

или на дугме изван платна користећи data-bs-targetкао што је приказано у наставку:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

Иако су подржана оба начина одбацивања ван платна, имајте на уму да се одбацивање изван платна не подудара са шаблоном дизајна модалног дијалога ВАИ-АРИА . Урадите ово на сопствени ризик.

Преко ЈаваСцрипт-а

Омогућите ручно помоћу:

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...
})

Оффцанвас

Како то ради

Примери

Компоненте ван платна

Оффцанвас

Демо уживо

Оффцанвас

Постављање

Оффцанвас топ

Оффцанвас десно

Оффцанвас боттом

Позадина

Обојено померањем

Ванплатно са позадином

Позадина са померањем

Приступачност

Сасс

Променљиве

Употреба

Преко атрибута података

Искључи

Одбаци

Преко ЈаваСцрипт-а

Опције

Методе

Асинхроне методе и прелази

Догађаји