Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
in English

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.

Offcanvas a wɔde di dwuma
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
Offcanvas a wɔde di dwuma
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ɛ.

Offcanvas a ɛwɔ soro
... 
<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 nifa so
... 
<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 ase 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 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.

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

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

Offcanvas a ɛwɔ akyi no

.....

Wɔde nhoma mmobɔwee ahyɛ akyi

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.offcanvasanaa hidden.bs.offcanvasadeyɛ 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.offcanvasadeyɛ 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.offcanvasasɛ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 showwɔ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 hidewɔ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...
})