Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
in English

I-offcanvas

Yakha iibar ezifihlakeleyo kwiprojekthi yakho yokuhamba, iinqwelo zokuthenga, kunye nokunye ngeeklasi ezimbalwa kunye neplagi yethu yeJavaScript.

Kweli phepha

Ingaba isebenza kanjani

I-Offcanvas licandelo lebar esecaleni enokuthi iguqulwe ngeJavaScript ukuba ivele ukusuka ekhohlo, ekunene, phezulu, okanye kumzantsi wesiphelo sezibuko. Amaqhosha okanye iiankile zisetyenziswa njengezichukumiso ezincanyathiselwe kwizinto ezithile oziguquguqulayo, kunye dataneempawu zisetyenziselwa ukubhenela iJavaScript yethu.

  • I-Offcanvas yabelana ngekhowudi efanayo yeJavaScript njengeemodali. Ngokwengqiqo, ziyafana, kodwa ziiplagi ezahlukeneyo.
  • Ngokufanayo, umthombo othile oguquguqukayo we-Sass kwizitayile ze-offcanvas kunye nemilinganiselo izuzwe njengelifa kwizinto eziguquguqukayo zemodal.
  • Xa ibonisiwe, i-offcanvas ibandakanya imvelaphi engasemva enokucofa ukufihla i-offcanvas.
  • Ngokufana neemodyuli, inye kuphela i-offcanvas inokuboniswa ngexesha.

Iintloko phezulu! Unikwe indlela iCSS ephatha ngayo oopopayi, awukwazi ukusebenzisa marginokanye translatekwinto .offcanvas. Endaweni yoko, sebenzisa iklasi njengento ezimeleyo yokusonga.

Isiphumo soopopayi seli candelo sixhomekeke prefers-reduced-motionkumbuzo wemidiya. Jonga icandelo leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .

Imizekelo

Amacandelo e-offcanvas

Ngezantsi ngumzekelo we-offcanvas oboniswa ngokungagqibekanga (nge- .showon .offcanvas). I-Offcanvas iquka inkxaso yentloko eneqhosha elisondeleyo kunye neklasi yomzimba ozikhethelayo kwisiqalo esithile padding. Sicebisa ukuba uquke iiheader zeoffcanvas kunye nezenzo zokugxotha nanini na xa kunokwenzeka, okanye unikezele ngesenzo sokugxotha okucacileyo.

I-offcanvas
Umxholo we-offcanvas uya apha. Ungabeka malunga nalo naliphi na icandelo leBootstrap okanye izinto zesiko apha.
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 ephilayo

Sebenzisa amaqhosha angezantsi ukubonisa kwaye ufihle into ye-offcanvas usebenzisa iJavaScript eguqula .showiklasi kwinto kunye .offcanvasneklasi.

  • .offcanvasifihla umxholo (okuhlala kukho)
  • .offcanvas.showibonisa umxholo

Ungasebenzisa ikhonkco kunye hrefnophawu, okanye iqhosha elinophawu data-bs-targetloyelelwano. Kuzo zombini ezi meko, data-bs-toggle="offcanvas"kuyafuneka.

Ikhonkco ne- href
I-offcanvas
Okunye okubhaliweyo njengesibambi-ndawo. Kubomi bokwenyani unokuba nezinto ozikhethileyo. Njengo, umbhalo, imifanekiso, uluhlu, njl.
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>

Umzimba uyaskrola

Ukuskrola <body>into kuvaliwe xa i-offcanvas kunye nomqolo wayo ubonakala. Sebenzisa data-bs-scrolluphawu loyelelwano ukwenza <body>ukuskrola.

I-offcanvas kunye nokuskrola komzimba

Zama ukuskrola lonke iphepha ukuze ubone olu khetho lusebenza.

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

Unako kwakhona ukwenza <body>ukuskrola nge-backdrop ebonakalayo.

Ngasemva enokuskrola

Zama ukuskrola lonke iphepha ukuze ubone olu khetho lusebenza.

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>

Umqolo omileyo

Xa i-backdrop isetelwe kwi-static, i-offcanvas ayiyi kuvala xa ucofa ngaphandle kwayo.

I-offcanvas
Andiyi kuvala ukuba ucofa ngaphandle kwam.
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>

I-offcanvas emnyama

Ifakwe kwi-v5.2.0

Guqula inkangeleko yee-offcanvases kunye nezinto eziluncedo ukuze uzidibanise ngcono kwiimeko ezahlukeneyo ezinjengee-navbar ezimnyama. Apha songeza .text-bg-darkkwi .offcanvaskunye nakwisitayile .btn-close-whiteesifanelekileyo .btn-closekunye ne-offcanvas emnyama. Ukuba unokwehla ngaphakathi, cinga kwakhona ukongeza .dropdown-menu-darkkwi .dropdown-menu.

