Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
in English

Offcanvas

Theha maballo a patiloeng morerong oa hau bakeng sa ho sesa, likariki tsa ho reka, le tse ling ka litlelase tse 'maloa le plugin ea rona ea JavaScript.

Leqepheng lena

Kamoo e sebetsang kateng

Offcanvas ke karolo e ka thōko e ka fetoloang ka JavaScript hore e hlahe ho tloha ka ho le letšehali, ka ho le letona kapa ka tlaase ho sebaka sa pono. Likonopo kapa li-ankora li sebelisoa e le lisebelisoa tse hoketsoeng linthong tse itseng tseo u li fetolang, 'me datalitšoaneleho li sebelisoa ho hohela JavaScript ea rona.

  • Offcanvas e arolelana khoutu e tšoanang ea JavaScript joalo ka li-modal. Ka maikutlo, li tšoana hantle, empa ke li-plugins tse arohaneng.
  • Ka mokhoa o ts'oanang, mefuta e meng ea mohloli oa Sass bakeng sa setaele le boholo ba offcanvas e futsitsoe ho tsoa mefuteng ea modal.
  • Ha e bonts'oa, offcanvas e kenyelletsa sebopeho sa kamehla se ka tobetsoang ho pata offcanvas.
  • Joalo ka li-modal, ho ka bonts'oa offcanvas e le 'ngoe feela ka nako.

Hlokomela! Ho latela hore na CSS e sebetsana joang le lipopae, u ke ke ua e sebelisa marginkapa translateholim'a .offcanvaselement. Ho e-na le hoo, sebelisa sehlopha e le ntho e ikemetseng ea ho phuthela.

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Mehlala

Likarolo tsa Offcanvas

Ka tlase ke mohlala oa offcanvas o bonts'itsoeng ka ho sa feleng (ka .showon .offcanvas). Offcanvas e kenyelletsa tšehetso bakeng sa hlooho e nang le konopo e haufi le sehlopha sa boikhethelo sa 'mele bakeng sa sengoloa se itseng padding. Re khothaletsa hore o kenyelletse lihlooho tsa offcanvas ka liketso tsa ho leleka neng kapa neng ha ho khonahala, kapa u fane ka ketso e hlakileng ea ho leleka.

Offcanvas
Litaba tsa offcanvas li ea mona. U ka beha hoo e ka bang karolo efe kapa efe ea Bootstrap kapa likarolo tsa moetlo mona. 
<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>

Pontšo e phelang

Sebelisa likonopo tse ka tlase ho bonts'a le ho pata karolo ea offcanvas ka JavaScript e fetolang .showsehlopha ho element le .offcanvassehlopha.

  • .offcanvase pata litaba (ka ho sa feleng)
  • .offcanvas.showe bontsha dikahare

U ka sebelisa sehokelo se nang le hreftšobotsi, kapa konopo e nang le data-bs-targettšobotsi. Maemong ana ka bobeli, ho data-bs-toggle="offcanvas"hlokahala.

Kopanya le href
Offcanvas
Mongolo o mong joalo ka setšoantšisi. Bophelong ba 'nete u ka ba le likarolo tseo u li khethileng. Joalo ka, mongolo, litšoantšo, manane, joalo-joalo. 
<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>

Ho beha

Ha ho na sebaka sa kamehla sa likarolo tsa offcanvas, kahoo o tlameha ho eketsa e 'ngoe ea lihlopha tsa ho fetola ka tlase;

  • .offcanvas-starte beha ka ho le letšehali la boema-kepe (e bontšitsoeng ka holimo)
  • .offcanvas-ende beha li-offcanvas ka ho le letona la boema-kepe
  • .offcanvas-tope beha li-offcanvas ka holim'a sebaka sa ho shebella
  • .offcanvas-bottome beha li-offcanvas botlaaseng ba boema-kepe

Leka mehlala e ka holimo, e nepahetseng, le e ka tlaase mona ka tlase.

Offcanvas top
... 
<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 hantle
... 
<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>

Ka morao

Ho tsamaisa <body>element hoa tima ha offcanvas le bokamorao ba eona li bonahala. Sebelisa data-bs-scrolltšobotsi ho fetola ho <body>sisinyeha le data-bs-backdropho fetola bokamorao.

E mebala e nang le ho phenya

Leka ho tsamaisetsa leqephe kaofela ho bona khetho ena e sebetsa.

Offcanvas e nang le bokamorao

.....

Ka morao e nang le ho phenya

Leka ho tsamaisetsa leqephe kaofela ho bona khetho ena e sebetsa.

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

Ho fihlella

