Svetuka kune chikuru content Svetuka kuenda kudocs navigation
in English

Offcanvas

Vaka akavanzwa eparutivi mupurojekiti yako yekufambisa, ngoro dzekutenga, uye nezvimwe nemakirasi mashoma uye yedu JavaScript plugin.

Pa peji ino

Zvinoshanda sei

Offcanvas chikamu chepadivi chinogona kuchinjika kuburikidza neJavaScript kuti ioneke kubva kuruboshwe, kurudyi, kana kuzasi kumucheto kwenzvimbo yekuona. Mabhatani kana zvibatiso zvinoshandiswa sezvinokonzeresa zvakanamirwa kune chaiwo zvinhu zvaunoshandura, uye datahunhu hunoshandiswa kudaidza JavaScript yedu.

  • Offcanvas inogovera imwe yakafanana JavaScript kodhi semodals. Conceptually, iwo akafanana, asi iwo akasiyana plugins.
  • Saizvozvo, mamwe masosi eSass akasiyana ezvitaera zveoffcanvas uye zviyero zvakagarwa nhaka kubva kumhando dzemodal.
  • Kana yaratidzwa, offcanvas inosanganisira yekumashure iyo inogona kudzvanywa kuviga offcanvas.
  • Zvakafanana nemodals, imwe chete offcanvas inogona kuratidzwa panguva.

Musoro! Tichifunga mabatiro anoita CSS mifananidzo, haugone kushandisa marginkana translatepane .offcanvaschinhu. Pane kudaro, shandisa kirasi sechinhu chakazvimirira chekuputira chinhu.

Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Mienzaniso

Offcanvas components

Pazasi pane offcanvas muenzaniso unoratidzwa nekumisikidza (kuburikidza ne .show) .offcanvas. Offcanvas inosanganisira tsigiro yemusoro une bhatani repedyo uye sarudzo yekirasi yemuviri kune imwe yekutanga padding. Isu tinokurudzira kuti ubatanidze misoro yeoffcanvas ine zviito zvekudzinga pese pazvinogoneka, kana kuti upe chiito chakajeka chekudzinga.

Offcanvas
Zvemukati zve offcanvas zvinoenda pano. Unogona kuisa chero chinhu cheBootstrap kana tsika zvinhu pano. 
<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 demo

Shandisa mabhatani ari pazasi kuratidza uye kuvanza chinhu cheoffcanvas kuburikidza neJavaScript chinoshandura .showkirasi pane chimwe chinhu .offcanvasnekirasi.

  • .offcanvasinoviga zvirimo (default)
  • .offcanvas.showinoratidza zvirimo

Unogona kushandisa chinongedzo chine hrefhunhu, kana bhatani rine data-bs-targethunhu. Muzviitiko zvose izvi, data-bs-toggle="offcanvas"zvinodiwa.

Batanidza ne href
Offcanvas
Mamwe mavara sechibatiso. Muhupenyu iwe unogona kuva nezvinhu zvawakasarudza. Kufanana, zvinyorwa, mifananidzo, zvinyorwa, nezvimwe. 
<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>

Placement

Iko hakuna kugadzika kwekuisirwa kwe offcanvas zvikamu, saka iwe unofanirwa kuwedzera imwe yemakirasi ekugadzirisa pazasi;

  • .offcanvas-startinoisa kunze kwecanvas kuruboshwe rwenzvimbo yekuona (inoratidzwa pamusoro)
  • .offcanvas-endinoisa offcanvas kurudyi kwenzvimbo yekuona
  • .offcanvas-topinoisa offcanvas pamusoro peiyo viewport
  • .offcanvas-bottominoisa offcanvas pazasi penzvimbo yekuona

Edza mienzaniso yepamusoro, yekurudyi, uye yepasi pasi apa.

Offcanvas pamusoro
... 
<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 right
... 
<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 pasi
... 
<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

Kupeta <body>chinhu kunovharwa kana offcanvas uye kumashure kwayo kuchionekwa. Shandisa data-bs-scrollhunhu kushandura <body>kupuruzira uye data-bs-backdropkushandura kumashure.

Colored nekupuruzira

Edza kupuruzira peji rese kuti uone sarudzo iyi ichishanda.

Offcanvas ine kumashure

.....

Kumashure nekupuruzira

Edza kupuruzira peji rese kuti uone sarudzo iyi ichishanda.

<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

