Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

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 sidebar-komponent wat via JavaScript gewissel kan word om vanaf die linker-, regter-, bo- 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.

Offcanvas
Inhoud vir die offcanvas gaan hier. U kan omtrent enige Bootstrap-komponent of pasgemaakte elemente hier plaas.
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>

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
Offcanvas
Sommige teks as plekhouer. In die werklike lewe kan jy die elemente hê wat jy gekies het. Soos, teks, beelde, lyste, ens.
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>

Liggaam blaai

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

Offcanvas met liggaamsrol

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

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>

Liggaamblaai en agtergrond

U kan ook <body>blaai met 'n sigbare agtergrond aktiveer.

Agtergrond met blaai

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

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>

Statiese agtergrond

Wanneer agtergrond op staties gestel is, sal die offcanvas nie toemaak wanneer daar buite geklik word nie.

Offcanvas
Ek sal nie toemaak as jy buite my klik nie.
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>

Donker offcanvas

Bygevoeg in v5.2.0

Verander die voorkoms van offcanvases met nutsprogramme om hulle beter by verskillende kontekste soos donker navbars te pas. Hier voeg ons by .text-bg-darkdie .offcanvasen .btn-close-whitetot .btn-closevir behoorlike stilering met 'n donker offcanvas. As jy aftreklys binne het, oorweeg dit ook om by .dropdown-menu-darkte voeg .dropdown-menu.

Offcanvas

Plaas offcanvas inhoud hier.

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>

Responsief

Bygevoeg in v5.2.0

Responsiewe offcanvas-klasse versteek inhoud buite die viewport vanaf 'n gespesifiseerde breekpunt en af. Bokant daardie breekpunt sal die inhoud binne soos gewoonlik optree. Versteek byvoorbeeld .offcanvas-lginhoud in 'n offcanvas onder die lgbreekpunt, maar wys die inhoud bokant die lgbreekpunt.

Verander die grootte van jou blaaier om die responsiewe offcanvas-skakelaar te wys.
Responsiewe offcanvas

Dit is inhoud binne 'n .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>

Responsiewe offcanvas-klasse is regoor vir elke breekpunt beskikbaar.

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

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 uitsigpoort
  • .offcanvas-bottomplaas offcanvas op die onderkant van die viewport

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

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 regs
...
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>
Onderkant van die doek
...
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>

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.

CSS

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik offcanvas nou plaaslike CSS-veranderlikes aan .offcanvasvir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, so Sass-aanpassing word ook steeds ondersteun.

  --#{$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 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-topversteek die offcanvas bo-op
  • .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 gesteun word, moet u in gedagte hou dat die afwysing van buite 'n offcanvas nie ooreenstem met die ARIA Authoring Practices Guide dialoog (modale) patroon . Doen dit op eie risiko.

Via JavaScript

Aktiveer handmatig met:

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

Opsies

Aangesien opsies deur data-kenmerke of JavaScript deurgegee kan word, kan jy 'n opsienaam byvoeg data-bs-, soos in data-bs-animation="{value}". Maak seker dat jy die kastipe van die opsienaam verander van " camelCase " na " kebab-case " wanneer die opsies deur data-kenmerke deurgegee word. Gebruik byvoorbeeld in data-bs-custom-class="beautifier"plaas van data-bs-customClass="beautifier".

Vanaf Bootstrap 5.2.0 ondersteun alle komponente 'n eksperimentele gereserveerde data-kenmerk data-bs-configwat eenvoudige komponentkonfigurasie as 'n JSON-string kan huisves. Wanneer 'n element data-bs-config='{"delay":0, "title":123}'en data-bs-title="456"kenmerke het, sal die finale titlewaarde wees 456en die afsonderlike data-kenmerke sal waardes wat op gegee word, ignoreer data-bs-config. Daarbenewens kan bestaande data-kenmerke JSON-waardes soos data-bs-delay='{"show":0,"hide":150}'.

Naam Tik Verstek Beskrywing
backdrop boolean of die snaarstatic true Pas 'n agtergrond op lyf terwyl offcanvas oop is. Alternatiewelik, spesifiseer staticvir 'n agtergrond wat nie die offcanvas toemaak wanneer dit geklik word nie.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metode Beskrywing
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.
hide Versteek 'n offcanvas-element. Keer terug na die oproeper voordat die offcanvas-element eintlik versteek is (dws voor die hidden.bs.offcanvasgebeurtenis plaasvind).
show Wys 'n offcanvas-element. Keer terug na die oproeper voordat die offcanvas-element werklik gewys is (dws voor die shown.bs.offcanvasgebeurtenis plaasvind).
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.offcanvasof hidden.bs.offcanvasgebeurtenis plaasvind).

Gebeurtenisse

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

Soort gebeurtenis Beskrywing
hide.bs.offcanvas Hierdie gebeurtenis word onmiddellik afgevuur wanneer die hidemetode 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).
hidePrevented.bs.offcanvas Hierdie gebeurtenis word afgevuur wanneer die offcanvas gewys word, sy agtergrond is staticen 'n klik buite die offcanvas word uitgevoer. Die gebeurtenis word ook afgevuur wanneer die ontsnap-sleutel gedruk word en die keyboardopsie op gestel is false.
show.bs.offcanvas Hierdie gebeurtenis begin onmiddellik wanneer die showinstansiemetode 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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})