Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
in English

Oihalez kanpokoa

Eraiki ezkutuko alboko barrak zure proiektuan nabigaziorako, erosketa-gurdietarako eta beste klase batzuekin eta gure JavaScript pluginarekin.

Orrialde honetan

Nola dabil

Offcanvas alboko barraren osagai bat da, JavaScript bidez alda daitekeena, ikuspegiaren ezkerreko, eskuineko edo beheko ertzetik ager dadin. Botoiak edo aingurak aktibatzen dituzun elementu espezifikoei erantsita dauden abiarazle gisa erabiltzen dira, eta dataatributuak gure JavaScript deitzeko erabiltzen dira.

  • Offcanvas-ek modalen JavaScript kode bera partekatzen du. Kontzeptualki, nahiko antzekoak dira, baina plugin bereiziak dira.
  • Era berean, offcanvas-en estilo eta dimentsioetarako Sass iturburuko aldagai batzuk modalaren aldagaietatik heredatzen dira.
  • Erakusten denean, offcanvas-ek atzealde lehenetsi bat du, eta bertan klik egin daitekeen offcanvas-a ezkutatzeko.
  • Modalen antzera, aldi berean oihal bat baino ezin da erakutsi.

Buruak gora! CSS-k animazioak nola kudeatzen dituen ikusita, ezin duzu erabili marginedo elementu translatebatean . .offcanvasHorren ordez, erabili klasea biltzeko elementu independente gisa.

Osagai honen animazio-efektua prefers-reduced-motionmultimedia kontsultaren menpe dago. Ikusi gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .

Adibideak

Offcanvas osagaiak

Jarraian, lehenespenez erakusten den oihalez kanpoko adibide bat dago ( .showon bidez .offcanvas). Offcanvas-ek itxiera botoi batekin goiburu bat eta aukerako gorputz-klase bat hasierako batzuentzat onartzen ditu padding. Ahal den guztietan oihalez kanpoko goiburuak sartzea gomendatzen dizugu baztertzeko ekintzekin edo baztertzeko ekintza esplizitu bat ematea.

Oihalez kanpokoa
Oihalez kanpoko edukia hemen doa. Bootstrap-eko edozein osagai edo elementu pertsonalizatu ia ia jar dezakezu hemen. 
<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>

Zuzeneko demoa

Erabili beheko botoiak oihalez kanpoko elementu bat erakusteko eta ezkutatzeko JavaScript bidez, .showklasea klaseko elementu batera aldatzen duena .offcanvas.

  • .offcanvasedukia ezkutatzen du (lehenetsia)
  • .offcanvas.showedukia erakusten du

Atributua duen esteka bat erabil dezakezu href, edo atributua duen botoi bat data-bs-target. Bi kasuetan, data-bs-toggle="offcanvas"beharrezkoa da.

Estekatu href-rekin
Oihalez kanpokoa
Testu batzuk leku-mark gisa. Bizitza errealean aukeratu dituzun elementuak izan ditzakezu. Atsegin dut, testua, irudiak, zerrendak, etab. 
<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>

Kokapen

Ez dago offcanvas osagaien kokapen lehenetsirik, beraz, beheko modifikatzaile klaseetako bat gehitu behar duzu;

  • .offcanvas-startmihisetik kanpo jartzen du ikuslearen ezkerrean (goian ageri dena)
  • .offcanvas-endmihisetik kanpo jartzen du ikuslearen eskuinaldean
  • .offcanvas-topmihisetik kanpo jartzen du ikuslearen goiko aldean
  • .offcanvas-bottommihisetik kanpo jartzen du ikuslearen behealdean

Saiatu beheko goiko, eskuineko eta beheko adibideak.

Oihalez kanpoko goialdea
... 
<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>
Oihaletik kanpo eskuinera
... 
<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>
Oihalez kanpoko behealdea
... 
<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>

Atzealdea

Elementua mugitzea <body>desgaituta dago mihise bat eta bere atzealdea ikusgai daudenean. Erabili data-bs-scrollatributua <body>desplazamendua data-bs-backdropaldatzeko eta atzeko planoa aldatzeko.

Korritzearekin koloreztatua

Saiatu orriaren gainerako mugitzen aukera hau martxan ikusteko.

