Offcanvas a wɔde di dwuma

Fa adesua kakraa bi ne yɛn JavaScript plugin no si nkyɛnkyɛn a ahintaw wɔ wo adwuma no mu ma akwantuo, adetɔ teaseɛnam, ne nea ɛkeka ho.

Wɔ kratafa yi so

Sɛnea ɛyɛ adwuma

Offcanvas yɛ sidebar component a wobɛtumi afa JavaScript so adan no ama apue afiri viewport no benkum, nifa, soro, anaa ase ano. Wɔde bɔtɔn anaa ankora di dwuma sɛ triggers a wɔde bata nneɛma pɔtee bi a wodannan ho, na datawɔde su ahorow di dwuma de frɛ yɛn JavaScript no.

Offcanvas kyɛ JavaScript koodu koro no ara bi sɛ modals. Wɔ adwene mu no, wɔyɛ pɛ koraa, nanso wɔyɛ plugins ahorow a ɛsono emu biara.
Saa ara nso na source Sass variables binom ma offcanvas no styles ne dimensions no, wonya fi modal no variables no mu.
Sɛ wɔkyerɛ a, offcanvas no de default backdrop a wubetumi akliki so de offcanvas no asie ka ho.
Te sɛ modals no, offcanvas biako pɛ na wobetumi akyerɛ wɔ bere koro mu.

Ti a ɛwɔ soro! Sɛ wode sɛnea CSS di animations ho dwuma a, wuntumi mfa nni dwuma marginanaasɛ wuntumi nni element translatebi so. .offcanvasMmom no, fa adesuakuw no di dwuma sɛ ade a wɔde kyekyere nneɛma ho a ɛde ne ho.

Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Nhwɛso ahorow

Nneɛma a ɛwɔ Offcanvas so

Ase hɔ no yɛ offcanvas nhwɛso a wɔakyerɛ default (via .showon .offcanvas). Offcanvas ka ho bi ne mmoa ma header a ɛwɔ close button ne optional body class ma ebinom mfiase padding. Yɛhyɛ nyansa sɛ fa offcanvas headers a ɛwɔ dismiss actions ka ho bere biara a ɛbɛyɛ yiye, anaasɛ fa dismiss action a ɛda adi pefee ma.

Nsɛm a ɛwɔ mu ma offcanvas no kɔ ha. Wubetumi de ɛkame ayɛ sɛ Bootstrap component anaa custom elements biara ahyɛ ha.

html na ɛwɔ hɔ

<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 ɛwɔ hɔ

Fa buttons a ɛwɔ aseɛ ha yi kyerɛ na fa offcanvas element bi sie denam JavaScript a ɛdannan .showadesua no wɔ element bi so ne .offcanvasclass no.

.offcanvasde nsɛm a ɛwɔ mu no sie (default) .
.offcanvas.showkyerɛ emu nsɛm

Wubetumi de link a ɛwɔ hrefattribute no adi dwuma, anaasɛ button a ɛwɔ data-bs-targetattribute no. Wɔ nsɛm abien no nyinaa mu no, data-bs-toggle="offcanvas"wɔhwehwɛ sɛ wɔyɛ saa.

Link ne href

Ebinom nsɛm sɛ beae a wɔde hyɛ mu. Wɔ asetra ankasa mu no wubetumi anya nneɛma a woapaw no. Te sɛ, nsɛm, mfonini, nsɛm a wɔahyehyɛ, ne nea ɛkeka ho.

html na ɛwɔ hɔ

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

Nipadua a wɔde kyerɛw nsɛm

Scrolling <body>element no yɛ disabled bere a offcanvas ne ne backdrop no da adi. Fa data-bs-scrollattribute no di dwuma na ma <body>scrolling no nyɛ adwuma.

Bɔ mmɔden sɛ wobɛtwetwe kratafa no fã a aka no na woahu sɛ saa nhyehyɛe yi reyɛ adwuma.

html na ɛwɔ hɔ

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

