Mine põhisisu juurde Jätke dokumentide navigeerimise juurde
Check
in English

Offcanvas

Ehitage mõne klassi ja meie JavaScripti pistikprogrammi abil oma projekti peidetud külgribad navigeerimiseks, ostukärude ja muu jaoks.

Sellel lehel

Kuidas see töötab

Offcanvas on külgriba komponent, mida saab JavaScripti kaudu lülitada, et kuvada vaateakna vasakust, paremast, ülemisest või alumisest servast. Nuppe või ankruid kasutatakse päästikutena, mis on lisatud konkreetsetele elementidele, mida lülitate, ja dataatribuute kasutatakse meie JavaScripti käivitamiseks.

  • Offcanvas jagab osa modaalidega sama JavaScripti koodist. Põhimõtteliselt on need üsna sarnased, kuid need on eraldi pistikprogrammid.
  • Sarnaselt on mõned offcanvase stiilide ja mõõtmete lähteteksti Sassi muutujad päritud modaali muutujatest.
  • Kui see kuvatakse, sisaldab offcanvas vaiketausta, millel saab klõpsata, et seda peita.
  • Sarnaselt modaalidele saab korraga näidata ainult üht lõuendit.

Pea püsti! Arvestades, kuidas CSS animatsioone käsitleb, ei saa te elementi kasutada marginvõi translatepeal . .offcanvasSelle asemel kasutage klassi iseseisva mähiselemendina.

Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Näited

Lõuendivälised komponendid

Allpool on näide, mis on vaikimisi kuvatud (läbi .show) .offcanvas. Offcanvas sisaldab sulgemisnupuga päise tuge ja mõne algklassi valikulist kehaklassi padding. Soovitame teil võimaluse korral lisada loobumistoimingutega lõuendivälised päised või esitada selgesõnaline loobumistoiming.

Offcanvas
Siia läheb offcanvase sisu. Siin saate paigutada peaaegu kõik Bootstrapi komponendid või kohandatud elemendid.
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

Kasutage allolevaid nuppe, et kuvada ja peita offcanvas element JavaScripti kaudu, mis lülitab .showklassi elemendil koos .offcanvasklassiga.

  • .offcanvaspeidab sisu (vaikimisi)
  • .offcanvas.shownäitab sisu

Võite kasutada hrefatribuudiga linki või atribuudiga nuppu data-bs-target. Mõlemal juhul data-bs-toggle="offcanvas"on nõutav.

Link rakendusega href
Offcanvas
Osa tekstist kohahoidjana. Päriselus võivad teil olla valitud elemendid. Meeldib tekst, pildid, loendid jne.
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>

Keha kerimine

Elemendi kerimine <body>on keelatud, kui lõuend ja selle taust on nähtaval. Kasutage kerimise data-bs-scrolllubamiseks atribuuti .<body>

Kerimisega lõuend

Selle valiku toimimise nägemiseks proovige ülejäänud lehte kerida.

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>

Keha kerimine ja taust

Saate lubada <body>ka nähtava taustaga kerimise.

Kerimisega taust

Selle valiku toimimise nägemiseks proovige ülejäänud lehte kerida.

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>

Staatiline taust

Kui taust on seatud staatiliseks, ei sulgu lõuend väljaspool seda klõpsates.

Offcanvas
Ma ei sulge, kui klõpsate väljaspool mind.
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>

Tume lõuendiväline

Lisatud versioonisse v5.2.0

Muutke utiliitide abil lõuendivälist välimust, et sobitada need paremini erinevate kontekstidega, näiteks tumedad navigeerimisribad. Siin lisame tähistele ja -dele, et tumeda lõuendiga õigeks kujundada .text-bg-dark. Kui teil on rippmenüüd, kaaluge ka lisamist ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Offcanvas

Asetage lõuendiväline sisu siia.

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>

Vastutulelik

Lisatud versioonisse v5.2.0

Reageerivad off-canvas klassid peidavad sisu väljaspool vaateava alates määratud katkestuspunktist ja allapoole. Sellest katkestuspunktist kõrgemal käitub sees olev sisu nagu tavaliselt. Näiteks .offcanvas-lgpeidab lõuendivälisel sisu lgkatkestuspunkti all, kuid kuvab sisu lgkatkestuspunkti kohal.

Muutke oma brauseri suurust, et kuvada tundlik off-canvas lüliti.
Tundlik offcanvas

See sisu on .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>

Iga katkestuspunkti jaoks on saadaval reageerivad off-canvas-klassid.

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

Paigutus

Lõuendivälistel komponentidel pole vaikepaigutust, seega peate lisama ühe allolevatest modifikaatoriklassidest.

  • .offcanvas-startasetab lõuendi vaateaknast vasakule (näidatud ülal)
  • .offcanvas-endasetab lõuendi välisküljele vaateaknast paremale
  • .offcanvas-topasetab lõuendivälise vaate vaateava ülaossa
  • .offcanvas-bottomasetab lõuendi välisküljele vaateava põhja

Proovige ülemist, paremat ja alumist näidet allpool.

Lõuendiväline ülaosa
...
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>
Väljaspool lõuendit paremal
...
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>
Lõuendiväline põhi
...
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>

Juurdepääsetavus

Kuna lõuendiväline paneel on põhimõtteliselt modaalne dialoog, lisage kindlasti – aria-labelledby="..."viidates lõuendivälisele pealkirjale – .offcanvas. Pange tähele, et te ei pea lisama, role="dialog"kuna lisame selle juba JavaScripti kaudu.

