Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

Offcanvas

Bou ferburgen sydbalken yn jo projekt foar navigaasje, winkelkarren, en mear mei in pear klassen en ús JavaScript-plugin.

Op dizze side

Hoe't it wurket

Offcanvas is in sydbalke-komponint dat kin wurde wiksele fia JavaScript om te ferskinen fan 'e lofter, rjochter of ûnderkant fan' e viewport. Knoppen as ankers wurde brûkt as triggers dy't hechte binne oan spesifike eleminten dy't jo wikselje, en dataattributen wurde brûkt om ús JavaScript op te roppen.

  • Offcanvas dielt guon fan deselde JavaScript-koade as modals. Konseptueel binne se frij ferlykber, mar se binne aparte plugins.
  • Lykas, guon boarne Sass fariabelen foar offcanvas syn stilen en ôfmjittings wurde erfd út de modale fariabelen.
  • As it toand wurdt, befettet offcanvas in standert eftergrûn dy't kin wurde oanklikt om it offcanvas te ferbergjen.
  • Krekt as modalen kin mar ien offcanvas tagelyk wurde werjûn.

Heads up! Sjoen hoe't CSS animaasjes omgiet, kinne jo net brûke marginof translateop in .offcanvaselemint. Brûk ynstee de klasse as in ûnôfhinklik wrappingselemint.

It animaasje-effekt fan dizze komponint is ôfhinklik fan 'e prefers-reduced-motionmediafraach. Sjoch de seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .

Foarbylden

Offcanvas komponinten

Hjirûnder is in foarbyld fan offcanvas dat standert wurdt werjûn (fia .showop .offcanvas). Offcanvas omfettet stipe foar in koptekst mei in knop slute en in opsjonele lichemsklasse foar guon initialen padding. Wy stelle foar dat jo as mooglik offcanvas-koppen opnimme mei ûntslachaksjes, of in eksplisite ûntslachaksje leverje.

Offcanvas
Ynhâld foar it offcanvas giet hjir. Jo kinne hjir sawat elke Bootstrap-komponint of oanpaste eleminten pleatse. 
<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

Brûk de knoppen hjirûnder om in offcanvas-elemint te sjen en te ferbergjen fia JavaScript dat de .showklasse op in elemint mei de .offcanvasklasse skeakelt.

  • .offcanvasferberget ynhâld (standert)
  • .offcanvas.showtoant ynhâld

Jo kinne in keppeling brûke mei it hrefattribút, of in knop mei it data-bs-targetattribút. Yn beide gefallen data-bs-toggle="offcanvas"is it nedich.

Link mei href
Offcanvas
Guon tekst as plakhâlder. Yn it echte libben kinne jo de eleminten hawwe dy't jo hawwe keazen. Lykas, tekst, ôfbyldings, listen, ensfh. 
<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>

Pleatsing

D'r is gjin standert pleatsing foar offcanvas-komponinten, dus jo moatte ien fan 'e modifier-klassen hjirûnder tafoegje;

  • .offcanvas-startpleatst offcanvas links fan 'e viewport (hjirboppe werjûn)
  • .offcanvas-endpleatst offcanvas oan de rjochterkant fan de viewport
  • .offcanvas-toppleatst offcanvas boppe op 'e viewport
  • .offcanvas-bottompleatst offcanvas op 'e boaiem fan' e viewport

Besykje de boppeste, rjochter en ûnderste foarbylden hjirûnder.

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 rjochts
... 
<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 ûnderkant
... 
<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>

Eftergrûn

It rôljen fan it <body>elemint is útskeakele as in offcanvas en de eftergrûn sichtber binne. Brûk it data-bs-scrollattribút om <body>rôlje data-bs-backdropte wikseljen en de eftergrûn te wikseljen.

Kleure mei rôlje

Besykje de rest fan 'e side te rôljen om dizze opsje yn aksje te sjen.

Offcanvas mei eftergrûn

.....

Eftergrûn mei rôlje

Besykje de rest fan 'e side te rôljen om dizze opsje yn aksje te sjen.

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

Tagonklikheid

Om't it offcanvas-paniel konseptueel in modaal dialooch is, wês wis dat jo tafoegje - ferwizend nei aria-labelledby="..."de offcanvas-titel - oan .offcanvas. Tink derom dat jo it net hoege ta te foegjen role="dialog", om't wy it al tafoegje fia JavaScript.

