Offcanvas
Bou ferburgen sydbalken yn jo projekt foar navigaasje, winkelkarren, en mear mei in pear klassen en ús JavaScript-plugin.
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 data
attributen 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 margin
of translate
op in .offcanvas
elemint. Brûk ynstee de klasse as in ûnôfhinklik wrappingselemint.
prefers-reduced-motion
mediafraach. 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 .show
op .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
<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 .show
klasse op in elemint mei de .offcanvas
klasse skeakelt.
.offcanvas
ferberget ynhâld (standert).offcanvas.show
toant ynhâld
Jo kinne in keppeling brûke mei it href
attribút, of in knop mei it data-bs-target
attribút. Yn beide gefallen data-bs-toggle="offcanvas"
is it nedich.
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>
Pleatsing
D'r is gjin standert pleatsing foar offcanvas-komponinten, dus jo moatte ien fan 'e modifier-klassen hjirûnder tafoegje;
.offcanvas-start
pleatst offcanvas links fan 'e viewport (hjirboppe werjûn).offcanvas-end
pleatst offcanvas oan de rjochterkant fan de viewport.offcanvas-top
pleatst offcanvas boppe op 'e viewport.offcanvas-bottom
pleatst 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-scroll
attribút om <body>
rôlje data-bs-backdrop
te 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">Backdroped 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;
Gebrûk
De offcanvas-plugin brûkt in pear klassen en attributen om de swiere opheffing te behanneljen:
.offcanvas
ferberget de ynhâld.offcanvas.show
toant de ynhâld.offcanvas-start
ferberget it offcanvas oan de linkerkant.offcanvas-end
ferberget it offcanvas oan de rjochterkant.offcanvas-bottom
ferberget 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
Foegje data-bs-toggle="offcanvas"
en in data-bs-target
of href
oan it elemint ta om automatysk kontrôle fan ien offcanvas-elemint ta te jaan. It data-bs-target
attribút akseptearret in CSS-selektor om it offcanvas op ta te passen. Wês wis dat jo de klasse tafoegje offcanvas
oan it offcanvas-elemint. As jo wolle dat it standert iepen is, foegje dan de ekstra klasse ta show
.
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 .
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.offcanvas of hidden.bs.offcanvas 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). |
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). |
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 inisjalisearre is |
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 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). |
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). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})