Оффцанвас

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

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

Како то ради

Оффцанвас је компонента бочне траке која се може пребацити преко ЈаваСцрипт-а да би се појавила са леве, десне, горње или доње ивице прозора за приказ. Дугмад или сидра се користе као покретачи који су причвршћени за одређене елементе које пребацујете, а dataатрибути се користе за позивање нашег ЈаваСцрипт-а.

Оффцанвас дели неке од истог ЈаваСцрипт кода као и модали. Концептуално, они су прилично слични, али су одвојени додаци.
Слично томе, неке изворне Сасс променљиве за стилове и димензије ван платна наслеђују се од модалних варијабли.
Када је приказано, оффцанвас укључује подразумевану позадину на коју можете кликнути да бисте сакрили оффцанвас.
Слично модалима, истовремено се може приказати само једно ван платна.

Главу горе! С обзиром на то како ЦСС рукује анимацијама, не можете користити marginили translateна .offcanvasелементу. Уместо тога, користите класу као независни елемент омотача.

Ефекат анимације ове компоненте зависи од prefers-reduced-motionмедијског упита. Погледајте одељак о смањеном покрету наше документације о приступачности .

Примери

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

Испод је пример ван платна који се подразумевано приказује (преко .showна .offcanvas). Оффцанвас укључује подршку за заглавље са дугметом за затварање и опциону класу тела за неки почетни padding. Предлажемо да укључите заглавља ван платна са радњама одбацивања кад год је то могуће или да наведете експлицитну радњу одбацивања.

Садржај за ванплатно иде овде. Овде можете поставити било коју Боотстрап компоненту или прилагођене елементе.

хтмл

<div class="offcanvas offcanvas-start show" 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" 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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Померање тела

Померање <body>елемента је онемогућено када су видљиви ван платна и његова позадина. Користите data-bs-scrollатрибут да бисте омогућили <body>померање.

Покушајте да скролујете остатак странице да бисте видели ову опцију у акцији.

хтмл

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

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

Такође можете омогућити <body>померање са видљивом позадином.

Покушајте да скролујете остатак странице да бисте видели ову опцију у акцији.

хтмл

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

Статичка позадина

Када је позадина постављена на статичну, ван платна се неће затворити када кликнете изван њега.

Нећу затворити ако кликнете изван мене.

хтмл

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Дарк оффцанвас

Додато у в5.2.0

Промените изглед ванплатна помоћу услужних програма да бисте их боље ускладили са различитим контекстима као што су тамне навигационе траке. Овде додајемо .text-bg-darkна .offcanvasи .btn-close-whiteза .btn-closeправилно стилизовање тамног платна. Ако имате падајуће меније, размислите о додавању .dropdown-menu-darkу .dropdown-menu.

Овде поставите садржај ван платна.

хтмл

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Респонсиве

Додато у в5.2.0

Прилагодљиве класе ван платна сакривају садржај изван оквира за приказ од одређене тачке прекида и надоле. Изнад те тачке прекида, садржај унутар ће се понашати као и обично. На пример, .offcanvas-lgсакрива садржај ван платна испод lgтачке прекида, али приказује садржај изнад lgтачке прекида.

Промените величину прегледача да бисте приказали реактивни прекидач ван платна.

Ово је садржај унутар .offcanvas-lg.

хтмл

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Одазивне класе ван платна су доступне за сваку тачку прекида.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

Постављање

Не постоји подразумевани положај за компоненте ван платна, тако да морате додати једну од класа модификатора у наставку.

.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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" 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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" 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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

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

Пошто је панел ван платна концептуално модални дијалог, обавезно додајте aria-labelledby="..."— позивајући се на наслов ван платна — у .offcanvas. Имајте на уму да не морате да додајете role="dialog"пошто га већ додајемо преко ЈаваСцрипт-а.

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, оффцанвас сада користи локалне ЦСС променљиве укључене .offcanvasза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Сасс варијабле

$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-topсакрива ван платна на врху
.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>

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

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

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

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Опције

