Skip to main content Skip ad navigationem soUicitudo
Check
in English

Offcanvas

Aedificare latera abscondita in project tuo ad navigationem, in shopping plaustra, et plus cum paucis classibus et nostris JavaScript plugin.

In hac pagina

Quomodo facitur

Offcanvas pars est pars quae distrahi potest per JavaScript ut appareat e parte sinistra, dextra, top, vel ima ora prospectus. Bullae vel ancorae pro triggers adhibentur quae certis elementis te toggle affixa sunt, et dataattributa JavaScript nostros invocare solent.

  • Offcanvas de JavaScript code ut modales participat. Ratione sunt satis similes, sed separatae sunt plugins.
  • Similiter fons quidam variabilis Sass ad stilos offcanvas et dimensiones e variabilibus modalibus hereditate accepta est.
  • Cum probatum est, offcanvas includit defaltam exo- ramus quae potest coniuctionem ad offcanvas occultare.
  • Modalibus similibus, unum tantum offcanvas tempore ostendi potest.

Capita! marginDatum quomodo CSS animationes tractat, vel translatein .offcanvaselemento uti non potes . Sed classe utere ut elementum involuti independenter.

Effectus animationis huius componentis dependet ex prefers-reduced-motioninterrogatione instrumentorum. Videre motum sectionem accessibilitatis nostrae documentationis reductam .

Exempla

Offcanvas components

.showInfra exemplum est offcanvas quod per defaltam ostenditur .offcanvas. Offcanvas firmamentum includit pro titulo capitis cum bulla stricta et genus corporis libitum pro aliqua initiali padding. Monemus te includere caput capitis cum actionibus dimittendi, quoties fieri potest, aut actionem dimissionis explicitam praebere.

Offcanvas
Contentus offcanvas hic accedit. Ponere potes solum circa elementa aliqua Bootstrap component vel consuetudo hic.
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>

Vivamus demo

Bullae infra utere ostendere et occultare offcanvas elementi per JavaScript qui toggles .showgenus in elemento cum .offcanvasclasse.

  • .offcanvashidis content (default)
  • .offcanvas.showostendit content

Vinculum uti potes cum hrefattributo, vel globo cum data-bs-targetattributo. Utroque, opus data-bs-toggle="offcanvas"est.

Link with href "
Offcanvas
Some text as placeholder. In vitae quam eget lectus efficitur elementum. Similia, textus, imagines, tabulae, &c.
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>

Corpus scrolling

Scrolling <body>elementum debilitatum est cum offcanvas et eius recessum visibiles sunt. Utere data-bs-scrolltribuere ut <body>scrolling.

Offcanvas corpore scrolling

Conare scrolling reliqua pagina ut hanc optionem in actu videas.

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>

Corpus scrolling quod exo-

Potes etiam <body>visibili exo- lare scrolling.

Backdrop cum scrolling

Conare scrolling reliqua pagina ut hanc optionem in actu videas.

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>

Static backdrop

Cum gutta static adponitur, offcanvas non claudet cum extra strepitando.

Offcanvas
Non claudam si extra me preme.
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>

Tenebris offcanvas

Additur in v5.2.0

Mutare speciem offcanvasorum cum usibus ut melius congruit illis diversis contextibus sicut navbarum tenebrarum. Hic addimus et .text-bg-darkad stylum obscurum offcanvas. Si stillicidiis intus, considera etiam addere ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Offcanvas

Place offcanvas hic contentus.

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>

Responsivum

Additur in v5.2.0

Responsivum offcanvas classes occultant contentum extra prospectum ex certo breakpoint et descendendo. Supra punctum, contenta intus aget more solito. Exempli gratia, .offcanvas-lgcontentus in offcanvas infra fracturam lgpellit, sed contentus supra fracturam ostendit lg.

Resize navigatrum tuum ut responsurum offcanvas toggle ostendas.
Responsivum offcanvas

Hoc contentum est intra an .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>

Responsivae offcanvas classes per singulas breakpoint praesto sunt.

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

Placement

Nulla collocatio ad offcanvas partium defalta non est, ut unum ex classibus determinatis infra addere debeas.

  • .offcanvas-startlocat offcanvas a sinistra in viewport (supra ostensum est)
  • .offcanvas-endponit offcanvas ius viewport
  • .offcanvas-toplocat offcanvas super verticem viewport
  • .offcanvas-bottomlocat offcanvas in fundo viewport

Exempla infra de summo, dextro et fundo proba.

Offcanvas top
...
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 rectum
...
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 fundo
...
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>

Accessibility

Cum tabella offcanvas rationis sit dialogus modalis, scito addere aria-labelledby="..."titulum offcanvas -ad .offcanvas. Nota te non opus addere role="dialog"cum iam per JavaScript.

CSS

Variabilium

Additur in v5.2.0

Cum pars Bootstrap evolutae CSS variabiles accedunt, offcanvas nunc CSS variabilium localium utitur .offcanvasad auctus real-time css. Valores variabilium pro CSS per Sass positae sunt, ergo etiam adhuc Sass customization adiuvatur.

  --#{$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 variables

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

