Spring til hovedindhold Spring til dokumentnavigation
Check
in English

Offcanvas

Byg skjulte sidebjælker ind i dit projekt til navigation, indkøbskurve og mere med nogle få klasser og vores JavaScript-plugin.

På denne side

Hvordan det virker

Offcanvas er en sidebar-komponent, der kan skiftes via JavaScript, så den vises fra venstre, højre, øverste eller nederste kant af viewporten. Knapper eller ankre bruges som udløsere, der er knyttet til specifikke elementer, du skifter til, og dataattributter bruges til at kalde vores JavaScript.

  • Offcanvas deler noget af den samme JavaScript-kode som modals. Konceptuelt er de ret ens, men de er separate plugins.
  • På samme måde er nogle Sass -kildevariabler for offcanvas' stilarter og dimensioner arvet fra modalens variabler.
  • Når det vises, inkluderer offcanvas en standardbaggrund, der kan klikkes på for at skjule offcanvas.
  • I lighed med modals kan kun én offcanvas vises ad gangen.

Heads up! I betragtning af hvordan CSS håndterer animationer, kan du ikke bruge margineller translatepå et .offcanvaselement. Brug i stedet klassen som et selvstændigt indpakningselement.

Animationseffekten af ​​denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

Eksempler

Offcanvas komponenter

Nedenfor er et offcanvas-eksempel, der vises som standard (via .showon .offcanvas). Offcanvas inkluderer understøttelse af en header med en lukkeknap og en valgfri kropsklasse for nogle initialer padding. Vi foreslår, at du inkluderer offcanvas-headers med afvisningshandlinger, når det er muligt, eller angiver en eksplicit afvisningshandling.

Offcanvas
Indhold til offcanvas findes her. Du kan placere næsten enhver Bootstrap-komponent eller brugerdefinerede elementer her.
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

Brug knapperne nedenfor til at vise og skjule et offcanvas-element via JavaScript, der skifter .showklassen til et element med .offcanvasklassen.

  • .offcanvasskjuler indhold (standard)
  • .offcanvas.showviser indhold

Du kan bruge et link med hrefattributten eller en knap med data-bs-targetattributten. I begge tilfælde er det data-bs-toggle="offcanvas"påkrævet.

Link til href
Offcanvas
Noget tekst som pladsholder. I det virkelige liv kan du få de elementer, du har valgt. Som tekst, billeder, lister osv.
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>

Kropsrulning

Rulning af <body>elementet er deaktiveret, når et offcanvas og dets baggrund er synligt. Brug data-bs-scrollattributten til at aktivere <body>rulning.

Offcanvas med kropsrullning

Prøv at rulle resten af ​​siden for at se denne mulighed i aktion.

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>

Kropsrulning og baggrund

Du kan også aktivere <body>rulning med en synlig baggrund.

Baggrund med rulning

Prøv at rulle resten af ​​siden for at se denne mulighed i aktion.

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 baggrund

Når baggrund er indstillet til statisk, lukkes offcanvas ikke, når der klikkes uden for det.

Offcanvas
Jeg lukker ikke, hvis du klikker uden for 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

Tilføjet i v5.2.0

Skift udseendet af offcanvaser med hjælpeprogrammer for bedre at matche dem til forskellige kontekster som mørke navbarer. Her tilføjer vi .text-bg-darktil .offcanvasog .btn-close-whitetil .btn-closefor korrekt styling med en mørk offcanvas. Hvis du har rullemenuer inden for, kan du overveje også at tilføje .dropdown-menu-darktil .dropdown-menu.

Offcanvas

Placer offcanvas-indhold her.

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>

Lydhør

Tilføjet i v5.2.0

Responsive offcanvas-klasser skjuler indhold uden for viewporten fra et specificeret breakpoint og ned. Over dette brudpunkt vil indholdet indeni opføre sig som normalt. Skjuler f.eks. .offcanvas-lgindhold i et offcanvas under lgbrudpunktet, men viser indholdet over lgbrudpunktet.

Tilpas størrelsen på din browser for at vise den responsive offcanvas-knap.
Responsiv offcanvas

Dette er indhold 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>

Responsive offcanvas-klasser er tilgængelige på tværs for hvert breakpoint.

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

Placering

Der er ingen standardplacering for offcanvas-komponenter, så du skal tilføje en af ​​modifikatorklasserne nedenfor.

  • .offcanvas-startplacerer offcanvas til venstre for viewporten (vist ovenfor)
  • .offcanvas-endplacerer offcanvas til højre for viewporten
  • .offcanvas-topplacerer offcanvas på toppen af ​​viewporten
  • .offcanvas-bottomplacerer offcanvas i bunden af ​​viewporten

Prøv de øverste, højre og nederste eksempler nedenfor.

Offcanvas top
...
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øjre
...
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 bund
...
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>

Tilgængelighed

Da offcanvas-panelet konceptuelt er en modal dialog, skal du sørge for at tilføje – med aria-labelledby="..."henvisning til offcanvas-titlen – til .offcanvas. Bemærk, at du ikke behøver at tilføje, role="dialog"da vi allerede tilføjer det via JavaScript.

CSS

Variabler

Tilføjet i v5.2.0

Som en del af Bootstraps udviklende CSS-variabletilgang bruger offcanvas nu lokale CSS-variabler på .offcanvasfor forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

  --#{$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 variable

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