Sezvo offcanvas panel iri conceptually imodal dialog, iva nechokwadi chekuwedzera aria-labelledby="..."-inoreva zita reoffcanvas - ku .offcanvas. Ziva kuti haufanire kuwedzera role="dialog"sezvo isu tatozviwedzera kuburikidza neJavaScript.

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

Iyo offcanvas plugin inoshandisa mashoma makirasi uye hunhu kubata inorema kusimudza:

  • .offcanvasinovanza zviri mukati
  • .offcanvas.showinoratidza zviri mukati
  • .offcanvas-startinovanza offcanvas kuruboshwe
  • .offcanvas-endinovanza offcanvas kurudyi
  • .offcanvas-bottominovanza offcanvas pazasi

Wedzera bhatani rekudzinga nehunhu data-bs-dismiss="offcanvas", izvo zvinokonzeresa kushanda kweJavaScript. Iva nechokwadi chekushandisa <button>chinhu nacho kuita zvakanaka pamidziyo yese.

Via data hunhu

Toggle

Wedzera data-bs-toggle="offcanvas"uye a data-bs-targetkana hrefkuchinhu kuti ugozvigadzika kutonga kweimwe offcanvas chinhu. Hunhu data-bs-targethunogamuchira CSS selector yekushandisa iyo offcanvas kune. Iva nechokwadi chekuwedzera kirasi offcanvaskune offcanvas element. Kana uchida kuti risavhurika, wedzera imwe kirasi show.

Dzinga

Kudzingwa kunogona kuwanikwa nehunhu datahuri pabhatani mukati meiyo offcanvas sezvakaratidzwa pazasi:

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

kana pane bhatani kunze kweiyo offcanvas uchishandisa sezvaratidzwa data-bs-targetpazasi:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Nepo nzira mbiri dzekudzinga kanivhasi dzichitsigirwa, ziva kuti kubvisa kunze kwecanvas hakuenderane neWAI -ARIA modal dialog design pattern . Ita izvi nengozi yako.

Via JavaScript

Vhura nemaoko ne:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-bs-, semu data-bs-backdrop="".

Zita Type Default Tsanangudzo
backdrop boolean true Isa kumashure kwemuviri apo offcanvas yakavhurika
keyboard boolean true Inovhara offcanvas kana kiyi yekutiza ikadzvanywa
scroll boolean false Bvumira kutenderera kwemuviri apo offcanvas yakavhurika

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo .

Inomisikidza zvirimo sechinhu che offcanvas. Inobvuma sarudzo dzaungada object.

Iwe unogona kugadzira imwe offcanvas muenzaniso nemugadziri, semuenzaniso:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Nzira Tsanangudzo
toggle Inoshandura chinhu che offcanvas kuratidza kana kuvanzwa. Inodzokera kune arikufona chinhu che offcanvas chisati charatidzwa kana kuvanzwa (kureva kuti shown.bs.offcanvaskana hidden.bs.offcanvaschiitiko chisati chaitika).
show Inoratidza chinhu cheoffcanvas. Inodzokera kune arikufona chinhu che offcanvas chisati charatidzwa (kureva kuti shown.bs.offcanvaschiitiko chisati chaitika).
hide Inoviga chinhu cheoffcanvas. Inodzokera kune ari kufona chinhu che offcanvas chisati chanyatsovanzwa (kureva kuti hidden.bs.offcanvaschiitiko chisati chaitika).
getInstance Static nzira iyo inokutendera iwe kuti uwane iyo offcanvas muenzaniso yakabatana neDOM chinhu
getOrCreateInstance Static nzira iyo inokutendera iwe kuti uwane iyo offcanvas muenzaniso yakabatana neDOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.

Zviitiko

Bootstrap's offcanvas kirasi inofumura zviitiko zvishoma zvekukochekera mukuita kwe offcanvas.

Chiitiko mhando Tsanangudzo
show.bs.offcanvas Ichi chiitiko chinopisa nekukasira kana shownzira yemuenzaniso inodanwa.
shown.bs.offcanvas Chiitiko ichi chinodzingwa kana chinhu cheoffcanvas chaitwa kuti chionekwe kumushandisi (chichamirira kuti CSS shanduko ipedze).
hide.bs.offcanvas Chiitiko ichi chinodzingwa pakarepo kana hidenzira yadaidzwa.
hidden.bs.offcanvas Chiitiko ichi chinodzingwa kana chinhu cheoffcanvas chakavanzwa kubva kumushandisi (chinomirira kuti CSS shanduko ipedze). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})