Rach gu prìomh shusbaint Air adhart gu seòladh docs
Check
in English

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, mullach 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 roghainneil airson cuid de thùsan padding. Tha sinn a’ moladh gun cuir thu a-steach cinn-cinn far-canabhas le gnìomhan cuir às nuair a ghabhas sin dèanamh, no gun toir thu seachad gnìomh diùltadh soilleir.

Offcanvas
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.
html 
<div class="offcanvas offcanvas-start show" 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" 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-targetbhuadh. Anns an dà chùis, tha data-bs-toggle="offcanvas"e riatanach.

Ceangal le href
Offcanvas
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.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Scroll corp

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

Offcanvas le gluasad bodhaig

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

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Scrollaidh bodhaig agus cùl-raon

Faodaidh tu cuideachd <body>scrollaidh a chomasachadh le cùl-raon faicsinneach.

Cùl-fhiosrachadh le scrollaidh

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

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

Cùl-raon statach

Nuair a bhios an cùl-raon deiseil, cha dùin an canabhas nuair a bhriogas tu air taobh a-muigh dheth.

Offcanvas
Cha dùin mi ma bhriogas tu taobh a-muigh orm.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Canabhas dorcha

Air a chur ris ann an v5.2.0

Atharraich coltas offcanvases le goireasan gus an maidseadh nas fheàrr ri diofar cho-theacsan leithid bàraichean seòlaidh dorcha. An seo bidh sinn .text-bg-darka’ cur ris .offcanvasagus .btn-close-whiteri .btn-closestoidhleachadh ceart le canabhas dorcha. Ma tha dropdowns agad taobh a-staigh, smaoinich cuideachd air cuir .dropdown-menu-darkri .dropdown-menu.

Offcanvas

Cuir susbaint offcanvas an seo.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Freagarrach

Air a chur ris ann an v5.2.0

Bidh clasaichean freagairteach offcanvas a’ falach susbaint taobh a-muigh an t-seallaidh bho àite briseadh sònraichte agus sìos. Os cionn a’ phuing-bhriseadh sin, giùlainidh an t-susbaint a-staigh mar as àbhaist. Mar eisimpleir, .offcanvas-lga’ falach susbaint ann an canabhas fon àite brisidh lg, ach a’ sealltainn an t-susbaint os cionn a’ phuing- lgbhriseadh.

Ath-mheudaich do bhrobhsair gus an toglach freagairteach offcanvas a shealltainn.
Freagarrach far canabhas

Is e seo susbaint taobh a-staigh faidhle .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Tha clasaichean freagairteach far-canabhas rim faighinn tarsainn airson gach briseadh.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

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-bottomcuir far canabhas aig bonn a’ phuirt-seallaidh

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

Offcanvas mullach
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas ceart
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Aig bonn dheth canabhas
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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.

CSS

Caochlaidhean

Air a chur ris ann an v5.2.0

Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap, tha offcanvas a-nis a’ cleachdadh caochladairean CSS ionadail air adhart .offcanvasairson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

caochladairean Sass

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

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-topa’ falach a’ chanabhas air a’ mhullach
  • .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

Tog suas

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.

Cur às

Faodar cur às a dhreuchd leis a’ databhuadhan air putan taobh a-staigh a’ chanabhas mar a chithear gu h-ìosal:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

no air putan taobh a-muigh a’ chanabhas a’ cleachdadh na data-bs-targetleanas mar a chithear gu h-ìosal:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Ged a tha an dà dhòigh air canabhas a chuir air falbh a’ faighinn taic, cumaibh cuimhne nach eil cur às bho thaobh a-muigh canabhas a’ freagairt ri pàtran deasbaid (modal) Stiùireadh Cleachdaidhean Ùghdarrachaidh ARIA . Dèan seo air do chunnart fhèin.

Air sgàth javascript

Dèan comas le làimh le:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Roghainnean

Leis gum faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript, faodaidh tu ainm roghainn a chuir ri data-bs-, mar ann an data-bs-animation="{value}". Dèan cinnteach gun atharraich thu seòrsa cùis an ainm roghainn bho “ camelCase ” gu “ kebab-case ” nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, cleachd data-bs-custom-class="beautifier"an àite data-bs-customClass="beautifier".

Mar Bootstrap 5.2.0, tha na pàirtean uile a’ toirt taic do fheart dàta glèidhte deuchainneachdata-bs-config a dh’ fhaodas rèiteachadh phàirtean sìmplidh a chumail mar shreang JSON. Nuair a tha data-bs-config='{"delay":0, "title":123}'agus data-bs-title="456"buadhan aig eileamaid, bidh an titleluach deireannach 456agus bidh na buadhan dàta fa leth a’ dol thairis air na luachan a chaidh a thoirt seachad air data-bs-config. A bharrachd air an sin, tha na feartan dàta a th’ ann mar-thà comasach air luachan JSON mar data-bs-delay='{"show":0,"hide":150}'.

Ainm Seòrsa Deònach Tuairisgeul
backdrop boolean no an t-sreangstatic true Cuir cùl-raon air a’ bhodhaig fhad ‘s a tha offcanvas fosgailte. No, sònraich staticairson cùl-raon nach dùin an taobh a-muigh nuair a bhriogas tu air.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Dòigh-obrach Tuairisgeul
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.
hide A’ falach eileamaid offcanvas. Tillidh e chun neach-fios mus deach an eileamaid offcanvas fhalach (ie mus tachair an hidden.bs.offcanvastachartas).
show A’ sealltainn eileamaid offcanvas. Tilleadh chun neach-fios mus deach an eileamaid offcanvas a nochdadh (ie mus tachair an shown.bs.offcanvastachartas).
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.offcanvastachartas).

Tachartasan

Bidh clas offcanvas Bootstrap a’ nochdadh grunn thachartasan airson a dhol a-steach do ghnìomhachd far-canabhas.

Seòrsa tachartas Tuairisgeul
hide.bs.offcanvas Tha an tachartas seo air a losgadh sa bhad nuair a chaidh am hidemodh 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).
hidePrevented.bs.offcanvas Thèid an tachartas seo a losgadh nuair a thèid an offcanvas a shealltainn, tha an cùl-raon aige staticagus thèid cliogadh taobh a-muigh an offcanvas a dhèanamh. Thèid an tachartas a losgadh cuideachd nuair a thèid an iuchair teicheadh ​​​​a bhrùthadh agus an keyboardroghainn air a shuidheachadh gu false.
show.bs.offcanvas Bidh an tachartas seo a’ losgadh sa bhad nuair showa 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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})