in English

Offcanvas

Wubake uruhande rwihishe mumushinga wawe wo kugendagenda, amakarita yo guhaha, nibindi byinshi hamwe namasomo make hamwe na plugin yacu ya JavaScript.

Kuriyi page

Uburyo ikora

Offcanvas nigice cyuruhande rushobora guhindurwa hifashishijwe JavaScript kugirango ugaragare uhereye ibumoso, iburyo, hejuru, cyangwa hepfo yuruhande rwo kureba. Utubuto cyangwa inanga zikoreshwa nka trigger zifatanije nibintu byihariye uhinduranya, datanibiranga bikoreshwa mugutabaza JavaScript yacu.

Offcanvas isangira amwe muma code ya JavaScript nkuburyo busanzwe. Mubisanzwe, birasa cyane, ariko ni amacomeka atandukanye.
Mu buryo busa nabwo, inkomoko imwe ya Sass ihindagurika yuburyo bwa offcanvas nubunini bwarazwe kuva modal ihinduka.
Iyo yerekanwe, offcanvas ikubiyemo inyuma yinyuma ishobora gukanda kugirango uhishe offcanvas.
Bisa nuburyo, offcanvas imwe gusa irashobora kwerekanwa icyarimwe.

Umutwe! Urebye uko CSS ikora animasiyo, ntushobora gukoresha margincyangwa translatekubintu .offcanvas. Ahubwo, koresha urwego nkibintu byigenga bipfunyika.

Ingaruka ya animasiyo yibi bice biterwa prefers-reduced-motionnibibazo byitangazamakuru. Reba igice cyagabanijwe cyicyiciro cyibisobanuro byacu .

Ingero

Ibice bya Offcanvas

Hasi nurugero rwa offcanvas rwerekanwe kubisanzwe (binyuze .showkuri .offcanvas). Offcanvas ikubiyemo inkunga kumutwe ufite buto yegeranye hamwe nicyiciro cyumubiri utabishaka kubwa mbere padding. Turagusaba ko washyiramo imitwe ya offcanvas hamwe nibikorwa byo kwirukana igihe cyose bishoboka, cyangwa ugatanga igikorwa cyo kwirukana.

Ibirimo kuri offcanvas bijya hano. Urashobora gushira hafi ibice byose bya Bootstrap cyangwa ibintu byabigenewe hano.

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>

Kubaho

Koresha buto hepfo kugirango werekane kandi uhishe ikintu cya offcanvas ukoresheje JavaScript ihinduranya .showicyiciro kubintu hamwe .offcanvasnishuri.

.offcanvasahisha ibirimo (isanzwe)
.offcanvas.showyerekana ibirimo

Urashobora gukoresha umurongo hamwe hrefnibiranga, cyangwa buto hamwe data-bs-targetnibiranga. Muri ibyo bihe byombi, data-bs-toggle="offcanvas"urasabwa.

Ihuza na href

Inyandiko zimwe nkahantu. Mubuzima busanzwe urashobora kugira ibintu wahisemo. Nk, inyandiko, amashusho, urutonde, nibindi

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>

Kuzunguruka umubiri

Kuzenguruka ibintu <body>birahagarikwa mugihe offcanvas ninyuma yayo bigaragara. Koresha data-bs-scrollikiranga kugirango <body>ushoboze kuzunguruka.

Gerageza kuzenguruka ahasigaye kurupapuro kugirango urebe iyi nzira mubikorwa.

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>

Kuzunguruka umubiri hamwe ninyuma

Urashobora kandi gushoboza <body>kuzunguruka hamwe ninyuma igaragara.

Gerageza kuzenguruka ahasigaye kurupapuro kugirango urebe iyi nzira mubikorwa.

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>

Imiterere yinyuma

Iyo backdrop yashizwe kuri static, offcanvas ntizifunga mugihe ukanze hanze yacyo.

Ntabwo nzafunga niba ukanze hanze yanjye.

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

Wongeyeho muri v5.2.0

Hindura isura ya offcanvase hamwe nibikorwa kugirango uhuze neza murwego rutandukanye nka navbars yijimye. Hano twongeyeho .text-bg-darkkuri .offcanvasno .btn-close-whitekuri .btn-closestyling ikwiye hamwe na offcanvas yijimye. Niba ufite ibitonyanga imbere, tekereza nanone .dropdown-menu-darkkuri .dropdown-menu.

Shira ibintu bya offcanvas hano.

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>

Igisubizo

Wongeyeho muri v5.2.0

