Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
in English

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 pagiging naa-access .

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.

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

Offcanvas sa itaas
... 
<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 tama
... 
<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 sa ibaba
... 
<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.

May kulay na may pag-scroll

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

Offcanvas na may backdrop

.....

Backdrop na may pag-scroll

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

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

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

I-toggle

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 isang CSS selector para ilapat ang offcanvas. Tiyaking idagdag ang klase offcanvassa offcanvas na elemento. Kung gusto mo itong maging default na bukas, idagdag ang karagdagang klase show.

I-dismiss

Maaaring makamit ang pag-dismiss gamit ang dataattribute sa isang button sa loob ng offcanvas gaya ng ipinapakita sa ibaba:

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

o sa isang button sa labas ng offcanvas gamit ang data-bs-targettulad ng ipinapakita sa ibaba:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Bagama't sinusuportahan ang parehong paraan ng pag-dismiss ng offcanvas, tandaan na ang pag-dismiss mula sa labas ng offcanvas ay hindi tumutugma sa WAI-ARIA modal dialog design pattern . Gawin ito sa iyong sariling peligro.

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.offcanvaso hidden.bs.offcanvaskaganapan).
show Nagpapakita ng offcanvas na elemento. Bumabalik sa tumatawag bago ang offcanvas na elemento ay aktwal na naipakita (ibig sabihin, bago shown.bs.offcanvasmangyari 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.offcanvasmangyari 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 showtinawag 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 hidepamamaraan 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...
})