I-offcanvas

Beka umxholo we-offcanvas apha.

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>

Ukusabela

Ifakwe kwi-v5.2.0

Iiklasi eziphendulayo ze-offcanvas zifihla umxholo ngaphandle kwendawo yokujonga ukusuka kwindawo ethile yokuqhawula kunye nasezantsi. Ngaphezulu kwelo thuba, imixholo engaphakathi iyakuziphatha njengesiqhelo. Umzekelo, .offcanvas-lgifihla umxholo kwi-offcanvas engaphantsi kwe- lgbreakpoint, kodwa ibonisa umxholo ongentla kwendawo lgyokuphumla.

Hlaziya ubungakanani besikhangeli sakho ukuze ubonise inguqu ephendulayo ye-offcanvas.
I-offcanvas ephendulayo

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

Iiklasi eziphendulayo ze-offcanvas ziyafumaneka kwindawo nganye yokuphumla.

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

Ukubekwa

Akukho kubekwa okungagqibekanga kwezixhobo ze-offcanvas, ngoko ke kufuneka udibanise enye yeeklasi zesilungisi ezingezantsi.

  • .offcanvas-startibeka i-canvas ekhohlo kwindawo yokujonga (eboniswe ngasentla)
  • .offcanvas-endibeka i-offcanvas ngasekunene kwendawo yokujonga
  • .offcanvas-topibeka i-offcanvas phezu kwendawo yokujonga
  • .offcanvas-bottomibeka i-offcanvas ezantsi kwendawo yokujonga

Zama imizekelo ephezulu, ekunene, nasezantsi apha ngezantsi.

Offcanvas phezulu
...
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 ilungile
...
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>
Umzantsi we-offcanvas
...
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>

Ukufikeleleka

Kuba indawo yolawulo ye-offcanvas ngokwengqiqo yincoko yababini yemodal, qiniseka ukuba uyongeza aria-labelledby="..."-ubhekisa kwisihloko se-offcanvas-ku .offcanvas. Qaphela ukuba awudingi ukongeza role="dialog"kuba sele songeze ngeJavaScript.

CSS

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, i-offcanvas ngoku isebenzisa izinto eziguquguqukayo ze-CSS zasekhaya .offcanvasukwenzela ukuphucula ukwenziwa ngokwezifiso kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

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

Iinguqu zeSass

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

Ukusetyenziswa

Iplagin ye-offcanvas isebenzisa iiklasi ezimbalwa kunye neempawu ukuphatha ukuphakamisa okunzima:

  • .offcanvasifihla umxholo
  • .offcanvas.showibonisa umxholo
  • .offcanvas-startifihla i-offcanvas ngasekhohlo
  • .offcanvas-endifihla i-offcanvas ngasekunene
  • .offcanvas-topifihla i-offcanvas ngaphezulu
  • .offcanvas-bottomifihla i-offcanvas ezantsi

Yongeza iqhosha lokugxotha kunye data-bs-dismiss="offcanvas"nophawu loyelelwano, oluqalisa ukusebenza kweJavaScript. Qinisekisa ukusebenzisa <button>ielementi kunye nayo ngokuziphatha okufanelekileyo kuzo zonke izixhobo.

Ngeempawu zedatha

Guqula

Yongeza data-bs-toggle="offcanvas"kunye ne data-bs-targetokanye hrefkwisiqalelo ukunika ngokuzenzekelayo ulawulo lwento enye ye-offcanvas. Uphawu data-bs-targetloyelelwano lwamkela umkhethi we-CSS ukuze kufakwe i-offcanvas kuyo. Qinisekisa ukuba wongeza iklasi offcanvaskwinto ye-offcanvas. Ukuba ungathanda ukuba ivuleke ngokungagqibekanga, yongeza udidi olongezelelweyo show.

Gxotha

Ukugxothwa kunokufezekiswa ngophawu dataolukwiqhosha ngaphakathi kwe-offcanvas njengoko kubonisiwe ngezantsi:

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

okanye kwiqhosha elingaphandle kwekhanvasi usebenzisa oku data-bs-targetkubonisiwe ngezantsi:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Ngelixa zombini iindlela zokugxotha i-offcanvas zixhaswa, gcina engqondweni ukuba ukukhupha ngaphandle kwe-offcanvas akuhambelani ne- ARIA Authoring Practices Guide dialog (modal) iphethini . Yenza oku ngomngcipheko wakho.

NgeJavaScript

Vula ngesandla nge:

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

Iinketho

