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

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

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.

...

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

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

.....

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

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;

Ú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í ar fud gach feiste.

Trí tréithe sonraí

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.

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 chomh luath agus 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.offcanvas`nó 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.offcanvas`dtarlaí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.offcanvas`dtarlaí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 `show`a 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 `hide`a 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...
})

Lasmuigh den chanbhás

Conas a oibríonn sé

Samplaí

Comhpháirteanna Offcanvas

Lasmuigh den chanbhás

Taispeántas beo

Lasmuigh den chanbhás

Socrúchán

Barr an chanbhás

Offcanvas ar dheis

Bun an chanbhás

Cúlra

Daite le scrollaigh

Lasmuigh den chanbhás le cúlra

Cúlra le scrollaigh

Inrochtaineacht

Sass

Athróga

Úsáid

Trí tréithe sonraí

Trí JavaScript

Roghanna

Modhanna

Modhanna agus aistrithe asincrónacha

Imeachtaí