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

html tih a ni

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

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.

.offcanvasa thup (default) .
.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

Ṭhenkhat chu placeholder atan an ziak. Nun tak takah chuan element thlan tawhte chu i nei thei a ni. Like, thuziak, thlalak, list, etc.

html tih a ni

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

Taksa scroll a ni

<body>Offcanvas leh a backdrop hmuh theih a nih chuan element scroll hi tihtawp a ni. Scroll data-bs-scrolltheihna tur attribute hmang rawh .<body>

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

html tih a ni

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

Body scroll leh backdrop te pawh a awm bawk

<body>Backdrop hmuh theih hmangin scroll pawh i enable thei bawk .

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

html tih a ni

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

Static backdrop a ni

Backdrop chu static-a dah a nih chuan offcanvas chu a pawn lama i click chuan a khar dawn lo.

Ka pawn lam i click chuan ka khar dawn lo.

html tih a ni

<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 dum a ni

v5.2.0 ah dah belh a ni

Utilities nei offcanvase te chu dark navbar ang chi context hrang hranga inmil zawk turin an hmel danglam thin. Hetah hian offcanvas dum nen styling dik tak neih theih nan and to kan .text-bg-darkdah belh bawk. A chhungah dropdown i neih chuan ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Hetah hian offcanvas content dah rawh.

html tih a ni

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

Chhanna pe thei

v5.2.0 ah dah belh a ni

Responsive offcanvas class te hian viewport pawn lama content chu breakpoint ruat atanga a hnuai lam thlengin an thup thin. Chu breakpoint chung lamah chuan a chhunga thu awmte chu a hma ang bawkin a awm ang. Entirnan, breakpoint .offcanvas-lghnuaia offcanvas-ah content a thup a lg, mahse breakpoint chunglam content chu a lantir lgthung.

I browser size thlak la, responsive offcanvas toggle chu a rawn lang ang.

Hei hi content chhunga awm a ni a .offcanvas-lg.

html tih a ni

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

Breakpoint tin atan across-ah responsive offcanvas class neih theih a ni.

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

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.

...

html tih 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 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 tih 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 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 tih a ni

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

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 .

CSS a ni

Variables te pawh a awm

v5.2.0 ah dah belh a ni

Bootstrap-in CSS variables approach a kalpui mek zingah hian offcanvas hian local CSS variables on hmangin .offcanvasreal-time customization tihchangtlunna atan a hmang ta a ni. CSS variable hrang hrangte tana value te hi Sass hmanga set a nih avangin Sass customization pawh a la support reng bawk.

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

Sass a danglam thei

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

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-topa chung lamah offcanvas a thup
.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

Toggle rawh

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.

Hnawl

A hnuaia tarlan ang hian offcanvas chhungadata button pakhata attribute hmangin dismissal hi tih theih a ni:

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

emaw, offcanvas pawn lama button pakhatah a hnuaia tarlan ang hian hmangin data-bs-target:

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

Offcanvas paih dan pahnih hi thlawp a nih laiin, offcanvas pawn atanga paih chhuah chu ARIA Authoring Practices Guide dialog (modal) pattern nen a inmil lo tih hre reng ang che Hei hi nangma risk-in ti rawh.

JavaScript hmangin

Manual hmangin enable theih a ni:

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

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmanga pass theih a nih avangin option hming chu data-bs-, ah hian i append thei ang data-bs-animation="{value}". Data attribute hmanga options pass dawnin option hming case type chu “ camelCase ” atanga “ kebab-case ” ah thlak ngei ngei tur a ni. Entirnan, data-bs-custom-class="beautifier"tih aiah hmang data-bs-customClass="beautifier"rawh.

Bootstrap 5.2.0 atang khan component zawng zawng hian experimental reserved data attribute an support data-bs-configa, chu chuan JSON string angin component configuration awlsam tak a dah thei a ni. Element pakhatin data-bs-config='{"delay":0, "title":123}'leh data-bs-title="456"attribute a neih chuan a tawp ber titlevalue chu a ni ang a 456, data attribute hrang hrangte chuan , a value pekte chu a override ang data-bs-config. Chu bakah, data attribute awmsa te hian JSON value te chu data-bs-delay='{"show":0,"hide":150}'.

Hming	Lampang	Hlawhchhamna	Hrilhfiahna
`backdrop`	boolean emaw a string emaw a ni`static`	`true`	Offcanvas hawn laiin body ah backdrop hnawih thin ang che. `static`A nih loh leh, click-a offcanvas khar lo backdrop atan specify bawk 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:

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

Tihdan	Hrilhfiahna
`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 initialized a nih loh chuan a thar siam theih a ni bawk.
`hide`	Offcanvas element pakhat a thup. Offcanvas element a thup tak tak hmain (chu chu `hidden.bs.offcanvas`event 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.offcanvas`event a thlen hmain) caller hnenah a kir leh thin.
`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.offcanvas`or `hidden.bs.offcanvas`event a thlen hma) caller hnenah a kir leh thin.

Thil thlengte

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

Event chi hrang hrang	Hrilhfiahna
`hide.bs.offcanvas`	`hide`He event hi method a koh zawh 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).
`hidePrevented.bs.offcanvas`	He event hi offcanvas a lan hian a fire a, a backdrop a ni a `static`, offcanvas pawn lama click a awm bawk. Escape key i hmet a, `keyboard`option chu a set chuan event chu a fire bawk `false`.
`show.bs.offcanvas`	`show`He 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).

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

Offcanvas ah a awm

A hnathawh dan

Entirna te

Offcanvas atanga siam a ni

Offcanvas ah a awm

Live demo a ni ang

Offcanvas ah a awm

Taksa scroll a ni

Offcanvas ah chuan body scroll a awm bawk

Body scroll leh backdrop te pawh a awm bawk

Backdrop ah chuan scroll a awm bawk

Static backdrop a ni

Offcanvas ah a awm

Offcanvas dum a ni

Offcanvas ah a awm

Chhanna pe thei

Offcanvas hmanga chhanna pe thei

Hmun dahna tur

Offcanvas chunglam a ni

Offcanvas a ni

Offcanvas hnuaiah a awm

A thlen theihna tur

CSS a ni

Variables te pawh a awm

Sass a danglam thei

Hman dan tur

Data attribute hmangin a ni

Toggle rawh

Hnawl

JavaScript hmangin

Thil thlan theih a ni

Thiltih dan tur

Asynchronous method leh inthlak danglamna te

Thil thlengte