Hoppa till huvudinnehållet Hoppa till dokumentnavigering
Check
in English

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, övre eller nedre kanten 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 är 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.

Offcanvas
Innehållet för offcanvas finns här. Du kan placera nästan vilken Bootstrap-komponent som helst eller anpassade element här.
html 
<div class="offcanvas offcanvas-start show" 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" 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
Offcanvas
Lite text som platshållare. I verkliga livet kan du ha de element du har valt. Som, text, bilder, listor, etc.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Kroppsrullning

Rullning av <body>elementet är inaktiverat när en offcanvas och dess bakgrund är synliga. Använd data-bs-scrollattributet för att aktivera <body>rullning.

Offcanvas med kroppsrullning

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

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Kroppsrullning och bakgrund

Du kan också aktivera <body>rullning med en synlig bakgrund.

Bakgrund med rullning

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

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

Statisk bakgrund

När bakgrunden är inställd på statisk kommer offcanvas inte att stängas när du klickar utanför den.

Offcanvas
Jag stänger inte om du klickar utanför mig.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Mörk offcanvas

Lades till i v5.2.0

Ändra utseendet på offcanvaser med verktyg för att bättre matcha dem med olika sammanhang som mörka navbarer. Här lägger vi .text-bg-darktill .offcanvasoch .btn-close-whitetill .btn-closeför korrekt styling med en mörk offcanvas. Om du har rullgardinsmenyer inom, överväg också att lägga .dropdown-menu-darktill i .dropdown-menu.

Offcanvas

Placera offcanvas-innehåll här.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Mottaglig

Lades till i v5.2.0

Responsiva offcanvas-klasser döljer innehåll utanför visningsporten från en angiven brytpunkt och nedåt. Över den brytpunkten kommer innehållet att bete sig som vanligt. Döljer till exempel .offcanvas-lginnehåll i en offcanvas under lgbrytpunkten, men visar innehållet ovanför lgbrytpunkten.

Ändra storlek på din webbläsare för att visa den responsiva offcanvas-växlingen.
Responsiv offcanvas

Detta är innehåll i en .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Responsiva offcanvas-klasser är tillgängliga för varje brytpunkt.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

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 visningsporten
  • .offcanvas-bottomplacerar offcanvas på botten av visningsporten

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

Offcanvas topp
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas höger
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas botten
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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.

CSS

Variabler

Lades till i v5.2.0

Som en del av Bootstraps utvecklande CSS-variabler använder offcanvas nu lokala CSS-variabler på .offcanvasför förbättrad realtidsanpassning. Värden för CSS-variablerna ställs in via Sass, så Sass-anpassning stöds fortfarande också.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

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-topdöljer offcanvasen på toppen
  • .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 ARIA Authoring Practices Guide-dialog (modalt) mönstret . Gör detta på egen risk.

Via JavaScript

Aktivera manuellt med:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

alternativ

Eftersom alternativ kan skickas via dataattribut eller JavaScript kan du lägga till ett alternativnamn till data-bs-, som i data-bs-animation="{value}". Se till att ändra fallets typ av alternativnamnet från " camelCase " till " kebab-case " när du skickar alternativen via dataattribut. Använd till exempel data-bs-custom-class="beautifier"istället för data-bs-customClass="beautifier".

Från och med Bootstrap 5.2.0 stöder alla komponenter ett experimentellt reserverat dataattribut data-bs-configsom kan hysa enkel komponentkonfiguration som en JSON-sträng. När ett element har data-bs-config='{"delay":0, "title":123}'och data-bs-title="456"attribut kommer det slutliga titlevärdet att vara 456och de separata dataattributen kommer att åsidosätta värden som ges på data-bs-config. Dessutom kan befintliga dataattribut innehålla JSON-värden som data-bs-delay='{"show":0,"hide":150}'.

namn Typ Standard Beskrivning
backdrop boolesk eller strängenstatic true Applicera en bakgrund på kroppen medan offcanvas är öppet. Alternativt kan du ange staticför en bakgrund som inte stänger offcanvas när du klickar på den.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metod Beskrivning
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.
hide Döljer ett offcanvas-element. Återgår till den som ringer innan offcanvas-elementet faktiskt har dolts (dvs innan hidden.bs.offcanvashändelsen inträffar).
show Visar ett offcanvas-element. Återgår till den som ringer innan offcanvas-elementet faktiskt har visats (dvs innan shown.bs.offcanvashändelsen inträffar).
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.offcanvaseller hidden.bs.offcanvasinträffar).

evenemang

Bootstraps offcanvas-klass avslöjar några händelser för att koppla in offcanvas-funktionalitet.

Event typ Beskrivning
hide.bs.offcanvas Denna händelse aktiveras omedelbart när hidemetoden 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).
hidePrevented.bs.offcanvas Denna händelse utlöses när offcanvas visas, dess bakgrund är staticoch ett klick utanför offcanvas utförs. Händelsen aktiveras också när escape-tangenten trycks ned och keyboardalternativet är inställt på false.
show.bs.offcanvas Denna händelse aktiveras omedelbart när showinstansmetoden 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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})