Eksterkanvaso
Konstruu kaŝitajn flankbretojn en vian projekton por navigado, aĉetĉaroj kaj pli kun kelkaj klasoj kaj nia JavaScript-kromaĵo.
Kiel ĝi funkcias
Offcanvas estas flankmenuo komponanto, kiu povas esti ŝanĝita per JavaScript por aperi de la maldekstra, dekstre aŭ malsupra rando de la vidfenestro. Butonoj aŭ ankroj estas uzataj kiel ellasiloj, kiuj estas ligitaj al specifaj elementoj, kiujn vi ŝanĝas, kaj data
atributoj estas uzataj por alvoki nian JavaScript.
- Offcanvas dividas iujn el la sama JavaScript-kodo kiel modaloj. Koncipe, ili estas sufiĉe similaj, sed ili estas apartaj kromprogramoj.
- Simile, kelkaj fontaj Sass -variabloj por la stiloj kaj dimensioj de offcanvas estas hereditaj de la variabloj de la modalo.
- Kiam montrita, eksterkanvaso inkluzivas defaŭltan fonon, kiun oni povas klaki por kaŝi la eksterkanvason.
- Simile al modaloj, nur unu eksterkanvaso povas esti montrita samtempe.
Atentu! Konsiderante kiel CSS pritraktas animaciojn, vi ne povas uzi margin
aŭ translate
sur .offcanvas
elemento. Anstataŭe, uzu la klason kiel sendependan envolvan elementon.
prefers-reduced-motion
amaskomunikila demando. Vidu la
sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .
Ekzemploj
Offcanvas-komponantoj
Malsupre estas eksterkanvasa ekzemplo, kiu montriĝas defaŭlte (per .show
sur .offcanvas
). Offcanvas inkluzivas subtenon por kaplinio kun fermbutono kaj laŭvola korpoklaso por iu komenca padding
. Ni sugestas ke vi enmetu eksterkanvasajn kapliniojn kun malakceptaj agoj kiam ajn eblas, aŭ disponigu eksplicitan forĵetan agon.
Eksterkanvaso
<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>
Viva demonstraĵo
Uzu la subajn butonojn por montri kaj kaŝi eksterkanvasan elementon per JavaScript, kiu ŝanĝas la .show
klason al elemento kun la .offcanvas
klaso.
.offcanvas
kaŝas enhavon (defaŭlte).offcanvas.show
montras enhavon
Vi povas uzi ligilon kun la href
atributo, aŭ butonon kun la data-bs-target
atributo. En ambaŭ kazoj, la data-bs-toggle="offcanvas"
estas postulata.
Eksterkanvaso
<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>
Lokigo
Ne ekzistas defaŭlta lokigo por eksterkanvasaj komponantoj, do vi devas aldoni unu el la modifklasoj sube;
.offcanvas-start
metas eksterkanvason maldekstre de la vidfenestro (montrita supre).offcanvas-end
metas eksterkanvason dekstre de la vidfenestro.offcanvas-top
metas ekstertolon sur la supro de la vidfenestro.offcanvas-bottom
metas eksterkanvason sur la fundon de la vidfenestro
Provu la suprajn, dekstrejn kaj malsuprajn ekzemplojn sube.
Eksterkanvasa supro
<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>
Eksterkanvas dekstre
<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>
Eksterkanvasa fundo
<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>
Fono
Rulumado de la <body>
elemento estas malŝaltita kiam eksterkanvaso kaj ĝia fono estas videblaj. Uzu la data-bs-scroll
atributon por ŝanĝi <body>
movadadon kaj data-bs-backdrop
por ŝanĝi la fonon.
Kolorita kun movo
Provu rulumi la reston de la paĝo por vidi ĉi tiun opcion en ago.
Eksterkanvaso kun fono
.....
Fone kun movo
Provu rulumi la reston de la paĝo por vidi ĉi tiun opcion en ago.
<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>
Alirebleco
Ĉar la eksterkanvasa panelo estas koncipe modala dialogo, nepre aldonu aria-labelledby="..."
—referencante la eksterkanvasan titolon— al .offcanvas
. Notu, ke vi ne bezonas aldoni role="dialog"
ĉar ni jam aldonas ĝin per JavaScript.
Sass
Variabloj
$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;
Uzado
La offcanvas kromaĵo uzas kelkajn klasojn kaj atributojn por trakti la pezan ŝarĝon:
.offcanvas
kaŝas la enhavon.offcanvas.show
montras la enhavon.offcanvas-start
kaŝas la eksterkanvason maldekstre.offcanvas-end
kaŝas la eksterkanvason dekstre.offcanvas-bottom
kaŝas la ekstertolon sur la fundo
Aldonu forĵeti butonon kun la data-bs-dismiss="offcanvas"
atributo, kiu ekigas la JavaScript-funkcion. Nepre uzu la <button>
elementon kun ĝi por taŭga konduto tra ĉiuj aparatoj.
Per datumaj atributoj
Aldonu data-bs-toggle="offcanvas"
kaj a data-bs-target
aŭ href
al la elemento por aŭtomate atribui kontrolon de unu eksterkanvasa elemento. La data-bs-target
atributo akceptas CSS-elektilon al kiu apliki la eksterkanvason. Nepre aldonu la klason offcanvas
al la elemento offcanvas. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klason show
.
Per JavaScript
Ebligu permane per:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Opcioj
Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-
, kiel en data-bs-backdrop=""
.
Nomo | Tajpu | Defaŭlte | Priskribo |
---|---|---|---|
backdrop |
bulea | true |
Apliki fonon sur korpo dum ekstertolo estas malfermita |
keyboard |
bulea | true |
Fermas la eksterkanvason kiam eskapa klavo estas premata |
scroll |
bulea | false |
Permesu korpan movadon dum eksterkanvaso estas malfermita |
Metodoj
Nesinkronaj metodoj kaj transiroj
Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .
Aktivigas vian enhavon kiel eksterkanvasa elemento. Akceptas laŭvolajn opciojn object
.
Vi povas krei eksterkanvasan ekzemplon per la konstrukciisto, ekzemple:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metodo | Priskribo |
---|---|
toggle |
Ŝaltas eksterkanvasan elementon al montrita aŭ kaŝita. Revenas al la alvokanto antaŭ ol la offcanvas-elemento efektive estis montrita aŭ kaŝita (te antaŭ ol la shown.bs.offcanvas evento hidden.bs.offcanvas okazas). |
show |
Montras eksterkanvasan elementon. Revenas al la alvokanto antaŭ ol la offcanvas-elemento efektive estis montrita (te antaŭ ol la shown.bs.offcanvas evento okazas). |
hide |
Kaŝas eksterkanvasan elementon. Revenas al la alvokanto antaŭ ol la offcanvas-elemento efektive estis kaŝita (te antaŭ ol la hidden.bs.offcanvas evento okazas). |
getInstance |
Statika metodo, kiu ebligas al vi akiri la eksterkanvasan ekzemplon asociitan kun DOM-elemento |
getOrCreateInstance |
Senmova metodo kiu ebligas al vi akiri la eksterkanvasan ekzemplon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita |
Eventoj
La eksterkanvasa klaso de Bootstrap elmontras kelkajn eventojn por enkroĉi al offcanvas-funkcio.
Eventa tipo | Priskribo |
---|---|
show.bs.offcanvas |
Ĉi tiu evento tuj ekfunkciigas kiam la show ekzempla metodo estas vokita. |
shown.bs.offcanvas |
Ĉi tiu evento estas lanĉita kiam eksterkanvasa elemento fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos). |
hide.bs.offcanvas |
Ĉi tiu evento estas lanĉita tuj kiam la hide metodo estas vokita. |
hidden.bs.offcanvas |
Ĉi tiu evento estas lanĉita kiam eksterkanvasa elemento estis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})