Offcanvas

Bumuo ng mga nakatagong sidebar sa iyong proyekto para sa nabigasyon, mga shopping cart, at higit pa gamit ang ilang mga klase at ang aming JavaScript plugin.

Sa pahinang ito

Paano ito gumagana

Ang Offcanvas ay isang bahagi ng sidebar na maaaring i-toggle sa pamamagitan ng JavaScript upang lumabas mula sa kaliwa, kanan, o ibabang gilid ng viewport. Ginagamit ang mga buton o anchor bilang mga trigger na naka-attach sa mga partikular na elemento na iyong i-toggle, at dataginagamit ang mga attribute para i-invoke ang aming JavaScript.

Ang Offcanvas ay nagbabahagi ng ilan sa parehong JavaScript code bilang modals. Conceptually, sila ay halos magkapareho, ngunit sila ay magkahiwalay na mga plugin.
Katulad nito, ang ilang pinagmulang Sass variable para sa mga istilo at dimensyon ng offcanvas ay minana mula sa mga variable ng modal.
Kapag ipinakita, ang offcanvas ay may kasamang default na backdrop na maaaring i-click upang itago ang offcanvas.
Katulad ng mga modal, isang offcanvas lang ang maaaring ipakita sa bawat pagkakataon.

Heads up! Dahil sa kung paano pinangangasiwaan ng CSS ang mga animation, hindi mo magagamit margino translatesa isang .offcanvaselemento. Sa halip, gamitin ang klase bilang isang independiyenteng elemento ng pambalot.

Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng accessibility .

Mga halimbawa

Mga bahagi ng offcanvas

Nasa ibaba ang isang halimbawa ng offcanvas na ipinapakita bilang default (sa pamamagitan ng .showon .offcanvas). Kasama sa Offcanvas ang suporta para sa isang header na may close button at isang opsyonal na body class para sa ilang initial padding. Iminumungkahi namin na isama mo ang mga offcanvas na header na may mga pagkilos na i-dismiss hangga't maaari, o magbigay ng tahasang pagkilos sa pag-dismiss.

Napupunta dito ang content para sa offcanvas. Maaari kang maglagay ng halos anumang bahagi ng Bootstrap o mga custom na elemento dito.

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

Gamitin ang mga button sa ibaba upang ipakita at itago ang isang offcanvas na elemento sa pamamagitan ng JavaScript na nagpapalipat-lipat sa .showklase sa isang elemento sa .offcanvasklase.

.offcanvasnagtatago ng nilalaman (default)
.offcanvas.shownagpapakita ng nilalaman

Maaari kang gumamit ng isang link na may hrefkatangian, o isang pindutan na may data-bs-targetkatangian. Sa parehong mga kaso, ang data-bs-toggle="offcanvas"ay kinakailangan.

Mag-link sa href

Ilang text bilang placeholder. Sa totoong buhay maaari kang magkaroon ng mga elemento na iyong pinili. Tulad ng, teksto, mga larawan, mga listahan, atbp.

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

Paglalagay

Walang default na placement para sa mga bahagi ng offcanvas, kaya dapat kang magdagdag ng isa sa mga klase ng modifier sa ibaba;

.offcanvas-startnaglalagay ng offcanvas sa kaliwa ng viewport (ipinapakita sa itaas)
.offcanvas-endnaglalagay ng offcanvas sa kanan ng viewport
.offcanvas-topnaglalagay ng offcanvas sa tuktok ng viewport
.offcanvas-bottomnaglalagay ng offcanvas sa ibaba ng viewport

Subukan ang mga halimbawa sa itaas, kanan, at ibaba sa ibaba.

...

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

Backdrop

Ang pag-scroll sa <body>elemento ay hindi pinagana kapag ang isang offcanvas at ang backdrop nito ay nakikita. Gamitin ang data-bs-scrollattribute para i-toggle ang <body>pag-scroll at data-bs-backdropi-toggle ang backdrop.

Subukang mag-scroll sa natitirang bahagi ng pahina upang makita ang opsyong ito sa pagkilos.

.....

Subukang mag-scroll sa natitirang bahagi ng pahina upang makita ang opsyong ito sa pagkilos.

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

Accessibility

Dahil ang offcanvas panel ay konseptong isang modal dialog, tiyaking idagdag aria-labelledby="..."—na tumutukoy sa offcanvas na pamagat—sa .offcanvas. Tandaan na hindi mo na kailangang magdagdag role="dialog"dahil naidagdag na namin ito sa pamamagitan ng JavaScript.

Sass

Mga variable

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

Paggamit

Gumagamit ang offcanvas plugin ng ilang klase at attribute para mahawakan ang mabigat na pag-aangat:

