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

Ang sulud alang sa offcanvas moadto dinhi. Mahimo nimong ibutang ang bisan unsang bahin sa Bootstrap o naandan nga mga elemento dinhi.

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

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.

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

Pagpahimutang

Walay default placement para sa offcanvas nga mga sangkap, 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.

...

<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

Ang pag-scroll sa <body>elemento ma-disable kung ang usa ka offcanvas ug ang backdrop niini makita. Gamita ang data-bs-scrollattribute aron i-toggle ang <body>scrolling ug data-bs-backdropi-toggle ang backdrop.

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

.....

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

<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

Tungod kay ang offcanvas panel kay konsepto nga modal dialog, siguroha 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.

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

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-bottomnagtago sa offcanvas sa ubos

Pagdugang ug dismiss nga buton nga adunay data-bs-dismiss="offcanvas"attribute, nga nagpalihok sa JavaScript functionality. Siguruha nga gamiton ang <button>elemento uban niini alang sa husto nga pamatasan sa tanan nga mga aparato.

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 pagdismiss gikan sa gawas sa offcanvas dili motakdo sa WAI-ARIA modal dialog design pattern . Buhata kini sa imong kaugalingong risgo.

Pinaagi sa JavaScript

I-enable ang mano-mano gamit ang:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-bs-, sama sa data-bs-backdrop="".

Ngalan	Matang	Default	Deskripsyon
`backdrop`	boolean	`true`	Ibutang ang backdrop sa lawas samtang bukas ang offcanvas
`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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Pamaagi	Deskripsyon
`toggle`	I-toggle ang offcanvas nga elemento aron ipakita o gitago. Mibalik sa nagtawag sa wala pa ang offcanvas nga elemento sa aktuwal nga gipakita o gitago (ie sa wala pa mahitabo ang `shown.bs.offcanvas`o `hidden.bs.offcanvas`panghitabo).
`show`	Nagpakita ug offcanvas nga elemento. Mibalik sa nagtawag sa wala pa ipakita ang elemento sa offcanvas (ie sa wala pa `shown.bs.offcanvas`mahitabo ang panghitabo).
`hide`	Nagtago ug offcanvas nga elemento. Mibalik sa nagtawag sa wala pa ang offcanvas nga elemento gitago (ie sa wala pa `hidden.bs.offcanvas`mahitabo ang panghitabo).
`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.

Mga panghitabo

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

Uri sa panghitabo	Deskripsyon
`show.bs.offcanvas`	Kini nga panghitabo nagdilaab dayon kung ang `show`pamaagi 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).
`hide.bs.offcanvas`	Kini nga panghitabo gipabuto dayon kung ang `hide`pamaagi 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).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Giunsa kini paglihok

Mga pananglitan

Offcanvas nga mga sangkap

Offcanvas

Live nga demo

Offcanvas

Pagpahimutang

Ibabaw sa canvas

Offcanvas nga tama

Offcanvas ubos

Backdrop

Gikoloran sa pag-scroll

Offcanvas nga adunay backdrop

Backdrop nga adunay pag-scroll

Accessibility

Sass

Mga variable

Paggamit

Pinaagi sa data attributes

Toggle

Isalikway

Pinaagi sa JavaScript

Mga kapilian

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Mga panghitabo