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 ayɛ toggle ama ɛbɛpue afiri viewport no benkum, nifa, 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ɛ yie, 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.

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

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

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

...

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

...

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

...

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

Akyi Nsɛm

Scrolling <body>element no yɛ disabled bere a offcanvas ne ne backdrop no da adi. Fa data-bs-scrollattribute no dannan <body>scrolling na data-bs-backdropdannan backdrop no.

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

.....

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

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

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 ɛfa offcanvas asɛmti no ho—ka .offcanvas. Hyɛ no nsow sɛ enhia sɛ wode ka ho role="dialog"efisɛ yɛde ka ho dedaw denam JavaScript so.

Sass

Nneɛma a Ɛsakra

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

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-bottomde offcanvas no sie wɔ ase hɔ

Fa dismiss button a ɛwɔ data-bs-dismiss="offcanvas"attribute no ka ho, 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

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.

Ɛdenam JavaScript so

Fa nsa yɛ adwuma denam:

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-, sɛnea ɛwɔ data-bs-backdrop="".

Din	Korɔ	Mfiaseɛ	Nkyerɛmu
`backdrop`	boolean ho asɛm	`true`	Fa akyi mfonini gu nipadua no so bere a offcanvas abue 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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Ɔkwan	Nkyerɛmu
`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).
`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).
`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).
`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 wo nya offcanvas nhwɛsoɔ a ɛbata DOM element bi ho, anaasɛ wobɔ foforɔ sɛ ɛba sɛ wɔanhyɛ aseɛ a

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

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // 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

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

Offcanvas a ɛwɔ soro

Offcanvas nifa so

Offcanvas ase hɔ

Akyi Nsɛm

Wɔde nhoma mmobɔwee ayɛ kɔla

Offcanvas a ɛwɔ akyi no

Wɔde nhoma mmobɔwee ahyɛ akyi

Nneɛma a wotumi nya

Sass

Nneɛma a Ɛsakra

Sɛnea wɔde di dwuma

Via data su ahorow so

Ɛdenam JavaScript so

Nneɛma a wubetumi apaw

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

Nsɛm a esisi