Offcanvas
Bou versteekte sidebars in jou projek vir navigasie, inkopiemandjies en meer met 'n paar klasse en ons JavaScript-inprop.
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 data
kenmerke 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 margin
of translate
op 'n .offcanvas
element nie. Gebruik eerder die klas as 'n onafhanklike wikkelelement.
prefers-reduced-motion
medianavraag. Sien die
verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .
Voorbeelde
Offcanvas komponente
Hieronder is 'n offcanvas-voorbeeld wat by verstek gewys word (via .show
op .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
<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 .show
klas op 'n element met die .offcanvas
klas skakel.
.offcanvas
versteek inhoud (verstek).offcanvas.show
inhoud toon
Jy kan 'n skakel met die href
kenmerk gebruik, of 'n knoppie met die data-bs-target
kenmerk. In beide gevalle word die data-bs-toggle="offcanvas"
vereis.
Offcanvas
<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-start
plaas offcanvas aan die linkerkant van die viewport (hierbo gewys).offcanvas-end
plaas offcanvas aan die regterkant van die viewport.offcanvas-top
plaas offcanvas bo-op die viewport.offcanvas-bottom
plaas offcanvas op die onderkant van die viewport
Probeer die bo-, regter- en onderste voorbeelde hieronder.
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 regs
<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>
Onderkant van die doek
<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-scroll
kenmerk om <body>
blaai data-bs-backdrop
te wissel en om die agtergrond te wissel.
Gekleur met blaai
Probeer om die res van die bladsy te blaai om hierdie opsie in aksie te sien.
Offcanvas met agtergrond
.....
Agtergrond met blaai
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:
.offcanvas
verberg die inhoud.offcanvas.show
wys die inhoud.offcanvas-start
versteek die offcanvas aan die linkerkant.offcanvas-end
versteek die offcanvas aan die regterkant.offcanvas-bottom
versteek 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-target
of href
by die element om outomaties beheer van een offcanvas-element toe te ken. Die data-bs-target
kenmerk aanvaar 'n CSS-kieser om die offcanvas op toe te pas. Maak seker dat jy die klas offcanvas
by 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 data
kenmerk 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-target
soos hieronder gedemonstreer:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
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 .
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...
})