Offcanvas
Tog bannan-taobh falaichte a-steach don phròiseact agad airson seòladh, cairtean bhùthan, agus barrachd le beagan chlasaichean agus am plugan JavaScript againn.
Mar a tha e ag obair
Tha Offcanvas na phàirt bàr-taoibh a dh’ fhaodar a thogail tro JavaScript gus nochdadh bho oir chlì, deas no bonn a’ phuirt-seallaidh. Bithear a’ cleachdadh putanan no acraichean mar luchd-brosnachaidh a tha ceangailte ri eileamaidean sònraichte a thogas tu, agus data
thathas a’ cleachdadh buadhan gus ar JavaScript a chleachdadh.
- Bidh Offcanvas a’ roinn cuid den aon chòd JavaScript ri modalan. Gu bun-bheachdail, tha iad gu math coltach, ach tha iad nam plugins air leth.
- San aon dòigh, tha cuid de chaochladairean stòr Sass airson stoidhlichean agus tomhasan offcanvas air an sealbhachadh bho chaochladairean a’ mhodail.
- Nuair a thèid a shealltainn, tha offcanvas a’ toirt a-steach cùl-raon bunaiteach a dh’ fhaodar a bhriogadh gus an offcanvas fhalach.
- Coltach ri modalan, chan urrainnear ach aon offcanvas a shealltainn aig aon àm.
Cinn suas! Leis mar a làimhsicheas CSS beòthachaidhean, chan urrainn dhut a chleachdadh margin
no translate
air .offcanvas
eileamaid. An àite sin, cleachd an clas mar eileamaid còmhdaich neo-eisimeileach.
prefers-reduced-motion
ceist nam meadhanan. Faic an
earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .
Eisimpleirean
Co-phàirtean Offcanvas
Gu h-ìosal tha eisimpleir offcanvas a tha air a shealltainn gu bunaiteach (tro .show
air adhart .offcanvas
). Tha Offcanvas a’ toirt a-steach taic airson bann-cinn le putan dlùth agus clas bodhaig roghnach airson cuid de thùsan padding
. Tha sinn a’ moladh gun cuir thu a-steach cinn-cinn offcanvas le gnìomhan cuir às nuair a ghabhas sin dèanamh, no gun toir thu seachad gnìomh diùltadh soilleir.
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>
Demo beò
Cleachd na putanan gu h-ìosal gus eileamaid offcanvas a shealltainn agus fhalach tro JavaScript a thogas an .show
clas air eileamaid leis a’ .offcanvas
chlas.
.offcanvas
a’ falach susbaint (bunaiteach).offcanvas.show
a’ nochdadh susbaint
Faodaidh tu ceangal a chleachdadh leis a’ href
bhuadh, no putan leis a’ data-bs-target
bhuadhan. Anns an dà chùis, tha data-bs-toggle="offcanvas"
e riatanach.
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>
Suidheachadh
Chan eil suidheachadh bunaiteach ann airson co-phàirtean offcanvas, mar sin feumaidh tu aon de na clasaichean mion-atharrachaidh gu h-ìosal a chur ris;
.offcanvas-start
a’ cur far a’ chanabhas air taobh clì a’ phuirt-seallaidh (air a shealltainn gu h-àrd).offcanvas-end
a’ cur far a’ chanabhas air taobh deas an t-seallaidh.offcanvas-top
a’ cur farcanabhas air mullach an t-seallaidh.offcanvas-bottom
a’ cur farcanabhas aig bonn a’ phuirt-seallaidh
Feuch na h-eisimpleirean gu h-àrd, gu h-àrd, agus gu h-ìosal gu h-ìosal.
Offcanvas mullach
<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 ceart
<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>
Aig bonn dheth canabhas
<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>
Cùl-fhiosrachadh
Tha sgroladh na h- <body>
eileamaid à comas nuair a tha canabhas agus a chùl-raon rim faicinn. Cleachd am data-bs-scroll
feart gus <body>
scrollaidh a thogail agus data-bs-backdrop
an cùl-raon a thogail.
Air a dhath le scrollaidh
Feuch ri sgrolaich an còrr den duilleag gus an roghainn seo fhaicinn ag obair.
Offcanvas le cùl-raon
.....
Air a chùlaibh le scrollaidh
Feuch ri sgrolaich an còrr den duilleag gus an roghainn seo fhaicinn ag obair.
<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>
Ruigsinneachd
Leis gur e còmhradh modal a th’ anns a’ phannal offcanvas gu bun-bheachdail, bi cinnteach gun cuir thu aria-labelledby="..."
— a’ toirt iomradh air an tiotal offcanvas — gu .offcanvas
. Thoir an aire nach fheum thu cur ris role="dialog"
oir tha sinn ga chur ris tro JavaScript mu thràth.
Sass
Caochlaidhean
$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;
Cleachdadh
Bidh am plugan offcanvas a’ cleachdadh beagan chlasaichean agus buadhan gus an togail trom a làimhseachadh:
.offcanvas
a’ falach an t-susbaint.offcanvas.show
a’ nochdadh an t-susbaint.offcanvas-start
a’ falach a’ chanabhas air an taobh chlì.offcanvas-end
a’ falach a’ chanabhas air an taobh cheart.offcanvas-bottom
a’ falach a’ chanabhas air a’ bhonn
Cuir putan cuir às leis a’ data-bs-dismiss="offcanvas"
fheart, a bhrosnaicheas gnìomhachd JavaScript. Dèan cinnteach gun cleachd thu an <button>
eileamaid leis airson giùlan ceart thar gach inneal.
Tro fheartan dàta
Cuir ris data-bs-toggle="offcanvas"
agus data-bs-target
no href
ris an eileamaid gus smachd a shònrachadh gu fèin-ghluasadach air aon eileamaid dheth canabhas. Tha am data-bs-target
feart a’ gabhail ri roghnaichear CSS gus an offcanvas a chuir an sàs. Dèan cinnteach gun cuir thu an clas offcanvas
ris an eileamaid offcanvas. Ma tha thu airson gum fosgail e gu bunaiteach, cuir ris a’ chlas show
.
Air sgàth javascript
Dèan comas le làimh le:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
Roghainnean
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-bs-
, mar ann an data-bs-backdrop=""
.
Ainm | Seòrsa | Deònach | Tuairisgeul |
---|---|---|---|
backdrop |
boolean | true |
Cuir cùl-raon air a’ bhodhaig fhad ‘s a tha offcanvas fosgailte |
keyboard |
boolean | true |
A’ dùnadh a’ chanabhas nuair a thèid an iuchair teicheadh a bhrùthadh |
scroll |
boolean | false |
Leig le gluasad bodhaig fhad ‘s a tha offcanvas fosgailte |
Dòighean-obrach
Modhan asyncronach agus eadar-ghluasadan
Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .
Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .
Cuir an susbaint agad an gnìomh mar eileamaid offcanvas. A 'gabhail ri roghainnean roghnach object
.
Faodaidh tu eisimpleir offcanvas a chruthachadh leis an neach-togail, mar eisimpleir:
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Dòigh-obrach | Tuairisgeul |
---|---|
toggle |
Togail eileamaid offcanvas ri shealltainn no falaichte. Tillidh e chun neach-fios mus deach an eileamaid offcanvas a shealltainn no fhalachshown.bs.offcanvas ( ie mus tachair an hidden.bs.offcanvas tachartas). |
show |
A’ sealltainn eileamaid offcanvas. Tillidh e chun neach-fios mus deach an eileamaid offcanvas a nochdadh (ie mus tachair an shown.bs.offcanvas tachartas). |
hide |
A’ falach eileamaid offcanvas. Tillidh e chun neach-fios mus deach an eileamaid offcanvas fhalach (ie mus tachair an hidden.bs.offcanvas tachartas). |
getInstance |
Modh statach a leigeas leat an t-eisimpleir offcanvas fhaighinn co-cheangailte ri eileamaid DOM |
getOrCreateInstance |
Dòigh statach a leigeas leat an t-eisimpleir offcanvas fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh |
Tachartasan
Bidh clas offcanvas Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd far-canabhas.
Seòrsa tachartas | Tuairisgeul |
---|---|
show.bs.offcanvas |
Bidh an tachartas seo a’ losgadh sa bhad nuair show a chanar ris an dòigh eisimpleir. |
shown.bs.offcanvas |
Thèid an tachartas seo a losgadh nuair a tha eileamaid dheth canabhas air a dhèanamh follaiseach don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
hide.bs.offcanvas |
Tha an tachartas seo air a losgadh sa bhad nuair a chaidh am hide modh a ghairm. |
hidden.bs.offcanvas |
Thèid an tachartas seo a losgadh nuair a tha eileamaid offcanvas air fhalach bhon chleachdaiche (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})