Lumaktaw sa pangunahing nilalaman Lumaktaw sa docs navigation
Check
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, itaas, 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.
html 
<div class="offcanvas offcanvas-start show" 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" 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.
html 
<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

Pag-scroll ng katawan

Ang pag-scroll sa <body>elemento ay hindi pinagana kapag ang isang offcanvas at ang backdrop nito ay nakikita. Gamitin ang data-bs-scrollkatangian upang paganahin ang <body>pag-scroll.

Offcanvas na may body scrolling

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

html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

Pag-scroll ng katawan at backdrop

Maaari mo ring paganahin ang <body>pag-scroll na may nakikitang backdrop.

Backdrop na may pag-scroll

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

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

Static na backdrop

Kapag nakatakda ang backdrop sa static, hindi magsasara ang offcanvas kapag nagki-click sa labas nito.

Offcanvas
Hindi ako magsasara kung mag-click ka sa labas ko.
html 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

Madilim na offcanvas

Idinagdag sa v5.2.0

Baguhin ang hitsura ng mga offcanvases na may mga utility para mas maitugma ang mga ito sa iba't ibang konteksto tulad ng mga dark navbar. Dito kami nagdaragdag .text-bg-darksa .offcanvasat .btn-close-whitesa .btn-closepara sa tamang pag-istilo na may madilim na offcanvas. Kung mayroon kang mga dropdown sa loob, isaalang-alang din ang pagdaragdag .dropdown-menu-darksa .dropdown-menu.

Offcanvas

Ilagay ang offcanvas na nilalaman dito.

html 
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

Tumutugon

Idinagdag sa v5.2.0

Ang mga tumutugong offcanvas na klase ay nagtatago ng content sa labas ng viewport mula sa isang tinukoy na breakpoint at pababa. Sa itaas ng breakpoint na iyon, ang mga nilalaman sa loob ay kikilos gaya ng dati. Halimbawa, .offcanvas-lgnagtatago ng content sa isang offcanvas sa ibaba ng lgbreakpoint, ngunit ipinapakita ang content sa itaas ng lgbreakpoint.

Baguhin ang laki ng iyong browser para ipakita ang tumutugon na offcanvas toggle.
Tumutugon sa offcanvas

Ito ay nilalaman sa loob ng isang .offcanvas-lg.

html 
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

Available ang mga tumutugong offcanvas na klase para sa bawat breakpoint.

  • .offcanvas
  • .offcanvas-sm
  • .offcanvas-md
  • .offcanvas-lg
  • .offcanvas-xl
  • .offcanvas-xxl

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
...
html 
<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas tama
...
html 
<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
Offcanvas sa ibaba
...
html 
<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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.

CSS

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, gumagamit na ngayon ang offcanvas ng mga lokal na variable ng CSS .offcanvaspara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass 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-topItinatago ang offcanvas sa itaas
  • .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 para mag-dismiss ng offcanvas, tandaan na ang pag-dismiss mula sa labas ng offcanvas ay hindi tumutugma sa pattern ng dialog (modal) ng ARIA Authoring Practices Guide . Gawin ito sa iyong sariling peligro.

Sa pamamagitan ng JavaScript

Paganahin nang manu-mano gamit ang:

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Mga pagpipilian

Dahil maaaring maipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript, maaari kang magdagdag ng pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-animation="{value}". Siguraduhing baguhin ang uri ng case ng pangalan ng opsyon mula sa " camelCase " sa " kebab-case " kapag ipinapasa ang mga opsyon sa pamamagitan ng mga katangian ng data. Halimbawa, gamitin data-bs-custom-class="beautifier"sa halip na data-bs-customClass="beautifier".

Mula sa Bootstrap 5.2.0, sinusuportahan ng lahat ng mga bahagi ang isang pang- eksperimentong nakalaan na katangian ng data data-bs-configna maaaring maglagay ng simpleng configuration ng bahagi bilang isang string ng JSON. Kapag ang isang elemento ay may data-bs-config='{"delay":0, "title":123}'at data-bs-title="456"mga katangian, ang huling titlehalaga ay magiging 456at ang hiwalay na mga katangian ng data ay mag-o-override sa mga halagang ibinigay sa data-bs-config. Bilang karagdagan, ang mga kasalukuyang katangian ng data ay nakakapaglagay ng mga halaga ng JSON tulad ng data-bs-delay='{"show":0,"hide":150}'.

Pangalan Uri Default Paglalarawan
backdrop boolean o ang stringstatic true Maglagay ng backdrop sa katawan habang bukas ang offcanvas. Bilang kahalili, tumukoy staticpara sa isang backdrop na hindi nagsasara ng offcanvas kapag na-click.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Pamamaraan Paglalarawan
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.
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).
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).
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).

Mga kaganapan

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

Uri ng kaganapan Paglalarawan
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).
hidePrevented.bs.offcanvas Ang kaganapang ito ay pinapagana kapag ang offcanvas ay ipinakita, ang backdrop nito staticat ang isang pag-click sa labas ng offcanvas ay ginanap. Ang kaganapan ay gagana rin kapag ang escape key ay pinindot at ang keyboardopsyon ay nakatakda sa false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})