Гузаштан ба мундариҷаи асосӣ Ба паймоиши ҳуҷҷатҳо гузаред
Check
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 ё унсурҳои фармоиширо дар ин ҷо ҷойгир кунед.
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>

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

Тугмаҳои зерро барои нишон додан ва пинҳон кардани унсури offcanvas тавассути JavaScript истифода баред, ки .showсинфро дар элемент бо .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>

Ҳаракати бадан

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

Равғани сиёҳ

Дар 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 илова карда шудааст

Синфҳои ҷавобии offcanvas мундариҷаро берун аз порти намоиш аз нуқтаи муайяншуда ва поён пинҳон мекунанд. Болотар аз ин нуқтаи қатъ, мундариҷа дар дохили он ҳамчун муқаррарӣ амал мекунанд. Масалан, .offcanvas-lgмундариҷаро дар берун аз нуқтаи кандашавӣ пинҳон мекунад lg, аммо мундариҷаро дар болои lgнуқтаи қатъ нишон медиҳад.

Андозаи браузери худро тағир диҳед, то гузариши ҳассосро нишон диҳед.
Лавҳаи ҷавобӣ

Ин мундариҷа дар дохили як .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канвасро дар тарафи рости намоишгоҳ ҷойгир мекунад
  • .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>
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>
Поёни канвас
...
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 илова карда шудааст

Ҳамчун як қисми равиши тағирёбандаи CSS-и Bootstrap, offcanvas ҳоло тағирёбандаҳои маҳаллии 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};

Тағйирёбандаҳои 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>унсурро бо он барои рафтори дуруст дар тамоми дастгоҳҳо истифода баред.

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

Гузариш

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

Шумо метавонед бо конструктор мисоли offcanvas эҷод кунед, масалан:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Усул Тавсифи
getInstance Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли offcanvas-ро, ки бо унсури DOM алоқаманд аст, гиред.
getOrCreateInstance Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли offcanvas-ро, ки бо унсури DOM алоқаманд аст, гиред ё дар сурати оғоз нашудани он нав эҷод кунед.
hide Элементи канвасро пинҳон мекунад. Пеш аз он ки унсури offcanvas воқеан пинҳон карда шавад (яъне пеш аз hidden.bs.offcanvasрух додани ҳодиса) ба зангзананда бармегардад.
show Унсури канвасро нишон медиҳад. Пеш аз он ки унсури offcanvas воқеан намоиш дода шавад (яъне пеш аз shown.bs.offcanvasрух додани ҳодиса) ба зангзан бармегардад.
toggle Элементи offcanvas-ро ба нишон ё пинҳон иваз мекунад. Пеш аз он ки унсури offcanvas воқеан нишон дода ё пинҳон карда шавад (яъне пеш аз рух додани ҳодиса shown.bs.offcanvasё ҳодиса) ба зангзан бармегардад.hidden.bs.offcanvas

Ҳодисаҳо

Синфи offcanvas Bootstrap чанд ҳодисаро барои пайвастшавӣ ба функсияи offcanvas фош мекунад.

Навъи ҳодиса Тавсифи
hide.bs.offcanvas Ин ҳодиса фавран вақте ки hideусул даъват шудааст, барканор карда мешавад.
hidden.bs.offcanvas Ин ҳодиса вақте оғоз мешавад, ки унсури offcanvas аз корбар пинҳон карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад).
hidePrevented.bs.offcanvas Ин ҳодиса ҳангоми намоиш додани канвас, пасзаминаи он staticва клик берун аз канвас иҷро карда мешавад. Ҳодиса инчунин ҳангоми пахш кардани тугмаи фирор ва keyboardинтихоб ба false.
show.bs.offcanvas Ин ҳодиса фавран ҳангоми showдаъват кардани усули инстансия оғоз меёбад.
shown.bs.offcanvas Ин ҳодиса вақте оғоз мешавад, ки унсури offcanvas ба корбар намоён карда шудааст (то ба анҷом расидани гузаришҳои CSS интизор мешавад). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})