Преминете към основното съдържание Преминете към навигацията с документи
Check
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
Съдържанието за offcanvas отива тук. Тук можете да поставите почти всеки компонент на Bootstrap или потребителски елементи.
html 
<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>

Демо на живо

Използвайте бутоните по-долу, за да покажете и скриете offcanvas елемент чрез JavaScript, който превключва .showкласа на елемент с .offcanvasкласа.

  • .offcanvasскрива съдържанието (по подразбиране)
  • .offcanvas.showпоказва съдържание

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

Връзка с href
Offcanvas
Малко текст като заместител. В реалния живот можете да имате елементите, които сте избрали. Харесване, текст, изображения, списъци и т.н.
html 
<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>превъртане.

Offcanvas с превъртане на тялото

Опитайте да превъртите останалата част от страницата, за да видите тази опция в действие.

html 
<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>превъртане с видим фон.

Фон с превъртане

Опитайте да превъртите останалата част от страницата, за да видите тази опция в действие.

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

Статичен фон

Когато фонът е настроен на статичен, offcanvas няма да се затвори при щракване извън него.

Offcanvas
Няма да затворя, ако щракнете извън мен.
html 
<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>

Тъмно платно

Добавен във v5.2.0

Променете външния вид на offcanvases с помощни програми, за да ги съпоставите по-добре с различни контексти, като тъмни навигационни ленти. Тук добавяме .text-bg-darkкъм .offcanvasи .btn-close-whiteкъм .btn-closeза правилно оформяне с тъмно платно. Ако имате падащи менюта в рамките, помислете дали да добавите .dropdown-menu-darkкъм .dropdown-menu.

Offcanvas

Поставете offcanvas съдържание тук.

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

Отзивчив

Добавен във v5.2.0

Отзивчивите класове offcanvas скриват съдържание извън прозореца за изглед от определена точка на прекъсване и надолу. Над тази точка на прекъсване съдържанието в него ще се държи както обикновено. Например .offcanvas-lgскрива съдържанието в offcanvas под точката на lgпрекъсване, но показва съдържанието над точката на lgпрекъсване.

Преоразмерете браузъра си, за да покажете адаптивния превключвател на offcanvas.
Отзивчив offcanvas

Това е съдържание в рамките на .offcanvas-lg.

html 
<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
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

Поставяне

Няма разположение по подразбиране за компоненти offcanvas, така че трябва да добавите един от класовете модификатори по-долу.

  • .offcanvas-startпоставя offcanvas отляво на прозореца за изглед (показан по-горе)
  • .offcanvas-endпоставя offcanvas отдясно на прозореца за изглед
  • .offcanvas-topпоставя offcanvas в горната част на прозореца за изглед
  • .offcanvas-bottomпоставя offcanvas в долната част на прозореца за изглед

Опитайте горния, десния и долния пример по-долу.

Топ от платно
...
html 
<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>
Offcanvas дясно
...
html 
<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>
Неплатнено дъно
...
html 
<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>

Достъпност

Тъй като панелът offcanvas концептуално е модален диалог, не забравяйте да добавите aria-labelledby="..."—позовавайки се на заглавието offcanvas—към .offcanvas. Имайте предвид, че не е необходимо да добавяте role="dialog", тъй като вече го добавяме чрез JavaScript.

CSS

Променливи

Добавен във v5.2.0

Като част от развиващия се подход на Bootstrap към CSS променливите, offcanvas вече използва локални CSS променливи .offcanvasза подобрено персонализиране в реално време. Стойностите за CSS променливите се задават чрез Sass, така че персонализирането на Sass все още се поддържа.

  --#{$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};

Sass променливи

$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-topскрива offcanvas отгоре
  • .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 не съответства на диалоговия (модален) модел на ръководството за авторски практики на ARIA . Правете това на свой собствен риск.

Чрез JavaScript

Активирайте ръчно с:

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

Настроики

Тъй като опциите могат да се предават чрез атрибути на данни или JavaScript, можете да добавите име на опция към data-bs-, както в data-bs-animation="{value}". Уверете се, че сте променили типа регистър на името на опцията от „ camelCase ” на „ kebab-case ”, когато предавате опциите чрез атрибути на данни. Например използвайте data-bs-custom-class="beautifier"вместо data-bs-customClass="beautifier".

От Bootstrap 5.2.0 всички компоненти поддържат експериментален резервиран атрибут на данни, data-bs-configкойто може да съдържа проста конфигурация на компонент като JSON низ. Когато даден елемент има атрибути data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", крайната titleстойност ще бъде 456и отделните атрибути на данни ще заменят стойностите, дадени на data-bs-config. В допълнение, съществуващите атрибути на данни могат да съдържат JSON стойности като data-bs-delay='{"show":0,"hide":150}'.

Име Тип По подразбиране Описание
backdrop булево или низstatic true Приложете фон върху тялото, докато offcanvas е отворен. Друга възможност е да посочите staticза фон, който не затваря платното при щракване.
keyboard булево true Затваря offcanvas при натискане на клавиша за излизане.
scroll булево false Разрешете превъртане на тялото, докато offcanvas е отворен.

Методи

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

Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .

Вижте нашата JavaScript документация за повече информация .

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

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

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Метод Описание
getInstance Статичен метод, който ви позволява да получите екземпляра offcanvas, свързан с DOM елемент.
getOrCreateInstance Статичен метод, който ви позволява да получите екземпляра offcanvas, свързан с DOM елемент, или да създадете нов, в случай че не е инициализиран.
hide Скрива offcanvas елемент. Връща се към извикващия, преди елементът offcanvas действително да е бил скрит (т.е. преди да hidden.bs.offcanvasсе случи събитието).
show Показва елемент извън платното. Връща се към повикващия, преди действително да бъде показан елементът offcanvas (т.е. преди shown.bs.offcanvasсъбитието да се случи).
toggle Превключва елемент извън платното на показан или скрит. Връща се към повикващия, преди елементът offcanvas действително да бъде показан или скрит (т.е. преди събитието shown.bs.offcanvasили да hidden.bs.offcanvasсе появи).

събития

Класът offcanvas на Bootstrap разкрива няколко събития за свързване към функционалността на offcanvas.

Тип събитие Описание
hide.bs.offcanvas Това събитие се задейства веднага след hideизвикване на метода.
hidden.bs.offcanvas Това събитие се задейства, когато елемент offcanvas е скрит от потребителя (ще изчака CSS преходите да завършат).
hidePrevented.bs.offcanvas Това събитие се задейства, когато се покаже offcanvas, неговият фон е staticи се извърши щракване извън offcanvas. Събитието също се задейства, когато се натисне клавишът за изход и keyboardопцията е зададена на false.
show.bs.offcanvas Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
shown.bs.offcanvas Това събитие се задейства, когато елемент offcanvas е направен видим за потребителя (ще изчака CSS преходите да завършат). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})