Offcanvas

Konstwi ba yo kache nan pwojè ou a pou navigasyon, kabwa fè makèt, ak plis ankò ak kèk klas ak plugin JavaScript nou an.

Nan paj sa a

Ki jan li fonksyone

Offcanvas se yon eleman ba ki ka chanje atravè JavaScript pou parèt soti nan kwen gòch, dwa oswa anba fenèt la. Bouton oswa lank yo itilize kòm deklannche ki tache ak eleman espesifik ou aktive, epi datayo itilize atribi pou envoke JavaScript nou an.

Offcanvas pataje kèk nan menm kòd JavaScript ak modal yo. Konseptyèlman, yo se byen menm jan, men yo se grefon separe.
Menm jan an tou, kèk varyab sous Sass pou estil ak dimansyon offcanvas yo eritye nan varyab modal la.
Lè yo montre, offcanvas gen ladan yon seri defo ki ka klike pou kache offcanvas la.
Menm jan ak modal, se sèlman yon sèl offcanvas ka montre nan yon moman.

Tèt leve! Etandone ki jan CSS okipe animasyon, ou pa ka itilize marginoswa translatesou yon .offcanvaseleman. Olye de sa, sèvi ak klas la kòm yon eleman anbalaj endepandan.

Efè animasyon eleman sa a depann de prefers-reduced-motionrechèch medya yo. Gade seksyon mouvman redui nan dokiman aksè nou an .

Egzanp yo

Konpozan Offcanvas

Anba a se yon egzanp offcanvas ki montre pa default (via .showsou .offcanvas). Offcanvas gen ladan sipò pou yon header ak yon bouton fèmen ak yon klas kò si ou vle pou kèk inisyal padding. Nou sijere pou w mete en-tête offcanvas ak aksyon anile chak fwa sa posib, oswa bay yon aksyon anile eksplisit.

Kontni pou offcanvas la ale isit la. Ou ka mete jis sou nenpòt eleman Bootstrap oswa eleman koutim isit la.

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

Live Demo

Sèvi ak bouton ki anba yo pou montre ak kache yon eleman offcanvas atravè JavaScript ki chanje .showklas la sou yon eleman ak .offcanvasklas la.

.offcanvaskache kontni (default)
.offcanvas.showmontre kontni

Ou ka itilize yon lyen ak hrefatribi a, oswa yon bouton ak data-bs-targetatribi a. Nan de ka yo, data-bs-toggle="offcanvas"li nesesè.

Link ak href

Gen kèk tèks kòm anplasman. Nan lavi reyèl ou ka gen eleman ou te chwazi yo. Tankou, tèks, imaj, lis, elatriye.

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

Plasman

Pa gen okenn plasman default pou konpozan offcanvas, kidonk ou dwe ajoute youn nan klas modifye anba a;

.offcanvas-startmete offcanvas sou bò gòch fenèt la (yo montre pi wo a)
.offcanvas-endmete offcanvas sou bò dwat viewport la
.offcanvas-topmete offcanvas sou tèt pòtay la
.offcanvas-bottommete offcanvas sou anba a nan pòtay la

Eseye egzanp anlè, adwat ak anba anba a.

...

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

Toile

Defile <body>eleman an enfim lè yon kanva ak seri li yo vizib. Sèvi ak data-bs-scrollatribi a pou chanje <body>defile ak data-bs-backdroppou chanje seri a.

Eseye defile rès paj la pou wè opsyon sa a an aksyon.

.....

Eseye defile rès paj la pou wè opsyon sa a an aksyon.

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

Aksesiblite

Piske panèl offcanvas la se yon dyalòg modal, asire w ke ou ajoute aria-labelledby="..."—fè referans tit la offcanvas—nan .offcanvas. Remake byen ke ou pa bezwen ajoute role="dialog"paske nou deja ajoute li atravè JavaScript.

Sass

Varyab

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

Itilizasyon

Plugin offcanvas la itilize kèk klas ak atribi pou okipe leve lou:

.offcanvaskache kontni an
.offcanvas.showmontre kontni an
.offcanvas-startkache offcanvas la sou bò gòch la
.offcanvas-endkache offcanvas la sou bò dwat la
.offcanvas-bottomkache offcanvas la sou anba a

