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

Na ibe a

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.

Ọ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

Ụ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 na ala nke ebe nlele

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

...

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

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

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

......

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">Backdrop 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;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

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

Tụgharịa

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.

Wepụ

Enwere ike nweta nchụpụ site na datanjirimara dị na bọtịnụ dị n'ime oghere dị ka egosiri n'okpuru:

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

ma ọ bụ na bọtịnụ na- abụghị kanvas na-eji ihe a data-bs-targetgosipụtara n'okpuru:

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

Ọ bụ ezie na a na-akwado ụzọ abụọ a ga-esi chụpụ ihe dịpụrụ adịpụ, buru n'uche na ịchụpụ site na mpụga ihe mkpuchi adịghị adaba na WAI-ARIA modal dialog design . Mee nke a n'ihe egwu nke gị.

Site 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.offcanvas`omume `hidden.bs.offcanvas`ahụ 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.offcanvas`mmemme emee).
`hide`	Na-ezobe mmewere apụọ. Na-alaghachikwute onye na-akpọ oku tupu ezobe ihe n'èzí (ya bụ, tupu `hidden.bs.offcanvas`mmemme 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 `show`a 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 ntụgharị CSS ka agwụchaa).
`hide.bs.offcanvas`	A na-agbapụ ihe omume a ozugbo mgbe `hide`a 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...
})

Offcanvas

Ka o si arụ ọrụ

Ihe atụ

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

Offcanvas

Ihe ngosi dị ndụ

Offcanvas

Ndokwa

N'elu kanvas

Apụpụ n'aka nri

Offcanvas ala

Ebe ndabere

Agba na mpịakọta

Offcanvas nwere backdrop

Backdrop nwere mpịakọta

Nnweta

Sass

Mgbanwe

Ojiji

Site na njirimara data

Tụgharịa

Wepụ

Site JavaScript

Nhọrọ

Ụzọ

Ụzọ asynchronous na ntụgharị

Ihe omume