Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
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 nó ar imeall bun 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 dúnta agus corpaicme roghnach le haghaidh tosaigh éigin padding. Molaimid duit ceanntásca lasmuigh den chanbhás a chur san áireamh le gníomhartha dífhostaithe 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. 
<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>

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

Socrúchán

Níl aon socrúchán réamhshocraithe ann do chomhpháirteanna offcanvas, 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
... 
<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 ar dheis
... 
<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>
Bun an chanbhás
... 
<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úlra

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>scrollaigh a scoránaigh agus data-bs-backdropchun an cúlra a scoránaigh.

Daite le scrollaigh

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

Lasmuigh den chanbhás le cúlra

.....

Cúlra le scrollaigh

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

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

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.

Sass

Athróga

$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-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 deartha dialóige módúil WAI-ARIA . Déan é seo ar do phriacal féin.

Trí JavaScript

Cumasaigh de láimh le:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-bs-, mar atá i data-bs-backdrop="".

Ainm Cineál Réamhshocrú Cur síos
backdrop Boole true Cuir cúlra ar an gcorp agus an taobh amuigh den chanbhás oscailte
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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Modh Cur síos
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
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).
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).
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 aschanbhás a bhaineann le heilimint DOM a fháil, nó ceann nua a chruthú ar eagla nach dtosaíodh é

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
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).
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). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})