Ehandle ka canvas

Aka ti-sidebar leti fihliweke eka phurojeke ya wena leswaku u kota ku famba-famba, swigolonyana swo xava, ni swin’wana hi titlilasi ti nga ri tingani ni xiengetelo xa hina xa JavaScript.

Eka tluka leri

Ndlela leyi swi tirhaka ha yona

Offcanvas i xiphemu xa barhi ya le tlhelo lexi nga cinciwaka hi ku tirhisa JavaScript leswaku xi humelela ku suka etlhelo ra ximatsi, ra xinene kumbe ra le hansi ra xivono. Tiboto kumbe ti-anchor ti tirhisiwa tanihi swihlohloteri leswi khomanisiweke ni swiaki swo karhi leswi u swi cinca-cincaka, naswona dataswihlawulekisi swi tirhisiwa ku vitana JavaScript ya hina.

Offcanvas yi avelana yin’wana ya khodi ya JavaScript leyi fanaka na ti-modal. Hi tlhelo ra mianakanyo, ta fana swinene, kambe i ti-plugin leti hambaneke.
Hilaha ku fanaka, swin’wana swa swilo leswi cinca-cincaka swa Sass swa xihlovo swa switayele na tidimenxini ta offcanvas swi kumiwa ndzhaka eka swilo leswi cinca-cincaka swa modal.
Loko yi kombisiwa, offcanvas yi katsa backdrop ya ntolovelo leyi nga tsindziyelaka ku fihla offcanvas.
Kufana na ti modals, i offcanvas yin’we ntsena leyinga kombisiwa hi nkarhi wun’we.

Tinhloko ta le henhla! Loko u nyikiwa ndlela leyi CSS yi khomaka swifaniso leswi hanyaka ha yona, a wu nge swi koti ku tirhisa marginkumbe translateeka .offcanvaselemente. Ematshan’weni ya sweswo, tirhisa tlilasi tanihi xiaki xo phutsela lexi tiyimeleke.

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Swikombiso

Swiphemu swa le handle ka canvas

Laha hansi ku na xikombiso xa offcanvas lexi kombisiweke hi ku tiyimisela (via .showon .offcanvas). Offcanvas yi katsa nseketelo wa nhlokomhaka leyi nga na buti yo pfala na tlilasi ya miri yo hlawula eka yin'wana yo sungula padding. Hi ringanyeta leswaku u katsa tinhlokomhaka ta le handle ka canvas na swiendlo swo hlongola loko swi koteka, kumbe u nyika xiendlo xo hlongola lexi nga erivaleni.

Content ya offcanvas yi ya laha. U nga veka ntsena kwalomu ka xiphemu xihi na xihi xa Bootstrap kumbe swiaki swa ntolovelo laha.

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

Tirhisa swikomba-nkarhi leswi nga laha hansi ku kombisa na ku fihla elemente ya offcanvas hi ku tirhisa JavaScript leyi cinca-cincaka .showtlilasi eka elemente na .offcanvastlilasi.

.offcanvasku fihla swilo leswi nga endzeni (xihlawulekisi) .
.offcanvas.showyi kombisa leswi nga endzeni

U nga tirhisa xihlanganisi lexi nga ni hrefxihlawulekisi, kumbe buti leyi nga ni data-bs-targetxihlawulekisi. Eka swiyimo leswimbirhi, ku data-bs-toggle="offcanvas"laveka the.

Xihlanganisi na href

Tsalwa rin’wana tanihi xikhomela-ndhawu. Evuton’wini bya xiviri u nga va ni swiaki leswi u swi hlawuleke. Ku fana na, tsalwa, swifaniso, minxaxamelo, na swin’wana.

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

Ku vekiwa ka swilo

Ku hava ku vekiwa ka xiviri ka swiphemu swa offcanvas, kutani u fanele ku engetela yin’wana ya titlilasi ta mucinci laha hansi;

.offcanvas-startyi veka offcanvas etlhelo ra ximatsi ra viewport (leyi kombisiweke laha henhla) .
.offcanvas-endyi veka offcanvas etlhelo ra xinene ra viewport
.offcanvas-topyi veka offcanvas ehenhla ka viewport
.offcanvas-bottomyi veka offcanvas ehansi ka xivono

Ringeta swikombiso swa le henhla, swa xinene ni swa le hansi leswi nga laha hansi.

...

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

Xifaniso xa le ndzhaku

Ku rhendzeleka ka <body>elemente swi pfariwa loko offcanvas na backdrop ya yona swi vonaka. Tirhisa data-bs-scrollxihlawulekisi ku cinca-cinca <body>ku rhendzeleka ni data-bs-backdropku cinca-cinca xifaniso xa le ndzhaku.

Ringeta ku rhendzeleka eka tluka hinkwaro leswaku u vona ndlela leyi yi ri karhi yi tirha.

.....

Ringeta ku rhendzeleka eka tluka hinkwaro leswaku u vona ndlela leyi yi ri karhi yi tirha.

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

Ku fikelela

Tanihi leswi phanele ya le handle ka canvas hi tlhelo ra mianakanyo yi nga mbulavurisano wa modal, tiyiseka leswaku u engetela aria-labelledby="..."—ku kombetela eka xihloko xa le handle ka canvas—eka .offcanvas. Xiya leswaku a wu lavi ku engetela role="dialog"tanihi leswi se hi swi engetelaka hi ku tirhisa JavaScript.

Sass

Swilo leswi cinca-cincaka

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

Matirhiselo

