Offcanvas

Bygg dolda sidofält i ditt projekt för navigering, kundvagnar och mer med några klasser och vårt JavaScript-plugin.

På den här sidan

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 dataattribut 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 margineller translatepå ett .offcanvaselement. Använd istället klassen som ett oberoende omslagselement.

Animeringseffekten av denna komponent beror på prefers-reduced-motionmediefrågan. Se avsnittet för reducerad rörelse i vår tillgänglighetsdokumentation .

Exempel

Offcanvas komponenter

Nedan finns ett offcanvas-exempel som visas som standard (via .showon .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.

Innehåll för offcanvas finns här. Du kan placera nästan vilken Bootstrap-komponent som helst eller anpassade element här.

<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 .showklassen till ett element med .offcanvasklassen.

.offcanvasdöljer innehåll (standard)
.offcanvas.showvisar innehåll

Du kan använda en länk med hrefattributet eller en knapp med data-bs-targetattributet. I båda fallen data-bs-toggle="offcanvas"krävs.

Länka till href

Lite text som platshållare. I verkliga livet kan du ha de element du har valt. Som, text, bilder, listor, etc.

<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-startplacerar offcanvas till vänster om visningsporten (visas ovan)
.offcanvas-endplacerar offcanvas till höger om visningsporten
.offcanvas-topplacerar offcanvas på toppen av viewporten
.offcanvas-bottomplacerar offcanvas på botten av visningsporten

Prova de övre, högra och nedre exemplen nedan.

...

<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>

...

<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>

...

<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-scrollattributet för att växla mellan <body>rullning och data-bs-backdropför att växla mellan bakgrunden.

Försök att scrolla resten av sidan för att se det här alternativet i praktiken.

.....

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">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>

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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

Användande

Offcanvas-pluginet använder några klasser och attribut för att hantera tunga lyft:

.offcanvasdöljer innehållet
.offcanvas.showvisar innehållet
.offcanvas-startdöljer offcanvasen till vänster
.offcanvas-enddöljer offcanvasen till höger
.offcanvas-bottomdö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

Växla

Lägg till data-bs-toggle="offcanvas"och ett data-bs-targeteller hreftill elementet för att automatiskt tilldela kontroll över ett offcanvas-element. Attributet data-bs-targetaccepterar en CSS-väljare att tillämpa offcanvas på. Se till att lägga till klassen offcanvasi offcanvas-elementet. Om du vill att den ska öppnas som standard lägger du till den extra klassen show.

Avfärda

Avvisning kan uppnås med dataattributet på en knapp inom offcanvas som visas nedan:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

eller på en knapp utanför offcanvas med hjälp av data-bs-targetsom visas nedan:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

Även om båda sätten att avvisa en offcanvas stöds, kom ihåg att avvisning från utanför en offcanvas inte matchar designmönstret för WAI-ARIA modala dialogruta . Gör detta på egen risk.

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 .

Se vår JavaScript-dokumentation för mer information .

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...
})

Offcanvas

Hur det fungerar

Exempel

Offcanvas komponenter

Offcanvas

Live-demo

Offcanvas

Placering

Offcanvas topp

Offcanvas höger

Offcanvas botten

Bakgrund

Färgad med rullning

Offcanvas med bakgrund

Bakgrund med rullning

Tillgänglighet

Sass

Variabler

Användande

Via dataattribut

Växla

Avfärda

Via JavaScript

alternativ

Metoder

Asynkrona metoder och övergångar

evenemang