Offcanvas

Építsen be rejtett oldalsávokat projektjébe a navigációhoz, a bevásárlókosarakhoz és sok máshoz néhány osztály és JavaScript-bővítmény segítségével.

Ezen az oldalon

Hogyan működik

Az Offcanvas egy oldalsáv-összetevő, amely JavaScript segítségével átkapcsolható, hogy megjelenjen a nézetablak bal, jobb vagy alsó szélén. A gombok vagy horgonyok triggerekként használatosak, amelyek bizonyos elemekhez kapcsolódnak, és dataaz attribútumok a JavaScript meghívására szolgálnak.

Az Offcanvas ugyanazt a JavaScript-kódot használja, mint a modális. Elvileg nagyon hasonlóak, de különálló bővítmények.
Hasonlóképpen, néhány forrás Sass változó az offcanvas stílusához és méretéhez a modális változóitól öröklődik.
Amikor megjelenik, az offcanvas tartalmaz egy alapértelmezett hátteret, amelyre kattintva elrejthető az offcanvas.
A modálokhoz hasonlóan egyszerre csak egy offcanv jeleníthető meg.

Fel a fejjel! Tekintettel arra, hogy a CSS hogyan kezeli az animációkat, nem használhat marginvagy elemen. Ehelyett használja az osztályt független burkolóelemként.translate.offcanvas

Ennek az összetevőnek az animációs hatása a médialekérdezéstől függ prefers-reduced-motion. Tekintse meg akadálymentesítési dokumentációnk csökkentett mozgással foglalkozó részét .

Példák

Offcanvas alkatrészek

Az alábbiakban egy offcanvas-példa látható, amely alapértelmezés szerint jelenik meg (on keresztül .show) .offcanvas. Az Offcanvas támogatja a fejlécet egy bezárás gombbal és egy opcionális törzsosztályt néhány kezdőbetűhöz padding. Javasoljuk, hogy lehetőség szerint adjon meg offcanvas fejlécet az elvetési műveletekkel, vagy adjon meg egy kifejezett elvetési műveletet.

Az offcanvas tartalma ide kerül. Szinte bármilyen Bootstrap komponenst vagy egyéni elemet elhelyezhet itt.

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

Élő demó

Használja az alábbi gombokat egy offcanvas elem megjelenítéséhez és elrejtéséhez JavaScript segítségével, amely átkapcsolja az .showosztályt egy elemen az .offcanvasosztállyal.

.offcanvaselrejti a tartalmat (alapértelmezett)
.offcanvas.showtartalmat mutat

Használhat hivatkozást az hrefattribútumhoz, vagy gombot az data-bs-targetattribútumhoz. Mindkét esetben data-bs-toggle="offcanvas"kötelező.

Link a href

Néhány szöveg helyőrzőként. A való életben rendelkezhet a kiválasztott elemekkel. Tetszik, szöveg, képek, listák stb.

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

Elhelyezés

Nincs alapértelmezett elhelyezése az offcanvas összetevőknek, ezért hozzá kell adnia az alábbi módosító osztályok egyikét;

.offcanvas-startelhelyezi a vásznat a nézetablak bal oldalán (fent látható)
.offcanvas-enda nézetablak jobb oldalára helyezi a vásznat
.offcanvas-topelhelyezi a vásznat a nézetablak tetején
.offcanvas-bottomelhelyezi a vásznat a nézetablak aljára

Próbálja ki az alábbi felső, jobb és alsó példákat.

...

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

Háttér

Az elem görgetése <body>le van tiltva, ha egy offcanvas és annak háttere látható. Használja az data-bs-scrollattribútumot a <body>görgetés és data-bs-backdropa háttér közötti váltáshoz.

Próbálja meg görgetni az oldal többi részét, hogy megtekinthesse ezt a lehetőséget.

.....

Próbálja meg görgetni az oldal többi részét, hogy megtekinthesse ezt a lehetőséget.

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

Megközelíthetőség

Mivel az offcanvas panel elvileg egy modális párbeszédpanel, ügyeljen arra, hogy adjon hozzá – aria-labelledby="..."hivatkozva az offcanvas címére – a .offcanvas. Vegye figyelembe, hogy nem kell hozzáadnia, role="dialog"mivel már JavaScripten keresztül hozzáadjuk.

Sass

Változók

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

Használat

Az offcanvas beépülő modul néhány osztályt és attribútumot használ a nehéz emelés kezelésére:

.offcanvaselrejti a tartalmat
.offcanvas.showmutatja a tartalmat
.offcanvas-startelrejti a bal oldali vásznat
.offcanvas-endelrejti a jobb oldali külső vásznat
.offcanvas-bottomalul elrejti a vásznat

