Offcanvas

Bou versteekte sidebars in jou projek vir navigasie, inkopiemandjies en meer met 'n paar klasse en ons JavaScript-inprop.

Op hierdie bladsy

Hoe dit werk

Offcanvas is 'n sybalk-komponent wat via JavaScript gewissel kan word om vanaf die linker-, regter- of onderrand van die uitsigpoort te verskyn. Knoppies of ankers word gebruik as snellers wat geheg is aan spesifieke elemente wat jy wissel, en datakenmerke word gebruik om ons JavaScript op te roep.

Offcanvas deel sommige van dieselfde JavaScript-kode as modals. Konseptueel is hulle redelik soortgelyk, maar dit is aparte inproppe.
Net so word sommige Sass -bronveranderlikes vir offcanvas se style en afmetings van die modaal se veranderlikes geërf.
Wanneer dit gewys word, sluit offcanvas 'n verstek agtergrond in wat geklik kan word om die offcanvas te versteek.
Soortgelyk aan modale, kan slegs een offcanvas op 'n slag gewys word.

Let op! Gegewe hoe CSS animasies hanteer, kan jy nie 'n element gebruik marginof translateop 'n .offcanvaselement nie. Gebruik eerder die klas as 'n onafhanklike wikkelelement.

Die animasie-effek van hierdie komponent is afhanklik van die prefers-reduced-motionmedianavraag. Sien die verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .

Voorbeelde

Offcanvas komponente

Hieronder is 'n offcanvas-voorbeeld wat by verstek gewys word (via .showop .offcanvas). Offcanvas bevat ondersteuning vir 'n kopskrif met 'n toemaakknoppie en 'n opsionele lyfklas vir 'n paar voorletters padding. Ons stel voor dat jy, waar moontlik, offcanvas-opskrifte met afwyshandelinge insluit, of 'n eksplisiete afwysaksie verskaf.

Inhoud vir die offcanvas gaan hier. U kan omtrent enige Bootstrap-komponent of pasgemaakte elemente hier plaas.

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

Regstreekse demo

Gebruik die knoppies hieronder om 'n offcanvas-element te wys en te versteek via JavaScript wat die .showklas op 'n element met die .offcanvasklas skakel.

.offcanvasversteek inhoud (verstek)
.offcanvas.showinhoud toon

Jy kan 'n skakel met die hrefkenmerk gebruik, of 'n knoppie met die data-bs-targetkenmerk. In beide gevalle word die data-bs-toggle="offcanvas"vereis.

Skakel met href

Sommige teks as plekhouer. In die werklike lewe kan jy die elemente hê wat jy gekies het. Soos, teks, beelde, lyste, ens.

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

Plasing

Daar is geen verstekplasing vir offcanvas-komponente nie, so jy moet een van die wysigerklasse hieronder byvoeg;

.offcanvas-startplaas offcanvas aan die linkerkant van die viewport (hierbo gewys)
.offcanvas-endplaas offcanvas aan die regterkant van die viewport
.offcanvas-topplaas offcanvas bo-op die viewport
.offcanvas-bottomplaas offcanvas op die onderkant van die viewport

Probeer die bo-, regter- en onderste voorbeelde hieronder.

...

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

...

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

...

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

Agtergrond

Die rol van die <body>element is gedeaktiveer wanneer 'n offcanvas en sy agtergrond sigbaar is. Gebruik die data-bs-scrollkenmerk om <body>blaai data-bs-backdropte wissel en om die agtergrond te wissel.

Probeer om die res van die bladsy te blaai om hierdie opsie in aksie te sien.

.....

Probeer om die res van die bladsy te blaai om hierdie opsie in aksie te sien.

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

Toeganklikheid

Aangesien die offcanvas-paneel konseptueel 'n modale dialoog is, maak seker dat u byvoeg aria-labelledby="..."- met verwysing na die offcanvas-titel - by .offcanvas. Let daarop dat jy nie hoef by te voeg nie role="dialog", aangesien ons dit reeds via JavaScript byvoeg.

Sass

Veranderlikes

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

Gebruik

Die offcanvas-inprop gebruik 'n paar klasse en eienskappe om die swaar opheffing te hanteer:

.offcanvasverberg die inhoud
.offcanvas.showwys die inhoud
.offcanvas-startversteek die offcanvas aan die linkerkant
.offcanvas-endversteek die offcanvas aan die regterkant
.offcanvas-bottomversteek die offcanvas aan die onderkant

