Svetuka kune chikuru content Svetuka kuenda kudocs navigation
Check
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, kumusoro, 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.
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 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.
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>

Body scrolling

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

Offcanvas ine body scrolling

Edza kupuruzira peji rese kuti uone sarudzo iyi ichishanda.

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>

Kutenderera kwemuviri uye kumashure

Iwe unogona zvakare kugonesa <body>kupuruzira neinooneka kumashure.

Kumashure nekupuruzira

Edza kupuruzira peji rese kuti uone sarudzo iyi ichishanda.

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 backdrop

Kana kuseri kwakaiswa kune static, iyo offcanvas haivhare kana uchidzvanya kunze kwayo.

Offcanvas
Ini handisi kuzovhara kana ukadzvanya kunze kwangu.
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>

Rima offcanvas

Yakawedzerwa mu v5.2.0

Chinja chitarisiko che offcanvases nezvishandiso kuti zvienzane zvirinani kune akasiyana mamiriro senge rima navbar. Pano isu tinowedzera .text-bg-darkkune .offcanvasuye .btn-close-whitekune .btn-closekwakakodzera styling ine yakasviba offcanvas. Kana iwe uine zvinodonha mukati, funga zvakare kuwedzera .dropdown-menu-darkkune .dropdown-menu.

Offcanvas

Isa zviri kunze kwecanvas pano.

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>

Anoteerera

Yakawedzerwa mu v5.2.0

Anopindura offcanvas makirasi anovanza zviri kunze kwenzvimbo yekutarisa kubva kune yakatarwa breakpoint uye pasi. Pamusoro peiyo breakpoint, zviri mukati zvinozoita semazuva ese. Semuenzaniso, .offcanvas-lginovanza zvirimo muoffcanvas pazasi pebreakpoint lg, asi inoratidza zviri pamusoro lgpeiyo breakpoint.

Rezesa bhurawuza rako kuratidza inopindura offcanvas toggle.
Inopindura offcanvas

Izvi zviri mukati me .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>

Anopindura offcanvas makirasi anowanikwa kune imwe neimwe breakpoint.

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

Placement

Iko hakuna kugadzika kwekuisa 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
...
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 right
...
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 pasi
...
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

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.

CSS

Variables

Yakawedzerwa mu v5.2.0

Sechikamu cheBootstrap's evolving CSS variables approach, offcanvas ikozvino inoshandisa yemunharaunda CSS madhizaini pakusimudzira .offcanvaschaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

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

$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-topinovanza offcanvas pamusoro
  • .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 hrefkune chinhu kuti ugozvigadzika kutonga kweimwe offcanvas chinhu. Hunhu data-bs-targethunogashira CSS selector yekushandisa iyo offcanvas ku. Ita shuwa yekuwedzera 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 dzese dziri mbiri dzekudzinga kanivhasi dzichitsigirwa, ziva kuti kubvisa kunze kwecanvas hakuenderane neARIA Authoring Practices Guide dialog (modal) pateni . Ita izvi nengozi yako.

Via JavaScript

Vhura nemaoko ne:

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

Options

Sezvo sarudzo dzichigona kupfuudzwa kuburikidza nedata hunhu kana JavaScript, unogona kuisa sarudzo zita ku data-bs-, semu data-bs-animation="{value}". Ita shuwa yekushandura mhando yekesi yezita resarudzo kubva ku " camelCase " kuenda ku " kebab-case " kana uchipfuura sarudzo kuburikidza ne data hunhu. Somuenzaniso, shandisa data-bs-custom-class="beautifier"pane data-bs-customClass="beautifier".

Kubva kuBootstrap 5.2.0, zvese zvinongedzo zvinotsigira muyedzo wakachengetedzwa data hunhu data-bs-confighunogona kuisa akareruka chechikamu kumisikidzwa setambo yeJSON. Kana chinhu chine data-bs-config='{"delay":0, "title":123}'uye data-bs-title="456"hunhu, kukosha kwekupedzisira titlekuchave 456uye iyo yakaparadzana data hunhu inodarika kukosha kwakapihwa pa data-bs-config. Pamusoro pezvo, hunhu huripo hwe data hunokwanisa kuisa hunhu hweJSON senge data-bs-delay='{"show":0,"hide":150}'.

Zita Type Default Tsanangudzo
backdrop boolean kana tambostatic true Isa kumashure kwemuviri apo offcanvas yakavhurika. Neimwe nzira, tsanangura statickune yekumashure isingavhare offcanvas kana wadzvanya.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Nzira Tsanangudzo
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.
hide Inoviga chinhu cheoffcanvas. Inodzokera kune ari kufona chinhu che offcanvas chisati chanyatsovanzwa (kureva kuti hidden.bs.offcanvaschiitiko chisati chaitika).
show Inoratidza chinhu cheoffcanvas. Inodzokera kune arikufona chinhu che offcanvas chisati charatidzwa (kureva kuti shown.bs.offcanvaschiitiko chisati chaitika).
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).

Zviitiko

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

Chiitiko mhando Tsanangudzo
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).
hidePrevented.bs.offcanvas Chiitiko ichi chinodzingwa kana offcanvas inoratidzwa, kumashure kwayo staticuye kudzvanya kunze kweiyo offcanvas kunoitwa. Chiitiko chacho chinodzingwawo kana kiyi yekupukunyuka ichidzvanywa uye keyboardsarudzo inoiswa ku false.
show.bs.offcanvas Ichi chiitiko chinopisa nekukasira kana shownzira yemuenzaniso inodanwa.
shown.bs.offcanvas Chiitiko ichi chinodzingwa kana chinhu che offcanvas chaitwa kuti chionekwe kumushandisi (chichamirira shanduko yeCSS kuti ipedze). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})