Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
Check
in English

Lasmuigh den chanbhás

Cuir barraí taoibh folaithe isteach i do thionscadal le haghaidh loingseoireachta, cairteacha siopadóireachta agus go leor eile le roinnt ranganna agus lenár mbreiseán JavaScript.

Ar an leathanach seo

Conas a oibríonn sé

Is comhpháirt barra taoibh é Offcanvas ar féidir é a scoránaigh trí JavaScript chun a bheith le feiceáil ó imeall clé, ar dheis, ar bharr nó ar bhun an amhairc. Úsáidtear cnaipí nó ancairí mar thruicear atá ceangailte le heilimintí sonracha a scorálann tú, agus dataúsáidtear tréithe chun ár JavaScript a agairt.

  • Roinneann Offcanvas cuid den chód JavaScript céanna le módúil. Go coincheapúil, tá siad cosúil go leor, ach is forlíontáin ar leith iad.
  • Mar an gcéanna, faightear roinnt athróg foinse Sass do stíleanna agus toisí an chanbhás ó athróga an mhódúil.
  • Nuair a thaispeántar é, cuimsíonn offcanvas cúlra réamhshocraithe ar féidir cliceáil air chun an t-ascanbhás a cheilt.
  • Cosúil le módúil, ní féidir ach seachchanbhás amháin a thaispeáint ag an am.

Cinnirí suas! Ag cur san áireamh an chaoi a láimhseálann CSS beochan, ní féidir leat marginnó translatear .offcanvaseilimint a úsáid. Ina áit sin, bain úsáid as an rang mar eilimint timfhilleadh neamhspleách.

Tá éifeacht beochana an chomhpháirt seo ag brath ar prefers-reduced-motioncheist na meán. Féach an rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .

Samplaí

Comhpháirteanna Offcanvas

Anseo thíos tá sampla offcanvas a thaispeántar de réir réamhshocraithe (trí .showar .offcanvas). Áiríonn Offcanvas tacaíocht do cheanntásc le cnaipe gar agus rang coirp roghnach do roinnt tosaigh padding. Molaimid duit ceanntásca lasmuigh den chanbhás a áireamh le gníomhartha dífhostú nuair is féidir, nó gníomh dífhostú sainráite a sholáthar.

Lasmuigh den chanbhás
Téann ábhar don chanbhás anseo. Is féidir leat beagnach aon chomhpháirt Bootstrap nó eilimintí saincheaptha a chur anseo.
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>

Taispeántas beo

Bain úsáid as na cnaipí thíos chun eilimint sheachbhabháis a thaispeáint agus a chur i bhfolach trí JavaScript a dhéanann an rang a scoránaigh .showar eilimint leis an .offcanvasrang.

  • .offcanvasseithí ábhar (réamhshocraithe)
  • .offcanvas.showléiríonn ábhar

Is féidir leat nasc a úsáid leis an hreftréith, nó cnaipe leis an data-bs-targettréith. Sa dá chás, data-bs-toggle="offcanvas"tá an gá.

Nasc le href
Lasmuigh den chanbhás
Roinnt téacs mar áitshealbhóir. Sa saol fíor is féidir leat na heilimintí atá roghnaithe agat. Cosúil, téacs, íomhánna, liostaí, etc.
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>

Scrollaigh choirp

Díchumasaítear scrolláil na <body>heiliminte nuair atá seachchanbhás agus a chúlra le feiceáil. Úsáid an data-bs-scrolltréith chun <body>scrollú a chumasú.

Lasmuigh den chanbhás le scrollaithe coirp

Déan iarracht an chuid eile den leathanach a scrollú chun an rogha seo a fheiceáil i ngníomh.

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>

Scrollaigh choirp agus cúlra

Is féidir leat scrollaigh a chumasú freisin <body>le cúlra infheicthe.

Cúlra le scrollaigh

Déan iarracht an chuid eile den leathanach a scrollú chun an rogha seo a fheiceáil i ngníomh.

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úlra statach

Nuair a bheidh an cúlra socraithe mar a bheith statach, ní dhúnfaidh an seachbhabhás nuair a chliceáiltear taobh amuigh de.

Lasmuigh den chanbhás
Ní dhúnfaidh mé má chliceálann tú taobh amuigh díom.
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>

Canbhás dorcha

Curtha leis in v5.2.0

