Jashtë kanavacë
Ndërtoni shirita anësor të fshehur në projektin tuaj për navigim, karrocat e blerjeve dhe më shumë me disa klasa dhe shtojcën tonë JavaScript.
Si punon
Offcanvas është një komponent i shiritit anësor që mund të ndryshohet nëpërmjet JavaScript për t'u shfaqur nga skaji i majtë, i djathtë ose i poshtëm i portës së pamjes. Butonat ose ankorat përdoren si nxitës që janë bashkangjitur me elementë specifikë që ju ndërroni dhe data
atributet përdoren për të thirrur JavaScript-in tonë.
- Offcanvas ndan disa nga të njëjtin kod JavaScript si modalet. Konceptualisht, ato janë mjaft të ngjashme, por janë shtojca të veçanta.
- Në mënyrë të ngjashme, disa variabla burimore Sass për stilet dhe dimensionet e offcanvas janë trashëguar nga variablat e modalit.
- Kur shfaqet, offcanvas përfshin një sfond të paracaktuar që mund të klikohet për të fshehur offcanvas.
- Ngjashëm me modalet, vetëm një kanavacë mund të shfaqet në të njëjtën kohë.
Kokat lart! Duke pasur parasysh se si CSS trajton animacionet, nuk mund të përdorni margin
ose translate
në një .offcanvas
element. Në vend të kësaj, përdorni klasën si një element mbështjellës të pavarur.
prefers-reduced-motion
pyetja e medias. Shikoni
seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .
Shembuj
Komponentët jashtë kanavacës
Më poshtë është një shembull offcanvas që shfaqet si parazgjedhje (nëpërmjet .show
) .offcanvas
. Offcanvas përfshin mbështetje për një kokë me një buton mbylljeje dhe një klasë fakultative të trupit për disa fillestare padding
. Ne ju sugjerojmë që të përfshini titujt e "offcanvas" me veprimet e heqjes dorë sa herë që është e mundur, ose të ofroni një veprim të qartë heqjeje.
Jashtë kanavacë
<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>
Demoja e drejtpërdrejtë
Përdorni butonat më poshtë për të shfaqur dhe fshehur një element offcanvas nëpërmjet JavaScript që ndërron .show
klasën në një element me .offcanvas
klasën.
.offcanvas
fsheh përmbajtjen (e parazgjedhur).offcanvas.show
tregon përmbajtjen
Mund të përdorni një lidhje me href
atributin ose një buton me data-bs-target
atributin. Në të dyja rastet, data-bs-toggle="offcanvas"
kërkohet.
Jashtë kanavacë
<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>
Vendosja
Nuk ka asnjë vendosje të paracaktuar për komponentët offcanvas, kështu që duhet të shtoni një nga klasat e modifikuesve më poshtë;
.offcanvas-start
vendos kanavacën në të majtë të portës së shikimit (treguar më lart).offcanvas-end
vendos offcanvas në të djathtë të portës së shikimit.offcanvas-top
vendos offcanvas në krye të portës së shikimit.offcanvas-bottom
vendos offcanvas në fund të portës së shikimit
Provoni shembujt e sipërm, të djathtë dhe të poshtëm më poshtë.
Top jashtë kanavacës
<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>
E drejtë jashtë kanavacë
<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>
Fundi jashtë kanavacës
<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>
Sfondi
Lëvizja e <body>
elementit çaktivizohet kur një fotografi jashtë kanavacë dhe sfondi i tij janë të dukshëm. Përdorni data-bs-scroll
atributin për të ndryshuar <body>
lëvizjen dhe data-bs-backdrop
për të ndryshuar sfondin.
Ngjyrosur me lëvizje
Provoni të lëvizni pjesën tjetër të faqes për të parë këtë opsion në veprim.
Jashtë kanavacë me sfond
.....
Sfond me lëvizje
Provoni të lëvizni pjesën tjetër të faqes për të parë këtë opsion në veprim.
<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>
Aksesueshmëria
Meqenëse paneli offcanvas është konceptualisht një dialog modal, sigurohuni që të shtoni aria-labelledby="..."
—duke iu referuar titullit offcanvas—në .offcanvas
. Vini re se nuk keni nevojë të shtoni role="dialog"
pasi ne tashmë e shtojmë atë përmes JavaScript.
Sass
Variablat
$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;
Përdorimi
Shtojca offcanvas përdor disa klasa dhe atribute për të trajtuar ngritjen e rëndë:
.offcanvas
fsheh përmbajtjen.offcanvas.show
tregon përmbajtjen.offcanvas-start
fsheh kanavacën në të majtë.offcanvas-end
fsheh kanavacën në të djathtë.offcanvas-bottom
fsheh kanavacën në fund
Shto një buton heqjeje me data-bs-dismiss="offcanvas"
atributin, i cili aktivizon funksionalitetin JavaScript. Sigurohuni që të përdorni <button>
elementin me të për sjelljen e duhur në të gjitha pajisjet.
Nëpërmjet atributeve të të dhënave
Shto data-bs-toggle="offcanvas"
dhe një data-bs-target
ose href
te elementi për të caktuar automatikisht kontrollin e një elementi offcanvas. Atributi data-bs-target
pranon një përzgjedhës CSS për të aplikuar offcanvas. Sigurohuni që të shtoni klasën offcanvas
në elementin offcanvas. Nëse dëshironi që të hapet si parazgjedhje, shtoni klasën shtesë show
.
Përmes JavaScript
Aktivizo manualisht me:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Opsione
Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-bs-
, si në data-bs-backdrop=""
.
Emri | Lloji | E paracaktuar | Përshkrim |
---|---|---|---|
backdrop |
logjike | true |
Aplikoni një sfond në trup ndërsa offcanvas është i hapur |
keyboard |
logjike | true |
Mbyll offcanvas kur shtypet tasti i arratisjes |
scroll |
logjike | false |
Lejo lëvizjen e trupit ndërkohë që kavanozi është i hapur |
Metodat
Metodat dhe tranzicionet asinkrone
Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .
Shikoni dokumentacionin tonë JavaScript për më shumë informacion .
Aktivizon përmbajtjen tuaj si një element offcanvas. Pranon një opsion opsional object
.
Mund të krijoni një shembull offcanvas me konstruktorin, për shembull:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metoda | Përshkrim |
---|---|
toggle |
Ndryshon një element offcanvas në të shfaqur ose të fshehur. Kthehet te thirrësi përpara se elementi offcanvas të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.offcanvas ose ).hidden.bs.offcanvas |
show |
Shfaq një element offcanvas. Kthehet te thirrësi përpara se të shfaqet në të vërtetë elementi offcanvas (dmth. përpara se shown.bs.offcanvas ngjarja të ndodhë). |
hide |
Fsheh një element offcanvas. Kthehet te thirrësi përpara se elementi offcanvas të jetë fshehur në të vërtetë (dmth. përpara se hidden.bs.offcanvas ngjarja të ndodhë). |
getInstance |
Metoda statike e cila ju lejon të merrni shembullin offcanvas të lidhur me një element DOM |
getOrCreateInstance |
Metoda statike që ju lejon të merrni shembullin offcanvas të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar |
Ngjarjet
Klasa offcanvas e Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin offcanvas.
Lloji i ngjarjes | Përshkrim |
---|---|
show.bs.offcanvas |
Kjo ngjarje ndizet menjëherë kur show thirret metoda e shembullit. |
shown.bs.offcanvas |
Kjo ngjarje aktivizohet kur një element offcanvas është bërë i dukshëm për përdoruesin (do të presë që kalimet CSS të përfundojnë). |
hide.bs.offcanvas |
Kjo ngjarje aktivizohet menjëherë kur hide metoda është thirrur. |
hidden.bs.offcanvas |
Kjo ngjarje aktivizohet kur një element offcanvas është fshehur nga përdoruesi (do të presë që kalimet CSS të përfundojnë). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})