Njengoko iinketho zinokugqithiswa ngeempawu zedatha okanye iJavaScript, unokongeza igama lokhetho ku data-bs-, njengakwi data-bs-animation="{value}". Qinisekisa ukuba utshintshe uhlobo lwecala legama lokukhetha ukusuka kwi " camelCase " ukuya kwi " kebab-case " xa udlula iinketho ngeempawu zedatha. Umzekelo, sebenzisa data-bs-custom-class="beautifier"endaweni ye- data-bs-customClass="beautifier".

Ukusukela kwi-Bootstrap 5.2.0, onke amacandelo axhasa umlinganiso wedatha ogciniweyo wovavanyodata-bs-config onokubeka uqwalaselo lwecandelo olulula njengomtya we-JSON. Xa into ineempawu data-bs-config='{"delay":0, "title":123}'kunye data-bs-title="456"neempawu, ixabiso lokugqibela titleliya kuba 456kunye neempawu zedatha eyahlukileyo ziya kuwenza ngaphezulu amaxabiso anikiweyo data-bs-config. Ukongeza, iimpawu zedatha ezikhoyo ziyakwazi ukubeka ixabiso le-JSON njenge data-bs-delay='{"show":0,"hide":150}'.

Igama Uhlobo Ukuhlala kukho Inkcazo
backdrop boolean okanye umtyastatic true Faka i-backdrop emzimbeni ngelixa i-offcanvas ivuliwe. Kungenjalo, khankanya staticindawo yangasemva engayivaliyo i-offcanvas xa ucofa.
keyboard boolean true Ivala i-offcanvas xa iqhosha lokubaleka licofa.
scroll boolean false Vumela ukuskrola komzimba ngelixa i-offcanvas ivuliwe.

Iindlela

Iindlela ze-Asynchronous kunye notshintsho

Zonke iindlela ze-API zi -asynchronous kwaye ziqala utshintsho . Babuyela kumnxeba ngokukhawuleza nje ukuba utshintsho luqalisiwe kodwa ngaphambi kokuba luphele . Ukongeza, ukufowunelwa kwendlela kwicandelo lenguquko kuya kuhoywa .

Jonga uxwebhu lwethu lweJavaScript ngolwazi olungakumbi .

Yenza umxholo wakho njengento engaphandle kwekhanvasi. Yamkela iinketho ozikhethelayo object.

Unokwenza umzekelo we-offcanvas kunye nomakhi, umzekelo:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Indlela Inkcazo
getInstance Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo we-offcanvas ohambelana nento yeDOM.
getOrCreateInstance Indlela engatshintshiyo ekuvumela ukuba ufumane umzekelo we-offcanvas onxulunyaniswa nento yeDOM, okanye wenze entsha ukuba ayiqalwanga.
hide Ifihla into yeoffcanvas. Ibuyisela kumnxebi phambi kokuba isici se-offcanvas sifihlwe (okt phambi kokuba hidden.bs.offcanvasisiganeko senzeke).
show Ibonisa into yeoffcanvas. Ibuyisela kumnxebi phambi kokuba isici se-offcanvas siboniswe (okt phambi kokuba shown.bs.offcanvasisiganeko senzeke).
toggle Iguqulela into ye-offcanvas ukuze iboniswe okanye ifihliwe. Ibuyisela kumnxebi phambi kokuba isici se-offcanvas siboniswe okanye sifihlwe (okt phambi kokuba isiganeko shown.bs.offcanvasokanye hidden.bs.offcanvasisiganeko senzeke).

Iziganeko

Udidi lwe-Bootstrap lwe-offcanvas luveza iminyhadala embalwa yokudibanisa nokusebenza kwe-offcanvas.

Uhlobo lomsitho Inkcazo
hide.bs.offcanvas Esi siganeko sigxothwa ngokukhawuleza xa hideindlela sele ibizwa.
hidden.bs.offcanvas Esi siganeko sigxothwa xa into ye-offcanvas ifihliwe kumsebenzisi (iya kulinda iinguqu ze-CSS ukuba zigqibe).
hidePrevented.bs.offcanvas Esi siganeko sigxothwa xa i-offcanvas iboniswa, i-backdrop yayo statickunye nonqakrazo ngaphandle kwe-offcanvas. Isiganeko siphinde sigxothwe xa isitshixo sokubaleka sicinezelwe kwaye keyboardukhetho lusetelwe ku false.
show.bs.offcanvas Esi siganeko sivutha ngokukhawuleza xa showkubizwa indlela yomzekelo.
shown.bs.offcanvas Esi siganeko sigxothwa xa into ye-offcanvas yenziwe yabonakala kumsebenzisi (iya kulinda iinguqu zeCSS ukuba zigqibe). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})