Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
Check
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.

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, anwo 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.
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>

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

Kò defile

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

Offcanvas ak defile kò

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

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>

Kò defile ak seri

Ou kapab tou pèmèt <body>defile ak yon seri vizib.

Backdrop ak defile

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

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>

Fondasyon estatik

Lè seri a mete nan estatik, offcanvas la pa pral fèmen lè klike sou deyò li.

Offcanvas
Mwen p'ap fèmen si w klike deyò m '.
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>

Fènwa offcanvas

Te ajoute nan v5.2.0

Chanje aparans offcanvases ak sèvis piblik yo pi byen matche yo nan kontèks diferan tankou navbar nwa. Isit la nou ajoute .text-bg-darknan .offcanvasak .btn-close-whitenan .btn-closepou manier apwopriye ak yon offcanvas nwa. Si ou gen dropdowns nan, konsidere tou ajoute .dropdown-menu-darknan .dropdown-menu.

Offcanvas

Mete kontni offcanvas isit la.

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>

Reponn

Te ajoute nan v5.2.0

Klas ki reponn offcanvas kache kontni andeyò viewport a soti nan yon pwen rupture espesifye ak desann. Pi wo pase pwen rupture sa a, sa ki anndan an ap konpòte yo kòm dabitid. Pa egzanp, .offcanvas-lgkache kontni nan yon offcanvas ki anba a lgbreakpoint, men montre kontni an pi wo a lgbreakpoint la.

Redimansyone navigatè ou a pou montre baskile offcanvas ki reponn.
Reponn offcanvas

Sa a se kontni nan yon .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>

Yo disponib klas offcanvas ki reponn pou chak pwen.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

Plasman

Pa gen okenn plasman default pou eleman offcanvas, kidonk ou dwe ajoute youn nan klas modifikatè ki anba yo.

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

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.

CSS

Varyab

Te ajoute nan v5.2.0

Kòm yon pati nan apwòch Bootstrap a k ap evolye varyab CSS, kounye a offcanvas itilize varyab CSS lokal yo .offcanvaspou amelyore personnalisation an tan reyèl. Valè pou varyab CSS yo mete atravè Sass, kidonk personnalisation Sass toujou sipòte tou.

  --#{$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 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-topkache offcanvas la sou tèt 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 si w ranvwaye yon offcanvas soti deyò pa matche ak modèl dyalòg (modal) Gid Pratik Otorize ARIA . Fè sa sou pwòp risk ou.

Via JavaScript

Pèmèt manyèlman ak:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Opsyon

Kòm opsyon yo ka pase atravè atribi done oswa JavaScript, ou ka ajoute yon non opsyon nan data-bs-, tankou nan data-bs-animation="{value}". Asire w ke w chanje kalite ka non opsyon an soti nan " camelCase " a " kebab-case " lè w ap pase opsyon yo atravè atribi done yo. Pa egzanp, sèvi ak data-bs-custom-class="beautifier"olye de data-bs-customClass="beautifier".

Apati Bootstrap 5.2.0, tout konpozan sipòte yon eksperimantal atribi done rezève data-bs-configki ka loje konfigirasyon eleman senp kòm yon kòd JSON. Lè yon eleman gen data-bs-config='{"delay":0, "title":123}'ak data-bs-title="456"atribi, titlevalè final la pral 456ak atribi done separe yo pral pase sou valè yo bay sou data-bs-config. Anplis de sa, atribi done ki egziste deja yo kapab loje valè JSON tankou data-bs-delay='{"show":0,"hide":150}'.

Non Kalite Default Deskripsyon
backdrop boolean oswa fisèl lastatic true Aplike yon seri sou kò pandan ke offcanvas louvri. Altènativman, presize staticpou yon seri ki pa fèmen offcanvas la lè klike sou.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metòd Deskripsyon
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 nan ka li pa te inisyalize.
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).
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).
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).

Evènman

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

Kalite evènman Deskripsyon
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).
hidePrevented.bs.offcanvas Evènman sa a te revoke lè yo montre offcanvas la, seri li yo staticepi yo fè yon klik deyò offcanvas la. Evènman an te tire tou lè yo peze kle chape a epi keyboardopsyon an mete sou false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})