Offcanvas

Бо чанд дарс ва плагини JavaScript-и мо дар лоиҳаи худ панелҳои пинҳонӣ барои паймоиш, аробаҳои харид ва ғайра созед.

Дар ин саҳифа

Он чӣ гуна кор мекунад

Offcanvas як ҷузъи панели паҳлӯӣ мебошад, ки онро тавассути JavaScript иваз кардан мумкин аст, то аз канори чап, рост ё поёни равзанаи намоиш пайдо шавад. Тугмаҳо ё лангарҳо ҳамчун триггерҳо истифода мешаванд, ки ба унсурҳои мушаххасе, ки шумо иваз мекунед, замима карда мешаванд ва dataатрибутҳо барои даъват кардани JavaScript-и мо истифода мешаванд.

Offcanvas баъзе аз ҳамон рамзи JavaScript-ро ҳамчун модальҳо мубодила мекунад. Консепсия, онҳо хеле монанданд, аммо онҳо плагинҳои алоҳида мебошанд.
Ба ҳамин монанд, баъзе тағирёбандаҳои сарчашмаи Sass барои услубҳо ва андозаҳои offcanvas аз тағирёбандаҳои модаль мерос гирифта мешаванд.
Вақте ки нишон дода мешавад, offcanvas заминаеро дар бар мегирад, ки онро барои пинҳон кардани канвас клик кардан мумкин аст.
Монанди модальҳо, дар як вақт танҳо як тасвири канвасро нишон додан мумкин аст.

Сарҳо боло! Бо назардошти он ки чӣ тавр CSS аниматсияҳоро идора мекунад, шумо наметавонед marginё translateдар .offcanvasэлемент истифода баред. Ба ҷои ин, синфро ҳамчун унсури печонидани мустақил истифода баред.

Таъсири аниматсияи ин ҷузъ аз prefers-reduced-motionдархости медиа вобаста аст. Ба қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .

Мисолхо

Компонентҳои Offcanvas

Дар зер намунаи offcanvas оварда шудааст, ки бо нобаёнӣ нишон дода шудааст (тавассути .showon .offcanvas). Offcanvas дорои дастгирии сарлавҳа бо тугмаи пӯшида ва синфи ихтиёрии бадан барои баъзе ибтидоӣ paddingмебошад. Мо тавсия медиҳем, ки шумо ҳангоми имконпазир сарлавҳаҳои 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-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">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>унсурро бо он барои рафтори дуруст дар тамоми дастгоҳҳо истифода баред.

Тавассути атрибутҳои додаҳо

Гузариш

Илова data-bs-toggle="offcanvas"ва data-bs-targetё hrefба элемент барои ба таври худкор таъин кардани назорати як унсури offcanvas. Аттрибут 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>

Гарчанде ки ҳарду роҳи рад кардани канвас дастгирӣ мешаванд, дар хотир доред, ки аз берун хориҷ кардани канвас ба намунаи тарроҳии муколамаи модалии 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`	Ҳангоми кушода будани канвас ба ҳаракати бадан иҷозат диҳед

Усулҳо

Усулҳо ва гузаришҳои асинхронӣ

Ҳама усулҳои 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 воқеан пинҳон карда шавад (яъне пеш аз `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

Намоиши зинда

Offcanvas

Ҷойгиркунӣ

Болои канвас

Offcanvas рост

Поёни канвас

Замина

Бо ҳаракаткунӣ ранг карда шудааст

Оффканвас бо замина

Замина бо паймоиш

Дастрасӣ

Сасс

Тағйирёбандаҳо

Истифода

Тавассути атрибутҳои додаҳо

Гузариш

Рад кардан

Тавассути JavaScript

Имконот

Усулҳо

Усулҳо ва гузаришҳои асинхронӣ

Ҳодисаҳо