Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
in English

Offcanvas

Бир нече класстар жана биздин JavaScript плагинибиз менен навигация, соода арабалары жана башкалар үчүн долбооруңузга жашыруун каптал тилкелерин түзүңүз.

Бул бетте

Бул кантип иштейт

Offcanvas - бул JavaScript аркылуу которуштурууга мүмкүн болгон каптал панелинин компоненти, аны көрүү терезесинин сол, оң, жогору же ылдый жагында пайда болот. Баскычтар же анкерлер сиз которуштуруучу белгилүү элементтерге тиркелген триггерлер катары колдонулат, ал эми dataатрибуттар биздин JavaScript'ти чакыруу үчүн колдонулат.

  • Offcanvas модалдар сыяктуу эле JavaScript кодунун айрымдарын бөлүшөт. Концепция боюнча, алар абдан окшош, бирок алар өзүнчө плагиндер.
  • Ошо сыяктуу эле, offcanvas стилдери жана өлчөмдөрү үчүн Sass булак өзгөрмөлөрү модалдык өзгөрмөлөрдөн мураска алынган.
  • Көрсөтүлгөндө, offcanvas сырткы канвасты жашыруу үчүн чыкылдатса боло турган демейки көшөгө камтыйт.
  • Модалдарга окшош, бир эле учурда бир гана тышкаркы сүрөттү көрсөтүүгө болот.

Көңүл бургула! marginCSS анимацияларды кантип иштетээрин эске алып , translateсиз .offcanvasэлементти колдоно албайсыз . Анын ордуна, классты көз карандысыз таңуу элементи катары колдонуңуз.

Бул компоненттин анимация эффектиси prefers-reduced-motionмедиа суроосуна көз каранды. Биздин жеткиликтүүлүк документтерибиздин кыскартылган кыймыл бөлүмүн караңыз .

Мисалдар

Offcanvas компоненттери