Ibyiciro bya offcanvas byitabira bihisha ibiri hanze yicyerekezo uhereye kumurongo wihariye no hepfo. Hejuru yiyo ngingo, ibiri imbere bizitwara nkuko bisanzwe. Kurugero, .offcanvas-lguhisha ibiri muri offcanvas munsi yumwanya lg, ariko werekane ibirimo hejuru lgyumwanya.

Hindura amashusho yawe kugirango werekane ibisubizo bya offcanvas.

Ibi bikubiye muri an .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>

Ibyiciro bya offcanvas byitabira birahari kuri buri cyiciro.

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

Gushyira

Hano ntahantu hasanzwe hashyirwa ibice bya offcanvas, ugomba rero kongeramo rimwe mubyiciro bihindura hepfo.

.offcanvas-startshyira offcanvas ibumoso bwo kureba (yerekanwe hejuru)
.offcanvas-endshyira offcanvas iburyo bwa kureba
.offcanvas-topshyira offcanvas hejuru yicyerekezo
.offcanvas-bottomshyira offcanvas hepfo yuburyo bwo kureba

Gerageza ingero zo hejuru, iburyo, no hepfo hepfo.

...

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>

...

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>

...

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>

Kuboneka

Kubera ko ikibaho cya offcanvas ari uburyo bwo kuganira, menya ko wongeraho aria-labelledby="..."- werekana umutwe wa offcanvas - kuri .offcanvas. Menya ko udakeneye kongeramo role="dialog"kuva tumaze kongeramo binyuze kuri JavaScript.

CSS

Ibihinduka

Wongeyeho muri v5.2.0

Nkigice cya Bootstrap igenda ihinduka CSS ihinduka, offcanvas ubu ikoresha CSS yaho ihinduka .offcanvaskugirango yongere igihe nyacyo cyo kwihindura. Indangagaciro za CSS zihinduka zashyizweho binyuze kuri Sass, so Sass yihariye iracyashyigikiwe, nayo.

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

Ibihinduka bya 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;

Ikoreshwa

Amacomeka ya offcanvas akoresha ibyiciro bike nibiranga kugirango akemure ibintu biremereye:

.offcanvasahisha ibirimo
.offcanvas.showyerekana ibirimo
.offcanvas-startahisha offcanvas ibumoso
.offcanvas-endahisha offcanvas iburyo
.offcanvas-topahisha offcanvas hejuru
.offcanvas-bottomahisha offcanvas hepfo

Ongeraho buto yo kwirukana hamwe data-bs-dismiss="offcanvas"nibiranga, bikurura imikorere ya JavaScript. Witondere gukoresha <button>element hamwe nayo kugirango imyitwarire iboneye mubikoresho byose.

Binyuze mu biranga amakuru

Toggle

Ongeraho data-bs-toggle="offcanvas"na a data-bs-targetcyangwa hrefkuri element kugirango uhite ugenera kugenzura ikintu kimwe cya offcanvas. Ikiranga data-bs-targetcyakira CSS uhitamo kugirango akoreshe offcanvas kuri. Wemeze kongeramo urwego offcanvaskubintu bya offcanvas. Niba wifuza ko byafungura, ongeraho urwego rwinyongera show.

Kwirukana

Kwirukanwa birashobora kugerwaho hamwe datanibiranga kuri buto muri offcanvas nkuko bigaragara hano:

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

cyangwa kuri buto hanze ya offcanvas ukoresheje data-bs-targetnkuko bigaragara hano:

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

Mugihe inzira zombi zo kwirukana offcanvas zishyigikiwe, uzirikane ko kwirukana hanze ya offcanvas bidahuye na ARIA Authoring Practices Guide dialog (modal) . Kora ibi wowe ubwawe.

Binyuze kuri JavaScript

Gushoboza intoki hamwe na:

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

Amahitamo

Nkuko amahitamo ashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript, urashobora kongeramo izina ryamahitamo data-bs-, nkuko biri data-bs-animation="{value}". Witondere guhindura ubwoko bwurubanza rwamahitamo kuva " ingamiya " kuri " kebab-urubanza " mugihe utambutsa amahitamo ukoresheje ibiranga amakuru. Kurugero, koresha data-bs-custom-class="beautifier"aho data-bs-customClass="beautifier".

