Mafere na isi ọdịnaya Gaa na ntugharị docs
in English

Offcanvas

Jiri klaasị ole na ole na ngwa mgbakwunye Javascript wulite akụkụ zoro ezo n'ime ọrụ gị maka ịnyagharị, ụgbọ ịzụ ahịa na ihe ndị ọzọ.

Ka o si arụ ọrụ

Offcanvas bụ akụkụ akụkụ nke enwere ike ịtụgharị site na Javascript ka ọ pụta n'akụkụ aka ekpe, aka nri, ma ọ bụ ala nke ebe nlele. A na-eji bọtịnụ ma ọ bụ arịlịka dị ka ihe na-akpali akpali nke etinyere na ihe ụfọdụ ị na-atụgharị, yana datanjirimara a na-eji kpọkuo Javascript anyị.

  • Offcanvas na-ekerịta ụfọdụ koodu Javascript dị ka modal. N'echiche, ha yiri nnọọ, mana ha bụ plugins dị iche iche.
  • N'otu aka ahụ, a na-eketa ụfọdụ mgbanwe Sass maka ụdị na akụkụ nke offcanvas site na mgbanwe modal.
  • Mgbe egosiri, offcanvas na-agụnye ndabere ndabere nke enwere ike ịpị iji zoo enyo ahụ.
  • Yiri modal, ọ bụ naanị otu oyi akwa ka enwere ike igosi n'otu oge.

Welie isi elu! Nyere ka CSS si ejikwa animation, ị nweghị ike iji marginma ọ bụ translatena .offcanvasmmewere. Kama, jiri klaasị ahụ dị ka ihe mkpuchi nwere onwe.

Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Ihe atụ

Ngwa ndị dịpụrụ adịpụ

N'okpuru ebe a bụ ọmụmaatụ offcanvas nke egosiri na ndabara (site .showna .offcanvas). Offcanvas gụnyere nkwado maka nkụnye eji isi mee nke nwere bọtịnụ nso yana klaasị ahụ nhọrọ maka ụfọdụ mbido padding. Anyị na-atụ aro ka ị tinye isi ihe ndị dịpụrụ adịpụ na omume ịchụpụ mgbe ọ bụla enwere ike, ma ọ bụ wepụta mmemme ịchụpụ nke ọma.

Offcanvas
Ọdịnaya maka offcanvas na-aga ebe a. Ị nwere ike idowe ihe dị ka akụrụngwa Bootstrap ọ bụla ma ọ bụ ihe omenala ebe a.
<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>

Ihe ngosi dị ndụ

Jiri bọtịnụ dị n'okpuru ka igosi ma zoo ihe dịpụrụ adịpụ site na Javascript nke na-atụgharị .showklaasị na mmewere ya na .offcanvasklaasị.

  • .offcanvasna-ezobe ọdịnaya (nke ndabara)
  • .offcanvas.showna-egosi ọdịnaya

Ị nwere ike iji njikọ nwere hrefnjirimara, ma ọ bụ bọtịnụ nwere data-bs-targetàgwà ahụ. N'okwu abụọ a, data-bs-toggle="offcanvas"achọrọ ya.

Njikọ na href
Offcanvas
Ụfọdụ ederede dị ka ebe nchekwa. Na ndụ n'ezie ị nwere ike ịnwe ihe ndị ị họọrọ. Dị ka, ederede, onyonyo, ndepụta, wdg.
<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>

Ndokwa

Enweghị ebe ndabere maka ihe ndị na-apụ apụ, yabụ ị ga-agbakwunye otu n'ime klaasị modifier n'okpuru;

  • .offcanvas-startdowe anya n'aka ekpe nke ebe nlele (egosiri n'elu)
  • .offcanvas-enddowe anyawa n'aka nri nke ebe nlele
  • .offcanvas-topna-etinye offcanvas n'elu ebe nlele
  • .offcanvas-bottomna-etinye offcanvas n'okpuru ebe nlele

Nwalee atụ elu, aka nri na ala dị n'okpuru.

N'elu kanvas
...
<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>
Apụpụ n'aka nri
...
<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 ala
...
<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>

Ebe ndabere

Akwụsịghị ịpịgharị <body>ihe ahụ mgbe a na-ahụ ihe dịpụrụ adịpụ na ebe ndabere ya. Jiri data-bs-scrollnjiri mara ka tụgharịa <body>pịgharịa ma data-bs-backdroptụgharịa n'azụ.

Agba na mpịakọta

