Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
Check
in English

Пазаканвас

Убудуйце ў свой праект схаваныя бакавыя панэлі для навігацыі, кошыкаў і іншага з дапамогай некалькіх класаў і нашага плагіна 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 або ўласныя элементы.
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
Пазаканвас
Тэкст як запаўняльнік. У рэальным жыцці вы можаце мець элементы, якія вы абралі. Лайкі, тэкст, выявы, спісы і г.д.
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>

Статычны фон

Калі фон усталяваны як статычны, пазаканвас не зачыняецца пры пстрычцы па-за ім.

Пазаканвас
Я не закрыю, калі вы націснеце па-за мной.
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

Змяняйце знешні выгляд палотнаў з дапамогай утыліт, каб лепш супастаўляць іх з рознымі кантэкстамі, напрыклад цёмныя панэлі навігацыі. Тут мы дадаем .text-bg-darkда .offcanvasі .btn-close-whiteдля .btn-closeправільнай кладкі з цёмным офканвасам. Калі ў вас ёсць выпадаючыя спісы, падумайце аб даданні .dropdown-menu-darkў .dropdown-menu.

Пазаканвас

Размесціце тут змесціва 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-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, майце на ўвазе, што адхіленне па-за межамі offcanvas не адпавядае шаблону (мадальнага) дыялогавага акна ARIA Authoring Practices Guide . Рабіце гэта на свой страх і рызыку.

Праз 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 Прымяніце фон да цела, калі палотна адкрыта. У якасці альтэрнатывы вызначце staticфон, які не закрывае палотна пры націску.
keyboard лагічны true Закрывае палотна пры націсканні клавішы выхаду.
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 на паказаны або схаваны. Вяртаецца да таго, хто выклікае, перш чым элемент offcanvas быў фактычна паказаны або схаваны (г.зн. да падзеі shown.bs.offcanvasабо hidden.bs.offcanvas).

Падзеі

Клас offcanvas у Bootstrap паказвае некалькі падзей для падлучэння да функцыянальнасці offcanvas.

Тып падзеі Апісанне
hide.bs.offcanvas Гэта падзея запускаецца адразу пасля hideвыкліку метаду.
hidden.bs.offcanvas Гэта падзея запускаецца, калі элемент offcanvas быў схаваны ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hidePrevented.bs.offcanvas Гэта падзея запускаецца, калі паказваецца пазаканвас, яго фон staticі пстрычка па-за межамі палотна. Падзея таксама запускаецца, калі націснутая клавіша выхаду і keyboardпараметр усталяваны на false.
show.bs.offcanvas Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка.
shown.bs.offcanvas Гэта падзея запускаецца, калі элемент offcanvas робіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})