Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
in English

Offcanvas

Paghimo ug mga tinago nga sidebars sa imong proyekto para sa nabigasyon, shopping cart, ug uban pa gamit ang pipila ka klase ug among JavaScript plugin.

Niini nga panid

Giunsa kini paglihok

Ang Offcanvas usa ka bahin sa sidebar nga mahimong i-toggle pinaagi sa JavaScript aron makita gikan sa wala, tuo, ibabaw, o ubos nga ngilit sa viewport. Ang mga butones o angkla gigamit isip mga trigger nga gilakip sa piho nga mga elemento nga imong i-toggle, ug dataang mga hiyas gigamit aron sa paggamit sa among JavaScript.

  • Gipaambit sa Offcanvas ang pipila sa parehas nga code sa JavaScript sama sa modals. Sa konsepto, parehas sila, apan lahi sila nga mga plugin.
  • Sa susama, ang pipila ka tinubdan nga Sass variables alang sa offcanvas's styles ug dimensyon kay napanunod gikan sa modal's variables.
  • Kung gipakita, ang offcanvas naglakip sa default nga backdrop nga mahimong i-klik aron itago ang offcanvas.
  • Sama sa modals, usa ra ka offcanvas ang mahimong ipakita sa usa ka higayon.

Taas ang ulo! Gihatag kung giunsa pagdumala sa CSS ang mga animation, dili nimo magamit margino translatesa usa ka .offcanvaselemento. Hinuon, gamita ang klase isip usa ka independente nga elemento sa pagputos.

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Mga pananglitan

Offcanvas nga mga sangkap

Sa ubos usa ka pananglitan sa offcanvas nga gipakita pinaagi sa default (pinaagi .showsa .offcanvas). Ang Offcanvas naglakip sa suporta alang sa usa ka header nga adunay close button ug usa ka opsyonal nga body class para sa pipila ka inisyal nga padding. Among gisugyot nga iapil nimo ang mga offcanvas nga mga header nga adunay mga aksyon nga i-dismiss kung mahimo, o maghatag usa ka klaro nga aksyon sa pagtangtang.

Offcanvas
Ang sulud alang sa offcanvas moadto dinhi. Mahimo nimong ibutang ang bisan unsang bahin sa Bootstrap o naandan nga mga elemento dinhi.
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 nga demo

Gamita ang mga buton sa ubos aron ipakita ug itago ang usa ka offcanvas nga elemento pinaagi sa JavaScript nga mag-toggle sa .showklase sa usa ka elemento sa .offcanvasklase.

  • .offcanvasnagtago sa sulod (default)
  • .offcanvas.shownagpakita sa sulod

Mahimo nimong gamiton ang usa ka link nga adunay hrefattribute, o usa ka buton nga adunay data-bs-targetattribute. Sa duha ka mga kaso, ang data-bs-toggle="offcanvas"gikinahanglan.

Pagsumpay sa href
Offcanvas
Ang ubang teksto isip placeholder. Sa tinuud nga kinabuhi mahimo nimong makuha ang mga elemento nga imong gipili. Sama, teksto, mga imahe, mga lista, ug uban pa.
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 sa lawas

Ang pag-scroll sa <body>elemento ma-disable kung ang usa ka offcanvas ug ang backdrop niini makita. Gamita ang data-bs-scrollhiyas aron mahimo ang pag- <body>scroll.

Offcanvas nga adunay pag-scroll sa lawas

Sulayi ang pag-scroll sa nahabilin nga panid aron makita kini nga kapilian nga molihok.

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 sa lawas ug backdrop

Mahimo usab nimo nga mahimo ang pag- <body>scroll nga adunay makita nga backdrop.

Backdrop nga adunay pag-scroll

Sulayi ang pag-scroll sa nahabilin nga panid aron makita kini nga kapilian nga molihok.

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

Kung ang backdrop gibutang sa static, ang offcanvas dili magsira kung mag-klik sa gawas niini.

Offcanvas
Dili ko magsira kung mag-klik ka sa gawas nako.
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>

Ngitngit nga offcanvas

Gidugang sa v5.2.0

Usba ang dagway sa mga offcanvases nga adunay mga utilities aron mas mapares kini sa lain-laing konteksto sama sa mga dark navbar. Dinhi atong idugang .text-bg-darkang .offcanvasug .btn-close-whitesa .btn-closepara sa hustong pag-istilo gamit ang ngitngit nga offcanvas. Kung ikaw adunay mga dropdown sa sulod, hunahunaa usab ang pagdugang .dropdown-menu-darksa .dropdown-menu.

Offcanvas

Ibutang ang sulod sa offcanvas dinhi.

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>

Makatubag

Gidugang sa v5.2.0

Ang mga responsive nga offcanvas nga mga klase nagtago sa sulod sa gawas sa viewport gikan sa usa ka piho nga breakpoint ug paubos. Sa ibabaw niana nga breakpoint, ang sulod sa sulod maggawi sama sa naandan. Pananglitan, .offcanvas-lgnagtago sa sulod sa usa ka offcanvas ubos sa lgbreakpoint, apan nagpakita sa sulod sa ibabaw sa lgbreakpoint.

I-resize ang imong browser aron ipakita ang responsive offcanvas toggle.
Responsive nga offcanvas

Kontento kini sulod sa usa ka .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>

Ang mga responsive nga offcanvas nga mga klase magamit sa matag breakpoint.

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

Pagpahimutang