Nko muri Bootstrap 5.2.0, ibice byose bishyigikira igeragezwa ryibitse ryamakuru data-bs-configrishobora kubamo ibice byoroshye nkibikoresho bya JSON. Mugihe ikintu gifite data-bs-config='{"delay":0, "title":123}'nibiranga data-bs-title="456", agaciro kanyuma titlekazaba 456kandi amakuru yihariye aranga agaciro katanzwe kuri data-bs-config. Mubyongeyeho, amakuru ariho aranga arashobora kubika JSON indangagaciro nka data-bs-delay='{"show":0,"hide":150}'.

Izina	Andika	Mburabuzi	Ibisobanuro
`backdrop`	boolean cyangwa umugozi`static`	`true`	Koresha inyuma yumubiri mugihe offcanvas ifunguye. Ubundi, vuga `static`kuri backdrop idafunga offcanvas iyo ukanze.
`keyboard`	boolean	`true`	Gufunga offcanvas mugihe urufunguzo rwo guhunga rukanda.
`scroll`	boolean	`false`	Emerera umubiri kuzunguruka mugihe offcanvas ifunguye.

Uburyo

Uburyo butajegajega ninzibacyuho

Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .

Reba inyandiko zacu za JavaScript kubindi bisobanuro .

Koresha ibikubiyemo nkibintu bya offcanvas. Emera amahitamo object.

Urashobora gukora offcanvas urugero hamwe niyubaka, kurugero:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

Uburyo	Ibisobanuro
`getInstance`	Uburyo buhamye butuma ubona urugero rwa offcanvas rujyanye nibintu bya DOM.
`getOrCreateInstance`	Uburyo buhamye bugufasha kubona urugero rwa offcanvas rujyanye nibintu bya DOM, cyangwa gukora bundi bushya mugihe bitatangijwe.
`hide`	Hisha ikintu cya offcanvas. Garuka kumuhamagara mbere yuko offcanvas yibintu byihishe mubyukuri (nukuvuga mbere yuko `hidden.bs.offcanvas`ibyabaye bibaho).
`show`	Erekana ikintu cya offcanvas. Garuka kumuhamagara mbere yuko ibintu bya offcanvas byerekanwe mubyukuri (nukuvuga mbere yuko `shown.bs.offcanvas`ibyabaye bibaho).
`toggle`	Kuzuza ikintu cya offcanvas kugirango werekane cyangwa uhishe. Garuka kumuhamagara mbere yikintu cya offcanvas cyerekanwe cyangwa cyihishe (ni ukuvuga mbere yuko ibyabaye `shown.bs.offcanvas`cyangwa `hidden.bs.offcanvas`ibyabaye bibaho).

Ibyabaye

Ishuri rya Bootstrap rya offcanvas ryerekana ibintu bike byo guhuza ibikorwa bya offcanvas.

Ubwoko bwibyabaye	Ibisobanuro
`hide.bs.offcanvas`	Iki gikorwa kirahita gihita iyo `hide`uburyo bwahamagawe.
`hidden.bs.offcanvas`	Ibirori birukanwa mugihe ikintu cya offcanvas cyihishe kumukoresha (uzategereza ko CSS ihinduka).
`hidePrevented.bs.offcanvas`	Ibi birori birukanwa iyo offcanvas yerekanwe, inyuma yayo ni `static`no gukanda hanze ya offcanvas. Ibirori nabyo birukanwa mugihe urufunguzo rwo guhunga rukanda kandi `keyboard`amahitamo yashyizweho `false`.
`show.bs.offcanvas`	Ibirori birasa ako kanya mugihe `show`urugero rwitwa.
`shown.bs.offcanvas`	Ibirori birukanwa mugihe ikintu cya offcanvas cyakozwe kugaragara kubakoresha (bizategereza ko CSS ihinduka).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Offcanvas

Uburyo ikora

Ingero

Ibice bya Offcanvas

Offcanvas

Kubaho

Offcanvas

Kuzunguruka umubiri

Offcanvas hamwe no kuzunguruka umubiri

Kuzunguruka umubiri hamwe ninyuma

Inyuma hamwe no kuzunguruka

Imiterere yinyuma

Offcanvas

Offcanvas

Offcanvas

Igisubizo

Offcanvas

Gushyira

Offcanvas hejuru

Offcanvas iburyo

Offcanvas hepfo

Kuboneka

CSS

Ibihinduka

Ibihinduka bya Sass

Ikoreshwa

Binyuze mu biranga amakuru

Toggle

Kwirukana

Binyuze kuri JavaScript

Amahitamo

Uburyo

Uburyo butajegajega ninzibacyuho

Ibyabaye