Прескокнете до главната содржина Прескокнете до навигацијата со документи
in English

Offcanvas

Создадете скриени странични ленти во вашиот проект за навигација, колички за купување и повеќе со неколку класи и нашиот приклучок за JavaScript.

Како работи

Offcanvas е компонента на страничната лента што може да се префрли преку JavaScript за да се појавува од левиот, десниот или долниот раб на приказот. Копчињата или сидрата се користат како активирања кои се прикачени на одредени елементи што ги менувате, а dataатрибутите се користат за повикување на нашиот JavaScript.

  • Offcanvas споделува дел од истиот JavaScript код како модали. Концептуално, тие се доста слични, но тие се посебни приклучоци.
  • Слично на тоа, некои изворни Sass променливи за стиловите и димензиите на offcanvas се наследени од променливите на модалот.
  • Кога е прикажано, offcanvas вклучува стандардна заднина на која може да се кликне за да се скрие offcanvas.
  • Слично на модалите, може да се прикаже само едно offcanvas во исто време.

Главите горе! Со оглед на тоа како CSS се справува со анимации, не можете да користите marginили translateна .offcanvasелемент. Наместо тоа, користете ја класата како независен елемент за завиткување.

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

Примери

Компоненти offcanvas

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

Offcanvas
Содржината за offcanvas оди овде. Овде можете да поставите речиси која било компонента на Bootstrap или сопствени елементи.
<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>

Демо во живо

Користете ги копчињата подолу за да прикажете и скриете елемент offcanvas преку JavaScript што ја менува .showкласата на елемент со .offcanvasкласата.

  • .offcanvasја крие содржината (стандардно)
  • .offcanvas.showпокажува содржина

Можете да користите врска со hrefатрибутот или копче со data-bs-targetатрибутот. Во двата случаи, data-bs-toggle="offcanvas"потребно е.

Поврзете се со href
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го поставува offcanvas десно од приказот
  • .offcanvas-topпоставува offcanvas на горниот дел од приказот
  • .offcanvas-bottomпоставува offcanvas на дното на приказот

Пробајте ги горните, десните и долните примери подолу.

Врв од платно
...
<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>
Дното од платно
...
<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>елементот е оневозможено кога се видливи offcanvas и неговата заднина. Користете го 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">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>

Пристапност

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

Сас

Променливи

$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ја крие содржината
  • .offcanvas.showја покажува содржината
  • .offcanvas-startго крие платното од левата страна
  • .offcanvas-endго крие платното од десната страна
  • .offcanvas-bottomго крие платното на дното

Додајте копче за отфрлање со data-bs-dismiss="offcanvas"атрибутот, што ја активира функцијата JavaScript. Не заборавајте да го користите <button>елементот со него за правилно однесување на сите уреди.

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

Вклучи

Додајте data-bs-toggle="offcanvas"и a data-bs-targetили hrefна елементот за автоматско доделување на контрола на еден надворешен елемент. Атрибутот data-bs-targetприфаќа CSS избирач за да се примени offcanvas. Не заборавајте да ја додадете класата offcanvasво елементот offcanvas. Ако сакате стандардно да се отвори, додадете ја дополнителната класа show.

Отфрли

Отфрлањето може да се постигне со dataатрибутот на копче во offcanvas како што е прикажано подолу:

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

или на копче надвор од offcanvas користејќи го data-bs-targetкако што е прикажано подолу:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Иако се поддржани двата начини за отфрлање на offcanvas, имајте на ум дека отфрлањето од надвор од offcanvas не се совпаѓа со шемата за дизајнирање на модалниот дијалог WAI-ARIA . Направете го ова на ваш сопствен ризик.

Преку 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="".

Име Тип Стандардно Опис
backdrop булови true Нанесете заднина на телото додека offcanvas е отворено
keyboard булови true Го затвора offcanvas кога е притиснато копчето за бегство
scroll булови false Дозволете лизгање на телото додека е отворено offcanvas

Методи

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

Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .

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

Ја активира вашата содржина како елемент offcanvas. Прифаќа изборни опции object.

Можете да креирате offcanvas пример со конструкторот, на пример:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Метод Опис
toggle Вклучува елемент offcanvas на прикажан или скриен. Се враќа кај повикувачот пред да се покаже или скрие елементот offcanvas (т.е. пред да се случи настанот shown.bs.offcanvasили hidden.bs.offcanvas).
show Покажува елемент offcanvas. Се враќа кај повикувачот пред всушност да се прикаже елементот offcanvas (т.е. пред да се shown.bs.offcanvasслучи настанот).
hide Сокрива елемент надвор од платно. Се враќа на повикувачот пред елементот offcanvas всушност да биде скриен (т.е. пред да се hidden.bs.offcanvasслучи настанот).
getInstance Статички метод кој ви овозможува да ја добиете инстанцата offcanvas поврзана со елемент DOM
getOrCreateInstance Статичен метод кој ви овозможува да го добиете примерот offcanvas поврзан со елемент DOM или да создадете нов во случај да не е иницијализиран

Настани

Класата offcanvas на Bootstrap изложува неколку настани за приклучување во offcanvas функционалноста.

Тип на настан Опис
show.bs.offcanvas Овој настан се вклучува веднаш кога showќе се повика методот на пример.
shown.bs.offcanvas Овој настан се активира кога елементот offcanvas е видлив за корисникот (ќе чека да заврши CSS транзицијата).
hide.bs.offcanvas Овој настан се активира веднаш кога hideметодот е повикан.
hidden.bs.offcanvas Овој настан се активира кога елементот offcanvas е скриен од корисникот (ќе чека да се завршат транзициите на CSS).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})