Siirry pääsisältöön Siirry dokumenttien navigointiin
Check
in English

Offcanvas

Rakenna projektiisi piilotettuja sivupalkkeja navigointia, ostoskärryjä ja muuta varten muutamien luokkien ja JavaScript-laajennuksellamme.

Tällä sivulla

Kuinka se toimii

Offcanvas on sivupalkin komponentti, joka voidaan vaihtaa JavaScriptin avulla näkymään kuvaportin vasemmasta, oikeasta, ylä- tai alareunasta. Painikkeita tai ankkureita käytetään laukaisimina, jotka on liitetty tiettyihin elementteihin, joita vaihdat, ja dataattribuutteja käytetään JavaScriptin kutsumiseen.

  • Offcanvas jakaa jonkin verran samaa JavaScript-koodia kuin modaalit. Käsitteellisesti ne ovat melko samanlaisia, mutta ne ovat erillisiä laajennuksia.
  • Samoin jotkut lähde Sass -muuttujat offcanvasin tyyleille ja mitoille peritään modaalin muuttujista.
  • Kun offcanvas näytetään, se sisältää oletustaustan, jota voidaan napsauttaa piilottaaksesi offcanvasin.
  • Modaalien tapaan vain yksi offcanvas voidaan näyttää kerrallaan.

Varoitus! Koska CSS käsittelee animaatioita, et voi käyttää elementtiä margintai translatesen päällä .offcanvas. Käytä sen sijaan luokkaa itsenäisenä kääreelementtinä.

Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Esimerkkejä

Offcanvas-komponentit

Alla on offcanvas-esimerkki, joka näytetään oletuksena ( .showpäällä .offcanvas). Offcanvas sisältää tuen ylätunnisteelle, jossa on sulkemispainike, ja valinnaisen runkoluokan joillekin aloitusmuodoille padding. Suosittelemme, että sisällytät offcanvas-otsikot hylkäystoimintoihin aina kun mahdollista, tai annat nimenomaisen hylkäystoiminnon.

Offcanvas
Offcanvasin sisältö tulee tänne. Voit sijoittaa tähän melkein minkä tahansa Bootstrap-komponentin tai mukautetut elementit.
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

Käytä alla olevia painikkeita näyttääksesi ja piilottaaksesi offcanvas-elementin JavaScriptin avulla, joka vaihtaa .showluokan elementin päälle .offcanvasluokan kanssa.

  • .offcanvaspiilottaa sisällön (oletus)
  • .offcanvas.shownäyttää sisältöä

Voit käyttää linkkiä hrefmääritteen kanssa tai painiketta data-bs-targetmääritteen kanssa. Molemmissa tapauksissa data-bs-toggle="offcanvas"vaaditaan.

Linkki href
Offcanvas
Jotain tekstiä paikkamerkkinä. Oikeassa elämässä sinulla voi olla valitsemiasi elementtejä. Tykkää, tekstiä, kuvia, listoja 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>

Kehon vieritys

Elementin vieritys <body>on poissa käytöstä, kun offcanvas ja sen tausta ovat näkyvissä. Ota vieritys data-bs-scrollkäyttöön määritteen avulla .<body>

Offcanvas, jossa kehon vieritys

Kokeile vierittämällä sivun loppuosaa nähdäksesi tämän vaihtoehdon toiminnassa.

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>

Kehon vieritys ja tausta

Voit myös ottaa käyttöön <body>vierityksen näkyvällä taustalla.

Tausta vierittämällä

Kokeile vierittämällä sivun loppuosaa nähdäksesi tämän vaihtoehdon toiminnassa.

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>

Staattinen tausta

Kun tausta on staattinen, offcanvas ei sulkeudu, kun sitä napsautetaan.

Offcanvas
En sulje, jos napsautat ulkopuolellani.
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>

Tumma offcanvas

Lisätty versioon 5.2.0

