Офканвас

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

Бу биттә

Ничек бу эшли

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

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

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

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

Мисаллар

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

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

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

Тере демо

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-startофканваны күренешнең сул ягына урнаштыра (өстә күрсәтелгән)
.offcanvas-endофканваны күренешнең уң ягына урнаштыра
.offcanvas-topофканваны күренеш портының өстенә куя
.offcanvas-bottomофканваны күренеш төбенә урнаштыра

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

...

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

Уңайлык

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

Сасс

Variзгәрешләр

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

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

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

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

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`	Офканвалар ачык булганда тәнне әйләндерергә рөхсәт итегез

Методлар

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

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

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

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

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

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

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

Вакыйгалар

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

Вакыйга төре	Тасвирлау
`show.bs.offcanvas`	`show`Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
`shown.bs.offcanvas`	Бу вакыйга кулланучыга офканвас элементы күренгәндә эшләнә (CSS күчү тәмамлануын көтәр).
`hide.bs.offcanvas`	Бу вакыйга `hide`метод чакырылганнан соң ук җибәрелә.
`hidden.bs.offcanvas`	Бу вакыйга офканвас элементы кулланучыдан яшерелгәндә эшләнә (CSS күчү тәмамлануын көтә).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Офканвас

Ничек бу эшли

Мисаллар

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

Офканвас

Тере демо

Офканвас

Урнаштыру

Офканвас өсте

Офканвас дөрес

Офканвас төбе

Фон

Әйләнү белән төсле

Фон белән оффанвалар

Арткы планда

Уңайлык

Сасс

Variзгәрешләр

Куллану

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

JavaScript аша

Вариантлар

Методлар

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

Вакыйгалар