Skip to main content Skip ad navigationem soUicitudo
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 lateralis quae per JavaScript prehendi potest ut appareat e parte sinistra, dextra vel ima extremitate 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 ostensum est, offcanvas includit defaltam exo- ramus quae potest coniuctionem ad offcanvas abscondere.
  • Modalibus similibus, unum tantum offcanvas tempore ostendi potest.

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

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

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

Placement

Nulla collocatio pro defectu partium offcanvas deest, ut unum ex classibus infra determinatis 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
... 
<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 rectum
... 
<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 fundo
... 
<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>

Backdrop

Scrolling <body>elementi debilitatur cum offcanvas et eius recessum visibiles sunt. Utere data-bs-scrollattributo toggle <body>scrolling et data-bs-backdroptoggle backdrop.

Coloratus scrolling

Conare scrolling reliqua pagina ut hanc optionem in actu videas.

Offcanvas cum exo-

.....

Backdrop cum scrolling

Conare scrolling reliqua pagina ut hanc optionem in actu videas.

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

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.

Sass

Variabilium

$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-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 hrefelementi, ut automatice imperium unius elementi offcanvas assignet. Attributum data-bs-targetCSS electrix accipit ut offcanvas admoveat. Vide ut classi offcanvasoffcanvas elementi addere. Si vis aperta defaltam facere, additamenta 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 quod ab extra dimissionem offcanvas non congruit rationi alternis WAI-ARIA modalis . Hoc fac cum periculo tuo.

Via JavaScript

Admitte cum manually:

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

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-bs-, ut in data-bs-backdrop="".

Nomen Type Default Descriptio
backdrop Boolean true Applicare backdrop in corpore dum offcanvas aperta est
keyboard Boolean true Claudit offcanvas cum effugium key premitur
scroll Boolean false Patitur corpus scrolling cum offcanvas aperta

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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Methodus Descriptio
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).
show Offcanvas ostendit elementum. RECENS redit ad elementum ante offcanvas re demonstratum est (id antequam shown.bs.offcanvasevenit).
hide Offcanvas celat elementum. RECENS ante offcanvas redit ad elementum actu absconditum (id est antequam hidden.bs.offcanvasevenit).
getInstance Statica methodus quae te permittit ut instantia offcanvas cum elemento domne coniungatur
getOrCreateInstance Statica methodus quae permittit tibi ut instantia offcanvas cum elemento DOM adiunctum accipias, aut novum efficias si non initialized erat.

Events

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

Genus res Descriptio
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).
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). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})