Oihalez kanpokoa
Eraiki ezkutuko alboko barrak zure proiektuan nabigaziorako, erosketa-gurdietarako eta beste klase batzuekin eta gure JavaScript pluginarekin.
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 data
atributuak 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 margin
edo elementu translate
batean . .offcanvas
Horren ordez, erabili klasea biltzeko elementu independente gisa.
prefers-reduced-motion
multimedia kontsultaren menpe dago. Ikusi
gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .
Adibideak
Offcanvas osagaiak
Jarraian, lehenespenez erakusten den oihalez kanpoko adibide bat dago ( .show
on 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
<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, .show
klasea klaseko elementu batera aldatzen duena .offcanvas
.
.offcanvas
edukia ezkutatzen du (lehenetsia).offcanvas.show
edukia 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.
Oihalez kanpokoa
<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-start
mihisetik kanpo jartzen du ikuslearen ezkerrean (goian ageri dena).offcanvas-end
mihisetik kanpo jartzen du ikuslearen eskuinaldean.offcanvas-top
mihisetik kanpo jartzen du ikuslearen goiko aldean.offcanvas-bottom
mihisetik 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-scroll
atributua <body>
desplazamendua data-bs-backdrop
aldatzeko 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">Backdroped 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;
Erabilera
Offcanvas pluginak klase eta atributu batzuk erabiltzen ditu astunak kudeatzeko:
.offcanvas
edukia ezkutatzen du.offcanvas.show
edukia erakusten du.offcanvas-start
Ezkerreko mihisea ezkutatzen du.offcanvas-end
eskuineko mihisea ezkutatzen du.offcanvas-bottom
beheko 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
Gehitu data-bs-toggle="offcanvas"
eta a data-bs-target
edo href
elementuari oihalez kanpoko elementu baten kontrola automatikoki esleitzeko. Atributuak CSS hautatzaile bat onartzen du data-bs-target
offcanvas-a aplikatzeko. Ziurtatu klasea offcanvas
offcanvas elementura gehitzen duzula. Lehenetsita irekitzea nahi baduzu, gehitu klase gehigarria show
.
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.offcanvas edo hidden.bs.offcanvas gertaera gertatu baino lehen). |
show |
Oihalez kanpoko elementu bat erakusten du. Offcanvas elementua benetan erakutsi baino lehen itzultzen da deitzaileari (hau da, shown.bs.offcanvas gertaera gertatu baino lehen). |
hide |
Oihalez kanpoko elementu bat ezkutatzen du. Offcanvas elementua benetan ezkutatu aurretik (hau da, hidden.bs.offcanvas gertaera gertatu baino lehen) itzultzen da deitzaileari. |
getInstance |
Metodo estatikoa DOM elementu batekin lotutako offcanvas instantzia lortzeko aukera ematen duena |
getOrCreateInstance |
Metodo estatikoa , offcanvas-en instantzia DOM elementu batekin erlazionatutakoa lortzeko edo berri bat sortzeko aukera ematen duena, hasieratu ez bazen. |
Gertaerak
Bootstrap-en offcanvas klaseak gertaera batzuk erakusten ditu offcanvas funtzionalitatera konektatzeko.
Gertaera mota | Deskribapena |
---|---|
show.bs.offcanvas |
Gertaera hau berehala abiarazten da show instantzia-metodoa deitzen denean. |
shown.bs.offcanvas |
Gertaera hau oihalez kanpoko elementu bat erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
hide.bs.offcanvas |
Gertaera hau berehala abiarazten da hide metodoa deitzen denean. |
hidden.bs.offcanvas |
Gertaera hau oihalez kanpoko elementu bat erabiltzaileari ezkutatu zaionean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})