Yeqela kokuqukethwe okuyinhloko Yeqela ku-docs navigation
Check
in English

I-offcanvas

Yakha amabha aseceleni afihliwe kuphrojekthi yakho yokuzulazula, izinqola zokuthenga, nokuningi ngamakilasi ambalwa kanye ne-plugin yethu ye-JavaScript.

Kuleli khasi

Isebenza kanjani

I-Offcanvas ingxenye yebha eseceleni engashintshwa nge-JavaScript ukuze ivele kwesokunxele, kwesokudla, phezulu, noma kunqenqema olungezansi lwembobo yokubuka. Izinkinobho noma amahange asetshenziswa njengezibangeli ezinamathiselwe kuzinto ezithile ozishintshayo, futhi dataizibaluli zisetshenziselwa ukunxenxa i-JavaScript yethu.

  • I-Offcanvas yabelana ngekhodi ye-JavaScript efanayo njengamamodali. Ngokomqondo, ziyefana, kodwa zingama-plugin ahlukene.
  • Ngokufanayo, umthombo othile oguquguqukayo we-Sass wezitayela nobukhulu be-offcanvas buzuzwa njengefa kusukela kokuguquguqukayo kwe-modal.
  • Uma kuboniswa, i-offcanvas ihlanganisa okwasemuva okuzenzakalelayo okungachofozwa ukuze kufihlwe i-offcanvas.
  • Ngokufana namamodeli, kungaboniswa i-offcanvas eyodwa kuphela ngesikhathi.

Amakhanda phezulu! Uma kunikezwe ukuthi i-CSS iphatha kanjani ukugqwayiza, awukwazi ukusebenzisa marginnoma translateku- .offcanvaselementi. Kunalokho, sebenzisa ikilasi njengento yokugoqa ezimele.

Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

Izibonelo

Izingxenye ze-offcanvas

Ngezansi kunesibonelo se-offcanvas esiboniswa ngokuzenzakalelayo (nge- .showon .offcanvas). I-offcanvas ihlanganisa ukusekelwa kwesihloko esinenkinobho yokuvala kanye nesigaba somzimba ozikhethela sona ekuqaleni okuthile padding. Siphakamisa ukuthi ufake izihloko ze-offcanvas ngezenzo zokucashisa noma nini lapho kunokwenzeka, noma unikeze isenzo sokuchitha esisobala.

I-offcanvas
Okuqukethwe kwe-offcanvas kuya lapha. Ungabeka cishe noma iyiphi ingxenye ye-Bootstrap noma ama-elementi angokwezifiso lapha.
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>

Idemo ebukhoma

Sebenzisa izinkinobho ezingezansi ukuze ubonise futhi ufihle i-elementi ye-offcanvas usebenzisa i-JavaScript eguqula .showikilasi entweni .offcanvasngeklasi.

  • .offcanvasifihla okuqukethwe (okuzenzakalelayo)
  • .offcanvas.showikhombisa okuqukethwe

Ungasebenzisa isixhumanisi hrefesinesibaluli, noma inkinobho data-bs-targetenesibaluli. Kuzo zombili izimo, data-bs-toggle="offcanvas"kuyadingeka.

Xhumanisa ne- href
I-offcanvas
Omunye umbhalo njengesimeli. Empilweni ungaba nezakhi ozikhethile. Njengokuthi, umbhalo, izithombe, uhlu, njll.
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>

Ukuskrola komzimba

Ukuskrola i- <body>elementi kukhutshaziwe uma i-offcanvas nokwasemuva kwayo kubonakala. Sebenzisa data-bs-scrollisibaluli ukuze unike amandla <body>ukuskrola.

Ama-offcanvas anomzimba oskrola

Zama ukuskrola lonke ikhasi ukuze ubone le nketho isebenza.

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>

Ukuskrola komzimba nokwasemuva

Ungakwazi futhi ukunika amandla <body>ukuskrola ngengemuva elibonakalayo.

Ingemuva elinokuskrola

Zama ukuskrola lonke ikhasi ukuze ubone le nketho isebenza.

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>

Ingemuva elimile

Uma okwasemuva kusethelwe ku-static, i-offcanvas ngeke ivaleke uma uchofozwa ngaphandle kwayo.

I-offcanvas
Ngeke ngivale uma uchofoza ngaphandle kwami.
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>

Ikhanvasi emnyama

Kwengezwe ku-v5.2.0

