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.
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 data
umi 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 margin
térã translate
peteĩ .offcanvas
elemento ári. Upéva rangue, eipuru pe clase peteĩ elemento de envoltura independiente ramo.
prefers-reduced-motion
consulta 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 .show
on .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
<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 .show
mboꞌepy peteĩ elemento rehe .offcanvas
mboꞌepy ndive.
.offcanvas
omokañy contenido (oñemoĩva’ekue) ..offcanvas.show
ohechauka contenido rehegua
Ikatu reipuru peteĩ joajuha oguerekóva href
atributo, térã peteĩ botón oguerekóva data-bs-target
atributo. Mokõivévape, data-bs-toggle="offcanvas"
oñeikotevẽ pe.
Fuera de lona 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 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-start
omoĩ offcanvas jehechaukaha akatúape (ojehechauka yvate) ..offcanvas-end
omoĩ offcanvas pe jehechaukaha akatúape.offcanvas-top
omoĩ offcanvas pe jehechaukaha yvate gotyo.offcanvas-bottom
omoĩ 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
Ojedesactiva <body>
elemento desplazamiento ojehecha jave peteĩ offcanvas ha itelón de fondo. Eipuru data-bs-scroll
atributo emoambue hag̃ua <body>
desplazamiento ha data-bs-backdrop
emoambue hag̃ua telón de fondo.
Ojecolora desplazamiento reheve
Eñeha’ã eñemongu’e pe páhina hembýva rehecha hag̃ua ko opción hembiapohápe.
Offcanvas con telón de fondo
..... .
Telón de fondo con desplazamiento
Eñeha’ã eñemongu’e pe páhina hembýva rehecha hag̃ua ko opción hembiapohá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">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 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;
$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:
.offcanvas
omokañy pe contenido.offcanvas.show
ohechauka mba’épa oguereko.offcanvas-start
omokañy pe offcanvas ijasu gotyo.offcanvas-end
omokañy pe offcanvas oĩva derecha gotyo.offcanvas-bottom
omokañ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-target
térã href
elemento-pe oñemeꞌe hag̃ua ijeheguiete control peteĩ elemento offcanvas rehegua. Pe data-bs-target
atributo omoneĩ peteĩ CSS jeporavoha ojepuru hag̃ua offcanvas-pe. Ejesareko katuete emoĩ hag̃ua pe clase offcanvas
elemento offcanvas-pe. Oipotáramo ojepe’a por defecto, emoĩve pe clase adicional show
.
Mboyke
Despido ikatu ojehupyty data
atributo 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-target
ojehechaukaháicha ko’ápe:
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
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 .
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.offcanvas térã hidden.bs.offcanvas mbaꞌ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.offcanvas mbaꞌ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.offcanvas mbaꞌ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 show mé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 hide mé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...
})