Voeg 'n afwys-knoppie by met die data-bs-dismiss="offcanvas"kenmerk, wat die JavaScript-funksionaliteit aktiveer. Maak seker dat jy die <button>element daarmee gebruik vir behoorlike gedrag op alle toestelle.

Via data-eienskappe

Wissel

Voeg data-bs-toggle="offcanvas"en 'n data-bs-targetof hrefby die element om outomaties beheer van een offcanvas-element toe te ken. Die data-bs-targetkenmerk aanvaar 'n CSS-kieser om die offcanvas op toe te pas. Maak seker dat jy die klas offcanvasby die offcanvas-element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas by show.

Verwerp

Ontslag kan bereik word met die datakenmerk op 'n knoppie binne die offcanvas soos hieronder gedemonstreer:

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

of op 'n knoppie buite die offcanvas met behulp van die data-bs-targetsoos hieronder gedemonstreer:

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

Alhoewel beide maniere om 'n offcanvas af te maak, ondersteun word, hou in gedagte dat die afwysing van buite 'n offcanvas nie ooreenstem met die WAI-ARIA modale dialoogontwerppatroon nie . Doen dit op eie risiko.

Via JavaScript

Aktiveer handmatig met:

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

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-bs-, soos in data-bs-backdrop="".

Naam	Tik	Verstek	Beskrywing
`backdrop`	boolean	`true`	Pas 'n agtergrond op lyf terwyl offcanvas oop is
`keyboard`	boolean	`true`	Maak die offcanvas toe wanneer escape-sleutel gedruk word
`scroll`	boolean	`false`	Laat liggaamsrol toe terwyl offcanvas oop is

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting .

Aktiveer jou inhoud as 'n offcanvas-element. Aanvaar 'n opsionele opsie object.

U kan 'n offcanvas-instansie met die konstruktor skep, byvoorbeeld:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Metode	Beskrywing
`toggle`	Wissel 'n offcanvas-element na gewys of versteek. Keer terug na die oproeper voordat die offcanvas-element werklik gewys of versteek is (dws voordat die `shown.bs.offcanvas`of `hidden.bs.offcanvas`gebeurtenis plaasvind).
`show`	Wys 'n offcanvas-element. Keer terug na die oproeper voordat die offcanvas-element werklik gewys is (dws voor die `shown.bs.offcanvas`gebeurtenis plaasvind).
`hide`	Versteek 'n offcanvas-element. Keer terug na die oproeper voordat die offcanvas-element eintlik versteek is (dws voor die `hidden.bs.offcanvas`gebeurtenis plaasvind).
`getInstance`	Statiese metode waarmee u die offcanvas-instansie kan kry wat met 'n DOM-element geassosieer word
`getOrCreateInstance`	Statiese metode wat jou toelaat om die offcanvas-instansie te kry wat met 'n DOM-element geassosieer word, of 'n nuwe een te skep ingeval dit nie geïnisialiseer is nie

Gebeurtenisse

Bootstrap se offcanvas-klas stel 'n paar gebeurtenisse bloot om by offcanvas-funksionaliteit in te skakel.

Soort gebeurtenis	Beskrywing
`show.bs.offcanvas`	Hierdie gebeurtenis begin onmiddellik wanneer die `show`instansiemetode geroep word.
`shown.bs.offcanvas`	Hierdie gebeurtenis word afgevuur wanneer 'n offcanvas-element vir die gebruiker sigbaar gemaak is (sal wag vir CSS-oorgange om te voltooi).
`hide.bs.offcanvas`	Hierdie gebeurtenis word onmiddellik afgevuur wanneer die `hide`metode geroep is.
`hidden.bs.offcanvas`	Hierdie gebeurtenis word afgevuur wanneer 'n offcanvas-element vir die gebruiker versteek is (sal wag vir CSS-oorgange om te voltooi).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Hoe dit werk

Voorbeelde

Offcanvas komponente

Offcanvas

Regstreekse demo

Offcanvas

Plasing

Offcanvas top

Offcanvas regs

Onderkant van die doek

Agtergrond

Gekleur met blaai

Offcanvas met agtergrond

Agtergrond met blaai

Toeganklikheid

Sass

Veranderlikes

Gebruik

Via data-eienskappe

Wissel

Verwerp

Via JavaScript

Opsies

Metodes

Asinchroniese metodes en oorgange

Gebeurtenisse