Shintsha ukubukeka kwama-offcanvases ngezinsiza ukuze uwafanise kangcono nezimo ezihlukene njengama-navbar amnyama. Lapha sengeza .text-bg-darkku- .offcanvaskanye .btn-close-whitenokwenza .btn-closeisitayela esifanele nge-offcanvas emnyama. Uma unokudonsela phansi ngaphakathi, cabanga nokungeza .dropdown-menu-darkkokuthi .dropdown-menu.

I-offcanvas

Beka okuqukethwe kwe-offcanvas lapha.

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>

Iyasabela

Kwengezwe ku-v5.2.0

Amakilasi e-offcanvas aphendulayo afihla okuqukethwe ngaphandle kwembobo yokubuka kusukela endaweni ethile ecacisiwe naphansi. Ngaphezulu kwalelo phuzu, okuqukethwe ngaphakathi kuzoziphatha njengokujwayelekile. Isibonelo, .offcanvas-lgifihla okuqukethwe ku-offcanvas ngaphansi kwe- lgbreakpoint, kodwa ibonisa okuqukethwe ngaphezu kwe- lgbreakpoint.

Shintsha usayizi wesiphequluli sakho ukuze ubonise inguquko ye-offcanvas esabelayo.
I-offcanvas esabelayo

Lokhu okuqukethwe ngaphakathi kwe- .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>

Amakilasi e-offcanvas aphendulayo ayatholakala endaweni yokuphumula ngayinye.

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

Ukubekwa

Akukho ukubekwa okuzenzakalelayo kwezingxenye ze-offcanvas, ngakho-ke kufanele wengeze iklasi elilodwa lesilungisi ngezansi.

  • .offcanvas-startbeka ikhanvasi kwesokunxele sembobo yokubuka (eboniswe ngenhla)
  • .offcanvas-endibeka amakhanvasi kwesokudla sembobo yokubuka
  • .offcanvas-topibeka amakhanvasi phezulu kwendawo yokubuka
  • .offcanvas-bottomibeka amakhanvasi phansi kwembobo yokubuka

Zama izibonelo ezingenhla, kwesokudla, nezingezansi ngezansi.

Okuphezulu kwe-offcanvas
...
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>
I-offcanvas kwesokudla
...
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>
Phansi kwekhanvasi
...
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>

Ukufinyeleleka

Njengoba iphaneli ye-offcanvas ngokomqondo iyingxoxo eyimodeli, qiniseka ukuthi uyengeza aria-labelledby="..."—ubhekisela kusihloko se-offcanvas—ku- .offcanvas. Qaphela ukuthi awudingi ukungeza role="dialog"njengoba sesivele sengeze nge-JavaScript.

CSS

Okuguquguqukayo

Kwengezwe ku-v5.2.0

Njengengxenye yendlela yokuguquguquka kwe-CSS ye-Bootstrap, i-offcanvas manje isebenzisa okuguquguqukayo kwasendaweni kwe-CSS .offcanvasukuze kwenziwe ngokwezifiso isikhathi sangempela esithuthukisiwe. Amanani okuguquguquka kwe-CSS asethwa nge-Sass, ngakho ukwenza ngokwezifiso kwe-Sass kusasekelwa, nakho.

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

Izinguquko ze-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;

Ukusetshenziswa

I-plugin ye-offcanvas isebenzisa amakilasi ambalwa nezimfanelo ukuphatha ukuphakamisa okusindayo:

  • .offcanvasifihla okuqukethwe
  • .offcanvas.showikhombisa okuqukethwe
  • .offcanvas-startifihla i-offcanvas ngakwesobunxele
  • .offcanvas-endifihla i-offcanvas ngakwesokudla
  • .offcanvas-topifihla i-offcanvas phezulu
  • .offcanvas-bottomifihla i-offcanvas phansi

Engeza inkinobho yokucashisa data-bs-dismiss="offcanvas"ngesibaluli, esicupha ukusebenza kwe-JavaScript. Qiniseka ukuthi usebenzisa i- <button>elementi nayo ngokuziphatha okufanele kuwo wonke amadivayisi.

Ngezibaluli zedatha

Guqula

Engeza data-bs-toggle="offcanvas"kanye data-bs-targetnoma hrefku-elementi ukuze unikeze ngokuzenzakalelayo ukulawula kwento eyodwa ye-offcanvas. Isibaluli data-bs-targetsamukela isikhethi se-CSS ongafaka kuso i-offcanvas. Qiniseka ukuthi ungeza ikilasi offcanvaskusici se-offcanvas. Uma ungathanda ukuthi ivuleke ngokuzenzakalelayo, engeza iklasi elengeziwe show.

Cashisa

Ukuxoshwa kungafinyelelwa ngesibaluli esisenkinobho engaphakathi kwekhanvasidata njengoba kuboniswe ngezansi:

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

