Siirry pääsisältöön Siirry dokumenttien navigointiin
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äkyviin näkymän vasemmasta, oikeasta 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. 
<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

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
Paikkamerkkinä tekstiä. Oikeassa elämässä sinulla voi olla valitsemiasi elementtejä. Tykkää, tekstiä, kuvia, listoja jne. 
<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>

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 ylempää, oikeaa ja alempaa esimerkkiä alla.

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

Tausta

Elementin vieritys <body>on poissa käytöstä, kun offcanvas ja sen tausta ovat näkyvissä. Käytä data-bs-scrollattribuuttia <body>vierityksen ja data-bs-backdroptaustan vaihtamiseen.

Väritetty rullauksella

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

Offcanvas taustalla

.....

Tausta vierittämällä

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

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

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.

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-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 WAI-ARIA modaalisen dialogin suunnittelumallia . Tee tämä omalla vastuullasi.

JavaScriptin kautta

Ota käyttöön manuaalisesti:

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

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-bs-, kuten kohdassa data-bs-backdrop="".

Nimi Tyyppi Oletus Kuvaus
backdrop boolean true Lisää taustaa runkoon, kun offcanvas on auki
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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Menetelmä Kuvaus
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).
show Näyttää offcanvas-elementin. Palaa soittajalle ennen kuin offcanvas-elementti on todella näytetty (eli ennen shown.bs.offcanvastapahtumaa).
hide Piilottaa offcanvas-elementin. Palaa soittajalle ennen kuin offcanvas-elementti on tosiasiallisesti piilotettu (eli ennen hidden.bs.offcanvastapahtumaa).
getInstance Staattinen menetelmä, jonka avulla voit saada offcanvas-instanssin, joka liittyy DOM-elementtiin
getOrCreateInstance Staattinen menetelmä, jonka avulla voit saada offcanvas-esiintymän, joka liittyy DOM-elementtiin, tai luoda uuden, jos sitä ei alustettu

Tapahtumat

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

Tapahtumatyyppi Kuvaus
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).
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). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})