Төмөндө демейки боюнча көрсөтүлгөн offcanvas үлгүсү ( .showon аркылуу .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>

Түз демо

.showКласс менен элементте классты которуштуруучу JavaScript аркылуу offcanvas элементин көрсөтүү жана жашыруу үчүн төмөнкү баскычтарды колдонуңуз .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>

Денени жылдыруу

Offcanvas <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
Сыртымдан чыксаң жабылбайм.
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>

Dark offcanvas

v5.2.0 кошулган

Караңгы навигация тилкелери сыяктуу ар кандай контексттерге жакшыраак дал келүү үчүн, тышкаркы сүрөттөрдүн көрүнүшүн коммуналдык программалар менен өзгөртүңүз. Бул жерде биз караңгы кенеп менен туура стилдештирүү үчүн .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 кошулган

Responsive offcanvas класстары мазмунду көрүү портунун сыртында көрсөтүлгөн чекиттен жана ылдыйдан жашырат. Ошол үзүлүү чекинен жогору, ичиндеги мазмун адаттагыдай иштейт. Мисалы, .offcanvas-lgүзгүлтүккө учураган чектин ылдый жагындагы мазмунду жашырат lg, бирок үзүлүү чекитинин үстүндөгү мазмунду көрсөтөт lg.

Жооптуу 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көрүнүш аянтчасынын оң жагына canvas жайгаштырат
  • .offcanvas-topкөрүнүш аянтчасынын жогору жагына полотно жок
  • .offcanvas-bottomкөрүнүш аянтчасынын ылдый жагына полотно жок

Төмөндө жогору, оң жана төмөнкү мисалдарды байкап көрүңүз.

Offcanvas top
...
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>
Offcanvas түбү
...
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 эми .offcanvasреалдуу убакытта жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонот. 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>Бардык түзмөктөрдө туура жүрүм-туруму үчүн аны менен элементти колдонууну унутпаңыз.

Маалымат атрибуттары аркылуу

Которуу

Бир canvas элементин башкарууну автоматтык түрдө дайындоо үчүн элементке кошуу data-bs-toggle="offcanvas"жана a data-bs-targetже . hrefАтрибут offcanvas data-bs-targetколдонуу үчүн CSS селекторун кабыл алат. offcanvasOffcanvas элементине классты кошуңуз . Эгер анын демейки ачылуусун кааласаңыз, кошумча классты кошуңуз 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ты жокко чыгаруунун эки жолу тең колдоого алынганы менен, сырттан сырттан чыгаруу 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 версиясында, бардык компоненттер JSON сап катары жөнөкөй компонент конфигурациясын камтый турган эксперименталдык сакталган маалымат атрибутун колдойт. data-bs-configЭлементте data-bs-config='{"delay":0, "title":123}'жана data-bs-title="456"атрибуттары болгондо, акыркы titleмаани болот 456жана өзүнчө маалымат атрибуттары берилген маанилерди жокко чыгарат data-bs-config. Мындан тышкары, учурдагы маалымат атрибуттары сыяктуу JSON маанилерин жайгаштыра алат data-bs-delay='{"show":0,"hide":150}'.

аты Type Демейки Description
backdrop логикалык же сапstatic true Offcanvas ачык турганда денеге фонду колдонуңуз. Же болбосо, staticчыкылдатылганда тышкаркы сүрөттү жаппаган фон үчүн көрсөтүңүз.
keyboard логикалык true Escape баскычы басылганда, canvas сыртын жабат.
scroll логикалык false Offcanva ачык турганда денени сыдырууга уруксат бериңиз.

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталаары менен, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .

Көбүрөөк маалымат алуу үчүн биздин JavaScript документтерибизди караңыз .

Мазмунуңузду canvas сырткы элемент катары иштетет. Кошумча варианттарды кабыл алат object.

Сиз конструктор менен offcanvas инстанциясын түзө аласыз, мисалы:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Метод Description
getInstance DOM элементи менен байланышкан offcanvas инстанциясын алууга мүмкүндүк берген статикалык ыкма.
getOrCreateInstance DOM элементи менен байланышкан offcanvas инстанциясын алууга же ал инициализацияланбаган учурда жаңысын түзүүгө мүмкүндүк берген статикалык ыкма.
hide Offcanvas элементин жашырат. Offcanvas элементи чындыгында жашырылганга чейин (б.а. hidden.bs.offcanvasокуя болгонго чейин) чалуучуга кайтат.
show Offcanvas элементин көрсөтөт. Offcanvas элементи иш жүзүндө көрсөтүлө электе (б.а. shown.bs.offcanvasокуя болгонго чейин) чалуучуга кайтат.
toggle Offcanvas элементин көрсөтүүгө же жашырууга которот. Offcanvas элементи иш жүзүндө көрсөтүлө электе же жашырылганга чейин (б.а. shown.bs.offcanvasже hidden.bs.offcanvasокуя болгонго чейин) чалуучуга кайтат.

Окуялар

Bootstrap'тин offcanvas классы canvas функциясына кирүү үчүн бир нече окуяларды ачып берет.

Окуя түрү Description
hide.bs.offcanvas Бул окуя hideыкма чакырылганда дароо өчүрүлөт.
hidden.bs.offcanvas Бул окуя offcanvas элементи колдонуучудан жашырылганда иштетилет (CSS өтүүлөрү бүткүчө күтөт).
hidePrevented.bs.offcanvas Бул окуя сырткы канвас көрсөтүлүп, анын көшөгөсү болуп static, сырттан чыкылдатуу аткарылганда иштетилет. Окуя ошондой эле качуу баскычы басылганда жана keyboardпараметр орнотулганда өчүрүлөт false.
show.bs.offcanvas Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
shown.bs.offcanvas Бул окуя canvas сыртындагы элемент колдонуучуга көрүнгөндөн кийин ишке ашат (CSS өтүүлөрү бүткүчө күтөт). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})