Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
in English

Offcanvas

Amboary ny sisiny miafina ao amin'ny tetikasanao ho an'ny fitetezana, sarety fiantsenana, ary maro hafa miaraka amin'ny kilasy vitsivitsy sy ny plugin JavaScript.

Amin'ity pejy ity

Ahoana ny fiasan'izany

Offcanvas dia singa sidebar izay azo avadika amin'ny alalan'ny JavaScript mba hiseho eo amin'ny sisiny havia, havanana, na ambany amin'ny seranan-tsambo. Ny bokotra na vatofantsika dia ampiasaina ho trigger izay miraikitra amin'ny singa manokana avadikao, ary datany toetra dia ampiasaina hiantsoana ny JavaScript.

  • Offcanvas dia mizara ny sasany amin'ireo kaody JavaScript mitovy amin'ny modals. Raha ny hevitra dia mitovy ihany izy ireo, saingy plugins misaraka.
  • Torak'izany ihany koa, ny fari-piainan'ny Sass loharano sasany ho an'ny fomba sy ny refin'ny offcanvas dia nolovaina tamin'ny fari-piainan'ny modal.
  • Rehefa aseho, ny offcanvas dia misy laha-vitrana mahazatra azo kitihina hanafenana ny offcanvas.
  • Mitovy amin'ny modals, offcanvas iray ihany no azo aseho amin'ny fotoana iray.

Fampitandremana! Raha jerena ny fomba fitantanana ny sary mihetsika ny CSS dia tsy afaka mampiasa marginna translateamin'ny .offcanvassinga iray ianao. Ampiasao kosa ny kilasy ho singa famonosana mahaleo tena.

Miankina amin'ny prefers-reduced-motionfangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

OHATRA

Offcanvas singa

Ity ambany ity ny ohatra offcanvas izay aseho amin'ny alàlan'ny default (amin'ny alàlan'ny .showon .offcanvas). Ny Offcanvas dia misy fanohanan'ny lohapejy misy bokotra akaiky sy kilasin'ny vatana tsy voatery ho an'ny padding. Manoro hevitra izahay ny hampidiranao lohapejy offcanvas miaraka amin'ny hetsika fandroahana raha azo atao, na manome hetsika fandroahana mazava.

Offcanvas
Ny votoatin'ny offcanvas dia mandeha eto. Azonao atao ny mametraka ny singa Bootstrap na singa manokana eto. 
<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 mivantana

Ampiasao ireo bokotra etsy ambany mba hampisehoana sy hanafenana singa iray ivelan'ny canvas amin'ny alàlan'ny JavaScript izay manodina ny .showkilasy amin'ny singa iray miaraka amin'ny .offcanvaskilasy.

  • .offcanvasmanafina atiny (default)
  • .offcanvas.showmampiseho votoaty

Azonao atao ny mampiasa rohy misy ilay hreftoetra, na bokotra misy ilay data-bs-targettoetra. Amin'ireo tranga roa ireo, data-bs-toggle="offcanvas"dia ilaina ny.

Rohy amin'ny href
Offcanvas
Lahatsoratra sasany toy ny toerana misy azy. Amin'ny tena fiainana dia afaka manana ireo singa nofidinao ianao. Tahaka, lahatsoratra, sary, lisitra, sns. 
<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>

fametrahana

Tsy misy fametrahana default ho an'ny singa offcanvas, noho izany dia tsy maintsy ampidirinao ny iray amin'ireo kilasy fanovana etsy ambany;

  • .offcanvas-startmametraka offcanvas eo ankavian'ny seranan-tsambo (aseho etsy ambony)
  • .offcanvas-endapetraka eo amin'ny sisiny ankavanan'ny seranan-tsambo
  • .offcanvas-topapetraka eo amin'ny tampon'ny seranan-tsambo
  • .offcanvas-bottomapetraho amin'ny lakandrano eo amin'ny faran'ny seranan-tsambo

Andramo ny ohatra ambony sy havanana ary ambany eto ambany.

Offcanvas ambony
... 
<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 havanana
... 
<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 ambany
... 
<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>

resahana

Tsy mandeha ny scrolling ilay <body>singa rehefa hita ny offcanvas sy ny lamosiny. Ampiasao ny data-bs-scrolltoetra hanodina ny <body>horonan-taratasy sy data-bs-backdrophanodinana ny lamosina.

Miloko miaraka amin'ny horonana

Andramo ny horonan-taratasy sisa amin'ny pejy hahitanao ity safidy ity.

Offcanvas misy lamosina

.....

Backdrop misy horonana

Andramo ny horonan-taratasy sisa amin'ny pejy hahitanao ity safidy ity.

<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

Koa satria ny tontolon'ny offcanvas dia fifanakalozan-kevitra amin'ny fomba fijery, aza hadino ny manampy aria-labelledby="..."— manondro ny lohatenin'ny offcanvas — amin'ny .offcanvas. Mariho fa tsy mila manampy ianao role="dialog"satria efa nampianay tamin'ny JavaScript.

Sass

hiovaova

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

Fampiasana

Ny plugin offcanvas dia mampiasa kilasy sy toetra vitsivitsy hiatrehana ny fampiakarana mavesatra:

  • .offcanvasmanafina ny votoatiny
  • .offcanvas.showmampiseho ny votoatiny
  • .offcanvas-startmanafina ny offcanvas eo ankavia
  • .offcanvas-endmanafina ny offcanvas eo ankavanana
  • .offcanvas-bottommanafina ny offcanvas eo ambany

Manampia bokotra fandroahana miaraka amin'ny data-bs-dismiss="offcanvas"toetra, izay miteraka ny fampiasa JavaScript. Ataovy azo antoka ny fampiasana ilay <button>singa miaraka aminy mba hahazoana fitondran-tena mety amin'ny fitaovana rehetra.

Amin'ny alàlan'ny data attributes

Toggle

Add data-bs-toggle="offcanvas" and a data-bs-target or href to the element to automatically assign control of one offcanvas element. The data-bs-target attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class offcanvas to the offcanvas element. If you’d like it to default open, add the additional class show.

Dismiss

Dismissal can be achieved with the data attribute on a button within the offcanvas as demonstrated below:

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

or on a button outside the offcanvas using the data-bs-target as demonstrated below:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match the WAI-ARIA modal dialog design pattern. Do this at your own risk.

Via JavaScript

Enable manually with:

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

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-backdrop="".

Name Type Default Description
backdrop boolean true Apply a backdrop on body while offcanvas is open
keyboard boolean true Closes the offcanvas when escape key is pressed
scroll boolean false Allow body scrolling while offcanvas is open

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Activates your content as an offcanvas element. Accepts an optional options object.

You can create an offcanvas instance with the constructor, for example:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Method Description
toggle Toggles an offcanvas element to shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden (i.e. before the shown.bs.offcanvas or hidden.bs.offcanvas event occurs).
show Shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown (i.e. before the shown.bs.offcanvas event occurs).
hide Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden (i.e. before the hidden.bs.offcanvas event occurs).
getInstance Static method which allows you to get the offcanvas instance associated with a DOM element
getOrCreateInstance Static method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn’t initialized

Events

Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.

Event type Description
show.bs.offcanvas This event fires immediately when the show instance method is called.
shown.bs.offcanvas This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.offcanvas This event is fired immediately when the hide method has been called.
hidden.bs.offcanvas This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})