Saltar al contenido principal Salta a docs navegación
in English

Fuera de lona

Pakasqa lado barrakuna ruwayniykiman ruway purinapaq, rantiq carritokuna chaymanta aswan huk pisi clasekunawan chaymanta JavaScript pluginniykuwan.

Kay p'anqapi

Imayna llamkan

Offcanvas huk lado barra componente kaqmanta JavaScript kaqninta tikray atikun, qhawanapa lluq'i, paña utaq uray kantunmanta rikhurinanpaq. Botonkuna utaq anclakuna triggers hina llamk'achkanku mayqinkunachus elementokuna específicos kaqman k'askasqa kanku mayqinkunatachus tikranki, chaymanta dataatributokuna JavaScriptniyku waqyanapaq llamk'achkanku.

  • Offcanvas wakin kikin JavaScript codigo modales hina rakin. Conceptualmente, paykunaqa ancha rikch'akunku, ichaqa sapaq plugins kanku.
  • Chaynallataq, wakin pukyu Sass tikraqkuna offcanvas kaqpa estilosninpaq chaymanta dimensionesninpaq modal kaqpa tikraqkunamanta herenciasqa kanku.
  • Rikuchisqa kaqtin, offcanvas huk ñawpaqmanta ruwasqa telón de fondo kaqwan kachkan chaymanta ñit'iy atikun offcanvas pakaypaq.
  • Modalkunaman rikchakuq, huk offcanvasllatam huk kutipi qawachiyta atikun.

¡Umakuna wichayman! Imayna CSS kawsachiykunata hap'in chayta qusqa, mana huk elementota llamk'achiyta atikunkichu marginicha chaypi. Aswanpas, claseta huk sapanchasqa p'istu elemento hina llamk'achiy.translate.offcanvas

Kay componentepa animación efectonqa prefers-reduced-motionmedios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway .

Ejemplos

Componentes fuera de lona

Uraypi huk offcanvas rikch'ana kachkan chaymanta ñawpaqmanta rikuchisqa (via .showon .offcanvas). Offcanvas huk umalliqpaq yanapakuyta huk wichq'ana ñit'inawan chaymanta huk akllana kurku clase wakin qallariypaq churan padding. Yuyaykuyku offcanvas umalliqkunata qarquy ruwaykunawan mayk'aq atikuqtin churayta, utaq huk sut'i qarquy ruwayta quy.

Fuera de lona
Contenido para el offcanvas va aquí. Yaqa mayqin Bootstrap componente utaq ruwasqa elementokuna kaypi churayta atikunki. 
<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>

Demostración en vivo

Uraypi kaq botones llamk'achiy huk offcanvas elementota JavaScript kaqninta rikuchinaykipaq chaymanta pakananpaq chaymanta huk elementopi .showclaseta clasewan tikran .offcanvas.

  • .offcanvascontenidota pakan (ñawpaqmanta) .
  • .offcanvas.showcontenido nisqatam qawachin

Huk t'inkita llamk'achiyta atinki hrefatributowan, icha huk ñit'inata data-bs-targetatributowan. Iskayninpipas, chay data-bs-toggle="offcanvas"nisqa kamachisqa kachkan.

Enlace con href
Fuera de lona
Wakin qillqa mayt’u hina. Chiqap kawsaypiqa akllasqayki elementokunatam chaskiwaq. Imayna, qillqa, siq’ikuna, listakuna, hukkunapas. 
<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>

Colocación

Mana kanchu ñawpaqmanta churay offcanvas componentes kaqpaq, chayrayku huk tikraq clasekuna uraypi yapanayki tiyan;

  • .offcanvas-startoffcanvas nisqa qhawaypa lluq'i larunpi churan (hanaqpi rikuchisqa) .
  • .offcanvas-endqhawanapa paña larunpi offcanvas nisqatam churan
  • .offcanvas-topqhawaypa hawanpi offcanvas nisqatam churan
  • .offcanvas-bottomoffcanvas nisqa qhawaypa urayninpi churan

Uraypi hawa, paña, uray ejemplokunata pruebakuy.

Pata fuera de lona
... 
<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>
Fuera de lona derecho
... 
<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>
Fondo fuera de lona
... 
<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>

Telón de fondo

Elementota kuyuchiyqa <body>mana llamk'achisqa kachkan mayk'aq huk offcanvas chaymanta telón de fondo rikukun. data-bs-scrollAtributota llamk'achiy <body>kuyuchiyta data-bs-backdroptikranaykipaq chaymanta telón de fondota tikranaykipaq.

Desplazamientowan llimp’isqa

Puchuq p'anqata kuyuchiyta kallpachakuy kay akllanata ruwaypi qhawanaykipaq.

Offcanvas con telón de fondo

.....

Telón de fondo con desplazamiento

Puchuq p'anqata kuyuchiyta kallpachakuy kay akllanata ruwaypi qhawanaykipaq.

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

Accesibilidad nisqa

Panel offcanvas hamut'aypi huk modal rimanakuna kasqanrayku, ama hina kaspa yapay aria-labelledby="..."—offcanvas tituluta riqsichispa— kayman .offcanvas. Reparay mana role="dialog"yapanaykichu tiyan chaymanta JavaScript kaqnintakama yapaykuña.