Gbalịa ịpịgharịa na ibe ndị ọzọ ka ịhụ nhọrọ a na-arụ ọrụ.

Offcanvas nwere backdrop

......

Jiri mpịakọta tụgharịa azụ

Gbalịa ịpịgharịa na ibe ndị ọzọ ka ịhụ nhọrọ a na-arụ ọrụ.

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

Nnweta

Ebe ọ bụ na panetị offcanvas bụ n'ezie mkparịta ụka modal, jide n'aka na ịtinye aria-labelledby="..."- na-ezo aka aha offcanvas - na .offcanvas. Mara na ịchọghị ịgbakwunye role="dialog"ebe ọ bụ na anyị tinyegoro ya site na Javascript.

Sass

Mgbanwe

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

Ojiji

Ihe mgbakwunye Offcanvas na-eji klaasị na njirimara ole na ole iji jikwaa ibuli elu:

  • .offcanvasna-ezochi ọdịnaya
  • .offcanvas.showna-egosi ọdịnaya
  • .offcanvas-startna-ezobe ihe mgbochi dị n'aka ekpe
  • .offcanvas-endna-ezobe ihe dịpụrụ adịpụ n'aka nri
  • .offcanvas-bottomna-ezobe ihe mgbochi dị n'okpuru

Tinye bọtịnụ mkpochapụ nwere data-bs-dismiss="offcanvas"njirimara, nke na-ebute ọrụ Javascript. Jide n'aka na ị ga-eji <button>mmewere ya na omume kwesịrị ekwesị n'ofe ngwaọrụ niile.

Site na njirimara data

Tinye data-bs-toggle="offcanvas"na a data-bs-targetma ọ bụ hrefna mmewere iji kenye njikwa nke otu ihe na-apụ apụ na-akpaghị aka. Àgwà ahụ data-bs-targetna-anabata onye nhọpụta CSS iji tinye ihe na-apụ apụ na ya. Jide n'aka na ịtinye klaasị offcanvasna mmewere offcanvas. Ọ bụrụ na ị ga-achọ ka ọ meghee, tinye klaasị agbakwunyere show.

Site na Javascript

Jiri aka jiri:

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

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-bs-, dị ka ọ dị na data-bs-backdrop="".

Aha Ụdị Ọdabara Nkọwa
backdrop boolean true Tinye ihe ndabere na ahụ mgbe a na-apụ apụ na-emeghe
keyboard boolean true Na-emechi oghere anya mgbe ịpịrị igodo mgbapụ
scroll boolean false Kwe ka ọ pịgharịa ahụ mgbe a na-apụ apụ na-emeghe

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka ihe na-apụ apụ. Nabata nhọrọ nhọrọ object.

Ị nwere ike iji onye na-ewu ihe mepụta ihe atụ na-apụ apụ, dịka ọmụmaatụ:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Usoro Nkọwa
toggle Na-atụgharị ihe dịpụrụ adịpụ na-egosi ma ọ bụ zoo. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ ezobe ihe ndị na-apụ apụ (ya bụ, tupu ihe shown.bs.offcanvasomume hidden.bs.offcanvasahụ emee).
show Na-egosi ihe dịpụrụ adịpụ. Na-alaghachikwute onye na-akpọ oku tupu egosipụta ihe ndị dịpụrụ adịpụ (ya bụ tupu shown.bs.offcanvasmmemme emee).
hide Na-ezobe mmewere nke kanvas. Na-alaghachikwute onye na-akpọ oku tupu ezobe ihe n'èzí (ya bụ, tupu hidden.bs.offcanvasmmemme emee).
getInstance Usoro kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ anya nke jikọtara ya na mmewere DOM
getOrCreateInstance Ụzọ kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ nke offcanvas jikọtara ya na ihe DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya

Ihe omume

Klas Offcanvas Bootstrap na-ekpughere ihe omume ole na ole maka itinye aka n'ime ọrụ oyi.

Ụdị mmemme Nkọwa
show.bs.offcanvas Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
shown.bs.offcanvas A na-agbapụ mmemme a mgbe onye ọrụ mere ka ihe na-apụ apụ anya (ga-echere mgbanwe CSS ka agwụchaa).
hide.bs.offcanvas A na-agbapụ ihe omume a ozugbo mgbe hidea na-akpọ usoro ahụ.
hidden.bs.offcanvas A na-agbapụ mmemme a mgbe ezoro ezoro onye ọrụ ihe na-apụ apụ (ga-echere mgbanwe CSS ka agwụchaa).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})