Tlolela go diteng tše kgolo Tlolela go docs navigation
in English

Ka ntle ga lešela

Aga dibara tša ka thoko tše di utilwego ka gare ga projeke ya gago bakeng sa go sepelasepela, dikoloyana tša mabenkele, le tše dingwe ka diklase tše mmalwa le plugin ya rena ya JavaScript.

Letlakaleng le

Kamoo e šomago ka gona

Offcanvas ke karolo ya bara ya ka thoko yeo e ka fetošwago ka JavaScript gore e tšwelele go tšwa mošito wa ka go le letshadi, wa go ja, goba wa ka fase wa lefelo la go lebelela. Dikonope goba ditshetledi di šomišwa bjalo ka dihlohleletši tšeo di kgomareditšwego go dielemente tše itšego tšeo o di fetošago, gomme datadika di šomišwa go bitša JavaScript ya rena.

  • Offcanvas e abelana tše dingwe tša khoutu ya JavaScript ye e swanago le dimodal. Ka kgopolo, di swana kudu, eupša ke di-plugin tše di aroganego.
  • Ka mo go swanago, diphetogo tše dingwe tša mohlodi tša Sass tša mekgwa le ditekanyo tša offcanvas di abelwa go tšwa go diphetogo tša modal.
  • Ge e bontšhwa, offcanvas e akaretša lemorago la go se fetoge leo le ka kgotlwago go uta offcanvas.
  • Go swana le di-modal, ke offcanvas e tee feela yeo e ka bontšhwago ka nako e tee.

Dihlogo godimo! Ge o filwe ka moo CSS e swarago ditshwantšho tša go phela, o ka se šomiše margingoba translategodimo ga .offcanvaselemente. Go e na le moo, šomiša sehlopha bjalo ka elemente ya go phuthela ye e ikemetšego.

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Mehlala

Dikarolo tša offcanvas

Ka tlase ke mohlala wa offcanvas wo o bontšhwago ka go ikemela (ka .showgo bulela .offcanvas). Offcanvas e akaretša thekgo ya hlogo yeo e nago le konope ya go tswalela le sehlopha sa mmele sa boikgethelo bakeng sa tše dingwe tša mathomo padding. Re šišinya gore o akaretše dihlogo tša ka ntle ga lešela ka ditiro tša go raka neng le neng ge go kgonega, goba o nee kgato ya go raka ye e lego molaleng.

Ka ntle ga lešela
Diteng tša offcanvas di ya mo. O ka bea feela mo e ka bago karolo efe goba efe ya Bootstrap goba dielemente tša tlwaelo mo. 
<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 e phelang

Šomiša dikonope tše di lego ka mo tlase go bontšha le go uta elemente ya offcanvas ka JavaScript yeo e fetošago .showsehlopha godimo ga elemente le .offcanvassehlopha.

  • .offcanvaspata diteng (ya kamehla) .
  • .offcanvas.showe bontšha diteng

O ka šomiša kgokagano ye e nago le hrefseka, goba konope ye e nago le data-bs-targetseka. Maemong a mabedi, the data-bs-toggle="offcanvas"e a nyakega.

Kgokagana le href
Ka ntle ga lešela
Sengwalwa se sengwe bjalo ka seswari sa lefelo. Bophelong bja kgonthe o ka ba le dielemente tšeo o di kgethilego. Go swana le, sengwalwa, diswantšho, mananeo, bj.bj. 
<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>

Go bewa ga dilo

Ga go na go bewa ga go se fetoge ga dikarolo tša offcanvas, ka fao o swanetše go oketša ye nngwe ya dihlopha tša sefetoši ka fase;

  • .offcanvas-starte bea offcanvas ka go le letshadi la lefelo la go lebelela (le bontšhitšwe ka godimo) .
  • .offcanvas-ende bea offcanvas ka go le letona la viewport
  • .offcanvas-tope bea offcanvas ka godimo ga viewport
  • .offcanvas-bottome bea offcanvas ka tlase ga viewport

Leka mehlala ya godimo, ya go ja le ya fase ka ntle ka mo tlase.

Offcanvas godimo
... 
<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 ka go le letona
... 
<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>
Offcanvas tlase
... 
<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>

Lemorago la ka morago

Go kgokološa <body>elemente go a šitišwa ge offcanvas le backdrop ya yona di bonagala. Šomiša data-bs-scrollseka go fetoša go <body>sepelasepela le data-bs-backdropgo fetoša sebopego sa morago.

E na le mmala ka go kgokološa

Leka go kgokološa letlakala ka moka go bona kgetho ye e šoma.

Offcanvas le mokokotlo

..... .

Backdrop le go kgokološa

Leka go kgokološa letlakala ka moka go bona kgetho ye e šoma.

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