Sass

Fariabelen

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

Gebrûk

De offcanvas-plugin brûkt in pear klassen en attributen om de swiere opheffing te behanneljen:

  • .offcanvasferberget de ynhâld
  • .offcanvas.showtoant de ynhâld
  • .offcanvas-startferberget it offcanvas oan de linkerkant
  • .offcanvas-endferberget it offcanvas oan de rjochterkant
  • .offcanvas-bottomferberget it offcanvas op 'e boaiem

Foegje in ûntslachknop ta mei it data-bs-dismiss="offcanvas"attribút, dat de JavaScript-funksjonaliteit trigger. Wês wis dat jo it <button>elemint dermei brûke foar goed gedrach oer alle apparaten.

Fia data attributen

Toggle

Foegje data-bs-toggle="offcanvas"en in data-bs-targetof hrefoan it elemint ta om automatysk kontrôle fan ien offcanvas-elemint ta te jaan. It data-bs-targetattribút akseptearret in CSS-selektor om it offcanvas op ta te passen. Wês wis dat jo de klasse tafoegje offcanvasoan it offcanvas-elemint. As jo ​​​​wolle dat it standert iepen is, foegje dan de ekstra klasse ta show.

ôfwize

Untslach kin wurde berikt mei it dataattribút op in knop binnen it offcanvas lykas hjirûnder oanjûn:

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

of op in knop bûten it offcanvas mei de data-bs-targetlykas hjirûnder oantoand:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Wylst beide manieren om in offcanvas te ûntslaan wurde stipe, hâld der yn gedachten dat it ûntslaan fan bûten in offcanvas net oerienkomt mei it ûntwerppatroan fan WAI-ARIA modale dialoochfinster . Doch dit op jo eigen risiko.

Fia JavaScript

Ynskeakelje manuell mei:

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

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-bs-, lykas yn data-bs-backdrop="".

Namme Type Standert Beskriuwing
backdrop boolean true Tapasse in eftergrûn op it lichem wylst offcanvas is iepen
keyboard boolean true Slút it offcanvas as escape-toets wurdt yndrukt
scroll boolean false Lit lichem rôlje wylst offcanvas iepen is

Metoaden

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

Aktivearret jo ynhâld as in offcanvas elemint. Akseptearret in opsjonele opsjes object.

Jo kinne in offcanvas-eksimplaar meitsje mei de constructor, bygelyks:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metoade Beskriuwing
toggle Skeakelt in offcanvas-elemint nei werjûn of ferburgen. Keart werom nei de beller foardat it offcanvas-elemint feitlik werjûn of ferburgen is (dus foardat it barren shown.bs.offcanvasof hidden.bs.offcanvasbart).
show Toant in offcanvas elemint. Keart werom nei de beller foardat it offcanvas-elemint feitlik werjûn is (dus foardat it shown.bs.offcanvasevenemint bart).
hide Ferberget in offcanvas elemint. Keart werom nei de beller foardat it offcanvas-elemint feitlik ferburgen is (dus foardat it hidden.bs.offcanvasevenemint bart).
getInstance Statyske metoade wêrmei jo de offcanvas-eksimplaar kinne krije ferbûn mei in DOM-elemint
getOrCreateInstance Statyske metoade wêrmei jo de offcanvas-eksimplaar kinne krije dy't assosjeare is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net is inisjalisearre

Eveneminten

De offcanvas-klasse fan Bootstrap bleatsteld in pear eveneminten foar heakjen oan offcanvas-funksjonaliteit.

Event type Beskriuwing
show.bs.offcanvas Dit evenemint fjoer fuortendaliks as de showeksimplaar metoade wurdt oanroppen.
shown.bs.offcanvas Dit evenemint wurdt ûntslein as in offcanvas-elemint sichtber makke is foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen).
hide.bs.offcanvas Dit evenemint wurdt ûntslein fuortendaliks as de hidemetoade is oanroppen.
hidden.bs.offcanvas Dit barren wurdt ûntslein as in offcanvas-elemint is ferburgen foar de brûker (sil wachtsje op CSS-oergongen om te foltôgjen). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})