Пазаканвас

Убудуйце ў свой праект схаваныя бакавыя панэлі для навігацыі, кошыкаў і іншага з дапамогай некалькіх класаў і нашага плагіна JavaScript.

На гэтай старонцы

Як гэта працуе

Offcanvas - гэта кампанент бакавой панэлі, які можна пераключаць з дапамогай JavaScript, каб з'яўляцца злева, справа ці знізу ад краю прагляду. Кнопкі або якары выкарыстоўваюцца ў якасці трыгераў, якія прымацоўваюцца да пэўных элементаў, якія вы перамыкаеце, а dataатрыбуты выкарыстоўваюцца для выкліку нашага JavaScript.

Offcanvas выкарыстоўвае некаторыя з таго ж кода JavaScript, што і мадальныя. Канцэптуальна яны даволі падобныя, але гэта асобныя плагіны.
Падобным чынам, некаторыя зыходныя зменныя Sass для стыляў і памераў offcanvas успадкоўваюцца ад зменных мадалу.
Калі паказана, offcanvas уключае фон па змаўчанні, на які можна націснуць, каб схаваць offcanvas.
Падобна да мадалаў, адначасова можна паказваць толькі адно палатно.

Галаву ўверх! Улічваючы, як CSS апрацоўвае анімацыю, вы не можаце выкарыстоўваць marginабо translateна .offcanvasэлеменце. Замест гэтага выкарыстоўвайце клас як незалежны элемент абгорткі.

Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motionмедыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .

Прыклады

Кампаненты 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 злева ад акна прагляду (паказана вышэй)
.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хавае палатно на дне

Дадайце кнопку адхілення з data-bs-dismiss="offcanvas"атрыбутам, які запускае функцыянальнасць JavaScript. Абавязкова выкарыстоўвайце <button>элемент з ім для правільнай працы на ўсіх прыладах.

Праз атрыбуты дадзеных

Пераключыць

Каб аўтаматычна прызначыць кіраванне адным элементам offcanvas, дадайце data-bs-toggle="offcanvas"і data-bs-targetабо hrefда элемента. Атрыбут data-bs-targetпрымае селектар CSS для прымянення offcanvas. Абавязкова дадайце клас offcanvasда элемента offcanvas. Калі вы хочаце, каб ён быў адкрыты па змаўчанні, дадайце дадатковы клас show.

Звольніць

Адхіленне можа быць дасягнута з дапамогай dataатрыбута на кнопцы ў межах палотна , як паказана ніжэй:

<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, майце на ўвазе, што адхіленне па-за межамі canvas не адпавядае шаблону дызайну мадальнага дыялогу 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`	Прымяніце фон да цела, калі палотна адкрыта
`keyboard`	лагічны	`true`	Закрывае палотна пры націсканні клавішы выхаду
`scroll`	лагічны	`false`	Дазволіць пракрутку цела, калі адкрытае поле offcanvas

Метады

Асінхронныя метады і пераходы

Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript .

Актывуе ваш кантэнт як элемент пазаканваса. Прымае дадатковыя параметры object.

Вы можаце стварыць асобнік offcanvas з дапамогай канструктара, напрыклад:

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

Метад	Апісанне
`toggle`	Пераключае элемент offcanvas на паказаны або схаваны. Вяртаецца да таго, хто выклікае, перш чым элемент 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 з фонам

Фон з пракруткай

Даступнасць

Сас

Пераменныя

Выкарыстанне

Праз атрыбуты дадзеных

Пераключыць

Звольніць

Праз JavaScript

Параметры

Метады

Асінхронныя метады і пераходы

Падзеі