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, rjochts, boppe- 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.

Ynhâld foar it offcanvas giet hjir. Jo kinne hjir sawat elke Bootstrap-komponint of oanpaste eleminten pleatse.

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

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

Guon tekst as plakhâlder. Yn it echte libben kinne jo de eleminten hawwe dy't jo hawwe keazen. Lykas, tekst, ôfbyldings, listen, ensfh.

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>

Body scrolling

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 yn te skeakeljen.

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

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>

Body scrolling en eftergrûn

Jo kinne ek <body>rôlje ynskeakelje mei in sichtbere eftergrûn.

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

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>

Statyske eftergrûn

As eftergrûn is ynsteld op statysk, sil it offcanvas net slute as jo bûten it klikke.

Ik sil net slute as jo bûten my klikke.

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>

Dûnker offcanvas

Taheakke yn v5.2.0

Feroarje it uterlik fan offcanvases mei helpprogramma's om se better te passen by ferskate konteksten lykas donkere navbars. Hjir tafoegje wy .text-bg-darkoan 'e .offcanvasen .btn-close-whiteoan .btn-closefoar goede styling mei in donkere offcanvas. As jo dropdowns binnen hawwe, beskôgje dan ek ta te foegjen .dropdown-menu-darkoan .dropdown-menu.

Pleats hjir offcanvas ynhâld.

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>

Responsive

Taheakke yn v5.2.0

Responsive offcanvas-klassen ferbergje ynhâld bûten de viewport fan in spesifisearre brekpunt en del. Boppe dat brekpunt sil de ynhâld deryn gedrage as gewoanlik. Bygelyks, .offcanvas-lgferberget ynhâld yn in offcanvas ûnder it lgbrekpunt, mar toant de ynhâld boppe it lgbrekpunt.

Feroarje de grutte fan jo blêder om de responsive offcanvas-skeakel te sjen.

Dit is ynhâld binnen in .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>

Responsive offcanvas-klassen binne beskikber foar elk brekpunt.

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

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.

...

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>

...

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>

...

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>

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.

CSS

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende oanpak fan CSS-fariabelen, brûkt offcanvas no lokale CSS-fariabelen op .offcanvasfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

  --#{$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 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-topferberget it offcanvas boppe
.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 oantoand:

<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 oanjûn:

<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 dan yn gedachten dat it ûntslaan fan bûten in offcanvas net oerienkomt mei it ARIA Authoring Practices Guide dialooch (modaal) patroan . Doch dit op jo eigen risiko.

Fia JavaScript

Ynskeakelje manuell mei:

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

Opsjes

As opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript, kinne jo in opsjenamme tafoegje oan data-bs-, lykas yn data-bs-animation="{value}". Soargje derfoar dat jo it gefaltype fan 'e opsjenamme feroarje fan " camelCase " nei " kebab-case " as jo de opsjes trochjaan fia gegevensattributen. Brûk bygelyks data-bs-custom-class="beautifier"ynstee fan data-bs-customClass="beautifier".

Fanôf Bootstrap 5.2.0 stypje alle komponinten in eksperiminteel reservearre data-attribút data-bs-configdat ienfâldige komponintkonfiguraasje as in JSON-string kin herbergje. As in elemint hat data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"attributen, de definitive titlewearde sil wêze 456en de aparte gegevens attributen sille oerskriuwe wearden jûn op data-bs-config. Derneist kinne besteande gegevensattributen JSON-wearden lykas data-bs-delay='{"show":0,"hide":150}'.

Namme	Type	Standert	Beskriuwing
`backdrop`	boolean of de snaar`static`	`true`	Tapasse in eftergrûn op it lichem wylst offcanvas is iepen. As alternatyf, spesifisearje `static`foar in eftergrûn dy't it offcanvas net slút as jo op klikke.
`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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Metoade	Beskriuwing
`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 assosjearre mei in DOM-elemint, of in nij oanmeitsje yn gefal it net inisjalisearre is.
`hide`	Ferberget in offcanvas elemint. Keart werom nei de beller foardat it offcanvas-elemint feitlik ferburgen is (dus foardat it `hidden.bs.offcanvas`evenemint bart).
`show`	Toant in offcanvas elemint. Keart werom nei de beller foardat it offcanvas-elemint feitlik werjûn is (dus foardat it `shown.bs.offcanvas`evenemint bart).
`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.offcanvas`of `hidden.bs.offcanvas`bart).

Eveneminten

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

Event type	Beskriuwing
`hide.bs.offcanvas`	Dit evenemint wurdt ûntslein fuortendaliks as de `hide`metoade 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).
`hidePrevented.bs.offcanvas`	Dit evenemint wurdt ûntslein as it offcanvas wurdt toand, de eftergrûn is `static`en in klik bûten it offcanvas wurdt útfierd. It evenemint wurdt ek ûntslein as de escape-toets yndrukt wurdt en de `keyboard`opsje is ynsteld op `false`.
`show.bs.offcanvas`	Dit evenemint fjoer fuortendaliks as de `show`eksimplaar 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).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Offcanvas

Hoe't it wurket

Foarbylden

Offcanvas komponinten

Offcanvas

Live demo

Offcanvas

Body scrolling

Offcanvas mei lichemsrollen

Body scrolling en eftergrûn

Eftergrûn mei rôlje

Statyske eftergrûn

Offcanvas

Dûnker offcanvas

Offcanvas

Responsive

Responsive offcanvas

Pleatsing

Offcanvas top

Offcanvas rjochts

Offcanvas ûnderkant

Tagonklikheid

CSS

Fariabelen

Sass fariabelen

Gebrûk

Fia data attributen

Toggle

ôfwize

Fia JavaScript

Opsjes

Metoaden

Asynchrone metoaden en transysjes

Eveneminten