Walay default placement para sa offcanvas nga mga component, mao nga kinahanglan nimong idugang ang usa sa mga klase sa modifier sa ubos.

  • .offcanvas-startibutang ang offcanvas sa wala sa viewport (gipakita sa ibabaw)
  • .offcanvas-endibutang ang offcanvas sa tuo sa viewport
  • .offcanvas-topibutang ang offcanvas sa ibabaw sa viewport
  • .offcanvas-bottomibutang ang offcanvas sa ubos sa viewport

Sulayi ang ibabaw, tuo, ug ubos nga mga pananglitan sa ubos.

Ibabaw sa canvas
...
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 nga 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 ubos
...
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

Tungod kay ang offcanvas panel kay konsepto nga modal dialog, siguruha nga idugang aria-labelledby="..."—nga nag-refer sa offcanvas nga titulo—sa .offcanvas. Timan-i nga dili nimo kinahanglan nga idugang role="dialog"tungod kay gidugang na namo kini pinaagi sa JavaScript.

CSS

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang offcanvas karon naggamit sa lokal nga CSS variables sa .offcanvaspara sa gipaayo nga real-time nga customization. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

  --#{$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 variables

$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

Ang offcanvas plugin naggamit sa pipila ka mga klase ug mga hiyas sa pagdumala sa bug-at nga pag-alsa:

  • .offcanvasnagtago sa sulod
  • .offcanvas.shownagpakita sa sulod
  • .offcanvas-startgitago ang offcanvas sa wala
  • .offcanvas-endnagtago sa offcanvas sa tuo
  • .offcanvas-topnagtago sa offcanvas sa ibabaw
  • .offcanvas-bottomnagtago sa offcanvas sa ubos

Pagdugang ug dismiss nga buton nga adunay data-bs-dismiss="offcanvas"attribute, nga nagpalihok sa JavaScript functionality. Siguroha nga gamiton ang <button>elemento uban niini alang sa husto nga kinaiya sa tanang mga himan.

Pinaagi sa data attributes

Toggle

Idugang data-bs-toggle="offcanvas"ug a data-bs-targeto hrefsa elemento aron awtomatiko nga ma-assign ang kontrol sa usa ka offcanvas nga elemento. Ang data-bs-targetattribute modawat ug CSS selector para magamit ang offcanvas. Siguroha nga idugang ang klase offcanvassa offcanvas nga elemento. Kung gusto nimo nga kini nga default bukas, idugang ang dugang nga klase show.

Isalikway

Ang pagtangtang mahimong makab-ot gamit ang dataattribute sa usa ka buton sulod sa offcanvas sama sa gipakita sa ubos:

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

o sa usa ka buton sa gawas sa offcanvas gamit ang data-bs-targetgipakita sa ubos:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Samtang gisuportahan ang duha ka paagi sa pag-dismiss sa offcanvas, hinumdomi nga ang pag-dismiss gikan sa gawas sa offcanvas dili motakdo sa ARIA Authoring Practices Guide dialog (modal) pattern . Buhata kini sa imong kaugalingong risgo.

Pinaagi sa JavaScript

I-enable ang mano-mano gamit ang:

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

Mga kapilian

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Ngalan Matang Default Deskripsyon
backdrop boolean o ang stringstatic true Ibutang ang backdrop sa lawas samtang bukas ang offcanvas. Sa laing paagi, itakda staticang usa ka backdrop nga dili magsira sa offcanvas kung gi-klik.
keyboard boolean true Pagsira sa offcanvas kung ang escape key gipugos.
scroll boolean false Tugoti ang pag-scroll sa lawas samtang bukas ang offcanvas.

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

Gi-aktibo ang imong sulud ingon usa ka elemento sa offcanvas. Modawat ug opsyonal nga mga kapilian object.

Makahimo ka og offcanvas nga instance sa constructor, pananglitan:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Pamaagi Deskripsyon
getInstance Static nga pamaagi nga nagtugot kanimo sa pagkuha sa offcanvas nga instance nga may kalabutan sa usa ka DOM nga elemento.
getOrCreateInstance Static nga pamaagi nga nagtugot kanimo sa pagkuha sa offcanvas nga instance nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.
hide Nagtago sa usa ka elemento sa offcanvas. Mibalik sa nagtawag sa wala pa ang offcanvas nga elemento gitago (ie sa wala pa hidden.bs.offcanvasmahitabo ang panghitabo).
show Nagpakita ug offcanvas nga elemento. Mibalik sa nagtawag sa wala pa ipakita ang elemento sa offcanvas (ie sa wala pa shown.bs.offcanvasmahitabo ang panghitabo).
toggle I-toggle ang offcanvas nga elemento aron ipakita o gitago. Mibalik sa nagtawag sa wala pa ang offcanvas nga elemento sa tinuod gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.offcanvaso hidden.bs.offcanvaspanghitabo).

Mga panghitabo

Ang offcanvas nga klase sa Bootstrap nagbutyag sa pipila ka mga panghitabo alang sa pag-hook sa offcanvas nga gamit.

Uri sa panghitabo Deskripsyon
hide.bs.offcanvas Kini nga panghitabo gipabuto dayon kung ang hidepamaagi gitawag na.
hidden.bs.offcanvas Kini nga panghitabo gipabuto kung ang usa ka offcanvas nga elemento gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
hidePrevented.bs.offcanvas Kini nga panghitabo gipabuto kung ang offcanvas gipakita, ang backdrop niini staticug ang pag-klik sa gawas sa offcanvas gihimo. Ang panghitabo gipabuto usab kung ang escape key gipugos ug ang keyboardkapilian gibutang sa false.
show.bs.offcanvas Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
shown.bs.offcanvas Kini nga panghitabo gipabuto kung ang usa ka offcanvas nga elemento nahimo nang makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})