Ejupi contenido principal-pe Eike docs jeguatahápe
Check
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 niko peteĩ componente barra lateral rehegua ikatúva oñembohasa JavaScript rupive ojehechauka hag̃ua jehechaukaha vore akatúa, akatúa, yvate 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.
html rehegua 
<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 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.
html rehegua 
<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>

Tete rehegua desplazamiento

Ojedesactiva <body>elemento desplazamiento ojehecha jave peteĩ offcanvas ha itelón de fondo. Eipuru data-bs-scrollatributo emboguata hag̃ua <body>desplazamiento.

Offcanvas orekóva desplazamiento cuerpo rehegua

Eñeha’ã eñemongu’e pe páhina hembýva rehecha hag̃ua ko opción hembiapohápe.

html rehegua 
<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 corporal ha telón de fondo

Ikatu avei emboguata <body>desplazamiento peteĩ telón de fondo ojehecháva reheve.

Telón de fondo con desplazamiento

Eñeha’ã eñemongu’e pe páhina hembýva rehecha hag̃ua ko opción hembiapohápe.

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

Oñemohenda jave telón de fondo estático-pe, pe offcanvas noñembotymo’ãi ojepyso jave okápe.

Fuera de lona rehegua
Ndambotymo’ãi remboguapýramo che okaháre.
html rehegua 
<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>

Offcanvas iñypytũva

Oñemoĩve v5.2.0-pe

Emoambue umi offcanvases jehechauka umi utilidad reheve ombojoaju porãve hag̃ua opaichagua contexto-pe umi navbar iñypytũvaicha. Ko’ápe ñamoĩve .text-bg-darkpe .offcanvasha .btn-close-whiteto .btn-close-pe estilo hekopete peteĩ offcanvas iñypytũva reheve. Oiméramo reguereko umi desplegable hyepýpe, ehecha avei emoĩve .dropdown-menu-darkhag̃ua .dropdown-menu.

Fuera de lona rehegua

Emoĩ ko’ápe contenido fuera de lona.

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

Ombohováiva

Oñemoĩve v5.2.0-pe

Umi clase offcanvas ombohováiva omokañy contenido okápe jehechaukaha peteĩ punto de ruptura oje’évagui ha oguejy. Upe punto de ruptura ári, umi contenido oĩva hyepýpe oñekomporta jepiguáicha. Techapyrã, .offcanvas-lgomokañy contenido peteĩ offcanvas-pe punto de lgruptura guýpe, ha katu ohechauka contenido punto de lgruptura ári.

Emoambue ne kundahára tuichakue ehechauka hag̃ua pe toggle offcanvas ombohováiva.
Offcanvas ombohováiva

Kóva ha’e contenido peteĩ .offcanvas-lg.

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

Umi clase offcanvas ombohováiva ojeguereko opaite gotyo peteĩteĩva punto de ruptura-pe g̃uarã.

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

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
...
html rehegua 
<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>
Offcanvas rehegua
...
html 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 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 rehegua
...
html 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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </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.

CSS rehegua

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã ñemboheko oñembohapévape, offcanvas koꞌág̃a oipuru CSS mbaꞌekuaarã tendápegua on .offcanvasoñembotuichave hag̃ua ñembohekopyrã tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

  --#{$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 mba’ekuaarã

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

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-topomokañy pe offcanvas yvate 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

Toggle rehegua

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.

Mboyke

Despido ikatu ojehupyty dataatributo reheve peteĩ botón -pe oĩva offcanvas ryepýpe ojehechaukaháicha ko’ápe:

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

térã peteĩ botón okápe offcanvas- pe ojeporúvo pe data-bs-targetojehechaukaháicha ko’ápe:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Oñepytyvõramo jepe mokõive tape oñemboyke hag̃ua peteĩ offcanvas, eñongatu ne akãme oñemboyke hag̃ua peteĩ offcanvas okáguio ndojoajúi ARIA Authoring Practices Guide ñe’ẽñemi (modal) jeporupyre ndive . Ejapo upéva nde riesgo reheve.

JavaScript rupive

Emboguata manualmente ko’ãva ndive:

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

Opciones rehegua

Umi opción ikatuháicha oñembohasa atributo de datos térã JavaScript rupive, ikatu emoĩ peteĩ opción réra data-bs-, -peguáicha data-bs-animation="{value}". Ejesareko emoambue hag̃ua káso tipo opción réra “ camelCase ”-gui “ kebab-case ”-pe embohasávo umi opción atributo de datos rupive. Por ehémplo, eipuru data-bs-custom-class="beautifier"rangue data-bs-customClass="beautifier".

Bootstrap 5.2.0 guive, opaite componente oipytyvõ peteĩ atributo dato reservado experimentaldata-bs-config ikatúva oñemohenda componente configuración simple peteĩ cadena JSON ramo. Peteĩ elemento oguerekóramo data-bs-config='{"delay":0, "title":123}'ha data-bs-title="456"atributo, pe valor paha titlehaꞌeta 456ha umi atributo dato rehegua añónte omboykéta umi valor oñemeꞌevaꞌekue data-bs-config. Avei, umi atributo dato rehegua oĩmava ikatu oguereko JSON mbaꞌekuaarã data-bs-delay='{"show":0,"hide":150}'.

Téra Hesegua Upevakuére Techaukaha
backdrop boolean térã pe vorestatic true Oñemoĩ peteĩ telón de fondo hete rehe ojepe’a aja offcanvas. Ikatu avei, emombe’u staticpeteĩ telón de fondo-pe g̃uarã nombotýiva offcanvas ojepyso jave.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Tapereko Techaukaha
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.
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).
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).
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).

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
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).
hidePrevented.bs.offcanvas Ko mbaꞌe ojehúva ojehechauka jave offcanvas, itelón de fondo haꞌe staticha ojejapo peteĩ clic okápe offcanvas-gui. Avei oñembopu pe mbaꞌe ojehúva ojepysóramo tecla escape ha oñemboguapy keyboardopción false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})