Пошто опције могу да се прослеђују преко атрибута података или ЈаваСцрипт-а, можете додати име опције у data-bs-, као у data-bs-animation="{value}". Обавезно промените тип случаја назива опције из „ цамелЦасе ” у „ кебаб-цасе ” када преносите опције преко атрибута података. На пример, користите data-bs-custom-class="beautifier"уместо data-bs-customClass="beautifier".

Од Боотстрап 5.2.0, све компоненте подржавају експериментални резервисани атрибут података data-bs-configкоји може да садржи једноставну конфигурацију компоненте као ЈСОН стринг. Када елемент има атрибуте data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", коначна titleвредност ће бити 456и одвојени атрибути података ће заменити вредности дате на data-bs-config. Поред тога, постојећи атрибути података могу да садрже ЈСОН вредности попут data-bs-delay='{"show":0,"hide":150}'.

Име	Тип	Уобичајено	Опис
`backdrop`	боолеан или стринг`static`	`true`	Нанесите позадину на тело док је ван платна отворено. Алтернативно, наведите `static`за позадину која не затвара ван платна када се кликне.
`keyboard`	боолеан	`true`	Затвара ван платна када се притисне тастер за излаз.
`scroll`	боолеан	`false`	Дозволите померање тела док је ван платна отворено.

Методе

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

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

Погледајте нашу ЈаваСцрипт документацију за више информација .

Активира ваш садржај као елемент ван платна. Прихвата опционе опције object.

Можете креирати инстанцу ван платна помоћу конструктора, на пример:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Метод	Опис
`getInstance`	Статичка метода која вам омогућава да добијете инстанцу ван платна повезану са ДОМ елементом.
`getOrCreateInstance`	Статичка метода која вам омогућава да добијете инстанцу оффцанвас-а повезану са ДОМ елементом или креирате нову у случају да није иницијализована.
`hide`	Сакрива елемент ван платна. Враћа позиваоцу пре него што је елемент оффцанвас заправо сакривен (тј. пре него што се `hidden.bs.offcanvas`догађај деси).
`show`	Приказује елемент ван платна. Враћа позиваоцу пре него што је елемент оффцанвас стварно приказан (тј. пре него што се `shown.bs.offcanvas`догађај деси).
`toggle`	Пребацује елемент ван платна на приказан или скривен. Враћа позиваоцу пре него што елемент оффцанвас заиста буде приказан или сакривен (тј. пре него што се деси догађај `shown.bs.offcanvas`или ).`hidden.bs.offcanvas`

Догађаји

Боотстрап-ова класа оффцанвас излаже неколико догађаја за спајање на оффцанвас функционалност.

Тип догађаја	Опис
`hide.bs.offcanvas`	Овај догађај се покреће одмах када се `hide`метода позове.
`hidden.bs.offcanvas`	Овај догађај се покреће када је елемент ван платна скривен од корисника (сачекаће да се ЦСС транзиције доврше).
`hidePrevented.bs.offcanvas`	Овај догађај се покреће када се прикаже ван платна, његова позадина `static`и када се изврши клик изван платна. Догађај се такође покреће када се притисне тастер за излаз и `keyboard`опција је постављена на `false`.
`show.bs.offcanvas`	Овај догађај се покреће одмах када `show`се позове метод инстанце.
`shown.bs.offcanvas`	Овај догађај се покреће када елемент ван платна постане видљив кориснику (сачекаће да се ЦСС транзиције доврше).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Оффцанвас

Како то ради

Примери

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

Оффцанвас

Демо уживо

Оффцанвас

Померање тела

Ван платна са померањем тела

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

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

Статичка позадина

Оффцанвас

Дарк оффцанвас

Оффцанвас

Респонсиве

Респонсиве оффцанвас

Постављање

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

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

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

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

ЦСС

Променљиве

Сасс варијабле

Употреба

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

Искључи

Одбаци

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

Опције

Методе

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

Догађаји