Saltar al contenido principal Salta a docs navegación
Check
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 kaqmi, JavaScript kaqnintakama tikray atikun, qhawanapa lluq'i, paña, pata 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.
html nisqapi 
<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>

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

Cuerpo desplazamiento

Elementota kuyuchiyqa <body>mana llamk'achisqa kachkan mayk'aq huk offcanvas chaymanta telón de fondo rikukun. Chay atributota llamk'achiy kuyuchiyta data-bs-scrollatichinanpaq .<body>

Offcanvas con desplazamiento del cuerpo

Puchuq p'anqata kuyuchiyta kallpachakuy kay akllanata ruwaypi qhawanaykipaq.

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

Desplazamiento del cuerpo y telón de fondo

<body>Rikunalla telón de fondowan kuyuchiytapas atichiwaqmi .

Telón de fondo con desplazamiento

Puchuq p'anqata kuyuchiyta kallpachakuy kay akllanata ruwaypi qhawanaykipaq.

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

Telón de fondo estático

Telón de fondo estático kaqman churasqa kaqtin, offcanvas mana wichq'akunqachu hawanpi ñit'ispa.

Fuera de lona
Manam wichqasaqchu hawaypi ñitiykuptikiqa.
html nisqapi 
<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>

Tutayaq offcanvas

v5.2.0 nisqapi yapasqa

Utilidades kaqwan offcanvases kaqpa rikchayninta tikray aswan allin tupachiypaq wak contextokunaman yana navbars hina. Kaypi yapayku .text-bg-darkchay .offcanvasy .btn-close-whitea .btn-closepara el estilo adecuado con un offcanvas oscuro. Sichus ukhupi urayk'aqkuna kanki, qhawariytaq .dropdown-menu-darkyapayta .dropdown-menu.

Fuera de lona

Kaypi contenido offcanvas nisqa churay.

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

Kutichiq

v5.2.0 nisqapi yapasqa

Kutichiy offcanvas clasekuna huk willasqa p'akiymanta chaymanta urayman qhaway punku hawapi willayta pakanku. Chay pakinakuypa hawanpi, ukunpi kaqmi sapa kuti hina purinqa. Ejemplopaq, .offcanvas-lghuk offcanvas kaqpi contenidota pakan kay breakpoint urapi lg, ichaqa contenidota rikuchin kay breakpoint hawapi lg.

Navegadorniykipa sayayninta tikray kutichiq offcanvas tikrayta rikuchinaykipaq.
Offcanvas kutichiq

Kayqa huk .offcanvas-lg.

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

Kutichiy offcanvas clasekuna kanku chimpapi sapa ruphaypaq.

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

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

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.

CSS nisqa

Variables nisqakuna

v5.2.0 nisqapi yapasqa

Bootstrap kaqpa wiñaq CSS tikraqkuna asuykuyninmanta huknin hina, offcanvas kunan llaqta CSS tikraqkunata llamk'achin .offcanvasallinchasqa chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

  --#{$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 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-tophawanpi kaq offcanvas nisqatam 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 ARIA Autoring Practices Guide rimanakuna (modal) patrón kaqwan tupanchu . Chaytaqa qanpa riesgoykiwanmi ruway.

JavaScript nisqawan

Makiwan atichiy kaykunawan:

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

Akllanakuna

Imaynachus akllanakuna willay layakuna utaq JavaScript kaqninta pasayta atikun, huk akllana sutita yapayta atikunki kayman data-bs-, imaynachus data-bs-animation="{value}". Aseguray akllana sutimanta caso laya “ camelCase ” kaqmanta “ kebab-case ” kaqman tikrayta mayk’aq akllanakunata atributos de datos kaqninta pasaspa. Ejemplopaq data-bs-custom-class="beautifier", data-bs-customClass="beautifier".

Bootstrap 5.2.0 kaqmanta, llapa componentakuna huk experimental waqaychasqa willay laya yanapakuyta yanapakunku data-bs-configmayqinchus JSON watiqa hina sanu componente ruwayta wasichayta atin. Huk elemento data-bs-config='{"delay":0, "title":123}'chaymanta data-bs-title="456"layakunayuq kaqtin, qhipa titlechanin kanqa 456chaymanta sapaq willay layakuna qusqa chanikunata llallichinqa data-bs-config. Chaymanta, kunan kaq willay layakuna JSON chanikunata wasichayta atinku kayhina data-bs-delay='{"show":0,"hide":150}'.

Suti Niraq Ñawpaqchasqa Willay
backdrop boolean icha chay watiqastatic true Cuerpopi huk telón de fondota churay offcanvas kichasqa kachkaptin. Hukninpi, statichuk telón de fondopaq willay mayqinchus mana offcanvas ñit'isqa kaqtin wichq'anchu.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Imayna Willay
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.
hide Huk mana lonayuq elementota pakan. Llamaqman kutimun manaraq offcanvas elemento chiqamanta pakasqa kachkaptin (icha manaraq hidden.bs.offcanvasruway ruwakuchkaptin).
show Huk mana lonayuq elementota rikuchin. Llamaqman kutimun manaraq offcanvas elemento chiqamanta rikuchisqa kachkaptin (icha manaraq shown.bs.offcanvasruway ruwakuchkaptin).
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).

Eventos nisqakuna

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

Tipo de evento Willay
hide.bs.offcanvas Kay ruwayqa chaylla llamk'achisqa kachkan mayk'aqchus hidemétodo waqyasqa kachkan.
hidden.bs.offcanvas This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.offcanvas This event is fired when the offcanvas is shown, its backdrop is static and a click outside of the offcanvas is performed. The event is also fired when the escape key is pressed and the keyboard option is set to false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})