Phihlelelo

Ka ge phanele ya offcanvas ka kgopolo e le poledišano ya modal, kgonthišetša gore o tlaleletša aria-labelledby="..."—o šupa sehlogo sa offcanvas—go .offcanvas. Hlokomela gore ga go nyakege gore o tlaleletše role="dialog"ka ge re šetše re e tlaleletša ka JavaScript.

Sass

Diphetogo

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

Tšhomišo

The offcanvas plugin utilizes tse seng kae dihlopha le litšobotsi tse ho tšoara boima phahamisa:

  • .offcanvase uta diteng
  • .offcanvas.showe bontšha diteng
  • .offcanvas-startpata offcanvas ka lehlakoreng le letšehali
  • .offcanvas-endpata offcanvas ka ho le letona
  • .offcanvas-bottompata offcanvas ka tlase

Oketša konope ya go raka ka data-bs-dismiss="offcanvas"seka, seo se hlohleletšago mošomo wa JavaScript. Kgonthiša gore o šomiša <button>elemente le yona bakeng sa boitshwaro bjo bo swanetšego go ralala le didirišwa ka moka.

Ka dika ya data

Toggle

Oketša data-bs-toggle="offcanvas"le a data-bs-targetgoba hrefgo elemente go abela ka go iketla taolo ya elemente e tee ya offcanvas. Sebopego data-bs-targetse amogela mokgethi wa CSS go diriša offcanvas go. Kgonthiša gore o tlaleletša sehlopha offcanvasgo elemente ya offcanvas. Ge e ba o rata gore e bulege ka go ikemela, oketša sehlopha sa tlaleletšo show.

Raka

Go rakwa go ka fihlelelwa ka dataseka godimo ga konope ka gare ga offcanvas bjalo ka ge go bontšhitšwe ka mo tlase:

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

goba godimo ga konope ka ntle ga offcanvas o šomiša data-bs-targetbjalo ka ge go bontšhitšwe ka mo tlase:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Le ge ditsela tše ka bobedi tša go raka offcanvas di thekgwa, dula o gopola gore go raka go tšwa ka ntle ga offcanvas ga go swane le WAI-ARIA modal dialog design pattern . Dira se ka go ipea kotsing.

Ka JavaScript

Kgontšha ka seatla ka:

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

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-backdrop="".

Leina Mohuta Hlokomologa Tlhalošo
backdrop boolean ya go swana true Diriša backdrop mmeleng ge offcanvas e bulegile
keyboard boolean ya go swana true E tswalela offcanvas ge konope ya go tšhaba e tobetšwe
scroll boolean ya go swana false Dumelela go kgokološa mmele ge offcanvas e bulegile

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

E dira gore diteng tša gago di šome bjalo ka elemente ya offcanvas. E amogela dikgetho tša boikhethelo object.

O ka hlama mohlala wa offcanvas ka moagi, mohlala:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Mokgwa Tlhalošo
toggle E fetola elemente ya offcanvas go bontšhwa goba go utilwe. E boela go mogala pele ga ge elemente ya offcanvas e tloga e bontšhitšwe goba e utilwe (ke gore pele ga ge tiragalo ya shown.bs.offcanvasgoba hidden.bs.offcanvase direga).
show E bontšha elemente ya offcanvas. E boela go mogala pele ga ge elemente ya offcanvas e bontšhitšwe e le ka kgonthe (ke gore pele ga ge shown.bs.offcanvastiragalo e direga).
hide Pata elemente ya offcanvas. E boela go mogala pele ga ge elemente ya offcanvas e tloga e utilwe (ke gore pele ga ge hidden.bs.offcanvastiragalo e direga).
getInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa offcanvas wo o amanago le elemente ya DOM
getOrCreateInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa offcanvas wo o amanago le elemente ya DOM, goba go hlama ye mpsha ge go ka direga gore e be e sa thongwa

Ditiragalo

Bootstrap o offcanvas sehlopha pepesa liketsahalo tse seng kae bakeng sa hooking ka offcanvas tshebetso.

Mohuta wa tiragalo Tlhalošo
show.bs.offcanvas Tiragalo ye e thunya ka pela ge showmokgwa wa mohlala o bitšwa.
shown.bs.offcanvas Tiragalo ye e thuntšhwa ge elemente ya offcanvas e dirilwe gore e bonagale go modiriši (e tla emela gore diphetogo tša CSS di phethe).
hide.bs.offcanvas Tiragalo ye e thuntšhwa ka pela ge hidemokgwa o biditšwe.
hidden.bs.offcanvas Tiragalo ye e thuntšhwa ge elemente ya offcanvas e utilwe go tšwa go modiriši (e tla emela gore diphetogo tša CSS di phethe). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})