Adjon hozzá egy elvetés gombot az data-bs-dismiss="offcanvas"attribútummal, amely elindítja a JavaScript funkciót. Ügyeljen arra, hogy az <button>elemet használja a megfelelő működés érdekében az összes eszközön.

Adatattribútumokon keresztül

Váltás

Adja hozzá az elemhez data-bs-toggle="offcanvas"a data-bs-targetvagy a vagy hrefelemet, hogy automatikusan hozzárendelje egy offcanvas elem vezérlését. Az data-bs-targetattribútum elfogad egy CSS-választót az offcanvas alkalmazásához. Feltétlenül adja hozzá az osztályt offcanvasaz offcanvas elemhez. Ha azt szeretné, hogy alapértelmezetten megnyíljon, adja hozzá a további osztályt show.

Elvetés

Az elbocsátást a vászonon belülidata gombon lévő attribútum segítségével lehet elérni, az alábbiak szerint:

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

vagy a vászonon kívüli gombon az data-bs-targetalábbiak szerint:

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

Bár az offcanvas elvetésének mindkét módja támogatott, ne feledje, hogy az offcanvason kívülről történő elvetés nem egyezik a WAI-ARIA modális párbeszédablak tervezési mintájával . Tedd ezt a saját felelősségedre.

JavaScripten keresztül

Manuális engedélyezés a következőkkel:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-bs-következőhöz: data-bs-backdrop="".

Név	típus	Alapértelmezett	Leírás
`backdrop`	logikai érték	`true`	Vigyen fel hátteret a testre, amíg az offcanvas nyitva van
`keyboard`	logikai érték	`true`	Bezárja az offcanvast az Escape billentyű lenyomásakor
`scroll`	logikai érték	`false`	Engedélyezze a törzsgörgetést, amíg az offcanvas nyitva van

Mód

Aszinkron módszerek és átmenetek

Minden API metódus aszinkron , és átmenetet indít . Visszatérnek a hívóhoz, amint az átmenet elkezdődik, de még azelőtt, hogy az véget érne . Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívásait .

További információért tekintse meg JavaScript dokumentációnkat .

Aktiválja a tartalmat offcanvas elemként. Elfogad egy opcionális opciót object.

Létrehozhat egy offcanvas példányt a konstruktorral, például:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Módszer	Leírás
`toggle`	Egy offcanvas elemet megjelenített vagy rejtett állapotba kapcsol. Visszatér a hívóhoz, mielőtt az offcanvas elem ténylegesen megjelenne vagy elrejtve (azaz a `shown.bs.offcanvas`vagy `hidden.bs.offcanvas`esemény bekövetkezte előtt).
`show`	Offcanvas elemet jelenít meg. Visszatér a hívóhoz, mielőtt az offcanvas elem ténylegesen megjelenne (azaz az `shown.bs.offcanvas`esemény bekövetkezte előtt).
`hide`	Elrejt egy offcanvas elemet. Visszatér a hívóhoz, mielőtt az offcanvas elem ténylegesen el lett volna rejtve (azaz az `hidden.bs.offcanvas`esemény bekövetkezte előtt).
`getInstance`	Statikus módszer, amely lehetővé teszi a DOM-elemhez társított offcanvas-példány beszerzését
`getOrCreateInstance`	Statikus módszer, amely lehetővé teszi az offcanvas-példány DOM-elemhez társítását, vagy új létrehozását, ha nem inicializálták

Események

A Bootstrap offcanvas osztálya felfed néhány eseményt az offcanvas funkciókhoz való kapcsolódáshoz.

Esemény típus	Leírás
`show.bs.offcanvas`	Ez az esemény azonnal aktiválódik a `show`példánymetódus meghívásakor.
`shown.bs.offcanvas`	Ez az esemény akkor aktiválódik, amikor egy offcanvas elem láthatóvá lett a felhasználó számára (megvárja a CSS-átmenetek befejezését).
`hide.bs.offcanvas`	Ez az esemény azonnal aktiválódik, amikor a `hide`metódus meghívásra került.
`hidden.bs.offcanvas`	Ez az esemény akkor aktiválódik, amikor egy offcanvas elemet elrejtettek a felhasználó elől (megvárja a CSS-átmenetek befejezését).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Hogyan működik

Példák

Offcanvas alkatrészek

Offcanvas

Élő demó

Offcanvas

Elhelyezés

Offcanvas felső

Offcanvas jobbra

Offcanvas alsó

Háttér

Lapozással színezett

Offcanvas háttérrel

Háttér görgetéssel

Megközelíthetőség

Sass

Változók

Használat

Adatattribútumokon keresztül

Váltás

Elvetés

JavaScripten keresztül

Lehetőségek

Mód

Aszinkron módszerek és átmenetek

Események