Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
Check
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, goiko 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.
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>

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

Gorputz korritzea

Elementua mugitzea <body>desgaituta dago mihise bat eta bere atzealdea ikusgai daudenean. Erabili atributua korritzea data-bs-scrollgaitzeko .<body>

Oihalez kanpoko gorputza korritzeko

Saiatu orriaren gainerako mugitzen aukera hau martxan ikusteko.

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>

Gorputz korritzea eta atzealdea

<body>Atzealde ikusgai batekin korritzea ere gai dezakezu .

Atzeko planoa korritzearekin

Saiatu orriaren gainerako mugitzen aukera hau martxan ikusteko.

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>

Atzealde estatikoa

Atzealdea estatiko gisa ezartzen denean, oihalaren kanpoaldea ez da itxiko hortik kanpo klik egitean.

Oihalez kanpokoa
Ez dut itxiko nigandik kanpo klik egiten baduzu.
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>

Mihise iluna

v5.2.0-n gehitua

Aldatu oihalez kanpoko oihalen itxura utilitateekin hobeto parekatzeko, nabigazio-barra ilunak bezalako testuinguru desberdinekin. Hemen eta gehitzen ditugu .text-bg-darkoihal ilun .offcanvasbatekin estilo egokia lortzeko. Barruan goitibeherako zerrendak badituzu, kontuan gehitzea ere kontuan ..btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Oihalez kanpokoa

Jarri oihaletik kanpoko edukia hemen.

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>

Erantzunkorra

v5.2.0-n gehitua

Oihalez kanpoko klaseek ikuspuntutik kanpoko edukia ezkutatzen dute eten-puntu zehatz batetik eta behera. Eten-puntu horretatik gora, barruko edukiak ohi bezala jokatuko du. Adibidez, eten .offcanvas-lg-puntuaren azpian dagoen mihise batean edukia ezkutatzen du lg, baina eten-puntuaren gainean erakusten du edukia lg.

Aldatu zure arakatzailearen tamaina oihaletik kanpoko etengailu erantzulea erakusteko.
Oihal off sentikorra

Hau . baten barruan dagoen edukia da .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>

Oihalez kanpoko klaseak daude eskuragarri eten puntu bakoitzean.

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

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

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.

CSS

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren barruan, offcanvas-ek orain CSS aldagai lokalak erabiltzen ditu .offcanvason denbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

  --#{$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 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-topgoiko aldean 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 lor daiteke oihalaren barrukodata botoi bateko atributuarekin, 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>
Kanpo-oihal bat baztertzeko bi moduak onartzen diren arren, kontuan izan off-oihal batetik kanpo uztea ez datorrela bat ARIA Egile Praktiken Gidaren elkarrizketa-koadroa (modala) ereduarekin . Egin hau zure ardurapean.

JavaScript bidez

Gaitu eskuz honekin:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezkeenez, aukera-izen bat gehi diezaiokezu data-bs-, honela data-bs-animation="{value}". Ziurtatu aukera-izenaren kasu-mota " camelCase "-tik " kebab-case "-ra aldatzen duzula aukerak datu-atributuen bidez pasatzen dituzunean. Adibidez, erabili data-bs-custom-class="beautifier"ordez data-bs-customClass="beautifier".

Bootstrap 5.2.0-tik aurrera, osagai guztiek erreserbatutako datu-atributu esperimentaldata-bs-config bat onartzen dute , osagaien konfigurazio sinplea JSON kate gisa gorde dezakeena. Elementu batek data-bs-config='{"delay":0, "title":123}'eta data-bs-title="456"atributuak dituenean, azken titlebalioa izango da 456eta bereizitako datu-atributuek gailuan emandako balioak gainidatziko dituzte data-bs-config. Gainera, lehendik dauden datu-atributuek JSON balioak gorde ditzakete data-bs-delay='{"show":0,"hide":150}'.

Izena Mota Lehenetsia Deskribapena
backdrop boolearra edo kateastatic true Aplikatu atzeko planoa gorputzean mihisea irekita dagoen bitartean. Bestela, zehaztu staticsakatzean mihisea ixten ez duen atzealde bat.
keyboard boolearra true Ihes-tekla sakatzen denean 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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metodoa Deskribapena
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.
hide Oihalez kanpoko elementu bat ezkutatzen du. Offcanvas elementua benetan ezkutatu aurretik (hau da, hidden.bs.offcanvasgertaera gertatu baino lehen) itzultzen da deitzaileari.
show Oihalez kanpoko elementu bat erakusten du. Offcanvas elementua benetan erakutsi baino lehen itzultzen da deitzaileari (hau da, shown.bs.offcanvasgertaera gertatu baino lehen).
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).

Gertaerak

Bootstrap-en offcanvas klaseak gertaera batzuk erakusten ditu offcanvas funtzionalitatera konektatzeko.

Gertaera mota Deskribapena
hide.bs.offcanvas Gertaera hau berehala abiarazten da hidemetodoa deitzen denean.
hidden.bs.offcanvas Gertaera hau oihalez kanpoko elementu bat erabiltzaileari ezkutatu zaionean abiarazten da (CSS trantsizioak amaitu arte itxarongo da).
hidePrevented.bs.offcanvas Gertaera hau offcanvas erakusten denean, bere atzeko planoa eta staticoffcanvas-tik kanpo klik egiten denean abiarazten da. Ihes-tekla sakatzen denean eta keyboardaukera gisa ezartzen denean ere abiarazten da gertaera false.
show.bs.offcanvas Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
shown.bs.offcanvas Gertaera hau oihalez kanpoko elementu bat erabiltzailearentzat ikusgai jartzen denean abiarazten da (CSS trantsizioak amaitu arte itxarongo da). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})