Oihalez kanpoko atzealdearekin

.....

Atzeko planoa korritzearekin

Saiatu orriaren gainerako mugitzen aukera hau martxan ikusteko.

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

Irisgarritasuna

Oihalez kanpoko panela kontzeptualki elkarrizketa modal bat denez, ziurtatu aria-labelledby="..."—oihalez kanpoko izenburuari erreferentzia eginez— gehitzen duzula .offcanvas. Kontuan izan ez duzula gehitu beharrik role="dialog"jada JavaScript bidez gehitzen dugulako.

Sass

Aldagaiak

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

Erabilera

Offcanvas pluginak klase eta atributu batzuk erabiltzen ditu astunak kudeatzeko:

  • .offcanvasedukia ezkutatzen du
  • .offcanvas.showedukia erakusten du
  • .offcanvas-startEzkerreko mihisea ezkutatzen du
  • .offcanvas-endeskuineko mihisea ezkutatzen du
  • .offcanvas-bottombeheko mihisea ezkutatzen du

Gehitu baztertzeko botoia data-bs-dismiss="offcanvas"atributuarekin, eta horrek JavaScript funtzionaltasuna abiarazten du. Ziurtatu <button>elementua harekin erabiltzen duzula gailu guztietan portaera egokia izateko.

Datu-atributuen bidez

Txandakatu

Gehitu data-bs-toggle="offcanvas"eta a data-bs-targetedo hrefelementuari oihalez kanpoko elementu baten kontrola automatikoki esleitzeko. Atributuak CSS hautatzaile bat onartzen du data-bs-targetoffcanvas-a aplikatzeko. Ziurtatu klasea offcanvasoffcanvas elementura gehitzen duzula. Lehenetsita irekitzea nahi baduzu, gehitu klase gehigarria show.

Baztertu

Baztertzea oihalaren barrukodata botoi baten atributuarekin lor daiteke, behean erakusten den moduan:

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

edo oihaletik kanpokodata-bs-target botoi batean behean erakusten den moduan erabiliz :

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Kanpoko mihise bat baztertzeko bi moduak onartzen diren arren, kontuan izan offcanvas bat kanpotik baztertzea ez datorrela bat WAI-ARIA elkarrizketa-koadroaren diseinu ereduarekin . Egin hau zure ardurapean.

JavaScript bidez

Gaitu eskuz honekin:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-bs-, hemen bezala data-bs-backdrop="".

Izena Mota Lehenetsia Deskribapena
backdrop boolearra true Aplikatu atzeko planoa gorputzean mihisea irekita dagoen bitartean
keyboard boolearra true Ihes-tekla sakatzean off-oihala ixten du
scroll boolearra false Baimendu gorputza korritzea off canvas irekita dagoen bitartean

Metodoak

Metodo asinkronoak eta trantsizioak

API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .

Zure edukia oihalez kanpoko elementu gisa aktibatzen du. Aukerako aukerak onartzen ditu object.

Eraikitzailearekin offcanvas instantzia bat sor dezakezu, adibidez:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Metodoa Deskribapena
toggle Oihalez kanpoko elementu bat bistaratu edo ezkutatuta aldatzen du. Offcanvas elementua benetan erakutsi edo ezkutatu baino lehen itzultzen da deitzaileari (hau da, shown.bs.offcanvasedo hidden.bs.offcanvasgertaera gertatu baino lehen).
show Oihalez kanpoko elementu bat erakusten du. Offcanvas elementua benetan erakutsi baino lehen itzultzen da deitzaileari (hau da, shown.bs.offcanvasgertaera gertatu baino lehen).
hide Oihalez kanpoko elementu bat ezkutatzen du. Offcanvas elementua benetan ezkutatu aurretik (hau da, hidden.bs.offcanvasgertaera gertatu baino lehen) itzultzen da deitzaileari.
getInstance Static method which allows you to get the offcanvas instance associated with a DOM element
getOrCreateInstance Static method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn’t initialized

Events

Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.

Event type Description
show.bs.offcanvas This event fires immediately when the show instance method is called.
shown.bs.offcanvas This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.offcanvas This event is fired immediately when the hide method has been called.
hidden.bs.offcanvas This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})