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

Некој текст како место за место. Во реалниот живот можете да ги имате елементите што сте ги избрале. Лајк, текст, слики, списоци итн.

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

...

<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да ја вклучите заднината.

Обидете се со лизгање на остатокот од страницата за да ја видите оваа опција во акција.

.....

Обидете се со лизгање на остатокот од страницата за да ја видите оваа опција во акција.

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

Сас

Променливи

$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>елементот со него за правилно однесување на сите уреди.

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

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

Име	Тип	Стандардно	Опис
`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...
})

Offcanvas

Како работи

Примери

Компоненти offcanvas

Offcanvas

Демо во живо

Offcanvas

Поставување

Врв од платно

Offcanvas нели

Дното од платно

Заднина

Обоени со лизгање

Offcanvas со позадина

Заднина со лизгање

Пристапност

Сас

Променливи

Употреба

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

Преку JavaScript

Опции

Методи

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

Настани