Muuta offcanvasien ulkoasua apuohjelmilla, jotta ne sopivat paremmin eri yhteyksiin, kuten tummiin navigointipalkkiin. Tässä lisäämme .text-bg-dark- .offcanvasja -merkkiin oikeanlaista .btn-close-whitemuotoilua .btn-closevarten tummalla offcanvasilla. Jos sinulla on avattavia valikoita, harkitse lisäämistä myös .dropdown-menu-darkkohtaan .dropdown-menu.

Offcanvas

Sijoita offcanvas-sisältö tähän.

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>

Responsiivinen

Lisätty versioon 5.2.0

Responsiiviset offcanvas-luokat piilottavat sisällön katseluportin ulkopuolella määritetystä keskeytyskohdasta ja alaspäin. Tämän keskeytyskohdan yläpuolella sisältö toimii normaalisti. Esimerkiksi .offcanvas-lgpiilottaa sisällön offcanvasissa keskeytyskohdan alapuolelle lg, mutta näyttää sisällön lgkeskeytyskohdan yläpuolella.

Muuta selaimesi kokoa näyttääksesi reagoivan offcanvas-kytkimen.
Responsiivinen offcanvas

Tämä on sisältöä .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>

Responsiiviset offcanvas-luokat ovat saatavilla jokaiselle keskeytyspisteelle.

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

Sijoitus

Offcanvas-komponenteille ei ole oletussijoittelua, joten sinun on lisättävä jokin alla olevista muokkausluokista.

  • .offcanvas-startasettaa offcanvasin kuvaportin vasemmalle puolelle (näkyy yllä)
  • .offcanvas-endasettaa offcanvasin kuvaportin oikealle puolelle
  • .offcanvas-topasettaa offcanvasin kuvaportin yläosaan
  • .offcanvas-bottomasettaa offcanvasin kuvaportin alaosaan

Kokeile ylhäältä, oikealta ja alhaalta olevia esimerkkejä alla.

Offcanvas-toppi
...
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 oikein
...
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-pohja
...
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>

Esteettömyys

Koska offcanvas-paneeli on käsitteellisesti modaalinen valintaikkuna, muista lisätä aria-labelledby="..."-viittaen offcanvas-otsikkoon - kohtaan .offcanvas. Huomaa, että sinun ei tarvitse lisätä, role="dialog"koska lisäämme sen jo JavaScriptin kautta.

CSS

Muuttujat

Lisätty versioon 5.2.0

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa offcanvas käyttää nyt paikallisia CSS-muuttujia .offcanvastehostaakseen reaaliaikaista räätälöintiä. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

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

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

Käyttö

Offcanvas-laajennus käyttää muutamia luokkia ja attribuutteja raskaiden nostojen käsittelyyn:

  • .offcanvaspiilottaa sisällön
  • .offcanvas.shownäyttää sisällön
  • .offcanvas-startpiilottaa vasemmalla olevan kankaan
  • .offcanvas-endpiilottaa offcanvasin oikealle
  • .offcanvas-toppiilottaa offcanvasin päälle
  • .offcanvas-bottompiilottaa pohjakankaan

Lisää hylkäyspainike data-bs-dismiss="offcanvas"määritteellä, joka käynnistää JavaScript-toiminnon. Muista käyttää <button>elementtiä sen kanssa, jotta se toimii oikein kaikissa laitteissa.

Tietomääritteiden kautta

Vaihda

Lisää elementtiin data-bs-toggle="offcanvas"ja a data-bs-targettai hrefmäärittääksesi automaattisesti yhden offcanvas-elementin hallinnan. Attribuutti data-bs-targethyväksyy CSS-valitsimen, jolla offcanvaa käytetään. Muista lisätä luokka offcanvasoffcanvas-elementtiin. Jos haluat sen avautuvan oletusarvoisesti, lisää ylimääräinen luokka show.

Hylkää

Irtisanominen voidaan saavuttaa offcanvas-data painikkeen attribuutilla, kuten alla on osoitettu:

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

tai painikkeella offcanvasin ulkopuolella alla data-bs-targetkuvatulla tavalla:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Vaikka molempia tapoja hylätä offcanvas on tuettu, muista, että hylkääminen offcanvasin ulkopuolelta ei vastaa ARIA Authoring Practices Guide -valintaikkunan (modaalista) mallia . Tee tämä omalla vastuullasi.