Consuetudinem

Offcanvas plugin utitur paucis generibus et attributis ad tractandum elevatis gravibus;

  • .offcanvascelat contentus
  • .offcanvas.showostendit contentus
  • .offcanvas-startcelat offcanvas ad sinistram
  • .offcanvas-endoffcanvas celat a dextra
  • .offcanvas-topoffcanvas celat super tecta
  • .offcanvas-bottomoffcanvas celat in fundo

Bullam dimissionis adde cum data-bs-dismiss="offcanvas"attributo, quod JavaScript functionality efficit. Fac uti <button>elementum cum eo ad mores per omnes machinas.

Via data attributa

Toggle

Adde data-bs-toggle="offcanvas"et a data-bs-targetvel hrefelementum ad automatice potestatem unius elementi offcanvas assignare. Attributum data-bs-targetCSS electrix accipit ut offcanvas applicando. Vide ut classem offcanvasad elementum offcanvas addere. Si vis aperta defaltam facere, additamentum classis adde show.

Dimitte

Dimissio fieri potest cum dataattributo in bullam intra offcanvas de quo infra:

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

vel in globulis extra offcanvas utendo, data-bs-targetut infra demonstratum est;

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Dum uterque modus ad dimittendum offcanvas sustinetur, mementote se ab extra emissionem offcanvas dimittere non aequare ARIA Authoring Exercitiorum Rector dialogum (modal) exemplar . Hoc fac cum periculo tuo.

Via JavaScript

Admitte cum manually:

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

Optiones

Cum optiones transeantur per data attributa vel JavaScript, potes appendere nomen optionis data-bs-, ut in data-bs-animation="{value}". Fac mutare casus genus optionis nominis ab " camelCase " ad " kebab-casum " cum transeundo optiones per data attributa. Exempli gratia data-bs-custom-class="beautifier"loco data-bs-customClass="beautifier".

Sicut de Bootstrap 5.2.0, omnia membra experimentalem datam reservatam sustinent data-bs-configquae figuram simplicem componentem sicut chorda JSON domum habere potest. Cum elementum habet data-bs-config='{"delay":0, "title":123}'et data-bs-title="456"attributa, valor finalis titleerit 456et attributa separata data valores supra datos vincent data-bs-config. Praeterea exsistentes notitiae attributae possunt domum JSON valores similes data-bs-delay='{"show":0,"hide":150}'.

Nomen Type Default Descriptio
backdrop Boolean vel filumstatic true Exo- plum applica in corpore dum offcanvas apertum est. Vel, specificare staticrecessum qui strepitando offcanvas non claudit.
keyboard Boolean true Offcanvas claudit cum clavis effugium premitur.
scroll Boolean false Patitur corpus scrolling dum offcanvas patet.

Methodi

Modi asynchronous et transitus

Omnes API modi asynchroni sunt et transitus committitur . Redeunt ad RECENS mox ut transitus incipiat sed antequam finiatur . Methodus praeterea in transitus transeuntis ignorabitur .

See our JavaScript documentation for more information .

Contentum tuum sicut offcanvas elementum operatur. Acceptat optiones libitum object.

Exempli gratia officinam fabricatorem facere potes, exempli gratia:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Methodus Descriptio
getInstance Ratio static, quae te permittit ut instantia offcanvas cum elemento DOM coniungitur.
getOrCreateInstance Statica methodus, quae te permittit ut instantia offcanvas cum elemento DOM adiunctum accipias, aut novum efficias si non initialized erat.
hide Offcanvas celat elementum. RECENS ante offcanvas redit ad elementum actu absconditum (id est antequam hidden.bs.offcanvasevenit).
show Offcanvas ostendit elementum. RECENS redit ad elementum ante offcanvas re demonstratum est (id antequam shown.bs.offcanvasevenit).
toggle Toggles offcanvas elementum est ad ostensionem vel occultam. RECENS ante offcanvas redit ad elementum actu ostensum est vel absconditum (id est ante eventum shown.bs.offcanvasvel hidden.bs.offcanvaseventum).

Events

Bootstrap scriptor offcanvas classis paucas eventus exponit pro hamo in offcanvas functionis.

Genus res Descriptio
hide.bs.offcanvas Ea res statim cum hidemodus vocatus est accenditur.
hidden.bs.offcanvas Eventus hic accensus est cum offcanvas elementum ab usore absconditum est (exspectabit CSS transitus ad perficiendum).
hidePrevented.bs.offcanvas Eventus hic accensus est cum in autocineto ostenditur, eius recessum est staticet strepita extra cancellos exercetur. Eventus etiam accensus est cum clavis effugium premitur et keyboardoptio datur false.
show.bs.offcanvas Huius rei accendit statim cum showinstantia methodus appellatur.
shown.bs.offcanvas Eventus hic accensus est cum offcanvas elementum usori visibile factum est (exspectabit CSS transitus ad perficiendum). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})