Offcanvas
Bygg dolda sidofält i ditt projekt för navigering, kundvagnar och mer med några klasser och vårt JavaScript-plugin.
Hur det fungerar
Offcanvas är en sidofältskomponent som kan växlas via JavaScript för att visas från vänster, höger eller nedre kant av visningsporten. Knappar eller ankare används som utlösare som är kopplade till specifika element som du växlar, och data
attribut används för att anropa vår JavaScript.
- Offcanvas delar en del av samma JavaScript-kod som modals. Konceptuellt är de ganska lika, men de är separata plugins.
- På samma sätt ärvs vissa Sass -källvariabler för offcanvas stilar och dimensioner från modalens variabler.
- När den visas innehåller offcanvas en standardbakgrund som kan klickas på för att dölja offcanvas.
- I likhet med modaler kan endast en offcanvas visas åt gången.
Se upp! Med tanke på hur CSS hanterar animationer kan du inte använda margin
eller translate
på ett .offcanvas
element. Använd istället klassen som ett oberoende omslagselement.
prefers-reduced-motion
mediefrågan. Se
avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .
Exempel
Offcanvas komponenter
Nedan är ett offcanvas-exempel som visas som standard (via .show
on .offcanvas
). Offcanvas innehåller stöd för en rubrik med en stängningsknapp och en valfri kroppsklass för vissa initialer padding
. Vi föreslår att du inkluderar offcanvas-rubriker med avvisningsåtgärder när det är möjligt, eller tillhandahåller en explicit avvisningsåtgärd.
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
Använd knapparna nedan för att visa och dölja ett offcanvas-element via JavaScript som växlar .show
klassen till ett element med .offcanvas
klassen.
.offcanvas
döljer innehåll (standard).offcanvas.show
visar innehåll
Du kan använda en länk med href
attributet eller en knapp med data-bs-target
attributet. I båda fallen data-bs-toggle="offcanvas"
krävs.
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>
Placering
Det finns ingen standardplacering för offcanvas-komponenter, så du måste lägga till en av modifieringsklasserna nedan;
.offcanvas-start
placerar offcanvas till vänster om visningsporten (visas ovan).offcanvas-end
placerar offcanvas till höger om visningsporten.offcanvas-top
placerar offcanvas på toppen av visningsporten.offcanvas-bottom
placerar offcanvas på botten av visningsporten
Prova de övre, högra och nedre exemplen nedan.
Offcanvas topp
<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öger
<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 botten
<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>
Bakgrund
Rullning av <body>
elementet är inaktiverat när en offcanvas och dess bakgrund är synliga. Använd data-bs-scroll
attributet för att växla mellan <body>
rullning och data-bs-backdrop
för att växla mellan bakgrunden.
Färgad med rullning
Försök att scrolla resten av sidan för att se det här alternativet i praktiken.
Offcanvas med bakgrund
.....
Bakgrund med rullning
Försök att scrolla resten av sidan för att se det här alternativet i praktiken.
<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>
Tillgänglighet
Eftersom offcanvas-panelen begreppsmässigt är en modal dialogruta, se till att lägga till – med aria-labelledby="..."
hänvisning till offcanvas-titeln – till .offcanvas
. Observera att du inte behöver lägga till role="dialog"
eftersom vi redan lägger till det via JavaScript.
Sass
Variabler
$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;
Användande
Offcanvas-pluginet använder några klasser och attribut för att hantera tunga lyft:
.offcanvas
döljer innehållet.offcanvas.show
visar innehållet.offcanvas-start
döljer offcanvasen till vänster.offcanvas-end
döljer offcanvasen till höger.offcanvas-bottom
döljer offcanvas på botten
Lägg till en avvisande knapp med data-bs-dismiss="offcanvas"
attributet, vilket utlöser JavaScript-funktionen. Se till att använda <button>
elementet med det för korrekt beteende på alla enheter.
Via dataattribut
Lägg till data-bs-toggle="offcanvas"
och ett data-bs-target
eller href
till elementet för att automatiskt tilldela kontroll över ett offcanvas-element. Attributet data-bs-target
accepterar en CSS-väljare att tillämpa offcanvas på. Se till att lägga till klassen offcanvas
i offcanvas-elementet. Om du vill att den ska öppnas som standard lägger du till den extra klassen show
.
Via JavaScript
Aktivera manuellt med:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
alternativ
Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-bs-
, som i data-bs-backdrop=""
.
namn | Typ | Standard | Beskrivning |
---|---|---|---|
backdrop |
booleskt | true |
Applicera en bakgrund på kroppen medan offcanvas är öppet |
keyboard |
booleskt | true |
Stänger offcanvas när escape-tangenten trycks ned |
scroll |
booleskt | false |
Tillåt kroppsrullning medan offcanvas är öppet |
Metoder
Asynkrona metoder och övergångar
Alla API - metoder är asynkrona och startar en övergång . De återvänder till den som ringer så snart övergången har påbörjats men innan den slutar . Dessutom kommer ett metodanrop på en övergångskomponent att ignoreras .
Aktiverar ditt innehåll som ett offcanvas-element. Accepterar ett valfritt alternativ object
.
Du kan skapa en offcanvas-instans med konstruktorn, till exempel:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metod | Beskrivning |
---|---|
toggle |
Växlar ett offcanvas-element till att visas eller döljas. Återgår till den som ringer innan offcanvas-elementet faktiskt har visats eller dolt (dvs innan händelsen shown.bs.offcanvas eller hidden.bs.offcanvas inträffar). |
show |
Visar ett offcanvas-element. Återgår till den som ringer innan offcanvas-elementet faktiskt har visats (dvs innan shown.bs.offcanvas händelsen inträffar). |
hide |
Döljer ett offcanvas-element. Återgår till den som ringer innan offcanvas-elementet faktiskt har dolts (dvs innan hidden.bs.offcanvas händelsen inträffar). |
getInstance |
Statisk metod som låter dig få offcanvas-instansen associerad med ett DOM-element |
getOrCreateInstance |
Statisk metod som låter dig få offcanvas-instansen associerad med ett DOM-element, eller skapa en ny om den inte initierades |
evenemang
Bootstraps offcanvas-klass avslöjar några händelser för att koppla in offcanvas-funktionalitet.
Event typ | Beskrivning |
---|---|
show.bs.offcanvas |
Denna händelse aktiveras omedelbart när show instansmetoden anropas. |
shown.bs.offcanvas |
Denna händelse utlöses när ett offcanvas-element har gjorts synligt för användaren (väntar på att CSS-övergångar ska slutföras). |
hide.bs.offcanvas |
Denna händelse aktiveras omedelbart när hide metoden har anropats. |
hidden.bs.offcanvas |
Denna händelse utlöses när ett offcanvas-element har dolts för användaren (väntar på att CSS-övergångar ska slutföras). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})