Kaha phanele ea offcanvas ka mokhoa o hlakileng ke puisano ea modal, etsa bonnete ba hore oa eketsa aria-labelledby="..."- ho supa sehlooho sa offcanvas - ho .offcanvas. Hlokomela hore ha ho hlokahale hore u kenye role="dialog"kaha re se re e kentse ka JavaScript.

Sass

Lintho tse fapaneng

$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šebeliso

Plugin ea offcanvas e sebelisa lihlopha tse 'maloa le litšoaneleho ho sebetsana le ho phahamisa boima:

  • .offcanvase pata litaba
  • .offcanvas.showe bontsha dikahare
  • .offcanvas-starte pata sekoahelo ka letsohong le letšehali
  • .offcanvas-ende pata offcanvas ka ho le letona
  • .offcanvas-bottome pata sekoahelo ka tlase

Kenya konopo ea ho qhala ka data-bs-dismiss="offcanvas"tšobotsi, e hlahisang tšebetso ea JavaScript. Etsa bonnete ba hore o sebelisa <button>element le eona bakeng sa boitšoaro bo nepahetseng ho lisebelisoa tsohle.

Ka litšobotsi tsa data

Fetolela

Eketsa data-bs-toggle="offcanvas"le a data-bs-targetkapa hrefho element ho fana ka taolo ea karolo e le 'ngoe ea offcanvas. Tšobotsi e amohela khetho ea data-bs-targetCSS ho sebelisa offcanvas ho. Etsa bonnete ba hore o kenyelletsa sehlopha offcanvasho karolo ea offcanvas. Haeba u rata hore e bulehe ka mokhoa o tloaelehileng, eketsa sehlopha sa tlatsetso show.

Hlakola

Ho lelekoa ho ka finyelloa ka datatšobotsi ea konopo e ka har'a offcanvas joalokaha ho bontšitsoe ka tlase:

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

kapa ka konopo e ka ntle ho offcanvas u sebelisa se data-bs-targetbontšitsoeng ka tlase:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Le ha mekhoa e 'meli ea ho lahla sekoahelo e ts'ehelitsoe, hopola hore ho leleka kantle ho sekoahelo ha ho tsamaellane le sebopeho sa moralo oa WAI-ARIA oa modal . Etsa sena ka ho ipeha kotsing.

Ka JavaScript

Lumella ka letsoho ka:

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

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-bs-, joalo ka data-bs-backdrop="".

Lebitso Mofuta Ea kamehla Tlhaloso
backdrop boolean true Sebetsa ka morao 'meleng ha offcanvas e butsoe
keyboard boolean true E koala offcanvas ha konopo ea escape e tobetsoa
scroll boolean false Lumella ho tsamaisa 'mele ha offcanvas e butsoe

Mekhoa

Mekhoa ea Asynchronous le liphetoho

Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .

Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .

E kenya tšebetsong litaba tsa hau joalo ka karolo ea offcanvas. E amohela khetho ea boikhethelo object.

O ka etsa mohlala oa offcanvas le sehahi, mohlala:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Mokhoa Tlhaloso
toggle E fetolela karolo ea offcanvas hore e hlahe kapa e patiloe. E khutlela ho moletsi pele karolo ea offcanvas e bontšoa kapa e patiloe (ke hore pele ketsahalo shown.bs.offcanvaskapa hidden.bs.offcanvasketsahalo e etsahala).
show E bonts'a karolo ea offcanvas. E khutlela ho moletsi pele karolo ea offcanvas e bontšoa (ke hore pele shown.bs.offcanvasketsahalo e etsahala).
hide E pata karolo ea offcanvas. E khutlela ho moletsi pele karolo ea offcanvas e patiloe (ke hore pele hidden.bs.offcanvasketsahalo e etsahala).
getInstance Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa offcanvas o amanang le ntho ea DOM
getOrCreateInstance Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa offcanvas o amanang le ntho ea DOM, kapa u thehe e ncha haeba e sa qalisoa

Liketsahalo

Sehlopha sa offcanvas sa Bootstrap se pepesa liketsahalo tse 'maloa tsa ho hokahana le ts'ebetso ea offcanvas.

Mofuta oa ketsahalo Tlhaloso
show.bs.offcanvas Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
shown.bs.offcanvas Ketsahalo ena e ts'oaroa ha karolo ea offcanvas e se e bonahala ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
hide.bs.offcanvas Ketsahalo ena e lelekoa hang-hang ha hidemokhoa o bitsoa.
hidden.bs.offcanvas Ketsahalo ena e ts'oaroa ha karolo ea offcanvas e patetsoe mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})