Төп эчтәлеккә күчү Документлар навигациясенә күчү
Check
in English

Офканвас

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

Бу биттә

Ничек бу эшли

Офканвас - JavaScript аша сул, уң, өске яки аскы читтән күренү өчен күберәк компонент. Кнопка яки анкор триггер буларак кулланыла, сез алыштырган конкрет элементларга бәйләнгән, һәм dataатрибутлар безнең JavaScript куллану өчен кулланыла.

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

Идарә итә! CSS анимацияләрне ничек эшләгәнен исәпкә алып, сез marginэлементта translateкуллана .offcanvasалмыйсыз. Киресенчә, классны мөстәкыйль төрү элементы итеп кулланыгыз.

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

Мисаллар

Офканвас компонентлары

Түбәндә офканвас мисал китерелгән, ул килешү буенча күрсәтелә (кабызу аша .show) .offcanvas. Офканвас ябык төймәле башлам өчен ярдәмне һәм кайбер башлангыч өчен өстәмә тән классын үз эченә ала padding. Мөмкин булганда эштән азат итү чаралары белән офканвас башлыкларын кертергә, яисә ачыктан-ачык эштән азат итүне тәкъдим итәбез.

Офканвас
Офканвалар өчен эчтәлек монда бара. Сез монда теләсә нинди 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>

Тере демо

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

Тәнне әйләндерү белән оффанвалар

Бу вариантны эштә күрү өчен битнең калган өлешен әйләндереп карагыз.

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

Офканвас

Офканвас эчтәлеген монда урнаштырыгыз.

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>

Onsаваплы

V5.2.0 өстәлде

Offаваплы оффанвас класслары эчтәлекне билгеле бер ноктадан һәм аста яшерәләр. Бу нокта өстендә эчтәлек гадәттәгечә эш итәчәк. Мәсәлән, .offcanvas-lgоффканвада эчтәлекне өзек lgноктасы астына яшерә, ләкин эчтәлекне өзек өстендә күрсәтә lg.

Offаваплы офканваны алыштыру өчен браузерыгызның размерын үзгәртегез.
Offаваплы оффанвалар

Бу эчтәлек .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>

Breәрбер өзек өчен җаваплы офканвас класслары бар.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

Урнаштыру

Офканвас компонентлары өчен килешү урнаштыру юк, шуңа күрә сез аста үзгәртүче классларның берсен өстәргә тиеш.

  • .offcanvas-startофканваны күренешнең сул ягына урнаштыра (өстә күрсәтелгән)
  • .offcanvas-endофканваны күренешнең уң ягына урнаштыра
  • .offcanvas-topофканваларны күренеш портының өстенә куя
  • .offcanvas-bottomофканваны күренеш төбенә урнаштыра

Түбәндә, өстә, уңда һәм аста мисалларны карагыз.

Офканвас өсте
...
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>
Офканвас дөрес
...
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>

Уңайлык

Офканвас панели концептуаль рәвештә модаль диалог булганлыктан, aria-labelledby="..."офканвас исемен күрсәтеп, өстәргә онытмагыз .offcanvas. Игътибар итегез, сез өстәргә кирәк түгел, role="dialog"чөнки без аны JavaScript аша өстибез.

CSS

Variзгәрешләр

V5.2.0 өстәлде

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, оффанвас хәзерге вакытта җирле 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};

Сасс үзгәрүләр

$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.showэчтәлеген күрсәтә
  • .offcanvas-startсулдагы офканваны яшерә
  • .offcanvas-endофканваны уңда яшерә
  • .offcanvas-topөстендә офканваны яшерә
  • .offcanvas-bottomтөбендә офканваны яшерә

data-bs-dismiss="offcanvas"JavaScript функциясен эшләтеп җибәрүче атрибут белән эштән чыгару төймәсен өстәгез . <button>Барлык җайланмаларда дөрес тәртип өчен элементны кулланыгыз .

Мәгълүмат атрибутлары аша

Күчерү

Бер оффанвас элементына контрольне автоматик рәвештә билгеләү өчен һәм элементка өстәгез data-bs-toggle="offcanvas". Атрибут офканваны куллану өчен CSS селекторын кабул итә. Классны оффанвас элементына өстәргә онытмагыз . Килешү ачык булса, өстәмә класс өстәгез .data-bs-targethrefdata-bs-targetoffcanvasshow

Эштән чыгару

Эштән чыгару оффанвас эчендәге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>
Офканваны эштән чыгаруның ике ысулы да хупланган булса да, онытмагыз, офканваны читтән җибәрү 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 Офканвалар ачык булганда, тәнгә фон кулланыгыз. Альтернатив рәвештә, staticбасылганда офканваны япмаган фонны күрсәтегез.
keyboard буле true Качу ачкычы басылганда офканваны ябалар.
scroll буле false Офканвалар ачык булганда тәнне әйләндерергә рөхсәт итегез.

Методлар

Асинхрон ысуллар һәм күчү

Барлык API ысуллары да асинхрон һәм күчү башлый . Күчерелеш башлангач, ләкин ул беткәнче шалтыратучыга кире кайталар . Моннан тыш, күчү компонентына методик чакыру игътибарсыз калачак .

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

Эчтәлекне оффанвас элементы буларак активлаштыра. Өстәмә вариантларны кабул итә object.

Сез конструктор белән офканвас инстанциясен булдыра аласыз, мәсәлән:

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

Вакыйгалар

Bootstrap офканвас класы офканвас функциясенә керү өчен берничә вакыйганы фаш итә.

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