Offcanvas

Ku dhis baararka qarsoon mashruucaaga hagidda, gawaarida wax iibsiga, iyo wax ka badan oo leh dhawr fasal iyo plugin JavaScript.

Boggan

Sida ay u shaqeyso

Offcanvas waa qayb dhinac ah oo lagu rogi karo JavaScript si ay uga muuqato bidix, midig, ama cidhifka hoose ee daawashada. Badhamada ama barroosinnada waxaa loo isticmaalaa kiciyeyaasha ku dheggan walxo gaar ah oo aad beddesho, sifadana datawaxa loo isticmaalaa in lagu yeedho JavaScript-kayaga.

Offcanvas waxa ay la wadaagtaa qaar ka mid ah koodka JavaScript ee moodalka. Fikrad ahaan, aad bay isugu dhow yihiin, laakiin waa plugins gaar ah.
Sidoo kale, qaar ka mid ah ilaha Sass doorsoomayaasha qaababka offcanvas iyo cabbirada ayaa laga dhaxlay doorsoomayaasha modal.
Marka la tuso, offcanvas waxaa ku jira meel aan toos ahayn oo la riixi karo si loo qariyo dusha ka baxsan.
Si la mid ah moodooyinka, hal mar oo kaliya ayaa la tusi karaa shisheeyaha.

Madaxa kor u qaad! Marka la eego sida ay CSS u maamusho animations, ma isticmaali kartid marginama ma isticmaali translatekartid shay .offcanvas. Taa beddelkeeda, u isticmaal fasalka sidii curiye duubid oo madaxbannaan.

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Tusaalooyinka

Qaybaha Offcanvas

Hoos waxaa ku yaal tusaale ka baxsan kanvas oo lagu muujiyey si toos ah (oo loo sii marayo .show) .offcanvas. Offcanvas waxaa ka mid ah taageerada madaxa oo leh badhanka u dhow iyo fasalka jidhka ikhtiyaariga ah ee bilowga ah padding. Waxaan kuu soo jeedineynaa inaad ku darto madax-madax ka baxsan oo leh ficillada la eryo mar kasta oo ay suurtagal tahay, ama bixi tallaabo cayr ah oo cad.

Waxyaalaha ku saabsan dusha canvas-ka ayaa tagta halkan. Waxaad meel dhigi kartaa wax kasta oo ka kooban Bootstrap ama canaasiirta gaarka ah halkan.

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

Muujinta tooska ah

Isticmaal badhannada hoose si aad u muujiso oo aad u qariso curiyaha bannaanka ah adigoo isticmaalaya JavaScript kaas oo u rogaya .showfasalka curiyaha .offcanvasfasalka.

.offcanvaswaxa uu qarinayaa (default)
.offcanvas.showwaxay muujinaysaa nuxurka

Waxaad isticmaali kartaa xiriiriye leh hrefsifada, ama badhan sifada leh data-bs-target. Labada xaaladoodba, data-bs-toggle="offcanvas"waa loo baahan yahay.

Ku xidh href

Qoraal qaar ka mid ah sida meeleeyaha. Nolosha dhabta ah waxaad yeelan kartaa walxaha aad dooratay. Sida, qoraalka, sawirada, liisaska, iwm.

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

Meelaynta

Ma jirto meelayn gaar ah oo loogu talagalay qaybaha canvas-ka-baxsan, markaa waa inaad ku dartaa mid ka mid ah fasallada wax ka beddelka ee hoose;

.offcanvas-startmeel kabaxsan dhanka bidix ee daawashada (kor lagu muujiyay)
.offcanvas-enddhigaya offcanvas dhanka midig ee daawashada
.offcanvas-topmeela offcanvas dusha sare ee daawashada
.offcanvas-bottomdhigaya offcanvas xagga hoose ee daawashada

Isku day tusaalooyinka sare, midig, iyo hoose ee hoose.

...

<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

Duubista <body>cunsurka waa naafo marka dusha sare iyo gadaashiisa la arko. Isticmaal data-bs-scrollsifada si aad u rogto rog -rogid <body>oo data-bs-backdropaad u rogato gadaasha dambe.

Isku day inaad rogto bogga intiisa kale si aad u aragto doorashadan ficil ahaan.

......

Isku day inaad rogto bogga intiisa kale si aad u aragto doorashadan ficil ahaan.

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

Helitaanka

Since the offcanvas panel is conceptually a modal dialog, be sure to add aria-labelledby="..."—referencing the offcanvas title—to .offcanvas. Note that you don’t need to add role="dialog" since we already add it via JavaScript.

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;

Usage

The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:

.offcanvas hides the content
.offcanvas.show shows the content
.offcanvas-start hides the offcanvas on the left
.offcanvas-end hides the offcanvas on the right
.offcanvas-bottom hides the offcanvas on the bottom

Add a dismiss button with the data-bs-dismiss="offcanvas" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

Via 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...
})

Offcanvas

Sida ay u shaqeyso

Tusaalooyinka

Qaybaha Offcanvas

Offcanvas

Muujinta tooska ah

Offcanvas

Meelaynta

dusha ka baxsan

Offcanvas midig

Offcanvas hoose

Backdrop

Midab leh duubid

Offcanvas oo leh gadaal

Dul-dhac leh rogid

Helitaanka

Sass

Variables

Usage

Via data attributes

Toggle

Dismiss

Via JavaScript

Options

Methods

Asynchronous methods and transitions

Events