Main content ah kal rawh Docs navigation ah kal rawh
in English

Offcanvas ah a awm

I project chhungah hian class tlemte leh kan JavaScript plugin hmangin navigation, shopping cart leh thil dang tam tak atan sidebar thup te siam rawh.

He page ah hian

A hnathawh dan

Offcanvas hi sidebar component a ni a, JavaScript hmangin toggle theih a ni a, viewport veilam, dinglam, hnuai lam atanga rawn lang thei a ni. Button emaw anchor emaw hi trigger atan hman a ni a, chu chu i toggle element bikte nena inzawm a ni a, dataattribute te hi kan JavaScript invoke nan hman a ni bawk.

  • Offcanvas hian modal ang chiah JavaScript code thenkhat a share a. Conceptual lamah chuan an inang tlang hle a, mahse plugin hrang hrang an ni.
  • Chutiang bawkin offcanvas-a style leh dimension hrang hrangte tana source Sass variable thenkhat chu modal-a variable atang hian inherit a ni.
  • A lan chuan offcanvas ah hian default backdrop a awm a, chu chu click la, offcanvas chu thup theih a ni.
  • Modal ang bawkin offcanvas pakhat chauh a vawi khatah a lantir theih.

Lu a ti sang a! CSS-in animation a enkawl dan ngaihtuah chuan element pakhat chu i hmang marginthei lo va, i chungah pawh i hmang thei lo. Chu ai chuan class chu independent wrapping element atan hmang zawk ang che.translate.offcanvas

He component hian animation effect hi prefers-reduced-motionmedia query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la .

Entirna te

Offcanvas atanga siam a ni

A hnuaia tarlan te hi offcanvas entirnan a awm a, chu chu default-a tarlan a ni (via .showon .offcanvas). Offcanvas ah hian header a support a, close button a awm a, initial thenkhat tan optional body class a awm paddingbawk. A theih phawt chuan offcanvas header te chu dismiss action nen dah tel turin kan rawt a, a nih loh leh dismiss action chiang tak pe turin kan rawt a che.

Offcanvas ah a awm
Offcanvas atan content chu hetah hian a kal a. Hetah hian Bootstrap component emaw custom element eng pawh i dah thei ang. 
<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>

Live demo a ni ang

A hnuaia button te hmang hian JavaScript hmangin offcanvas element pakhat chu class .shownen element pakhata class toggle thei chu entir leh thup theih .offcanvasa ni.

  • .offcanvasthupui (default) a thup thin.
  • .offcanvas.showthupui a lantir

Attribute awmna link i hmang thei a href, attribute awmna button i hmang thei data-bs-targetbawk. Heng pahnihah hian the data-bs-toggle="offcanvas"is required.

Link nen href
Offcanvas ah a awm
Ṭhenkhat chu placeholder atan an ziak. Nun tak takah chuan element thlan tawhte chu i nei thei a ni. Like, thuziak, thlalak, list, etc. 
<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>

Hmun dahna tur

Offcanvas components tan default placement a awm lo a, chuvangin a hnuaia modifier class pakhat tal i dah tel tur a ni;

  • .offcanvas-startviewport veilamah offcanvas a dah (a chunga tarlan) .
  • .offcanvas-endviewport dinglamah offcanvas a dah a
  • .offcanvas-topviewport chung lamah offcanvas a dah a
  • .offcanvas-bottomviewport hnuai lamah offcanvas a dah a

A hnuaia entirnan chung lam, dinglam leh hnuai lam te hi han en teh.

Offcanvas chunglam a ni
... 
<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 a ni
... 
<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 hnuaiah a awm
... 
<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>

Backdrop a ni

<body>Offcanvas leh a backdrop hmuh theih a nih chuan element scroll hi tihtawp a ni. Scrolling toggle nan leh backdrop toggle data-bs-scrollnan attribute hmang ang che .<body>data-bs-backdrop

Scroll hmanga rawng siam a ni

He option hi action-a hmuh theih nan page dang zawng zawng scroll tum ang che.

Offcanvas ah chuan backdrop a awm bawk