Athraigh cuma na gcanbhásanna le fóntais chun iad a mheaitseáil níos fearr le comhthéacsanna éagsúla cosúil le barraí nascleanúna dorcha. Anseo cuirimid leis .text-bg-darkan stíleáil cheart .offcanvasagus .btn-close-whiteleis .btn-closean gcanbhás dorcha. Má tá anuas laistigh agat, smaoinigh ar chur .dropdown-menu-darkle .dropdown-menu.

Lasmuigh den chanbhás

Cuir ábhar offcanvas anseo.

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>

Sofhreagrach

Curtha leis in v5.2.0

Folaíonn ranganna sofhreagracha lasmuigh den chanbhás inneachar lasmuigh den radharc ó bhriseadh sonraithe agus síos. Os cionn an bhrisphointe sin, iompróidh an t-ábhar laistigh mar is gnách. Mar shampla, .offcanvas-lgseithí an t-ábhar i seachchanbhás faoin lgbrisphointe, ach taispeánann sé an t-ábhar os cionn an lgbhrisphointe.

Athraigh do bhrabhsálaí chun an scorán sofhreagrach lasmuigh den chanbhás a thaispeáint.
Lasmuigh den chanbhás sofhreagrach

Is ábhar é seo laistigh de .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>

Tá ranganna sofhreagracha lasmuigh den chanbhás ar fáil trasna do gach briseadhphointe.

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

Socrúchán

Níl aon socrúchán réamhshocraithe ann do chomhpháirteanna as an chanbhás, mar sin ní mór duit ceann de na haicmí mionathraithe a chur leis thíos.

  • .offcanvas-startcuireann sé taobh amuigh den chanbhás ar thaobh na láimhe clé den radharc (léirithe thuas)
  • .offcanvas-endcuireann sé taobh amuigh den chanbhás ar thaobh na láimhe deise den radharc
  • .offcanvas-topcuireann seachchanbhás ar bharr an amhairc
  • .offcanvas-bottomcuireann sé taobh amuigh den chanbhás ag bun an amhairc

Bain triail as na samplaí barr, dheis agus íochtair amach thíos.

Barr an chanbhás
...
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 ar dheis
...
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>
Bun an chanbhás
...
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>

Inrochtaineacht

Ós rud é gur dialóg mhodhúil é an painéal offcanvas go coincheapúil, bí cinnte go gcuirfidh aria-labelledby="..."tú —tagairt don teideal offcanvas — le .offcanvas. Tabhair faoi deara nach gá duit é a chur leis role="dialog"toisc go gcuirimid leis é trí JavaScript cheana féin.

CSS

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann offcanvas athróga áitiúla CSS anois .offcanvaschun saincheaptha feabhsaithe fíor-ama a dhéanamh. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

  --#{$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};

Athróga 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;

Úsáid

Úsáideann an breiseán offcanvas roinnt ranganna agus tréithe chun an t-ardú trom a láimhseáil:

  • .offcanvasseithí an t-ábhar
  • .offcanvas.showléiríonn an t-ábhar
  • .offcanvas-startseithí an chanbhás ar thaobh na láimhe clé
  • .offcanvas-endseithí an chanbhás ar dheis
  • .offcanvas-topseithí an chanbhás ar an mbarr
  • .offcanvas-bottomseithí an chanbhás ar an mbun

Cuir cnaipe díbhe leis an data-bs-dismiss="offcanvas"tréith, rud a chuireann tús le feidhmiúlacht JavaScript. Bí cinnte an <button>eilimint a úsáid leis le haghaidh iompar cuí thar gach feiste.

Trí tréithe sonraí

Scoránaigh

Cuir leis data-bs-toggle="offcanvas"agus data-bs-targetnó nó hrefleis an eilimint chun rialú eilimint amháin lasmuigh den chanbhás a shannadh go huathoibríoch. Glacann an data-bs-targettréith le roghnóir CSS chun an t-achar chanbhás a chur i bhfeidhm air. Bí cinnte an rang offcanvasa chur leis an eilimint offcanvas. Más mian leat é a oscailt roimh ré, cuir an rang breise show.

Díbhe

Is féidir dífhostú a bhaint amach leis an datatréith ar chnaipe laistigh den chanbhás mar a léirítear thíos:

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