Nipadua a wɔde kyerɛw nsɛm ne akyi mfonini

Wubetumi nso ama <body>scrolling a ɛwɔ akyi a wotumi hu no ayɛ adwuma.

Bɔ mmɔden sɛ wobɛtwetwe kratafa no fã a aka no na woahu sɛ saa nhyehyɛe yi reyɛ adwuma.

html na ɛwɔ hɔ

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

Sɛ wɔde backdrop no si static so a, offcanvas no rentoto mu bere a worebɔ akyi no.

Sɛ wo klik me akyi a, merento mu.

html na ɛwɔ hɔ

<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 a ɛyɛ sum

Wɔde aka ho wɔ v5.2.0 mu

Sesa offcanvases a ɛwɔ utilities no hwɛbea ma ɛne no hyia yie ma nsɛm ahodoɔ te sɛ navbars a ɛyɛ sum. Ɛha na yɛde ka .text-bg-darkne .offcanvasho .btn-close-whitema .btn-closestyling a ɛfata ne offcanvas a ɛyɛ sum. Sɛ wowɔ dropdowns wɔ mu a, susuw ho nso sɛ wode bɛka .dropdown-menu-darkho .dropdown-menu.

Fa offcanvas nsɛm gu ha.

html na ɛwɔ hɔ

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

Mmuae a wɔde ma

Wɔde aka ho wɔ v5.2.0 mu

Offcanvas adesua ahorow a ɛyɛ mmuae no sie nsɛm a ɛwɔ viewport no akyi fi breakpoint a wɔakyerɛ ne fam. Wɔ saa breakpoint no atifi no, emu nsɛm a ɛwɔ mu no bɛyɛ wɔn ade sɛnea ɛtaa ba no. Sɛ nhwɛso no, .offcanvas-lgde nsɛm a ɛwɔ offcanvas a ɛwɔ lgbreakpoint no ase no sie, nanso ɛkyerɛ nsɛm a ɛwɔ lgbreakpoint no atifi.

Sesa wo browser no kɛse na kyerɛ offcanvas toggle a ɛyɛ mmuae no.

Eyi yɛ nsɛm a ɛwɔ .offcanvas-lg.

html na ɛwɔ hɔ

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

Mmuae offcanvas adesua ahorow wɔ hɔ wɔ atifi fam ma breakpoint biara.

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

Nneɛma a wɔde bɛto hɔ

Default placement biara nni hɔ ma offcanvas components, enti ɛsɛ sɛ wode modifier classes a ɛwɔ aseɛ ha no mu baako ka ho.

.offcanvas-startde offcanvas si viewport no benkum so (wɔakyerɛ wɔ atifi hɔ) .
.offcanvas-endde offcanvas si viewport no nifa so
.offcanvas-topde offcanvas si viewport no atifi
.offcanvas-bottomde offcanvas si viewport no ase

Sɔ nhwɛso ahorow a ɛwɔ soro, nifa, ne ase a ɛwɔ ase ha no hwɛ.

...

html na ɛwɔ hɔ

<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 na ɛwɔ hɔ

<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 na ɛwɔ hɔ

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

Nneɛma a wotumi nya

Esiane sɛ offcanvas panel no yɛ adwene mu modal nkɔmmɔbɔ nti, hwɛ hu sɛ wode bɛka ho aria-labelledby="..."—a ɛkyerɛ offcanvas asɛmti no—ka .offcanvas. Hyɛ no nsow sɛ enhia sɛ wode ka ho role="dialog"efisɛ yɛde ka ho dedaw denam JavaScript so.

CSS a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren offcanvas de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .offcanvasma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no da so ara boa, nso.

  --#{$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 nsakrae ahorow

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

Sɛnea wɔde di dwuma

Offcanvas plugin no de adesua ne su kakraa bi di dwuma de di nneɛma a emu yɛ duru a wɔma so no ho dwuma:

.offcanvasde emu nsɛm no sie
.offcanvas.showkyerɛ emu nsɛm no
.offcanvas-startde offcanvas no sie wɔ benkum so
.offcanvas-endde offcanvas a ɛwɔ nifa so no sie
.offcanvas-topde offcanvas no sie wɔ soro hɔ
.offcanvas-bottomde offcanvas no sie wɔ ase hɔ

Fa dismiss button a ɛwɔ data-bs-dismiss="offcanvas"attribute no ka ho, na ɛno na ɛkanyan JavaScript dwumadie no. Hwɛ hu sɛ wode <button>element no bedi dwuma ne no ama suban pa wɔ mfiri ahorow nyinaa so.

Via data su ahorow so

Toggle a ɛwɔ hɔ

Fa data-bs-toggle="offcanvas"ne a data-bs-targetanaa hrefto element no mu na ɛde offcanvas element biako so tumi ma no ankasa. Attribute no data-bs-targetgye CSS selector a wɔde offcanvas no bedi dwuma wɔ so. Hwɛ hu sɛ wode adesuakuw offcanvasno bɛka offcanvas element no ho. Sɛ wopɛ sɛ ɛbue default a, fa adesua foforo no ka ho show.

Po

Wobetumi de datasu a ɛwɔ bɔtn bi so wɔ offcanvas no mu sɛnea wɔada no adi wɔ ase ha no ayɛ adwuma a wobeyi afi adwumam no:

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

anaasɛ wɔ bɔtn bi a ɛwɔ offcanvas no akyi a wɔde di dwuma data-bs-targetsɛnea wɔada no adi wɔ ase ha no:

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

Bere a wɔboa akwan abien no nyinaa a wɔfa so yi offcanvas fi hɔ no, ma ɛntra w’adwenem sɛ sɛ woyi fi offcanvas akyi a, ɛne ARIA Authoring Practices Guide dialog (modal) pattern no nhyia . Yɛ eyi wɔ w’ankasa asiane mu.

Ɛdenam JavaScript so

Fa nsa yɛ adwuma denam:

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

Nneɛma a wubetumi apaw

Sɛnea wobetumi afa data attributes anaa JavaScript so de options no atwam no, wubetumi de option din ahyɛ data-bs-, sɛnea ɛwɔ data-bs-animation="{value}". Hwɛ hu sɛ wobɛsesa case type a ɛwɔ option din no mu afi “ camelCase ” akɔ “ kebab-case ” bere a wode options no nam data attributes so retwam no. Sɛ nhwɛso no, fa di dwuma data-bs-custom-class="beautifier"mmom sen sɛ wode data-bs-customClass="beautifier".

Ɛde besi Bootstrap 5.2.0 no, nneɛma no nyinaa boa nhwehwɛmu a wɔde asie data su data-bs-configa ebetumi de afã nhyehyɛe a ɛnyɛ den ahyɛ mu sɛ JSON ahama. Sɛ element bi wɔ data-bs-config='{"delay":0, "title":123}'ne data-bs-title="456"su ahorow a, botae a etwa to titleno bɛyɛ 456na data su ahorow a ɛtetew mu no bɛbɔ botae ahorow a wɔde ama wɔ data-bs-config. Bio nso, data su ahorow a ɛwɔ hɔ dedaw no tumi de JSON botae ahorow te sɛ data-bs-delay='{"show":0,"hide":150}'.

Din	Korɔ	Mfiaseɛ	Nkyerɛmu
`backdrop`	boolean anaasɛ ahama no`static`	`true`	Fa akyi mfonini gu nipadua no so bere a offcanvas abue no. Sɛnea ɛbɛyɛ a, kyerɛ `static`akyigyina a ɛnto offcanvas no mu bere a woakliki no.
`keyboard`	boolean ho asɛm	`true`	Ɛto offcanvas no mu bere a woabɔ escape key no.
`scroll`	boolean ho asɛm	`false`	Ma nipadua no nkɔ scrolling bere a offcanvas abue no.

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii .

