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.
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 data
az 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 margin
vagy elemen. Ehelyett használja az osztályt független burkolóelemként.translate
.offcanvas
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.
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>
É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 .show
osztályt egy elemen az .offcanvas
osztállyal.
.offcanvas
elrejti a tartalmat (alapértelmezett).offcanvas.show
tartalmat mutat
Használhat hivatkozást az href
attribútumhoz, vagy gombot az data-bs-target
attribútumhoz. Mindkét esetben data-bs-toggle="offcanvas"
kötelező.
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>
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-start
elhelyezi a vásznat a nézetablak bal oldalán (fent látható).offcanvas-end
a nézetablak jobb oldalára helyezi a vásznat.offcanvas-top
elhelyezi a vásznat a nézetablak tetején.offcanvas-bottom
elhelyezi a vásznat a nézetablak aljára
Próbálja ki az alábbi felső, jobb és alsó példákat.
Offcanvas felső
<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 jobbra
<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 alsó
<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-scroll
attribútumot a <body>
görgetés és data-bs-backdrop
a háttér közötti váltáshoz.
Lapozással színezett
Próbálja meg görgetni az oldal többi részét, hogy megtekinthesse ezt a lehetőséget.
Offcanvas háttérrel
.....
Háttérben görgetéssel
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">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>
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;
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:
.offcanvas
elrejti a tartalmat.offcanvas.show
mutatja a tartalmat.offcanvas-start
elrejti a bal oldali vásznat.offcanvas-end
elrejti a jobb oldali külső vásznat.offcanvas-bottom
alul 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
Adja hozzá az elemhez data-bs-toggle="offcanvas"
a data-bs-target
vagy a vagy href
elemet, hogy automatikusan hozzárendelje egy offcanvas elem vezérlését. Az data-bs-target
attribútum elfogad egy CSS-választót az offcanvas alkalmazásához. Feltétlenül adja hozzá az osztályt offcanvas
az offcanvas elemhez. Ha azt szeretné, hogy alapértelmezetten megnyíljon, adja hozzá a további osztályt show
.
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...
})