..... tiin a sawi a.

Backdrope a ni a, scroll a awm bawk

He option hi action-a hmuh theih nan page dang zawng zawng scroll tum ang che.

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

A thlen theihna tur

Offcanvas panel hi conceptual-ah chuan modal dialog a nih avangin, add aria-labelledby="..."—offcanvas title reference—chu .offcanvas. role="dialog"JavaScript hmanga kan add tawh avangin add a ngai lo tih hre reng ang che .

Sass a ni

Variables te pawh a awm

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

Hman dan tur

Offcanvas plugin hian class leh attribute tlemte hmangin heavy lifting a enkawl a:

  • .offcanvasa thupui chu a thup thin
  • .offcanvas.showa thupui chu a entir a
  • .offcanvas-startveilamah offcanvas chu a thup a
  • .offcanvas-enddinglamah offcanvas chu a thup a
  • .offcanvas-bottoma hnuai lamah offcanvas chu a thup a

Attribute nen dismiss button dah la, chu data-bs-dismiss="offcanvas"chuan JavaScript functionality a tichhuak ang. <button>Device zawng zawnga nungchang dik tak neih theih nan element nen hmang ngei ang che .

Data attribute hmangin a ni

Add data-bs-toggle="offcanvas"leh a data-bs-targetor hrefto element ah offcanvas element pakhat control automatic in a assign theih nan. Attribute hian data-bs-targetoffcanvas apply tur CSS selector a pawm a. offcanvasOffcanvas element ah hian class kha add ngei ngei tur a ni. Default open i duh chuan additional class kha add la show.

JavaScript hmangin

Manual hmangin enable theih a ni:

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-bs-, data-bs-backdrop="".

Hming Lampang Hlawhchhamna Hrilhfiahna
backdrop boolean a ni true Offcanvas hawn laiin body ah backdrop hnawih thin ang che
keyboard boolean a ni true Escape key i hmet chuan offcanvas a khar thin
scroll boolean a ni false Offcanvas hawn laiin body scroll phalsak rawh

Thiltih dan tur

Asynchronous method leh inthlak danglamna te

API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .

Hriat belh duh chuan kan JavaScript documentation en rawh .

I content chu offcanvas element angin a activate thin. A pawm a, optional options a awm objectbawk .

Constructor hmangin offcanvas instance i siam thei a, entirnan:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Tihdan Hrilhfiahna
toggle Offcanvas element pakhat chu show emaw hidden emaw turin a toggle thin. Offcanvas element a lan tak tak hma emaw a thup hma emaw (chu chu shown.bs.offcanvasor hidden.bs.offcanvasevent a thlen hma) caller hnenah a kir leh thin.
show Offcanvas element pakhat a lantir. Offcanvas element a lan tak tak hmain (chu chu shown.bs.offcanvasevent a thlen hmain) caller hnenah a kir leh thin.
hide Offcanvas element pakhat a thup. Offcanvas element a thup tak tak hmain (chu chu hidden.bs.offcanvasevent a thlen hma) caller hnenah a kir leh thin.
getInstance Static method a ni a, chu chuan DOM element nena inzawm offcanvas instance chu a hmu thei a ni
getOrCreateInstance Static method hmangin DOM element nena inzawm offcanvas instance chu i hmu thei a, a nih loh leh initialised a nih loh chuan a thar siam theih a ni bawk

Thil thlengte

Bootstrap-a offcanvas class hian offcanvas functionality-a hook theihna tur event tlemte a pholang a ni.

Event chi hrang hrang Hrilhfiahna
show.bs.offcanvas showHe event hi instance method kan koh chuan a fire nghal vek a ni.
shown.bs.offcanvas He event hi offcanvas element pakhat user hmuh theiha siam a nih chuan fire a ni (CSS transition zawh hun a nghak ang).
hide.bs.offcanvas hideHe event hi method koh a nih chuan a fire nghal a ni.
hidden.bs.offcanvas He event hi user hnen atanga offcanvas element thup a nih chuan fire a ni (CSS transition zawh hun a nghak ang). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})