Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
in English

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-ро бо амалҳои радкунӣ дохил кунед ё амали ошкоро рад кунед.

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
Offcanvas
Баъзе матн ҳамчун ҷойнишин. Дар ҳаёти воқеӣ шумо метавонед унсурҳои интихобкардаатон дошта бошед. Мисли матн, тасвирҳо, рӯйхатҳо ва ғайра. 
<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>
Offcanvas рост
... 
<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>

Дастрасӣ

Азбаски панели 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 чанд синф ва атрибутҳоро барои идора кардани борбардории вазнин истифода мебарад:

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

Тавассути 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...
})