Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
Check
in English

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 a nézetablak bal, jobb, felső vagy alsó széléről jelenjen meg. 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.

Offcanvas
Az offcanvas tartalma ide kerül. Szinte bármilyen Bootstrap komponenst vagy egyéni elemet elhelyezhet itt.
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>

É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
Offcanvas
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.
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>

Test görgetése

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 engedélyezéséhez.

Offcanvas test görgetéssel

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

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>

A test görgetése és a háttér

<body>A görgetést látható háttérrel is engedélyezheti .

Háttér görgetéssel

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

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>

Statikus háttér

Ha a hátteret statikusra állítja, az offcanvas nem záródik be, ha kívülre kattint.

Offcanvas
Nem zárom be, ha rajtam kívül kattintasz.
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>

Sötét vászonmentes

Hozzáadva a v5.2.0-hoz

Módosítsa a vászonképek megjelenését segédprogramokkal, hogy jobban illeszkedjen a különböző környezetekhez, például a sötét navigációs sávokhoz. Itt adunk hozzá .text-bg-darka .offcanvasés .btn-close-whitea .btn-closemegfelelő stílushoz egy sötét offcanv-vel. Ha vannak legördülő menüi, fontolja meg a hozzáadását .dropdown-menu-darkis .dropdown-menu.

Offcanvas

Helyezzen el a vászonmentes tartalmat ide.

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>

Fogékony

Hozzáadva a v5.2.0-hoz

Az adaptív offcanvas osztályok elrejtik a nézetablakon kívüli tartalmat egy meghatározott törésponttól kezdve és lefelé. E töréspont felett a benne lévő tartalom a szokásos módon fog viselkedni. Például .offcanvas-lgelrejti a tartalmat egy offcanvason a lgtöréspont alatt, de megjeleníti a tartalmat a lgtöréspont felett.

Méretezze át a böngészőt, hogy megjelenjen az adaptív offcanvas kapcsoló.
Reszponzív offcanvas

Ez egy tartalom egy .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>

A reszponzív offcanvas osztályok minden törésponthoz elérhetők.

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

Elhelyezés

Az offcanvas összetevőknek nincs alapértelmezett elhelyezése, 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.

Offcanvas felső
...
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 jobbra
...
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 alsó
...
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>

Megközelíthetőség

Mivel az offcanvas panel elvileg egy modális párbeszédpanel, feltétlenül adja 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.

CSS

Változók

Hozzáadva a v5.2.0-hoz

A Bootstrap fejlődő CSS-változókra vonatkozó megközelítésének részeként az offcanvas helyi CSS-változókat használ .offcanvasa továbbfejlesztett valós idejű testreszabás érdekében. A CSS-változók értékeit a Sass segítségével állítjuk be, így a Sass testreszabása továbbra is támogatott.

  --#{$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 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-topa tetején elrejti a 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 az ARIA Authoring Practices Guide párbeszédablak (modális) mintájával . Tedd ezt a saját felelősségedre.

JavaScripten keresztül

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

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

Lehetőségek

Mivel az opciók átadhatók adatattribútumokon vagy JavaScript-en keresztül, hozzáfűzhet egy beállításnevet a -hoz data-bs-, mint például a data-bs-animation="{value}". Ügyeljen arra, hogy az opció nevének esettípusát „ camelCase ”-ról „ kebab-case ”-re változtassa, amikor a beállításokat adatattribútumokon keresztül adja át. Például használja data-bs-custom-class="beautifier"a helyett data-bs-customClass="beautifier".

A Bootstrap 5.2.0-tól kezdve minden összetevő támogatja a kísérleti fenntartott adatattribútumot, data-bs-configamely JSON-karakterláncként tartalmazhat egyszerű összetevőkonfigurációt. Ha egy elemnek data-bs-config='{"delay":0, "title":123}'és data-bs-title="456"attribútumai vannak, a végső titleérték a következő lesz, 456és a különálló adatattribútumok felülírják a megadott értékeket data-bs-config. Ezenkívül a meglévő adatattribútumok JSON-értékeket, például data-bs-delay='{"show":0,"hide":150}'.

Név típus Alapértelmezett Leírás
backdrop logikai érték vagy a karakterláncstatic true Vigyen fel hátteret a testre, amíg az offcanvas nyitva van. Alternatív megoldásként staticolyan hátteret adjon meg, amely nem zárja be az offcanvast, amikor rákattint.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Módszer Leírás
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.
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.offcanvasesemé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.offcanvasesemény bekövetkezte előtt).
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.offcanvasvagy hidden.bs.offcanvasesemény bekövetkezte előtt).

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
hide.bs.offcanvas Ez az esemény azonnal aktiválódik, amikor a hidemetó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).
hidePrevented.bs.offcanvas Ez az esemény akkor aktiválódik, amikor az offcanvas látható, a háttere megjelenik, staticés az offcanvason kívüli kattintás történik. Az esemény akkor is elindul, ha az Escape billentyűt lenyomják, és az keyboardopció értékre van állítva false.
show.bs.offcanvas Ez az esemény azonnal aktiválódik a showpé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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})