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.

Air an duilleig seo

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 datathathas 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 marginno translateair .offcanvaseileamaid. An àite sin, cleachd an clas mar eileamaid còmhdaich neo-eisimeileach.

Tha buaidh beothalachd na co-phàirt seo an urra ri prefers-reduced-motionceist 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 .showair 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.

Tha susbaint airson an offcanvas a’ dol an seo. Faodaidh tu cha mhòr pàirt sam bith de Bootstrap no eileamaidean àbhaisteach a chuir an seo.

<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 .showclas air eileamaid leis a’ .offcanvaschlas.

.offcanvasa’ falach susbaint (bunaiteach)
.offcanvas.showa’ nochdadh susbaint

Faodaidh tu ceangal a chleachdadh leis a’ hrefbhuadh, no putan leis a’ data-bs-targetbhuadhan. Anns an dà chùis, tha data-bs-toggle="offcanvas"e riatanach.

Ceangal le href

Cuid de theacsa mar neach-àite. Ann am fìor bheatha faodaidh na h-eileamaidean a thagh thu a bhith agad. Like, teacsa, ìomhaighean, liostaichean, msaa.

<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-starta’ cur far a’ chanabhas air taobh clì a’ phuirt-seallaidh (air a shealltainn gu h-àrd)
.offcanvas-enda’ cur far a’ chanabhas air taobh deas an t-seallaidh
.offcanvas-topa’ cur farcanabhas air mullach an t-seallaidh
.offcanvas-bottoma’ cur farcanabhas aig bonn a’ phuirt-seallaidh

Feuch na h-eisimpleirean gu h-àrd, gu h-àrd, agus gu h-ìosal gu h-ìosal.

...

<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>

...

<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>

...

<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-scrollfeart gus <body>scrollaidh a thogail agus data-bs-backdropan cùl-raon a thogail.

Feuch ri sgrolaich an còrr den duilleag gus an roghainn seo fhaicinn ag obair.

.....

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:

.offcanvasa’ falach an t-susbaint
.offcanvas.showa’ nochdadh an t-susbaint
.offcanvas-starta’ falach a’ chanabhas air an taobh chlì
.offcanvas-enda’ falach a’ chanabhas air an taobh cheart
.offcanvas-bottoma’ 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-targetno hrefris an eileamaid gus smachd a shònrachadh gu fèin-ghluasadach air aon eileamaid dheth canabhas. Tha am data-bs-targetfeart a’ gabhail ri roghnaichear CSS gus an offcanvas a chuir an sàs. Dèan cinnteach gun cuir thu an clas offcanvasris 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 fhalach`shown.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...
})

Offcanvas

Mar a tha e ag obair

Eisimpleirean

Co-phàirtean Offcanvas

Offcanvas

Demo beò

Offcanvas

Suidheachadh

Offcanvas mullach

Offcanvas ceart

Aig bonn dheth canabhas

Cùl-fhiosrachadh

Air a dhath le scrollaidh

Offcanvas le cùl-raon

Air a chùlaibh le scrollaidh

Ruigsinneachd

Sass

Caochlaidhean

Cleachdadh

Tro fheartan dàta

Air sgàth javascript

Roghainnean

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tachartasan