CSS

Muutujad

Lisatud versioonisse v5.2.0

Osana Bootstrapi arenevast CSS-muutujate lähenemisviisist kasutab offcanvas nüüd .offcanvastäiustatud reaalajas kohandamiseks kohalikke CSS-i muutujaid. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

  --#{$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};

Sassi muutujad

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

Kasutamine

Offcanvase pistikprogramm kasutab raskuste tõstmiseks mõnda klassi ja atribuuti:

  • .offcanvaspeidab sisu
  • .offcanvas.shownäitab sisu
  • .offcanvas-startpeidab vasakpoolse lõuendi
  • .offcanvas-endpeidab lõuendi paremal küljel
  • .offcanvas-toppeidab pealmise lõuendi
  • .offcanvas-bottompeidab lõuendi põhja

Lisage data-bs-dismiss="offcanvas"atribuudiga loobumisnupp, mis käivitab JavaScripti funktsiooni. Kasutage seda <button>elementi kindlasti kõigis seadmetes õigeks käitumiseks.

Andmeatribuutide kaudu

Lülita sisse

Lisage elemendile data-bs-toggle="offcanvas"ja a data-bs-targetvõi href, et määrata automaatselt ühe offcanvas-elemendi juhtimine. Atribuut data-bs-targetaktsepteerib CSS-i valijat, et rakendada offcanvasi. Lisage klass offcanvaskindlasti offcanvas-elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass show.

Vabaks laskma

Vallandumise saab saavutada lõuendiväliseldata nupul oleva atribuudiga, nagu on näidatud allpool:

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

või nupul väljaspool lõuendit , kasutades järgmist data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Kuigi toetatakse mõlemat viisi, kuidas lõuendivälist loobuda, pidage meeles, et väljastpoolt lõuendist loobumine ei ühti ARIA loomise tavade juhendi dialoogi (modaalse) mustriga . Tehke seda omal riisikol.

JavaScripti kaudu

Luba käsitsi:

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

Valikud

Kuna suvandeid saab edastada andmeatribuutide või JavaScripti kaudu, saate valikule lisada valiku nime data-bs-, nagu näiteks data-bs-animation="{value}". Suvandite andmeatribuutide kaudu edastamisel muutke suvandi nime tõuketüüp „ camelCase ” asemel „ kebab-case ”. Näiteks data-bs-custom-class="beautifier"kasutage data-bs-customClass="beautifier".

Alates versioonist Bootstrap 5.2.0 toetavad kõik komponendid eksperimentaalset reserveeritud andmeatribuuti data-bs-config, mis mahutab lihtsa komponendi konfiguratsiooni JSON-stringina. Kui elemendil on atribuudid data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", on lõplik titleväärtus 456ja eraldi andmeatribuudid alistavad väärtused, mis on antud kuupäeval data-bs-config. Lisaks võivad olemasolevad andmeatribuudid sisaldada JSON-i väärtusi, nagu data-bs-delay='{"show":0,"hide":150}'.

Nimi Tüüp Vaikimisi Kirjeldus
backdrop tõeväärtus või stringstatic true Kandke kehale taust, kui offcanvas on avatud. Teise võimalusena määrake statictaustadekoratsioon, mis klõpsamisel ei sulge lõuendit.
keyboard tõeväärtus true Paoklahvi vajutamisel sulgeb lõuendiväline.
scroll tõeväärtus false Luba keha kerimine, kui offcanvas on avatud.

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

Aktiveerib teie sisu lõuendivälise elemendina. Aktsepteerib valikulisi valikuid object.

Konstruktoriga saate luua offcanvas-eksemplari, näiteks:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
meetod Kirjeldus
getInstance Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud offcanvas-eksemplari.
getOrCreateInstance Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud offcanvas-eksemplari või luua uue, kui seda ei lähtestatud.
hide Peidab lõuendivälise elemendi. Naaseb helistaja juurde enne, kui offcanvas element on tegelikult peidetud (st enne hidden.bs.offcanvassündmuse toimumist).
show Näitab lõuendivälist elementi. Naaseb helistaja juurde enne, kui offcanvas elementi on tegelikult näidatud (st enne shown.bs.offcanvassündmuse toimumist).
toggle Lülitab lõuendivälise elemendi kuvatud või peidetud olekuks. Naaseb helistaja juurde enne, kui offcanvas elementi on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.offcanvasvõi hidden.bs.offcanvastoimumist).

Sündmused

Bootstrapi offcanvas-klass paljastab mõned sündmused, mis on seotud offcanvase funktsioonidega.

Sündmuse tüüp Kirjeldus
hide.bs.offcanvas See sündmus käivitatakse kohe, kui hidemeetod on välja kutsutud.
hidden.bs.offcanvas See sündmus käivitatakse, kui offcanvas-element on kasutaja eest peidetud (ootab, kuni CSS-i üleminekud lõpetatakse).
hidePrevented.bs.offcanvas See sündmus käivitatakse, kui kuvatakse lõuendiväline taust, selle taust staticja tehakse klõps väljaspool lõuendit. Sündmus käivitatakse ka siis, kui paoklahvi vajutatakse ja keyboardsuvand on seatud väärtusele false.
show.bs.offcanvas See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
shown.bs.offcanvas See sündmus käivitatakse, kui offcanvas-element on kasutajale nähtavaks tehtud (ootab, kuni CSS-i üleminekud lõppevad). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})