Offcanvas
Bygg skjulte sidefelt i prosjektet ditt for navigering, handlekurver og mer med noen få klasser og JavaScript-pluginen vår.
Hvordan det fungerer
Offcanvas er en sidefeltkomponent som kan veksles via JavaScript for å vises fra venstre, høyre eller nederste kant av visningsporten. Knapper eller ankere brukes som utløsere som er knyttet til spesifikke elementer du veksler på, og data
attributter brukes til å påkalle JavaScript.
- Offcanvas deler noe av den samme JavaScript-koden som modaler. Konseptuelt er de ganske like, men de er separate plugins.
- På samme måte er noen Sass -kildevariabler for offcanvas stiler og dimensjoner arvet fra modalens variabler.
- Når det vises, inkluderer offcanvas et standard bakteppe som kan klikkes for å skjule offcanvas.
- I likhet med modaler kan bare ett offcanvas vises om gangen.
Vær oppmerksom! Gitt hvordan CSS håndterer animasjoner, kan du ikke bruke margin
eller translate
på et .offcanvas
element. Bruk i stedet klassen som et uavhengig innpakningselement.
prefers-reduced-motion
mediesøket. Se delen
for redusert bevegelse i tilgjengelighetsdokumentasjonen vår .
Eksempler
Offcanvas komponenter
Nedenfor er et offcanvas-eksempel som vises som standard (via .show
på .offcanvas
). Offcanvas inkluderer støtte for en header med en lukkeknapp og en valgfri kroppsklasse for noen initialer padding
. Vi foreslår at du inkluderer offcanvas-overskrifter med avvisningshandlinger når det er mulig, eller oppgir en eksplisitt avvisningshandling.
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
Bruk knappene nedenfor for å vise og skjule et offcanvas-element via JavaScript som slår .show
klassen på et element med .offcanvas
klassen.
.offcanvas
skjuler innhold (standard).offcanvas.show
viser innhold
Du kan bruke en lenke med href
attributtet, eller en knapp med data-bs-target
attributtet. I begge tilfeller er det data-bs-toggle="offcanvas"
nødvendig.
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>
Plassering
Det er ingen standardplassering for offcanvas-komponenter, så du må legge til en av modifikasjonsklassene nedenfor;
.offcanvas-start
plasserer offcanvas til venstre for visningsporten (vist over).offcanvas-end
plasserer offcanvas til høyre for visningsporten.offcanvas-top
plasserer offcanvas på toppen av viewporten.offcanvas-bottom
plasserer offcanvas på bunnen av viewporten
Prøv de øverste, høyre og nederste eksemplene nedenfor.
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øyre
<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 bunn
<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>
Bakteppe
Rulling av <body>
elementet er deaktivert når et offcanvas og dets bakgrunn er synlig. Bruk data-bs-scroll
attributtet for å veksle mellom <body>
rulling og data-bs-backdrop
for å veksle mellom bakteppet.
Farget med rulling
Prøv å bla gjennom resten av siden for å se dette alternativet i aksjon.
Offcanvas med bakteppe
.....
Bakteppet med rulling
Prøv å bla gjennom resten av siden for å se dette alternativet i aksjon.
<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>
tilgjengelighet
Siden offcanvas-panelet konseptuelt er en modal dialog, sørg for å legge til aria-labelledby="..."
– som refererer til offcanvas-tittelen – til .offcanvas
. Merk at du ikke trenger å legge til role="dialog"
siden vi allerede legger det til 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;
Bruk
Offcanvas-pluginen bruker noen få klasser og attributter for å håndtere tunge løft:
.offcanvas
skjuler innholdet.offcanvas.show
viser innholdet.offcanvas-start
skjuler offcanvas til venstre.offcanvas-end
skjuler offcanvas til høyre.offcanvas-bottom
skjuler offcanvas på bunnen
Legg til en avvis-knapp med data-bs-dismiss="offcanvas"
attributtet, som utløser JavaScript-funksjonaliteten. Sørg for å bruke <button>
elementet med det for riktig oppførsel på alle enheter.
Via dataattributter
Legg til data-bs-toggle="offcanvas"
og et data-bs-target
eller href
til elementet for automatisk å tildele kontroll over ett offcanvas-element. data-bs-target
Attributtet godtar en CSS-velger å bruke offcanvas på . Sørg for å legge klassen offcanvas
til offcanvas-elementet. Hvis du vil at den skal åpnes som standard, legger du til den ekstra klassen show
.
Via JavaScript
Aktiver manuelt med:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Alternativer
Alternativer kan sendes via dataattributter eller JavaScript. For dataattributter, legg til alternativnavnet til data-bs-
, som i data-bs-backdrop=""
.
Navn | Type | Misligholde | Beskrivelse |
---|---|---|---|
backdrop |
boolsk | true |
Påfør et bakteppe på kroppen mens offcanvas er åpent |
keyboard |
boolsk | true |
Lukker offcanvas når escape-tasten trykkes |
scroll |
boolsk | false |
Tillat kroppsrulling mens offcanvas er åpent |
Metoder
Asynkrone metoder og overganger
Alle API-metoder er asynkrone og starter en overgang . De går tilbake til den som ringer så snart overgangen er startet, men før den avsluttes . I tillegg vil et metodekall på en overgangskomponent bli ignorert .
Aktiverer innholdet ditt som et offcanvas-element. Godtar et valgfritt alternativ object
.
Du kan lage en offcanvas-forekomst med konstruktøren, for eksempel:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metode | Beskrivelse |
---|---|
toggle |
Veksler et offcanvas-element til vist eller skjult. Går tilbake til den som ringer før offcanvas-elementet faktisk har blitt vist eller skjult (dvs. før hendelsen shown.bs.offcanvas eller hidden.bs.offcanvas inntreffer). |
show |
Viser et offcanvas-element. Går tilbake til den som ringer før offcanvas-elementet faktisk har blitt vist (dvs. før shown.bs.offcanvas hendelsen inntreffer). |
hide |
Skjuler et offcanvas-element. Går tilbake til den som ringer før offcanvas-elementet faktisk har blitt skjult (dvs. før hidden.bs.offcanvas hendelsen inntreffer). |
getInstance |
Statisk metode som lar deg få offcanvas-forekomsten assosiert med et DOM-element |
getOrCreateInstance |
Statisk metode som lar deg få offcanvas-forekomsten knyttet til et DOM-element, eller opprette en ny i tilfelle den ikke ble initialisert |
arrangementer
Bootstraps offcanvas-klasse viser noen få hendelser for å koble til offcanvas-funksjonalitet.
Hendelsestype | Beskrivelse |
---|---|
show.bs.offcanvas |
Denne hendelsen utløses umiddelbart når show instansmetoden kalles. |
shown.bs.offcanvas |
Denne hendelsen utløses når et offcanvas-element er gjort synlig for brukeren (vil vente på at CSS-overganger er fullført). |
hide.bs.offcanvas |
Denne hendelsen utløses umiddelbart når hide metoden har blitt kalt. |
hidden.bs.offcanvas |
Denne hendelsen utløses når et offcanvas-element er skjult for brukeren (vil vente på at CSS-overganger er fullført). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})