noma enkinobho engaphandle kwekhanvasi usebenzisa lokhu data-bs-targetokuboniswe ngezansi:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Nakuba zombili izindlela zokucashisa i-offcanvas zisekelwa, khumbula ukuthi ukucashisa ngaphandle kwekhanvasi akufani nephethini ye- ARIA Authoring Practices Guide dialog (modal) . Yenza lokhu ngokuzifaka wena engozini.

Nge-JavaScript

Nika amandla ngokwenza nge:

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

Izinketho

Njengoba izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript, ungakwazi ukwengeza igama lenketho kokuthi data-bs-, njengaku data-bs-animation="{value}". Qiniseka ukuthi ushintsha uhlobo lwekesi legama lenketho lisuka ku- “ camelCase ” liye ku- “ kebab-case ” lapho udlulisa izinketho ngezibaluli zedatha. Isibonelo, sebenzisa data-bs-custom-class="beautifier"esikhundleni se- data-bs-customClass="beautifier".

Kusukela ku-Bootstrap 5.2.0, zonke izingxenye zisekela isibaluli sedatha egodliwe esihlolwayodata-bs-config esingafaka ukucushwa kwengxenye elula njengochungechunge lwe-JSON. Uma into inezibaluli , inani lokugcina lizoba data-bs-config='{"delay":0, "title":123}'futhi izibaluli zedatha ezihlukene zizokhipha amanani anikezwe ngomhla ka- . Ngaphezu kwalokho, izibaluli zedatha ezikhona ziyakwazi ukubeka amanani e-JSON afana .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Igama Uhlobo Okuzenzakalelayo Incazelo
backdrop i-boolean noma intambostatic true Faka okwasemuva emzimbeni ngenkathi i-offcanvas ivuliwe. Okunye, cacisa staticokwasemuva okungavali i-offcanvas uma ichofozwa.
keyboard boolean true Ivala i-offcanvas uma ukhiye we-escape ucindezelwa.
scroll boolean false Vumela ukuskrola komzimba ngenkathi i-offcanvas ivuliwe.

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

Yenza okuqukethwe kwakho kusebenze njengengxenye ye-offcanvas. Yamukela izinketho ozikhethela object.

Ungakha isenzakalo se-offcanvas nomakhi, isibonelo:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Indlela Incazelo
getInstance Indlela emile ekuvumela ukuthi uthole isenzakalo se- offcanvas esihlotshaniswa nento ye-DOM.
getOrCreateInstance Indlela emile ekuvumela ukuthi uthole isenzakalo se- offcanvas esihlotshaniswa nento ye-DOM, noma udale entsha uma kwenzeka ingaqaliswanga.
hide Ifihla isici se-offcanvas. Ibuyela kofonayo ngaphambi kokuba isici se-offcanvas sifihlwe (okungukuthi ngaphambi kokuthi hidden.bs.offcanvaskwenzeke umcimbi).
show Ibonisa isici se-offcanvas. Ibuyela kofonayo ngaphambi kokuba kuboniswe isici se-offcanvas (okungukuthi ngaphambi kokuthi shown.bs.offcanvaskwenzeke umcimbi).
toggle Iguqula into ye-offcanvas iboniswe noma ifihlwe. Ibuyela kofonayo ngaphambi kokuba isici se-offcanvas siboniswe noma sifihlwe (okungukuthi ngaphambi kokuthi kwenzeke shown.bs.offcanvasnoma hidden.bs.offcanvasisigameko).

Imicimbi

Ikilasi le-offcanvas le-Bootstrap lidalula imicimbi embalwa yokuxhunywa ekusebenzeni kwe-offcanvas.

Uhlobo lomcimbi Incazelo
hide.bs.offcanvas Lo mcimbi uxoshwa ngokushesha lapho hideindlela isibiziwe.
hidden.bs.offcanvas Lo mcimbi uxoshwa lapho isici se-offcanvas sifihliwe kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele).
hidePrevented.bs.offcanvas Lo mcimbi uyaxoshwa uma i-offcanvas iboniswa, ingemuva layo likhona staticfuthi ukuchofoza ngaphandle kwe-offcanvas kwenziwa. Umcimbi uphinde ucishwe lapho ukhiye wokuphunyuka ucindezelwa futhi keyboardinketho isethwe ukuze false.
show.bs.offcanvas Lo mcimbi uvutha ngokushesha lapho showindlela yesibonelo ibizwa.
shown.bs.offcanvas Lo mcimbi uxoshwa lapho isici se-offcanvas senziwe sabonakala kumsebenzisi (sizolinda ukuthi izinguquko ze-CSS ziqedele). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})