Brug

Offcanvas-plugin'et bruger et par klasser og attributter til at håndtere de tunge løft:

  • .offcanvasskjuler indholdet
  • .offcanvas.showviser indholdet
  • .offcanvas-startskjuler offcanvas til venstre
  • .offcanvas-endskjuler offcanvas til højre
  • .offcanvas-topskjuler offcanvas på toppen
  • .offcanvas-bottomskjuler offcanvas i bunden

Tilføj en afvis-knap med data-bs-dismiss="offcanvas"attributten, som udløser JavaScript-funktionaliteten. Sørg for at bruge <button>elementet med det for korrekt adfærd på tværs af alle enheder.

Via dataattributter

Skift

Tilføj data-bs-toggle="offcanvas"og et data-bs-targeteller hreftil elementet for automatisk at tildele kontrol over ét offcanvas-element. Attributten data-bs-targetaccepterer en CSS-vælger at anvende offcanvas på. Sørg for at tilføje klassen offcanvastil offcanvas-elementet. Hvis du vil have den til at åbne som standard, skal du tilføje den ekstra klasse show.

Afskedige

Afskedigelse kan opnås med dataattributten på en knap i offcanvas som vist nedenfor:

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

eller på en knap uden for offcanvas ved hjælp af data-bs-targetsom vist nedenfor:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Selvom begge måder at afvise et offcanvas på er understøttet, skal du huske på, at afvisning uden for en offcanvas ikke matcher ARIA Authoring Practices Guide-dialog (modalt) mønster . Gør dette på egen risiko.

Via JavaScript

Aktiver manuelt med:

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

Muligheder

Da muligheder kan videregives via dataattributter eller JavaScript, kan du tilføje et indstillingsnavn til data-bs-, som i data-bs-animation="{value}". Sørg for at ændre sagstypen for indstillingsnavnet fra " camelCase " til " kebab-case ", når du videregiver mulighederne via dataattributter. Brug for eksempel i data-bs-custom-class="beautifier"stedet for data-bs-customClass="beautifier".

Fra Bootstrap 5.2.0 understøtter alle komponenter en eksperimentel reserveret dataattribut data-bs-config, der kan rumme simpel komponentkonfiguration som en JSON-streng. Når et element har data-bs-config='{"delay":0, "title":123}'og data-bs-title="456"attributter, vil den endelige titleværdi være, 456og de separate dataattributter vil tilsidesætte værdier givet på data-bs-config. Derudover er eksisterende dataattributter i stand til at rumme JSON-værdier som data-bs-delay='{"show":0,"hide":150}'.

Navn Type Standard Beskrivelse
backdrop boolesk eller strengenstatic true Påfør en baggrund på kroppen, mens offcanvas er åben. Alternativt kan du angive staticfor en baggrund, der ikke lukker offcanvas, når der klikkes på.
keyboard boolesk true Lukker offcanvas, når der trykkes på escape-tasten.
scroll boolesk false Tillad kropsrulning, mens offcanvas er åben.

Metoder

Asynkrone metoder og overgange

Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .

Se vores JavaScript-dokumentation for mere information .

Aktiverer dit indhold som et offcanvas-element. Accepterer en valgfri indstilling object.

Du kan oprette en offcanvas-instans med konstruktøren, for eksempel:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metode Beskrivelse
getInstance Statisk metode, som giver dig mulighed for at få offcanvas-instansen tilknyttet et DOM-element.
getOrCreateInstance Statisk metode, som giver dig mulighed for at få offcanvas-instansen tilknyttet et DOM-element, eller oprette en ny, hvis den ikke blev initialiseret.
hide Skjuler et offcanvas-element. Vender tilbage til den, der ringer, før offcanvas-elementet rent faktisk er blevet skjult (dvs. før hidden.bs.offcanvashændelsen indtræffer).
show Viser et offcanvas-element. Vender tilbage til den, der ringer, før offcanvas-elementet rent faktisk er blevet vist (dvs. før shown.bs.offcanvashændelsen indtræffer).
toggle Skifter et offcanvas-element til at blive vist eller skjult. Vender tilbage til den, der ringer, før offcanvas-elementet rent faktisk er blevet vist eller skjult (dvs. før hændelsen shown.bs.offcanvaseller hidden.bs.offcanvasindtræffer).

Begivenheder

Bootstraps offcanvas-klasse afslører nogle få hændelser for tilslutning til offcanvas-funktionalitet.

Begivenhedstype Beskrivelse
hide.bs.offcanvas Denne hændelse udløses straks, når hidemetoden er blevet kaldt.
hidden.bs.offcanvas Denne hændelse udløses, når et offcanvas-element er blevet skjult for brugeren (vil vente på, at CSS-overgange er fuldført).
hidePrevented.bs.offcanvas Denne begivenhed udløses, når offcanvaset vises, dets baggrund er, staticog der udføres et klik uden for offcanvaset. Hændelsen udløses også, når der trykkes på escape-tasten, og keyboardindstillingen er indstillet til false.
show.bs.offcanvas Denne hændelse udløses med det samme, når showinstansmetoden kaldes.
shown.bs.offcanvas Denne hændelse udløses, når et offcanvas-element er blevet gjort synligt for brugeren (vil vente på, at CSS-overgange er fuldført). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})