Offcanvas

E kūkulu i nā ʻaoʻao ʻaoʻao huna i kāu papahana no ka hoʻokele, nā kaʻa kūʻai, a me nā mea hou aku me kekahi mau papa a me kā mākou plugin JavaScript.

Ma kēia ʻaoʻao

Pehea e hana ai

He ʻāpana ʻaoʻao ʻaoʻao ʻo Offcanvas i hiki ke hoʻololi ʻia ma o JavaScript e ʻike ʻia mai ka ʻaoʻao hema, ʻākau, a i ʻole ka ʻaoʻao lalo o ka ʻike. Hoʻohana ʻia nā pihi a i ʻole nā heleuma e like me nā mea hoʻomaka i hoʻopili ʻia i nā mea kikoʻī āu e hoʻololi ai, a dataua hoʻohana ʻia nā ʻano e kāhea i kā mākou JavaScript.

Hāʻawi ʻo Offcanvas i kekahi o nā code JavaScript like me nā modals. ʻO ka manaʻo, ua like lākou, akā he mau plugins kaʻawale.
Pēlā nō, hoʻoili ʻia kekahi kumu hoʻololi Sass no nā ʻano a me nā ana o offcanvas mai nā ʻano hoʻololi o ka modal.
Ke hōʻike ʻia, loaʻa i ka offcanvas kahi kāʻei paʻamau i hiki ke kaomi e hūnā i ka offcanvas.
E like me nā modals, hiki ke hōʻike ʻia hoʻokahi offcanvas i ka manawa.

Nā poʻo i luna! Hāʻawi ʻia pehea e mālama ai ʻo CSS i nā animation, ʻaʻole hiki iā ʻoe ke hoʻohana a i marginʻole translatema kahi .offcanvasmea. Akā, e hoʻohana i ka papa ma ke ʻano he mea hoʻopili kūʻokoʻa.

ʻO ka hopena animation o kēia māhele e pili ana i ka prefers-reduced-motionnīnau media. E ʻike i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .

Nā laʻana

ʻO nā ʻāpana canvas

Aia ma lalo kahi hiʻohiʻona offcanvas i hōʻike ʻia ma ka paʻamau (ma .showon .offcanvas). Loaʻa i ka Offcanvas ke kākoʻo no kahi poʻomanaʻo me kahi pihi pili a me kahi papa kino koho no kekahi padding. Manaʻo mākou e hoʻokomo i nā poʻomanaʻo offcanvas me nā hana hoʻokuʻu inā hiki, a i ʻole e hāʻawi i kahi hana hoʻokuʻu maopopo.

Aia nā ʻike no ka offcanvas maanei. Hiki iā ʻoe ke kau i kahi mea Bootstrap a i ʻole nā mea maʻamau ma aneʻi.

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

Demo ola

E hoʻohana i nā pihi ma lalo nei e hōʻike a hūnā i kahi ʻāpana offcanvas ma o JavaScript e hoʻololi i ka .showpapa ma kahi mea me ka .offcanvaspapa.

.offcanvashuna maʻiʻo (paʻamau)
.offcanvas.showhōʻike maʻiʻo

Hiki iā ʻoe ke hoʻohana i kahi loulou me ka hrefʻano, a i ʻole ke pihi me ka data-bs-targetʻano. I nā hihia ʻelua, data-bs-toggle="offcanvas"pono ka mea.

Ka loulou me ka href

ʻO kekahi kikokikona ma ke ʻano he wahi. Ma ke ola maoli hiki iā ʻoe ke loaʻa nā mea āu i koho ai. Like, kikokikona, kiʻi, papa inoa, etc.

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

Hoʻokomo

ʻAʻohe wahi paʻamau no nā ʻāpana offcanvas, no laila pono ʻoe e hoʻohui i kekahi o nā papa hoʻololi ma lalo;

.offcanvas-startwaiho i ka canvas ma ka hema o ke awa nana (e hoike ana maluna)
.offcanvas-endkau i ka canvas ma ka ʻākau o ke awa nānā
.offcanvas-topkau i ka canvas ma luna o ke awa nānā
.offcanvas-bottome waiho i ka canvas ma lalo o ka puka nānā

E ho'āʻo i nā hiʻohiʻona luna, ʻākau, a lalo ma lalo.

...

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

Kāpae

Hoʻopau ʻia ka ʻōwili ʻana i ka <body>element ke ʻike ʻia kahi offcanvas a me kona kua. E hoʻohana i ke data-bs-scrollʻano no ka hoʻololi ʻana i ka <body>ʻōwili a me data-bs-backdropka hoʻololi ʻana i ke kua.

E hoʻāʻo e ʻōwili i ke koena o ka ʻaoʻao e ʻike i kēia koho i ka hana.

.....

E hoʻāʻo e ʻōwili i ke koena o ka ʻaoʻao e ʻike i kēia koho i ka hana.

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

Hiki ke komo

No ka mea he kamaʻilio kumu ka offcanvas panel, e hōʻoia e hoʻohui aria-labelledby="..."—e kuhikuhi ana i ka inoa offcanvas—i .offcanvas. E hoʻomaopopo ʻaʻole pono ʻoe e hoʻohui role="dialog"no ka mea ua hoʻohui mākou iā ia ma o JavaScript.

