in English

Offcanvas

Вградете скрити странични ленти във вашия проект за навигация, колички за пазаруване и други с няколко класа и нашия JavaScript плъгин.

На тази страница

Как работи

Offcanvas е компонент на страничната лента, който може да се превключва чрез JavaScript, за да се показва от левия, десния или долния край на прозореца за изглед. Бутоните или котвите се използват като тригери, които са прикрепени към конкретни елементи, които превключвате, а dataатрибутите се използват за извикване на нашия JavaScript.

Offcanvas споделя част от същия JavaScript код като модалните. Концептуално те са доста сходни, но са отделни плъгини.
По подобен начин някои променливи Sass източник за стиловете и размерите на offcanvas са наследени от променливите на модала.
Когато се покаже, offcanvas включва фон по подразбиране, върху който може да се щракне, за да се скрие offcanvas.
Подобно на модалите, само един offcanvas може да бъде показан в даден момент.

Горе главата! Като се има предвид как CSS обработва анимациите, не можете да използвате marginили translateвърху .offcanvasелемент. Вместо това използвайте класа като независим обвиващ елемент.

Анимационният ефект на този компонент зависи от prefers-reduced-motionмедийната заявка. Вижте раздела за намалено движение в нашата документация за достъпност .

Примери

Offcanvas компоненти

По-долу е даден пример извън платното, който се показва по подразбиране (чрез .showon .offcanvas). Offcanvas включва поддръжка за заглавка с бутон за затваряне и незадължителен клас на тялото за някои начални padding. Предлагаме ви да включите заглавки извън платно с действия за отхвърляне, когато е възможно, или да предоставите изрично действие за отхвърляне.

Съдържанието за 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 отляво на прозореца за изглед (показан по-горе)
.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>елемента е деактивирано, когато се виждат извънплатно и неговият фон. Използвайте 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>

Достъпност

Тъй като панелът 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скрива offcanvas на дъното

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

Чрез атрибути на данни

Превключване

Добавете data-bs-toggle="offcanvas"и data-bs-targetили hrefкъм елемента, за да присвоите автоматично управление на един елемент offcanvas. Атрибутът data-bs-targetприема CSS селектор, към който да се приложи offcanvas. Не забравяйте да добавите класа offcanvasкъм елемента offcanvas. Ако искате да е отворен по подразбиране, добавете допълнителния клас show.

Отхвърляне

Отхвърлянето може да бъде постигнато с dataатрибута на бутон в рамките на offcanvas , както е показано по-долу:

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

Докато и двата начина за отхвърляне на 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 документация за повече информация .

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

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

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Метод	Описание
`toggle`	Превключва елемент извън платното на показан или скрит. Връща се към повикващия, преди елементът offcanvas действително да бъде показан или скрит (т.е. преди събитието `shown.bs.offcanvas`или да `hidden.bs.offcanvas`се появи).
`show`	Показва елемент извън платното. Връща се към повикващия, преди действително да бъде показан елементът offcanvas (т.е. преди `shown.bs.offcanvas`събитието да се случи).
`hide`	Скрива offcanvas елемент. Връ��а се към извикващия, преди елементът 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

Настроики

Методи

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

събития