nó ar chnaipe taobh amuigh den chanbhás ag baint úsáide as an gceann data-bs-targeta léirítear thíos:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Cé go dtacaítear leis an dá bhealach chun seachchanbhás a dhífhostú, cuimhnigh nach ionann dífhostú ón taobh amuigh den chanbhás agus patrún dialóige (módúil) Treorach um Chleachtais Údaraithe ARIA . Déan é seo ar do phriacal féin.

Trí JavaScript

Cumasaigh de láimh le:

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

Roghanna

Toisc gur féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript, is féidir leat ainm rogha a chur i gceangal le data-bs-, mar atá i data-bs-animation="{value}". Bí cinnte cineál an cháis d’ainm na rogha a athrú ó “ camelCase ” go “ kebab-case ” agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, úsáid data-bs-custom-class="beautifier"in ionad data-bs-customClass="beautifier".

Amhail Bootstrap 5.2.0, tacaíonn na comhpháirteanna go léir le tréith sonraí forchoimeádta turgnamhachadata-bs-config ar féidir cumraíocht chomhpháirt shimplí a áireamh mar theaghrán JSON. data-bs-config='{"delay":0, "title":123}'Nuair a bhíonn agus tréithe ag eilimint , is é an luach data-bs-title="456"deiridh a bheidh ann agus sáróidh na tréithe sonraí ar leith na luachanna a thugtar ar . Ina theannta sin, tá tréithe sonraí atá ann cheana in ann luachanna JSON cosúil le .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Ainm Cineál Réamhshocrú Cur síos
backdrop Boole nó an téadstatic true Cuir cúlra ar an gcorp agus an taobh amuigh den chanbhás oscailte. Nó, sonraigh staticle haghaidh cúlra nach ndúnann an taobh amuigh nuair a chliceáiltear air.
keyboard Boole true Dúnann sé an seachchanbhás nuair a bhrúitear eochair éalaithe.
scroll Boole false Ceadaigh scrollú coirp fad is atá an chanbhás oscailte.

Modhanna

Modhanna agus aistrithe asincrónacha

Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .

Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .

Gníomhachtaíonn sé d'inneachar mar eilimint lasmuigh den chanbhás. Glacann rogha roghnach object.

Is féidir leat sampla eascanbháis a chruthú leis an cruthaitheoir, mar shampla:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Modh Cur síos
getInstance Modh statach a cheadaíonn duit a fháil ar an sampla lasmuigh den chanbhás a bhaineann le eilimint DOM.
getOrCreateInstance Modh statach a cheadaíonn duit an t-ásc offcanvas a bhaineann le heilimint DOM a fháil, nó ceann nua a chruthú ar eagla nár cuireadh tús leis.
hide Folaigh eilimint eascanbháis. Filleann sé ar an nglaoiteoir sula mbeidh an eilimint lasmuigh den chanbhás curtha i bhfolach (ie sula hidden.bs.offcanvasdtarlaíonn an teagmhas).
show Taispeántar eilimint eascanbháis. Filleann sé ar an nglaoiteoir sula dtaispeántar an eilimint lasmuigh den chanbhás (ie sula shown.bs.offcanvasdtarlaíonn an teagmhas).
toggle Scoránaigh eilimint easbhabháis lena thaispeáint nó i bhfolach. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an eilimint lasmuigh den chanbhás (.i. sula dtarlaíonn an shown.bs.offcanvasnó an teagmhas).hidden.bs.offcanvas

Imeachtaí

Nochtann rang lasmuigh den chanbhás Bootstrap roinnt imeachtaí chun dul i ngleic le feidhmiúlacht lasmuigh den chanbhás.

Cineál imeachta Cur síos
hide.bs.offcanvas Cuirtear an teagmhas seo ar ceal láithreach nuair hidea glaodh ar an modh.
hidden.bs.offcanvas Cuirtear an teagmhas seo ar ceal nuair a fholaigh eilimint seachbhabháis ón úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
hidePrevented.bs.offcanvas Cuirtear an t-imeacht seo ar ceal nuair a thaispeánfar an seachchanbhás, déantar a chúlra staticagus nuair a dhéantar cliceáil taobh amuigh den chanbhás. Cuirtear an teagmhas as feidhm freisin nuair a bhrúitear an eochair éalaithe agus nuair a bhíonn an keyboardrogha socraithe go false.
show.bs.offcanvas Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
shown.bs.offcanvas Cuirtear an teagmhas seo ar ceal nuair a bhíonn eilimint lasmuigh den chanbhás infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})