Offcanvas
Gina ɓoyayyiyar labarun gefe a cikin aikin ku don kewayawa, motocin sayayya, da ƙari tare da ƴan azuzuwan da plugin ɗin mu na JavaScript.
Yadda yake aiki
Offcanvas yanki ne na gefe wanda za'a iya jujjuya shi ta JavaScript don bayyana daga gefen hagu, dama, ko kasa na tashar kallo. Ana amfani da maɓalli ko anka a matsayin abubuwan da ke makale da takamaiman abubuwan da kake juyawa, kuma data
ana amfani da sifofi don kiran JavaScript ɗin mu.
- Offcanvas yana raba wasu lambar JavaScript iri ɗaya kamar modal. A zahiri, suna kama da juna, amma plugins ne daban.
- Hakazalika, wasu tushen Sass masu canji don salo da girma na offcanvas an gaji su daga masu canji na modal.
- Lokacin da aka nuna, offcanvas ya haɗa da tsohuwar bayanan baya wanda za'a iya dannawa don ɓoye abin da aka kashe.
- Hakazalika da modals, za a iya nuna tazara ɗaya kawai a lokaci guda.
A kula! Ganin yadda CSS ke sarrafa raye-raye, ba za ku iya amfani da su margin
ko translate
kan wani .offcanvas
abu ba. Madadin haka, yi amfani da ajin azaman abin rufewa mai zaman kansa.
prefers-reduced-motion
tambayar kafofin watsa labarai. Dubi
raguwar sashin motsi na takaddun damar mu .
Misalai
Abubuwan Offcanvas
A ƙasa akwai misali na waje wanda aka nuna ta tsohuwa (ta hanyar kunnawa .show
) .offcanvas
. Offcanvas ya haɗa da goyan bayan kai mai maɓalli kusa da ajin jiki na zaɓi don wasu na farko padding
. Muna ba da shawarar cewa ku haɗa da masu kai na waje tare da korar ayyuka a duk lokacin da zai yiwu, ko samar da matakin korar bayyane.
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>
Live demo
Yi amfani da maɓallan da ke ƙasa don nunawa da ɓoye ɓoyayyiyar ɓangarori ta hanyar JavaScript wanda ke jujjuya .show
ajin akan wani kashi tare da .offcanvas
ajin.
.offcanvas
yana ɓoye abun ciki (tsoho).offcanvas.show
yana nuna abun ciki
Kuna iya amfani da hanyar haɗi tare da href
sifa, ko maɓalli tare da data-bs-target
sifa. A cikin duka biyun, data-bs-toggle="offcanvas"
ana buƙatar.
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>
Wuri
Babu wani tsoho wuri don abubuwan da suka dace na waje, don haka dole ne ku ƙara ɗayan azuzuwan masu gyara a ƙasa;
.offcanvas-start
ya ajiye canvas a gefen hagu na wurin kallo (wanda aka nuna a sama).offcanvas-end
sanya offcanvas a hannun dama na kallon kallo.offcanvas-top
sanya offcanvas a saman tashar kallo.offcanvas-bottom
sanya offcanvas a kasan wurin kallo
Gwada misalan sama, dama, da ƙasa daga ƙasa.
Offcanvas saman
<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 dama
<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 kasa
<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>
Bayanan baya
Ana kashe gungurawa <body>
kashi lokacin da aka ga bangon bango da bangon sa. Yi amfani da data-bs-scroll
sifa don jujjuya <body>
gungurawa da data-bs-backdrop
jujjuya bayanan baya.
Mai launi tare da gungurawa
Gwada gungurawa sauran shafin don ganin wannan zaɓin yana aiki.
Offcanvas tare da bangon baya
......
Baya tare da gungurawa
Gwada gungurawa sauran shafin don ganin wannan zaɓin yana aiki.
<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">Backdrop 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>
Dama
Tun da offcanvas panel a zahiri magana ce ta modal, tabbatar da ƙara aria-labelledby="..."
- nuna taken offcanvas - zuwa .offcanvas
. Lura cewa ba kwa buƙatar ƙarawa role="dialog"
tunda mun riga mun ƙara ta JavaScript.
Sass
Masu canji
$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;
Amfani
The offcanvas plugin yana amfani da ƴan azuzuwan da halaye don ɗaukar nauyi mai nauyi:
.offcanvas
boye abun ciki.offcanvas.show
yana nuna abun ciki.offcanvas-start
yana ɓoye ɓangarorin gefen hagu.offcanvas-end
yana ɓoye ɓangarorin gefen dama.offcanvas-bottom
Yana ɓoye ɓarnar da ke ƙasa
Ƙara maɓallin korarwa tare da data-bs-dismiss="offcanvas"
sifa, wanda ke haifar da aikin JavaScript. Tabbatar amfani da <button>
kashi tare da shi don halayen da suka dace a duk na'urori.
Ta hanyar bayanan halayen
Juyawa
Ƙara data-bs-toggle="offcanvas"
da data-bs-target
ko href
zuwa kashi don sanya ikon sarrafa kashi ɗaya na waje. Siffar data-bs-target
tana karɓar mai zaɓin CSS don amfani da bangon bango zuwa. Tabbatar ƙara ajin offcanvas
zuwa kashi na waje. Idan kuna son buɗewa ta tsohuwa, ƙara ƙarin ajin show
.
Korar
Ana iya samun korarwa tare da data
sifa akan maɓalli a cikin bango kamar yadda aka nuna a ƙasa:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
ko a kan maɓalli a waje da canvas ta amfani da data-bs-target
kamar yadda aka nuna a ƙasa:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Ta hanyar JavaScript
Kunna da hannu tare da:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-
, kamar a cikin data-bs-backdrop=""
.
Suna | Nau'in | Default | Bayani |
---|---|---|---|
backdrop |
boolean | true |
Aiwatar da bayanan baya a jiki yayin da ke buɗe waje |
keyboard |
boolean | true |
Yana rufe kashe kanvas lokacin da aka danna maɓallin guduwa |
scroll |
boolean | false |
Bada izinin gungurawa jiki yayin da a buɗe canvas |
Hanyoyin
Hanyoyi masu daidaitawa da canji
Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .
Yana kunna abun cikin ku azaman ɓangarori na waje. Yana yarda da zaɓin zaɓi object
.
Kuna iya ƙirƙirar misali na waje tare da mai gini, misali:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Hanya | Bayani |
---|---|
toggle |
Yana jujjuya wani abu na waje don nunawa ko ɓoye. Komawa ga mai kira kafin a nuna ainihin abin da ke ɓoye ko ɓoye (watau kafin abin ya faru shown.bs.offcanvas ko hidden.bs.offcanvas abin ya faru). |
show |
Yana nuna wani abu na waje. Komawa ga mai kira kafin a nuna abin da ya faru a zahiri (watau kafin shown.bs.offcanvas abin ya faru). |
hide |
Yana ɓoye ɓangarori na waje. Komawa ga mai kira kafin a ɓoye ɓoyayyiyar ɓangarori (watau kafin hidden.bs.offcanvas abin ya faru). |
getInstance |
Hanyar a tsaye wacce ke ba ku damar samun misalin waje mai alaƙa da abun DOM |
getOrCreateInstance |
Hanyar a tsaye wacce ke ba ku damar samun misali na waje da ke da alaƙa da abun DOM, ko ƙirƙirar sabo idan ba a fara shi ba. |
Abubuwan da suka faru
Ajin offcanvas na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan waje.
Nau'in taron | Bayani |
---|---|
show.bs.offcanvas |
Wannan taron yana gobara nan da nan lokacin da show aka kira hanyar misali. |
shown.bs.offcanvas |
Ana korar wannan taron ne lokacin da aka bayyana abin da ke waje ga mai amfani (zai jira canjin CSS ya kammala). |
hide.bs.offcanvas |
Ana korar wannan taron nan da nan lokacin da hide aka kira hanyar. |
hidden.bs.offcanvas |
Ana korar wannan taron lokacin da aka ɓoye ɓoyayyiyar ɓangarori daga mai amfani (zai jira canjin CSS ya kammala). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})