Ejupi contenido principal-pe Eike docs jeguatahápe
in English

Fuera de lona rehegua

Emopu’ã umi barra lateral kañymby nde proyecto-pe reguata hag̃ua, carrito de compras ha hetave mba’e mbovymi mbo’esyry ha ore JavaScript plugin reheve.

Ko páhinape

Mba’éichapa omba’apo

Offcanvas haꞌehína peteĩ componente barra lateral rehegua ikatúva oñembohasa JavaScript rupive ojehechauka hag̃ua jehechaukaha vore akatúa, akatúa térã guy guive. Umi botón térã ancla ojepuru disparador ramo oñembojoajúva umi elemento específico rehe rembohasáva, ha dataumi atributo ojepuru oñehenói hag̃ua ñande JavaScript.

  • Offcanvas okomparti peteĩva umi código JavaScript peteĩchagua umi modal-kuéra ndive. Conceptualmente, ojoguaiterei hikuái, ha katu haꞌehína plugin añónte.
  • Upéicha avei, oĩ umi variable Sass fuente rehegua umi estilo ha dimensión offcanvas-pe g̃uarã ojeheredáva umi modal mbaꞌekuaarãgui.
  • Ojehechauka jave, offcanvas oguereko peteĩ telón de fondo por defecto ikatúva ojepyso oñeñomi hag̃ua offcanvas.
  • Ojogua umi modal-pe, peteĩ offcanvas añoite ikatu ojehechauka peteĩ jeýpe.

¡Akã yvate! Oñeme’ẽvo mba’éichapa CSS oñatende umi animación rehe, ndaikatúi reipuru margintérã translatepeteĩ .offcanvaselemento ári. Upéva rangue, eipuru pe clase peteĩ elemento de envoltura independiente ramo.

Pe efecto animación rehegua ko componente rehegua odepende pe prefers-reduced-motionconsulta medio rehegua rehe. Ehecha pe sección movimiento reducido ore kuatia accesibilidad rehegua .

Tembiecharã

Umi componente fuera de lona rehegua

Iguýpe oĩ peteĩ techapyrã offcanvas ojehechaukáva por defecto (vía .showon .offcanvas). Offcanvas oike pytyvõ peteĩ iñakãrapuꞌa orekóva peteĩ botón ñemboty ha peteĩ clase cuerpo opcional algún ñepyrũrãme g̃uarã padding. Ro’e ndéve remoĩ hag̃ua umi iñakãrapu’ãva offcanvas-pegua umi tembiapo ñemboyke reheve ikatu jave, térã eme’ẽ hag̃ua peteĩ tembiapo ñemboyke hesakãva.

Fuera de lona rehegua
Contenido pe offcanvas-pe g̃uarã oho ko’ápe. Ikatu emoĩ ko’ápe haimete oimeraẽva componente Bootstrap térã elemento personalizado. 
<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 rehegua

Eipuru umi botón iguýpe ehechauka ha emokañy hag̃ua peteĩ elemento offcanvas JavaScript rupive ombohasáva .showmboꞌepy peteĩ elemento rehe .offcanvasmboꞌepy ndive.

  • .offcanvasomokañy contenido (oñemoĩva’ekue) .
  • .offcanvas.showohechauka contenido rehegua

Ikatu reipuru peteĩ joajuha oguerekóva hrefatributo, térã peteĩ botón oguerekóva data-bs-targetatributo. Mokõivévape, data-bs-toggle="offcanvas"oñeikotevẽ pe.

Enlace con href rehegua
Fuera de lona rehegua
Oĩ jehaipyre tenda’i ramo. Tekove añeteguápe ikatu reguereko umi elemento reiporavova’ekue. Ha’eháicha, jehaipyre, ta’anga, lista, hamba’e. 
<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>

Oñemohenda haguã

Ndaipóri ñemohenda por defecto umi componente offcanvas-pe g̃uarã, upévare emoĩva’erã peteĩva umi clase modificador iguýpe;

  • .offcanvas-startomoĩ offcanvas jehechaukaha akatúape (ojehechauka yvate) .
  • .offcanvas-endomoĩ offcanvas pe jehechaukaha akatúape
  • .offcanvas-topomoĩ offcanvas pe jehechaukaha yvate gotyo
  • .offcanvas-bottomomoĩ offcanvas jehechaukaha guype

Eñeha’ã umi techapyrã yvate, derecha ha iguypegua oĩva ko’ápe.

Top de lona 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>
Offcanvas rehegua
... 
<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 rehegua
... 
<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 rehegua

Ojedesplaza <body>elemento ojedesactiva ojehecha jave peteĩ offcanvas ha itelón de fondo. Eipuru data-bs-scrollatributo emoambue hag̃ua <body>desplazamiento ha data-bs-backdropemoambue hag̃ua telón de fondo.

