Прескокнете до главната содржина Прескокнете на навигацијата со документи
Check
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 или сопствени елементи.
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>елементот е оневозможено кога се видливи offcanvas и неговата заднина. Користете го data-bs-scrollатрибутот за да овозможите <body>лизгање.

Надвоен платно со лизгање на телото

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

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

Како дел од пристапот на еволуирачки CSS променливи на Bootstrap, 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-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 не се совпаѓа со ARIA образецот за дијалог (модален) на водич за авторски практики . Направете го ова на ваш сопствен ризик.

Преку JavaScript

Овозможи рачно со:

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

Опции

Бидејќи опциите може да се пренесат преку атрибути на податоци или JavaScript, можете да додадете име на опција на data-bs-, како во data-bs-animation="{value}". Погрижете се да го смените типот на футролата на името на опцијата од „ camelCase “ во „ ќебап-футрола “ кога ги пренесувате опциите преку атрибути на податоци. На пример, користете 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заднина која не го затвора offcanvas кога ќе се кликне.
keyboard булови true Го затвора offcanvas кога е притиснато копчето за бегство.
scroll булови false Дозволете лизгање на телото додека е отворено offcanvas.

Методи

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

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

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

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

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

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Метод Опис
getInstance Статички метод кој ви овозможува да ја добиете инстанцата offcanvas поврзана со елемент DOM.
getOrCreateInstance Статички метод кој ви овозможува да го добиете примерот offcanvas поврзан со елементот DOM или да креирате нов во случај да не е иницијализиран.
hide Сокрива елемент надвор од платно. Се враќа на повикувачот пред елементот offcanvas всушност да биде скриен (т.е. пред да се hidden.bs.offcanvasслучи настанот).
show Покажува елемент offcanvas. Се враќа кај повикувачот пред всушност да се прикаже елементот offcanvas (т.е. пред да се shown.bs.offcanvasслучи настанот).
toggle Вклучува елемент offcanvas на прикажан или скриен. Се враќа кај повикувачот пред да се покаже или скрие елементот 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...
})