Sass

Variables nisqakuna

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

Uso

Offcanvas plugin huk pisi clasekuna chaymanta atributokuna llamk'achin llasa hoqariyta hapinapaq:

  • .offcanvaschaypi kaqta pakaykun
  • .offcanvas.showchaypi kaqta rikuchin
  • .offcanvas-startpaña ladopi kaq offcanvas nisqataqa pakan
  • .offcanvas-endpaña ladopi kaq offcanvas nisqataqa pakan
  • .offcanvas-bottomurayninpi offcanvas nisqataqa pakan

Yanapakuywan huk qarquy ñit'inata yapay data-bs-dismiss="offcanvas", chaymanta JavaScript ruwayta qallarichin. Aswan allinta chaywan <button>elementota llamk'achiy allin ruwanapaq llapa dispositivokunapurapi.

Atributos de datos nisqawan

Toggle nisqa

Yanapakuy data-bs-toggle="offcanvas"chaymanta huk data-bs-targetutaq hrefelementoman huk elemento offcanvas kaqmanta controlta kikillanmanta churanapaq. Atributo data-bs-targethuk CSS akllanata chaskin offcanvas kaqman churanapaq. Aswan allinta yapay chay claseta offcanvaselemento offcanvas nisqaman. Sichus ñawpaqmanta kichasqa kananta munanki, yapasqa claseta yapay show.

Chanqapuy

Dismisionqa dataatributowan huk botón ukhupi offcanvas ukhupi aypayta atikunman kay urapi rikuchisqa hina:

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

utaq huk botón hawapi offcanvas kaqpi kay data-bs-targeturapi rikuchisqa hina llamk'achispa:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Iskaynin ñankuna huk offcanvas kaqmanta qarqunapaq yanapasqa kaptinpas, yuyaypi hap'iy huk offcanvas hawamanta qarquyqa mana WAI-ARIA modal diálogo diseño patrón kaqwan tupanchu . Chaytaqa qanpa riesgoykiwanmi ruway.

JavaScript nisqawan

Makiwan atichiy kaykunawan:

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

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-bs-, imaynachus data-bs-backdrop="".

Suti Niraq Ñawpaqchasqa Willay
backdrop boolean nisqa true Cuerpopi huk telón de fondota churay offcanvas kichasqa kachkaptin
keyboard boolean nisqa true Escape llave ñit'isqa kaptinqa offcanvas nisqatam wichqan
scroll boolean nisqa false Permitir cuerpo desplazamiento mientras que fuera de lona abierto

Métodos

Métodos y transiciones asíncronas

Llapan API ruwanakuna mana sink'uyuq kanku chaymanta huk tikrayta qallarinku . Paykunaqa kutinku waqyaqman chaylla transición qallarisqa ichaqa manaraq tukukuchkaptin . Chaymantapas, huk tikray componente kaqpi huk método waqyay mana qhawasqachu kanqa .

Aswan willakuypaq JavaScript qillqaykuta qhaway .

Contenidoykita huk elemento offcanvas hina activan. Huk akllana akllanakunata chaskikun object.

Ruraqwan huk offcanvas instanciata ruwayta atinki, ahinataq:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Imayna Willay
toggle Huk mana lonayuq elementota rikuchisqaman icha pakasqaman tikran. Llamaqman kutimun manaraq offcanvas elemento chiqamanta rikuchisqa utaq pakasqa kachkaptin (icha manaraq shown.bs.offcanvasutaq hidden.bs.offcanvasruway ruwakuchkaptin).
show Huk mana lonayuq elementota rikuchin. Llamaqman kutimun manaraq offcanvas elemento chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.offcanvasruway ruwakuchkaptin).
hide Huk mana lonayuq elementota pakan. Llamaqman kutimun manaraq offcanvas elemento chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.offcanvasruway ruwakuchkaptin).
getInstance Método estático mayqinchus huk DOM elementowan tinkisqa offcanvas instanciata hap'iyta atikun
getOrCreateInstance Método estático mayqinchus huk DOM elementowan tinkisqa offcanvas instanciata hap'iyta atikun, utaq musuq ruwayta sichus mana qallarisqachu karqa

Eventos nisqakuna

Bootstrap kaqpa offcanvas clasen huk pisi ruwaykunata rikuchin offcanvas ruwanakunaman enganche kaqpaq.

Tipo de evento Willay
show.bs.offcanvas Kay ruwayqa chaylla rawrarin mayk'aq showinstancia método waqyasqa.
shown.bs.offcanvas Kay ruwayqa huk offcanvas elemento ruwaqman rikukuq ruwasqa kaqtin llamk'achisqa (CSS tikraykunata tukunanta suyanqa).
hide.bs.offcanvas Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aqchus hidemétodo waqyasqa kachkan.
hidden.bs.offcanvas Kay ruwayqa huk offcanvas elemento ruwaqmanta pakasqa kaptin llamk'achisqa (CSS tikraykunata tukunanta suyanqa). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})