Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
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 nngele, wa go ja, godimo, 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.
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>

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

Go kgokologa ga mmele

Go kgokološa <body>elemente go a šitišwa ge offcanvas le backdrop ya yona di bonagala. Šomiša data-bs-scrollseka go kgontšha go <body>kgokološa.

Offcanvas le 'mele phethola

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

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>

Mmele wa go kgokološa le backdrop

O ka kgontšha gape go <body>kgokološa ka lemorago leo le bonagalago.

Backdrop le go kgokološa

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

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>

Lemorago la go se fetoge

Ge backdrop e beakantšwe go static, offcanvas e ka se tswalele ge o klika ka ntle ga yona.

Ka ntle ga lešela
Nka se tswalele ge o ka kgotla ka ntle ga ka.
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>

Offcanvas e lefifi

E okeditšwe ka go v5.2.0

Fetoša ponagalo ya di-offcanvase ka didirišwa go di swantšha gakaone le diteng tše di fapanego go swana le di-navbar tše lefsifsi. Mona re tlaleletša .text-bg-darkgo .offcanvasle .btn-close-whitego .btn-closebakeng sa setaele se se swanetšego ka offcanvas e lefsifsi. Ge e ba o e-na le dilo tšeo di theogago ka gare, nagana gape ka go oketša .dropdown-menu-darkgo .dropdown-menu.

Ka ntle ga lešela

Bea diteng tša offcanvas mo.

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>

Go arabela

E okeditšwe ka go v5.2.0

Diklase tša offcanvas tše di arabelago di uta diteng ka ntle ga lefelo la go lebelela go tšwa ntlheng ya go kgaotša ye e laeditšwego le fase. Ka godimo ga ntlha yeo ya go kgaotša, dikagare ka gare di tla itshwara bjalo ka mehleng. Go fa mohlala, e .offcanvas-lguta diteng ka go offcanvas ka fase ga ntlha ya go lgkgaotša, eupša e bontšha diteng ka godimo ga ntlha ya go lgkgaotša.

Fetoša bogolo bja sephephediši sa gago go bontšha go fetola ga offcanvas ye e arabelago.
Offcanvas e arabelang

Se ke diteng ka gare ga .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>

Diklase tša offcanvas tše di arabelago di hwetšagala go putla bakeng sa ntlha e nngwe le e nngwe ya go kgaotša.

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

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

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.

CSS

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya mokgwa wa go fetoga wa diphetogo tša CSS wa Bootstrap, offcanvas bjale e šomiša diphetogo tša CSS tša selegae godimo .offcanvasbakeng sa go tlwaetša nako ya nnete ye e kaonafetšego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

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

Diphetogo tša 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;

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-toppata offcanvas ka holimo
  • .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 ARIA Authoring Practices Guide dialog (modal) pattern . Dira se ka go ipea kotsing.

Ka JavaScript

Kgontšha ka seatla ka:

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

Dikgetho

Bjalo ka ge dikgetho di ka fetišwa ka dika tša datha goba JavaScript, o ka tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-animation="{value}". Kgonthiša gore o fetoša mohuta wa molato wa leina la kgetho go tšwa go “ camelCase ” go ya go “ kebab-case ” ge o fetiša dikgetho ka dika tša datha. Ka mohlala, diriša data-bs-custom-class="beautifier"go e na le data-bs-customClass="beautifier".

Go tloga go Bootstrap 5.2.0, dikarolo ka moka di thekga seka sa datha ye e bolokilwego ya tekodata-bs-config yeo e ka beago peakanyo ya karolo ye bonolo bjalo ka thapo ya JSON. Ge elemente e na data-bs-config='{"delay":0, "title":123}'le le data-bs-title="456"dika, boleng bja mafelelo titlee tla ba 456gomme dika tša datha tše di aroganego di tla phaela ka thoko boleng bjo bo filwego go data-bs-config. Go tlaleletša, dika tša datha tše di lego gona di kgona go bea dikelo tša JSON go swana le data-bs-delay='{"show":0,"hide":150}'.

Leina Mohuta Hlokomologa Tlhalošo
backdrop boolean goba thapostatic true Diriša backdrop mmeleng ge offcanvas e bulegile. Ka go fapana le moo, laetša staticbakeng sa backdrop yeo e sa tswalelego offcanvas ge e kgotla.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Mokgwa Tlhalošo
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.
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).
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).
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).

Ditiragalo

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

Mohuta wa tiragalo Tlhalošo
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).
hidePrevented.bs.offcanvas Tiragalo ye e thuntšhwa ge offcanvas e bontšhwa, backdrop ya yona ke staticgomme go kgotla ka ntle ga offcanvas go dirwa. Tiragalo e a thuntšhwa gape ge senotlelo sa go tšhaba se tobetšwa gomme keyboardkgetho e beakantšwe go false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})