Ajoute yon bouton ranvwaye ak data-bs-dismiss="offcanvas"atribi a, ki deklanche fonksyonalite JavaScript. Asire ou ke ou sèvi ak <button>eleman nan ak li pou bon konpòtman atravè tout aparèy.

Via atribi done yo

Baskile

Ajoute data-bs-toggle="offcanvas"ak yon data-bs-targetoswa hrefnan eleman pou otomatikman bay kontwòl yon eleman offcanvas. Atribi a data-bs-targetaksepte yon seleksyon CSS pou aplike offcanvas la. Asire w ou ajoute klas offcanvasla nan eleman offcanvas la. Si ou ta renmen li louvri defo, ajoute klas adisyonèl la show.

Ranvwaye

Yo ka fè ranvwa a ak dataatribi ki sou yon bouton nan offcanvas la jan yo montre pi ba a:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

oswa sou yon bouton andeyò twal la lè l sèvi avèk data-bs-targetjan yo montre anba a:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

Pandan ke yo sipòte tou de fason pou ranvwaye yon offcanvas, sonje ke anile deyò yon offcanvas pa matche ak modèl konsepsyon dyalòg modal WAI-ARIA . Fè sa sou pwòp risk ou.

Via JavaScript

Pèmèt manyèlman ak:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-bs-, tankou nan data-bs-backdrop="".

Non	Kalite	Default	Deskripsyon
`backdrop`	booleyen	`true`	Aplike yon seri sou kò pandan ke offcanvas louvri
`keyboard`	booleyen	`true`	Fèmen offcanvas la lè yo peze kle chape
`scroll`	booleyen	`false`	Pèmèt kò defile pandan offcanvas louvri

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon .

Aktive kontni ou kòm yon eleman offcanvas. Aksepte yon opsyon opsyonèl object.

Ou ka kreye yon egzanp offcanvas ak konstrukteur a, pou egzanp:

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

Metòd	Deskripsyon
`toggle`	Baskile yon eleman offcanvas pou montre oswa kache. Retounen bay moun k ap rele a anvan yo montre oswa kache eleman offcanvas la (sa vle di anvan evènman `shown.bs.offcanvas`an `hidden.bs.offcanvas`rive).
`show`	Montre yon eleman offcanvas. Retounen bay moun kap rele a anvan yo te montre eleman offcanvas la (sa vle di anvan `shown.bs.offcanvas`evènman an rive).
`hide`	Kache yon eleman offcanvas. Retounen bay moun kap rele a anvan eleman offcanvas la te kache (sa vle di anvan `hidden.bs.offcanvas`evènman an rive).
`getInstance`	Estatik ki pèmèt ou jwenn egzanp offcanvas ki asosye ak yon eleman DOM
`getOrCreateInstance`	Estatik ki pèmèt ou jwenn egzanp offcanvas ki asosye ak yon eleman DOM, oswa kreye yon nouvo si li pa te inisyalize.

Evènman

Klas offcanvas Bootstrap a ekspoze kèk evènman pou branche nan fonksyon offcanvas.

Kalite evènman	Deskripsyon
`show.bs.offcanvas`	Evènman sa a dife imedyatman lè yo `show`rele metòd egzanp lan.
`shown.bs.offcanvas`	Evènman sa a se revoke lè yon eleman offcanvas te fè vizib pou itilizatè a (ap tann pou tranzisyon CSS fini).
`hide.bs.offcanvas`	Evènman sa a te tire imedyatman lè yo `hide`te rele metòd la.
`hidden.bs.offcanvas`	Evènman sa a revoke lè yon eleman offcanvas te kache pou itilizatè a (ap tann pou tranzisyon CSS fini).

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

Offcanvas

Ki jan li fonksyone

Egzanp yo

Konpozan Offcanvas

Offcanvas

Live Demo

Offcanvas

Plasman

Offcanvas tèt

Offcanvas dwat

Offcanvas anba

Toile

Koulè ak defile

Offcanvas ak twal

Backdrop ak defile

Aksesiblite

Sass

Varyab

Itilizasyon

Via atribi done yo

Baskile

Ranvwaye

Via JavaScript

Opsyon

Metòd

Metòd asynchrone ak tranzisyon

Evènman