Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

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.

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.

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

Offcanvas tèt
...
<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 dwat
...
<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>
Offcanvas anba
...
<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.

Koulè ak defile

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

Offcanvas ak twal

.....

Ankadreman ak defile

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

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;

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

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.

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.offcanvasan hidden.bs.offcanvasrive).
show Montre yon eleman offcanvas. Retounen bay moun kap rele a anvan yo te montre eleman offcanvas la (sa vle di anvan shown.bs.offcanvasevè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.offcanvasevènman an rive).
getInstance Metòd estatik ki pèmèt ou jwenn egzanp offcanvas ki asosye ak yon eleman DOM
getOrCreateInstance Metòd 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 showrele 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 hidete 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...
})