Offcanvas
Jiri klaasị ole na ole na ngwa mgbakwunye Javascript wulite akụkụ zoro ezo n'ime ọrụ gị maka ịnyagharị, ụgbọ ịzụ ahịa na ihe ndị ọzọ.
Ka o si arụ ọrụ
Offcanvas bụ akụkụ akụkụ nke enwere ike ịtụgharị site na Javascript ka ọ pụta n'akụkụ aka ekpe, aka nri, ma ọ bụ ala nke ebe nlele. A na-eji bọtịnụ ma ọ bụ arịlịka dị ka ihe na-akpali akpali nke etinyere na ihe ụfọdụ ị na-atụgharị, yana data
njirimara a na-eji kpọkuo Javascript anyị.
- Offcanvas na-ekerịta ụfọdụ koodu Javascript dị ka modal. N'echiche, ha yiri nnọọ, mana ha bụ plugins dị iche iche.
- N'otu aka ahụ, a na-eketa ụfọdụ mgbanwe Sass maka ụdị na akụkụ nke offcanvas site na mgbanwe modal.
- Mgbe egosiri, offcanvas na-agụnye ndabere ndabere nke enwere ike ịpị iji zoo enyo ahụ.
- Yiri modal, ọ bụ naanị otu oyi akwa ka enwere ike igosi n'otu oge.
Welie isi elu! Nyere ka CSS si ejikwa animation, ị nweghị ike iji margin
ma ọ bụ translate
na .offcanvas
mmewere. Kama, jiri klaasị ahụ dị ka ihe mkpuchi nwere onwe.
prefers-reduced-motion
ajụjụ mgbasa ozi. Hụ akụkụ
ngagharị ewelatala nke akwụkwọ nnweta anyị .
Ihe atụ
Ngwa ndị dịpụrụ adịpụ
N'okpuru ebe a bụ ọmụmaatụ offcanvas nke egosiri na ndabara (site .show
na .offcanvas
). Offcanvas gụnyere nkwado maka nkụnye eji isi mee nke nwere bọtịnụ nso yana klaasị ahụ nhọrọ maka ụfọdụ mbido padding
. Anyị na-atụ aro ka ị tinye isi ihe ndị dịpụrụ adịpụ na omume ịchụpụ mgbe ọ bụla enwere ike, ma ọ bụ wepụta mmemme ịchụpụ nke ọma.
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>
Ihe ngosi dị ndụ
Jiri bọtịnụ dị n'okpuru ka igosi ma zoo ihe dịpụrụ adịpụ site na Javascript nke na-atụgharị .show
klaasị na mmewere ya na .offcanvas
klaasị.
.offcanvas
na-ezobe ọdịnaya (nke ndabara).offcanvas.show
na-egosi ọdịnaya
Ị nwere ike iji njikọ nwere href
njirimara, ma ọ bụ bọtịnụ nwere data-bs-target
àgwà ahụ. N'okwu abụọ a, data-bs-toggle="offcanvas"
achọrọ ya.
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>
Ndokwa
Enweghị ebe ndabere maka ihe ndị na-apụ apụ, yabụ ị ga-agbakwunye otu n'ime klaasị modifier n'okpuru;
.offcanvas-start
dowe anya n'aka ekpe nke ebe nlele (egosiri n'elu).offcanvas-end
dowe anyawa n'aka nri nke ebe nlele.offcanvas-top
na-etinye offcanvas n'elu ebe nlele.offcanvas-bottom
na-etinye offcanvas n'okpuru ebe nlele
Nwalee atụ elu, aka nri na ala dị n'okpuru.
N'elu kanvas
<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>
Apụpụ n'aka nri
<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 ala
<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>
Ebe ndabere
Akwụsịghị ịpịgharị <body>
ihe ahụ mgbe a na-ahụ ihe dịpụrụ adịpụ na ebe ndabere ya. Jiri data-bs-scroll
njiri mara ka tụgharịa <body>
pịgharịa ma data-bs-backdrop
tụgharịa n'azụ.
Agba na mpịakọta
Gbalịa ịpịgharịa na ibe ndị ọzọ ka ịhụ nhọrọ a na-arụ ọrụ.
Offcanvas nwere backdrop
......
Jiri mpịakọta tụgharịa azụ
Gbalịa ịpịgharịa na ibe ndị ọzọ ka ịhụ nhọrọ a na-arụ ọrụ.
<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>
Nnweta
Ebe ọ bụ na panetị offcanvas bụ n'ezie mkparịta ụka modal, jide n'aka na ịtinye aria-labelledby="..."
- na-ezo aka aha offcanvas - na .offcanvas
. Mara na ịchọghị ịgbakwunye role="dialog"
ebe ọ bụ na anyị tinyegoro ya site na Javascript.
Sass
Mgbanwe
$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;
Ojiji
Ihe mgbakwunye Offcanvas na-eji klaasị na njirimara ole na ole iji jikwaa ibuli elu:
.offcanvas
na-ezochi ọdịnaya.offcanvas.show
na-egosi ọdịnaya.offcanvas-start
na-ezobe ihe mgbochi dị n'aka ekpe.offcanvas-end
na-ezobe ihe dịpụrụ adịpụ n'aka nri.offcanvas-bottom
na-ezobe ihe mgbochi dị n'okpuru
Tinye bọtịnụ mkpochapụ nwere data-bs-dismiss="offcanvas"
njirimara, nke na-ebute ọrụ Javascript. Jide n'aka na ị ga-eji <button>
mmewere ya na omume kwesịrị ekwesị n'ofe ngwaọrụ niile.
Site na njirimara data
Tinye data-bs-toggle="offcanvas"
na a data-bs-target
ma ọ bụ href
na mmewere iji kenye njikwa nke otu ihe na-apụ apụ na-akpaghị aka. Àgwà ahụ data-bs-target
na-anabata onye nhọpụta CSS iji tinye ihe na-apụ apụ na ya. Jide n'aka na ịtinye klaasị offcanvas
na mmewere offcanvas. Ọ bụrụ na ị ga-achọ ka ọ meghee, tinye klaasị agbakwunyere show
.
Site na Javascript
Jiri aka jiri:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Nhọrọ
Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-bs-
, dị ka ọ dị na data-bs-backdrop=""
.
Aha | Ụdị | Ọdabara | Nkọwa |
---|---|---|---|
backdrop |
boolean | true |
Tinye ihe ndabere na ahụ mgbe a na-apụ apụ na-emeghe |
keyboard |
boolean | true |
Na-emechi oghere anya mgbe ịpịrị igodo mgbapụ |
scroll |
boolean | false |
Kwe ka ọ pịgharịa ahụ mgbe a na-apụ apụ na-emeghe |
Ụzọ
Ụzọ asynchronous na ntụgharị
Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .
Na-eme ka ọdịnaya gị rụọ ọrụ dị ka ihe na-apụ apụ. Nabata nhọrọ nhọrọ object
.
Ị nwere ike iji onye na-ewu ihe mepụta ihe atụ na-apụ apụ, dịka ọmụmaatụ:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Usoro | Nkọwa |
---|---|
toggle |
Na-atụgharị ihe dịpụrụ adịpụ na-egosi ma ọ bụ zoo. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ ezobe ihe ndị na-apụ apụ (ya bụ, tupu ihe shown.bs.offcanvas omume hidden.bs.offcanvas ahụ emee). |
show |
Na-egosi ihe dịpụrụ adịpụ. Na-alaghachikwute onye na-akpọ oku tupu egosipụta ihe ndị dịpụrụ adịpụ (ya bụ tupu shown.bs.offcanvas mmemme emee). |
hide |
Na-ezobe mmewere nke kanvas. Na-alaghachikwute onye na-akpọ oku tupu ezobe ihe n'èzí (ya bụ, tupu hidden.bs.offcanvas mmemme emee). |
getInstance |
Usoro kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ anya nke jikọtara ya na mmewere DOM |
getOrCreateInstance |
Ụzọ kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ nke offcanvas jikọtara ya na ihe DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya |
Ihe omume
Klas Offcanvas Bootstrap na-ekpughere ihe omume ole na ole maka itinye aka n'ime ọrụ oyi.
Ụdị mmemme | Nkọwa |
---|---|
show.bs.offcanvas |
Ihe omume a na-agba ọkụ ozugbo show a na-akpọ usoro ihe atụ. |
shown.bs.offcanvas |
A na-agbapụ mmemme a mgbe onye ọrụ mere ka ihe na-apụ apụ anya (ga-echere mgbanwe CSS ka agwụchaa). |
hide.bs.offcanvas |
A na-agbapụ ihe omume a ozugbo mgbe hide a na-akpọ usoro ahụ. |
hidden.bs.offcanvas |
A na-agbapụ mmemme a mgbe ezoro ezoro onye ọrụ ihe na-apụ apụ (ga-echere mgbanwe CSS ka agwụchaa). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})