Sass

Nā mea hoʻololi

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

Hoʻohana

Hoʻohana ka plugin offcanvas i kekahi mau papa a me nā hiʻohiʻona e hoʻokele i ka hāpai kaumaha:

.offcanvashūnā i ka ʻike
.offcanvas.showhōʻike i ka ʻike
.offcanvas-starthuna i ka offcanvas ma ka hema
.offcanvas-endhūnā i ka offcanvas ma ka ʻākau
.offcanvas-bottomhuna i ka offcanvas ma lalo

Hoʻohui i kahi pihi hoʻokuʻu me ke data-bs-dismiss="offcanvas"ʻano, e hoʻoulu i ka hana JavaScript. E hoʻohana pono i ka <button>mea me ia no ka hana kūpono ma nā ʻaoʻao āpau.

Ma o nā hiʻohiʻona ʻikepili

Hoʻololi

Hoʻohui data-bs-toggle="offcanvas"a a i data-bs-targetʻole hrefi ka mea e hāʻawi ʻakomi i ka mana o hoʻokahi mea offcanvas. ʻAe ka ʻano i kahi mea koho CSS e hoʻopili i ka data-bs-targetoffcanvas i. E ʻoluʻolu e hoʻohui i ka papa offcanvasi ka mea offcanvas. Inā makemake ʻoe e wehe paʻamau, e hoʻohui i ka papa hou show.

Hoʻokuʻu

Hiki ke hoʻokō ʻia ka hoʻokuʻu ʻana me ke ʻano datama kahi pihi i loko o ka offcanvas e like me ka hōʻike ʻana ma lalo nei:

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

a i ʻole ma ke pihi ma waho o ka canvas me ka hoʻohana ʻana i ka data-bs-targetmea i hōʻike ʻia ma lalo nei:

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

ʻOiai ua kākoʻo ʻia nā ala ʻelua e kāpae i kahi offcanvas, e hoʻomanaʻo ʻaʻole i kūlike ka wehe ʻana mai waho o kahi offcanvas me ka WAI-ARIA modal dialog design pattern . E hana i kēia ma kāu pilikia.

Ma o JavaScript

E ho'ā me ka lima me:

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-bs-, e like me ka data-bs-backdrop="".

inoa	ʻAno	Default	wehewehe
`backdrop`	boolean	`true`	E hoʻopili i kahi kāʻei kua ma ke kino i ka wā e wehe ana ka offcanvas
`keyboard`	boolean	`true`	Pani i ka offcanvas ke paʻi ʻia ke kī pakele
`scroll`	boolean	`false`	E ʻae i ka hele ʻana o ke kino i ka wā e wehe ana ka offcanvas

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

Ho'ā i kāu ʻike ma ke ʻano he ʻāpana offcanvas. ʻAe i kahi koho koho object.

Hiki iā ʻoe ke hana i kahi laʻana offcanvas me ka mea hana, no ka laʻana:

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

ʻano hana	wehewehe
`toggle`	Hoʻololi i kahi ʻāpana offcanvas i hōʻike ʻia a hūnā paha. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia o ka offcanvas element (ʻo ia hoʻi ma mua o ka hiki ʻana o `shown.bs.offcanvas`ka `hidden.bs.offcanvas`hanana).
`show`	Hōʻike i kahi ʻāpana offcanvas. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea offcanvas (ʻo ia hoʻi ma mua o ka hiki ʻana o ka `shown.bs.offcanvas`hanana).
`hide`	Hūnā i kahi ʻeleʻele offcanvas. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka mea offcanvas (ʻo ia hoʻi ma mua o ka hiki ʻana o ka `hidden.bs.offcanvas`hanana).
`getInstance`	ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana offcanvas e pili ana me kahi mea DOM
`getOrCreateInstance`	ʻO ke ʻano static e hiki ai iā ʻoe ke kiʻi i ka laʻana offcanvas e pili ana me kahi mea DOM, a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.

Nā hanana

Hōʻike ka papa offcanvas o Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana offcanvas.

ʻAno hanana	wehewehe
`show.bs.offcanvas`	Hoʻomaka koke kēia hanana i ke `show`kāhea ʻia ʻana o ke ʻano hana.
`shown.bs.offcanvas`	Hoʻopau ʻia kēia hanana i ka wā i ʻike ʻia ai kahi mea offcanvas i ka mea hoʻohana (e kali no ka hoʻopau ʻana o CSS).
`hide.bs.offcanvas`	Hoʻopau koke ʻia kēia hanana ke `hide`kāhea ʻia ke ʻano.
`hidden.bs.offcanvas`	Hoʻopau ʻia kēia hanana i ka wā i hūnā ʻia ai kahi ʻāpana offcanvas mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Pehea e hana ai

Nā laʻana

ʻO nā ʻāpana canvas

Offcanvas

Demo ola

Offcanvas

Hoʻokomo

ʻO luna o waho

Offcanvas ʻākau

ʻO lalo o ka canvas

Kāpae

Kāwili ʻia me ka ʻōwili

Offcanvas me ke kua

Kāpae me ka ʻōwili

Hiki ke komo

Sass

Nā mea hoʻololi

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

Hoʻololi

Hoʻokuʻu

Ma o JavaScript

Nā koho

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Nā hanana