Ɛma wo nsɛm no yɛ adwuma sɛ offcanvas element. Gye akwan a wubetumi apaw bi tom object.

Wubetumi de constructor no ayɛ offcanvas instance, sɛ nhwɛso no:

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

Ɔkwan	Nkyerɛmu
`getInstance`	Static kwan a ɛma wo kwan ma wo nya offcanvas nhwɛso a ɛbata DOM element bi ho.
`getOrCreateInstance`	Static kwan a ɛma wo kwan ma wonya offcanvas nhwɛso a ɛbata DOM element bi ho, anaasɛ wobɔ foforo sɛ ɛba sɛ wɔanhyɛ ase a.
`hide`	Ɔde offcanvas element bi sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔde offcanvas element no asie ankasa (kyerɛ sɛ ansa na `hidden.bs.offcanvas`asɛm no asi).
`show`	Kyerɛ offcanvas element bi. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ offcanvas element no ankasa (kyerɛ sɛ ansa na `shown.bs.offcanvas`adeyɛ no aba).
`toggle`	Toggles offcanvas element bi kɔ kyerɛ anaa wɔde sie. San kɔ ɔfrɛfoɔ no nkyɛn ansa na wɔakyerɛ offcanvas element no ankasa anaa wɔde asie (kyerɛ sɛ ansa na `shown.bs.offcanvas`anaa `hidden.bs.offcanvas`adeyɛ no aba).

Nsɛm a esisi

Bootstrap no offcanvas adesuakuw no da nsɛm kakraa bi a esisi ma hooking wɔ offcanvas dwumadi mu adi.

Adeyɛ no su	Nkyerɛmu
`hide.bs.offcanvas`	Wɔtow saa adeyɛ yi ntɛm ara bere a `hide`wɔafrɛ ɔkwan no awie no.
`hidden.bs.offcanvas`	Wɔtow saa adeyɛ yi bere a wɔde offcanvas element bi asie nea ɔde di dwuma no (bɛtwɛn ma CSS nsakrae ahorow no awie).
`hidePrevented.bs.offcanvas`	Saa adeyɛ yi tow bere a wɔakyerɛ offcanvas no, ne backdrop no yɛ `static`na wɔayɛ click wɔ offcanvas no akyi. Wɔsan nso tow adeyɛ no bere a wɔabɔ escape key no na wɔde `keyboard`option no ahyɛ `false`.
`show.bs.offcanvas`	Saa adeyɛ yi tow ntɛm ara bere a `show`wɔfrɛ instance kwan no.
`shown.bs.offcanvas`	Wɔtow saa adeyɛ yi bere a wɔayɛ offcanvas element bi a ɔde di dwuma no ahu (bɛtwɛn ma CSS nsakrae ahorow no awie).

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

Offcanvas a wɔde di dwuma

Sɛnea ɛyɛ adwuma

Nhwɛso ahorow

Nneɛma a ɛwɔ Offcanvas so

Offcanvas a wɔde di dwuma

Live demo a ɛwɔ hɔ

Offcanvas a wɔde di dwuma

Nipadua a wɔde kyerɛw nsɛm

Offcanvas a nipadua a wɔde kyerɛw nsɛm gu so

Nipadua a wɔde kyerɛw nsɛm ne akyi mfonini

Backdrop a ɛwɔ nhoma mmobɔwee

Static akyi mfonini

Offcanvas a wɔde di dwuma

Offcanvas a ɛyɛ sum

Offcanvas a wɔde di dwuma

Mmuae a wɔde ma

Offcanvas a ɛyɛ mmuae

Nneɛma a wɔde bɛto hɔ

Offcanvas a ɛwɔ soro

Offcanvas nifa so

Offcanvas ase a ɛwɔ ase

Nneɛma a wotumi nya

CSS a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Sass nsakrae ahorow

Sɛnea wɔde di dwuma

Via data su ahorow so

Toggle a ɛwɔ hɔ

Po

Ɛdenam JavaScript so

Nneɛma a wubetumi apaw

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

Nsɛm a esisi