Offcanvas
Byggðu faldar hliðarstikur inn í verkefnið þitt fyrir siglingar, innkaupakörfur og fleira með nokkrum flokkum og JavaScript viðbótinni okkar.
Hvernig það virkar
Offcanvas er hliðarstikuhluti sem hægt er að skipta um með JavaScript til að birtast frá vinstri, hægri eða neðri brún útsýnisgluggans. Hnappar eða akkeri eru notuð sem kveikjar sem eru tengdir tilteknum þáttum sem þú skiptir um og data
eiginleikar eru notaðir til að kalla fram JavaScript okkar.
- Offcanvas deilir sumum af sama JavaScript kóða og modals. Hugmyndalega eru þau nokkuð lík, en þau eru aðskilin viðbætur.
- Að sama skapi eru sumar Sass breytur upprunalega fyrir stíla og víddir offcanvas erft frá breytum modalsins.
- Þegar það er sýnt inniheldur offcanvas sjálfgefna bakgrunn sem hægt er að smella á til að fela offcanvas.
- Svipað og með formúlum er aðeins hægt að sýna einn offcanvas í einu.
Höfuð upp! Í ljósi þess hvernig CSS meðhöndlar hreyfimyndir geturðu ekki notað margin
eða translate
á .offcanvas
frumefni. Í staðinn skaltu nota bekkinn sem sjálfstæðan umbúðaþátt.
prefers-reduced-motion
miðlunarfyrirspurninni. Sjá
kaflann um minni hreyfingu í aðgengisskjölunum okkar .
Dæmi
Offcanvas íhlutir
Hér að neðan er dæmi utan striga sem er sjálfgefið sýnt (í gegnum .show
á .offcanvas
). Offcanvas inniheldur stuðning fyrir haus með lokunarhnappi og valfrjálsan líkamsflokk fyrir upphafsstafi padding
. Við mælum með því að þú hafir offcanvas hausa með afvísunaraðgerðum þegar mögulegt er, eða gefðu upp skýra frávísunaraðgerð.
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>
Sýning í beinni
Notaðu hnappana hér að neðan til að sýna og fela offcanvas frumefni í gegnum JavaScript sem skiptir .show
bekknum á frumefni með .offcanvas
bekknum.
.offcanvas
felur efni (sjálfgefið).offcanvas.show
sýnir efni
Þú getur notað tengil með href
eigindinni eða hnapp með data-bs-target
eigindinni. Í báðum tilvikum data-bs-toggle="offcanvas"
er krafist.
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>
Staðsetning
Það er engin sjálfgefin staðsetning fyrir hluti utan striga, svo þú verður að bæta við einum af breytingaflokkunum hér að neðan;
.offcanvas-start
setur utan striga vinstra megin við útsýnisgluggann (sýnt hér að ofan).offcanvas-end
setur offcanvas hægra megin við útsýnisgáttina.offcanvas-top
setur offcanvas efst á útsýnisglugganum.offcanvas-bottom
setur offcanvas neðst á útsýnisglugganum
Prófaðu efstu, hægri og neðstu dæmin hér að neðan.
Offcanvas toppur
<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 hægri
<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>
Botn úr striga
<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>
Baksvið
Slökkt er á því að fletta frumefninu þegar offcanvas <body>
og bakgrunnur hans er sýnilegur. Notaðu data-bs-scroll
eigindina til að skipta um <body>
skrun og data-bs-backdrop
til að skipta um bakgrunn.
Litað með því að fletta
Prófaðu að fletta restinni af síðunni til að sjá þennan valkost í aðgerð.
Offcanvas með bakgrunni
.....
Bakgrunnur með því að fletta
Prófaðu að fletta restinni af síðunni til að sjá þennan valkost í aðgerð.
<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>
Aðgengi
Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="..."
—referencing the offcanvas title—to .offcanvas
. Note that you don’t need to add role="dialog"
since we already add it via JavaScript.
Sass
Variables
$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;
Usage
The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:
.offcanvas
hides the content.offcanvas.show
shows the content.offcanvas-start
hides the offcanvas on the left.offcanvas-end
hides the offcanvas on the right.offcanvas-bottom
hides the offcanvas on the bottom
Add a dismiss button with the data-bs-dismiss="offcanvas"
attribute, which triggers the JavaScript functionality. Be sure to use the <button>
element with it for proper behavior across all devices.
Via data attributes
Toggle
Add data-bs-toggle="offcanvas"
and a data-bs-target
or href
to the element to automatically assign control of one offcanvas element. The data-bs-target
attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class offcanvas
to the offcanvas element. If you’d like it to default open, add the additional class show
.
Dismiss
Dismissal can be achieved with the data
attribute on a button within the offcanvas as demonstrated below:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
or on a button outside the offcanvas using the data-bs-target
as demonstrated below:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Via JavaScript
Enable manually with:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-
, as in data-bs-backdrop=""
.
Name | Type | Default | Description |
---|---|---|---|
backdrop |
boolean | true |
Apply a backdrop on body while offcanvas is open |
keyboard |
boolean | true |
Closes the offcanvas when escape key is pressed |
scroll |
boolean | false |
Allow body scrolling while offcanvas is open |
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
Activates your content as an offcanvas element. Accepts an optional options object
.
You can create an offcanvas instance with the constructor, for example:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Method | Description |
---|---|
toggle |
Toggles an offcanvas element to shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden (i.e. before the shown.bs.offcanvas or hidden.bs.offcanvas event occurs). |
show |
Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the shown.bs.offcanvas event occurs). |
hide |
Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the hidden.bs.offcanvas event occurs). |
getInstance |
Static method which allows you to get the offcanvas instance associated with a DOM element |
getOrCreateInstance |
Static method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn’t initialized |
Events
Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.
Event type | Description |
---|---|
show.bs.offcanvas |
This event fires immediately when the show instance method is called. |
shown.bs.offcanvas |
This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.offcanvas |
This event is fired immediately when the hide method has been called. |
hidden.bs.offcanvas |
This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})