JavaScriptin kautta

Ota käyttöön manuaalisesti:

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

Vaihtoehdot

Koska valinnat voidaan välittää tietomääritteiden tai JavaScriptin kautta, voit liittää vaihtoehdon nimen kohtaan data-bs-, kuten data-bs-animation="{value}". Varmista, että vaihdat vaihtoehdon nimen tapaustyypin " camelCase " arvoksi " kebab-case ", kun välität valinnat tietomääritteiden kautta. Käytä data-bs-custom-class="beautifier"esimerkiksi data-bs-customClass="beautifier".

Bootstrap 5.2.0:sta lähtien kaikki komponentit tukevat kokeellista varattua dataattribuuttia, data-bs-configjoka voi sisältää yksinkertaisen komponenttimäärityksen JSON-merkkijonona. Kun elementillä on attribuutit data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", lopullinen titlearvo on 456ja erilliset tietoattribuutit ohittavat annetut arvot data-bs-config. Lisäksi olemassa olevat dataattribuutit voivat sisältää JSON-arvoja, kuten data-bs-delay='{"show":0,"hide":150}'.

Nimi Tyyppi Oletus Kuvaus
backdrop boolean tai merkkijonostatic true Lisää taustaa runkoon, kun offcanvas on auki. Vaihtoehtoisesti voit määrittää statictaustalle, joka ei sulje offcanvaa napsautettaessa.
keyboard boolean true Sulkee offcanvasin, kun Esc-näppäintä painetaan.
scroll boolean false Salli tekstin vieritys, kun offcanvas on auki.

menetelmät

Asynkroniset menetelmät ja siirtymät

Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .

Katso lisätietoja JavaScript - dokumentaatiostamme .

Aktivoi sisältösi offcanvas-elementtinä. Hyväksyy valinnaiset vaihtoehdot object.

Voit luoda offcanvas-esiintymän konstruktorilla, esimerkiksi:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Menetelmä Kuvaus
getInstance Staattinen menetelmä, jonka avulla voit saada offcanvas-instanssin, joka liittyy DOM-elementtiin.
getOrCreateInstance Staattinen menetelmä, jonka avulla voit saada offcanvas-ilmentymän, joka liittyy DOM-elementtiin, tai luoda uuden, jos sitä ei alustettu.
hide Piilottaa offcanvas-elementin. Palaa soittajalle ennen kuin offcanvas-elementti on tosiasiallisesti piilotettu (eli ennen hidden.bs.offcanvastapahtumaa).
show Näyttää offcanvas-elementin. Palaa soittajalle ennen kuin offcanvas-elementti on todella näytetty (eli ennen shown.bs.offcanvastapahtumaa).
toggle Vaihtaa offcanvas-elementin näytettäväksi tai piilotetuksi. Palaa soittajalle ennen kuin offcanvas-elementti on todella näkyvissä tai piilotettu (eli ennen kuin tapahtumaa shown.bs.offcanvastai hidden.bs.offcanvastapahtuu).

Tapahtumat

Bootstrapin offcanvas-luokka paljastaa muutamia tapahtumia offcanvas-toimintoihin kytkeytymistä varten.

Tapahtumatyyppi Kuvaus
hide.bs.offcanvas Tämä tapahtuma käynnistyy välittömästi, kun hidemenetelmä on kutsuttu.
hidden.bs.offcanvas Tämä tapahtuma käynnistyy, kun offcanvas-elementti on piilotettu käyttäjältä (odottaa CSS-siirtymien valmistumista).
hidePrevented.bs.offcanvas Tämä tapahtuma käynnistyy, kun offcanvas näytetään, sen tausta on näkyvissä staticja suoritetaan napsautus offcanvasin ulkopuolella. Tapahtuma laukeaa myös, kun estonäppäintä painetaan ja keyboardvaihtoehdoksi on asetettu false.
show.bs.offcanvas Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
shown.bs.offcanvas Tämä tapahtuma käynnistyy, kun offcanvas-elementti on tehty näkyväksi käyttäjälle (odottaa CSS-siirtymien valmistumista). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})