.offcanvasnagtatago ng nilalaman
.offcanvas.shownagpapakita ng nilalaman
.offcanvas-startItinatago ang offcanvas sa kaliwa
.offcanvas-endItinatago ang offcanvas sa kanan
.offcanvas-bottomItinatago ang offcanvas sa ibaba

Magdagdag ng dismiss button na may data-bs-dismiss="offcanvas"attribute, na nagti-trigger sa JavaScript functionality. Tiyaking gamitin ang <button>elemento kasama nito para sa wastong pag-uugali sa lahat ng device.

Sa pamamagitan ng mga katangian ng data

Magdagdag data-bs-toggle="offcanvas"at a data-bs-targeto hrefsa elemento upang awtomatikong magtalaga ng kontrol ng isang offcanvas na elemento. Tumatanggap ang data-bs-targetattribute ng CSS selector para ilapat ang offcanvas. Tiyaking idagdag ang klase offcanvassa offcanvas na elemento. Kung gusto mo itong default na bukas, idagdag ang karagdagang klase show.

Sa pamamagitan ng JavaScript

Paganahin nang manu-mano gamit ang:

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

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-backdrop="".

Pangalan	Uri	Default	Paglalarawan
`backdrop`	boolean	`true`	Maglagay ng backdrop sa katawan habang bukas ang offcanvas
`keyboard`	boolean	`true`	Isinasara ang offcanvas kapag pinindot ang escape key
`scroll`	boolean	`false`	Payagan ang body scrolling habang bukas ang offcanvas

Paraan

Mga asynchronous na pamamaraan at paglipat

Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .

Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .

Ina-activate ang iyong content bilang isang offcanvas na elemento. Tumatanggap ng opsyonal na opsyon object.

Maaari kang lumikha ng isang offcanvas na instance kasama ang constructor, halimbawa:

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

Pamamaraan	Paglalarawan
`toggle`	I-toggle ang isang offcanvas na elemento sa ipinapakita o nakatago. Bumabalik sa tumatawag bago ang offcanvas na elemento ay aktwal na naipakita o naitago (ibig sabihin, bago mangyari ang `shown.bs.offcanvas`o `hidden.bs.offcanvas`kaganapan).
`show`	Nagpapakita ng offcanvas na elemento. Bumabalik sa tumatawag bago ang offcanvas na elemento ay aktwal na naipakita (ibig sabihin, bago `shown.bs.offcanvas`mangyari ang kaganapan).
`hide`	Itinatago ang isang offcanvas na elemento. Bumabalik sa tumatawag bago pa talaga naitago ang offcanvas na elemento (ibig sabihin, bago `hidden.bs.offcanvas`mangyari ang kaganapan).
`getInstance`	Static na paraan na nagbibigay-daan sa iyong makuha ang offcanvas na instance na nauugnay sa isang elemento ng DOM
`getOrCreateInstance`	Static na paraan na nagbibigay-daan sa iyong makuha ang offcanvas na instance na nauugnay sa isang elemento ng DOM, o gumawa ng bago kung sakaling hindi ito nasimulan

Mga kaganapan

Ang offcanvas class ng Bootstrap ay naglalantad ng ilang kaganapan para sa pag-hook sa offcanvas functionality.

Uri ng kaganapan	Paglalarawan
`show.bs.offcanvas`	Agad na gagana ang kaganapang ito kapag `show`tinawag ang paraan ng instance.
`shown.bs.offcanvas`	Ang kaganapang ito ay pinapagana kapag ang isang offcanvas na elemento ay ginawang nakikita ng user (maghihintay na makumpleto ang mga transition ng CSS).
`hide.bs.offcanvas`	Ang kaganapang ito ay agad na pinapagana kapag ang `hide`pamamaraan ay tinawag na.
`hidden.bs.offcanvas`	Ang kaganapang ito ay pinapagana kapag ang isang offcanvas na elemento ay naitago mula sa user (maghihintay na makumpleto ang mga transition ng CSS).

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

Offcanvas

Paano ito gumagana

Mga halimbawa

Mga bahagi ng offcanvas

Offcanvas

Live na demo

Offcanvas

Paglalagay

Offcanvas sa itaas

Offcanvas tama

Offcanvas sa ibaba

Backdrop

May kulay na may pag-scroll

Offcanvas na may backdrop

Naka-backdrop sa pag-scroll

Accessibility

Sass

Mga variable

Paggamit

Sa pamamagitan ng mga katangian ng data

Sa pamamagitan ng JavaScript

Mga pagpipilian

Paraan

Mga asynchronous na pamamaraan at paglipat

Mga kaganapan