Plugin ya offcanvas yi tirhisa titlilasi ti nga ri tingani na swihlawulekisi ku khoma ku tlakusa swilo swo tika:

.offcanvasyi fihla leswi nga endzeni
.offcanvas.showyi kombisa leswi nga endzeni
.offcanvas-startu tumbeta offcanvas hi tlhelo ra ximatsi
.offcanvas-endu tumbeta offcanvas hi tlhelo ra xinene
.offcanvas-bottomyi tumbeta offcanvas ehansi

Engetela buti yo hlongola hi data-bs-dismiss="offcanvas"xihlawulekisi, lexi pfuxaka ntirho wa JavaScript. Tiyisisa leswaku u tirhisa <button>elemente na yona eka mahanyelo lama faneleke eka switirhisiwa hinkwaswo.

Hi ku tirhisa swihlawulekisi swa data

Ku cinca-cinca

Engetela data-bs-toggle="offcanvas"na a data-bs-targetkumbe hrefeka elemente ku avela hi ku tisungulela vulawuri bya elemente yin’we ya offcanvas. Xihlawulekisi data-bs-targetxi amukela xihlawulekisi xa CSS ku tirhisa offcanvas eka xona. Tiyisisa leswaku u engetela tlilasi offcanvaseka elemente ya offcanvas. Loko u lava leswaku yi pfuleka hi ku tiyimisela, engetela tlilasi leyi engetelekeke show.

Bakanya

Ku hlongoriwa ku nga fikeleriwa hi dataxihlawulekisi eka buti endzeni ka offcanvas tanihilaha swi kombisiweke hakona laha hansi:

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

kumbe eka buti ehandle ka offcanvas hi ku tirhisa data-bs-targettanihilaha swi kombisiweke hakona laha hansi:

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

Loko tindlela leti hatimbirhi to hlongola offcanvas ti seketeriwa, tsundzuka leswaku ku hlongola ku suka ehandle ka offcanvas a swi fambisani na WAI-ARIA modal dialog design pattern . Endla leswi hi ku tikhoma.

Hi ku tirhisa JavaScript

Endla leswaku swi tirha hi voko hi:

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

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-, tanihi le ka data-bs-backdrop="".

Vito	Muxaka	Ku tlula	Nhlamuselo
`backdrop`	xitsonga xitsonga	`true`	Tirhisa backdrop emirini loko offcanvas yi pfulekile
`keyboard`	xitsonga xitsonga	`true`	Ku pfala offcanvas loko ku tshikileriwa escape key
`scroll`	xitsonga xitsonga	`false`	Pfumelela ku rhendzeleka ka miri loko offcanvas yi pfulekile

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

Ku endla leswaku nhundzu ya wena yi tirha tanihi elemente ya offcanvas. Ku amukela swihlawulekisi swa ku hlawula object.

U nga endla xikombiso xa offcanvas hi muaki, xikombiso:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Ndlela	Nhlamuselo
`toggle`	Ku cinca-cinca elemente ya offcanvas ku kombisiwa kumbe ku fihliwa. Ku tlhelela eka mufoyini xiaki xa offcanvas xi nga si kombisiwa hakunene kumbe ku fihliwa (i.e. emahlweni ka ku humelela xiendlakalo xa `shown.bs.offcanvas`kumbe `hidden.bs.offcanvas`).
`show`	Ku kombisa xiphemu xa offcanvas. Ku tlhelela eka mufoyini xiaki xa offcanvas xi nga si kombisiwa hakunene (i.e. `shown.bs.offcanvas`xiendlakalo xi nga si humelela).
`hide`	Ku tumbeta elemente ya offcanvas. Ku tlhelela eka mufoyini xiaki xa offcanvas xi nga si fihliwa hakunene (i.e. `hidden.bs.offcanvas`xiendlakalo xi nga si humelela).
`getInstance`	Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa offcanvas lexi fambelanaka na elemente ya DOM
`getOrCreateInstance`	Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa offcanvas lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga

Swiendlakalo

Tlilasi ya offcanvas ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa offcanvas.

Muxaka wa xiendlakalo	Nhlamuselo
`show.bs.offcanvas`	Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku `show`vitaniwa ndlela ya xikombiso.
`shown.bs.offcanvas`	Xiendlakalo lexi xi duvuriwa loko elemente ya offcanvas yi endliwile yi vonaka eka mutirhisi (yi ta rindza ku cinca ka CSS ku hetisisiwa).
`hide.bs.offcanvas`	Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko `hide`ndlela yi vitaniwile.
`hidden.bs.offcanvas`	Xiendlakalo lexi xi duvuriwa loko elemente ya offcanvas yi fihliwile eka mutirhisi (yi ta rindza ku cinca ka CSS ku hetisisiwa).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Ehandle ka canvas

Ndlela leyi swi tirhaka ha yona

Swikombiso

Swiphemu swa le handle ka canvas

Ehandle ka canvas

Demo leyi hanyaka

Ehandle ka canvas

Ku vekiwa ka swilo

Offcanvas ya le henhla

Offcanvas kunene

Offcanvas ya le hansi

Xifaniso xa le ndzhaku

Ku va ni mihlovo hi ku rhendzeleka

Offcanvas na xivumbeko xa le ndzhaku

Backdrop leyi nga ni ku rhendzeleka

Ku fikelela

Sass

Swilo leswi cinca-cincaka

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Ku cinca-cinca

Bakanya

Hi ku tirhisa JavaScript

Swihlawulekisi

Maendlelo

Maendlelo ya asynchronous na ku cinca

Swiendlakalo