Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
Check
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, ka holimo 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.
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>

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

Ho tsamaisetsa mmele

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

Offcanvas e nang le 'mele oa ho tsamaisa

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

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>

Ho tsamaisetsa 'mele le bokamorao

U ka boela ua lumella ho <body>tsamaea ka bokamorao bo bonahalang.

Ka morao e nang le ho phenya

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

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>

Boemo bo tsitsitseng

Ha bokamorao bo behiloe ho static, offcanvas e ke ke ea koaloa ha u tobetse ka ntle ho eona.

Offcanvas
Nke ke ka koala haeba u tobetsa ka ntle ho 'na.
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>

Thepa e lefifi ea offcanvas

E kentsoe ho v5.2.0

Fetola chebahalo ea li-offcanvases tse nang le lisebelisoa ho li bapisa hamolemo le maemo a fapaneng joalo ka li-navbar tse lefifi. Mona re kenyelletsa .text-bg-darkle .offcanvasho .btn-close-whiteetsa .btn-closesetaele se nepahetseng ka offcanvas e lefifi. Haeba u na le li-dropdown ka hare, nahana hape ka .dropdown-menu-darkho eketsa .dropdown-menu.

Offcanvas

Beha litaba tsa offcanvas mona.

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>

Ea arabelang

E kentsoe ho v5.2.0

Lihlopha tse arabelang tsa offcanvas li pata litaba ka ntle ho sebaka sa ho shebella ho tloha sebakeng se itseng le ho theoha. Ka holim'a sebaka seo, litaba tse ka hare li tla sebetsa joalo ka tloaelo. Mohlala, e .offcanvas-lgpata litaba ho offcanvas ka tlase ho sebaka sa phomolo lg, empa e bonts'a litaba tse kaholimo ho sebaka sa lgphomolo.

Fetola boholo ba sebatli sa hau ho bonts'a toggle e sebetsang ea offcanvas.
Li-offcanvas tse arabelang

Sena ke litaba tse ka hare ho .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>

Litlelase tse arabelang tsa offcanvas li fumaneha hohle bakeng sa sebaka se seng le se seng sa khefu.

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

Ho beha

Ha ho na sebaka sa kamehla sa likarolo tsa offcanvas, kahoo o tlameha ho eketsa e 'ngoe ea lihlopha tse 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
...
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 hantle
...
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>

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.

CSS

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho fetoha oa CSS oa Bootstrap, offcanvas joale e sebelisa mefuta-futa ea CSS ea lehae .offcanvasbakeng sa ho ntlafatsa nako ea sebele. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, ​​le oona.

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

Mefuta e fapaneng ea 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š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-tope pata sekoahelo ka hodimo
  • .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 hoja mekhoa e 'meli ea ho tlosa sekoahelo e tšehetsoa, ​​hopola hore ho ntša ka ntle ho sekoahelo ha ho lumellane le mokhoa oa ARIA Authoring Practices Guide (modal) . Etsa sena ka ho ipeha kotsing.

Ka JavaScript

Lumella ka letsoho ka:

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

Dikgetho

Kaha likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript, u ​​ka kenyelletsa lebitso la khetho ho data-bs-, joalo ka data-bs-animation="{value}". Etsa bonnete ba hore o fetola mofuta oa nyeoe ea lebitso la khetho ho tloha " camelCase "ho " kebab-case " ha o fetisa likhetho ka litšobotsi tsa data. Ka mohlala, sebelisa data-bs-custom-class="beautifier"ho e-na le data-bs-customClass="beautifier".

Ho tloha ka Bootstrap 5.2.0, likarolo tsohle li ts'ehetsa tlhahlobo ea data e bolokiloeng data-bs-confige ka bolokang tlhophiso e bonolo ea karolo joalo ka khoele ea JSON. Ha element e na data-bs-config='{"delay":0, "title":123}'le data-bs-title="456"litšoaneleho, boleng ba ho qetela titlebo tla ba 456'me lintlha tse arohaneng tsa data li tla feta boleng bo fanoeng ho data-bs-config. Ntle le moo, litšoaneleho tse teng tsa data li khona ho boloka boleng ba JSON joalo ka data-bs-delay='{"show":0,"hide":150}'.

Lebitso Mofuta Ea kamehla Tlhaloso
backdrop boolean kapa khoelestatic true Sebetsa ka morao 'meleng ha offcanvas e butsoe. Ntle le moo, hlakisa staticbokamorao bo sa koaleng sekoahelo ha u tobetse.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Mokhoa Tlhaloso
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 element ea DOM, kapa u thehe e ncha haeba e sa qalisoa.
hide E pata karolo ea offcanvas. E khutlela ho moletsi pele karolo ea offcanvas e patiloe (ke hore pele 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).
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).

Liketsahalo

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

Mofuta oa ketsahalo Tlhaloso
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).
hidePrevented.bs.offcanvas Ketsahalo ena e ts'oaroa ha offcanvas e bonts'oa, bokamorao ba eona ke staticho tobetsa ka ntle ho offcanvas. Ketsahalo e boetse e ts'oaroa ha senotlolo sa ho phonyoha se tobetsoa 'me keyboardkhetho e behiloe ho false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})