Oñecolora desplazamiento reheve

Eñeha’ã edesplaza pe página hembýva rehecha hag̃ua ko opción acción-pe.

Offcanvas con telón de fondo

..... .

Telón de fondo con desplazamiento

Eñeha’ã edesplaza pe página hembýva rehecha hag̃ua ko opción acción-pe.

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

Accesibilidad rehegua

Pe panel offcanvas ha’égui conceptualmente peteĩ diálogo modal, katuete emoĩve aria-labelledby="..."—oñe’ẽvo título fuera de lona rehe— -pe .offcanvas. Eñamindu’u natekotevẽiha remoĩve romoĩma role="dialog"guive JavaScript rupive.

Sass rehegua

Variables rehegua

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

Jeporu rehegua

Pe plugin offcanvas oipuru mbovymi clase ha atributo omaneha hag̃ua pe levantamiento pohýi:

  • .offcanvasomokañy pe contenido
  • .offcanvas.showohechauka mba’épa oguereko
  • .offcanvas-startomokañy pe offcanvas ijasu gotyo
  • .offcanvas-endomokañy pe offcanvas oĩva derecha gotyo
  • .offcanvas-bottomomokañy pe offcanvas iguype

Emoĩ peteĩ mboajepyréva mboajepyréva data-bs-dismiss="offcanvas"atributo reheve, omoñepyrũva JavaScript rembiaporã. Eipuru katuete <button>elemento hendive ejepokuaa porã hag̃ua opaite tembipuru’i rupi.

Umi atributo de datos rupive

Oñemoĩ data-bs-toggle="offcanvas"ha peteĩ data-bs-targettérã hrefelemento-pe oñemeꞌe hag̃ua ijeheguiete control peteĩ elemento offcanvas rehegua. Pe data-bs-targetatributo omoneĩ peteĩ CSS jeporavoha ojepuru hag̃ua offcanvas-pe. Ejesareko katuete emoĩ hag̃ua pe clase offcanvaselemento offcanvas-pe. Oipotáramo ojepe’a por defecto, emoĩve pe clase adicional show.

JavaScript rupive

Emboguata manualmente ko’ãva ndive:

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

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-bs-, -peguáicha data-bs-backdrop="".

Téra Hesegua Upevakuére Techaukaha
backdrop booleano rehegua true Oñemoĩ peteĩ telón de fondo hete rehe ojepe’a aja offcanvas
keyboard booleano rehegua true Omboty pe offcanvas ojepysóramo tecla escape
scroll booleano rehegua false Oheja tete desplazamiento ojepe’a aja offcanvas

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua .

Omomba’apo ne contenido peteĩ elemento offcanvas ramo. Omoneĩ peteĩ opción opcional object.

Ikatu ejapo peteĩ instancia offcanvas rehegua constructor ndive, techapyrãramo:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Tapereko Techaukaha
toggle Ombohasa peteĩ elemento offcanvas ojehechauka térã oñeñomi hag̃ua. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe elemento offcanvas (heꞌiséva oiko mboyve pe shown.bs.offcanvastérã hidden.bs.offcanvasmbaꞌe ojehúva).
show Ohechauka peteĩ elemento offcanvas rehegua. Ojevy ohenóivape ojehechauka mboyve añetehápe elemento offcanvas (heꞌiséva oiko mboyve pe shown.bs.offcanvasmbaꞌe ojehúva).
hide Oñomi peteĩ elemento fuera de lona. Ojevy ohenóivape oñeñomi mboyve añetehápe elemento offcanvas (heꞌiséva oiko mboyve pe hidden.bs.offcanvasmbaꞌe ojehúva).
getInstance Método estático ohejáva ndéve rehupyty hag̃ua instancia offcanvas ojoajúva peteĩ elemento DOM rehe
getOrCreateInstance Método estático ohejáva ndéve rehupyty instancia offcanvas ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu en caso noñemoñepyrũi

Umi mba’e oikóva

Bootstrap clase offcanvas oikuaauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad offcanvas-pe.

Tipo de evento rehegua Techaukaha
show.bs.offcanvas Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua.
shown.bs.offcanvas Ko mbaꞌe ojehúva oñembogue ojejapo jave peteĩ elemento offcanvas ojehecha hag̃ua puruhárape (ohaꞌarõta oñembotývo umi CSS jeguerahauka).
hide.bs.offcanvas Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo.
hidden.bs.offcanvas Ko mbaꞌe ojehúva oñembogue oñeñomi jave peteĩ elemento offcanvas puruháragui (ohaꞌarõta oñembotývo umi CSS jehasaha). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})