Ñembyaipa
Embohasa mba’ekuaarã jehechauka nde proyecto tuichakue javeve mbovymi mbo’esyry ha ore JavaScript mboajepyréva reheve.
Mba’éichapa omba’apo
Pe JavaScript ñemboguejyha ojepuru ojehechauka ha oñeñomi hag̃ua mbaꞌekuaarã. Umi botón térã ancla ojepuru disparador ramo oñembohapéva umi elemento específico rembohasávape. Oñemboguejýramo peteĩ elemento omoingovéta pe height
ivalór koꞌag̃agua guive 0
. Oñeme’ẽvo mba’éichapa CSS oñatende umi animación rehe, ndaikatúi reipuru padding
peteĩ .collapse
elemento rehe. 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ã
Emboguejy umi botón iguýpe ehechauka ha emokañy hag̃ua ambue elemento mbo’esyry ñemoambue rupive:
.collapse
omokañy contenido.collapsing
ojeporu umi transición aja.collapse.show
ohechauka contenido rehegua
Generalmente, romomarandu reipuru hag̃ua peteĩ botón orekóva data-bs-target
atributo. Ndojeguerohorýiramo jepe peteĩ punto de vista semántico-gui, ikatu avei reipuru peteĩ joajuha href
atributo reheve (ha peteĩ role="button"
). Mokõivévape, data-bs-toggle="collapse"
oñeikotevẽ pe.
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Ipekuévo
Pe plugin colapso oipytyvõ avei colapso horizontal. Emoĩve .collapse-horizontal
mbo’esyry modificador rehegua embohasa hag̃ua pe width
rangue height
ha emohenda peteĩ width
elemento mitã pya’e rehe. Eñeñandu líbre ehai hag̃ua nde Sass jeporupyre, eipuru estilo en línea térã eipuru ore utilidad ancho rehegua .
min-height
conjunto ani hag̃ua oñepinta jey hetaiterei ore docs-pe, kóva noñeikotevẽi explícitamente.
Oñeikotevẽ pe width
elemento mitã ári añoite.
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Heta mba’e ojehupytyséva
A <button>
térã <a>
ikatu ohechauka ha omokañy heta elemento oñembohapévo peteĩ selector reheve i href
térã data-bs-target
atributo-pe. Múltiple <button>
térã <a>
ikatu ohechauka ha omokañy peteĩ elemento peteĩteĩva oñembohasáramo hese i href
térã data-bs-target
atributo reheve
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Accesibilidad rehegua
Ejesareko katuete emoĩve aria-expanded
hag̃ua pe elemento control rehegua. Ko atributo ombohasa explícitamente estado ko'ágã elemento plegable ojoajúva control umi lector pantalla ha tecnologías de ayuda ojoajúva. Pe elemento oñembotykuaáva oñembotýramo por defecto, pe atributo oĩva elemento control rehegua oguerekovaꞌerã peteĩ valor aria-expanded="false"
. Emohenda ramo elemento oñembotykuaáva ojepeꞌa hag̃ua por defecto eipurúvo show
mboꞌepy, emohenda aria-expanded="true"
control-pe hendaguépe. Pe plugin ombohasáta ijeheguiete ko atributo control-pe oñemopyendáva ojepeꞌa térã oñembotýpa térã nahániri pe elemento oñembotykuaáva (JavaScript rupive, térã puruhára omoñepyrũgui ambue elemento control rehegua oñembojoajúva avei peteĩchagua elemento oñembotykuaáva rehe). Pe elemento control elemento HTML rehegua ndahaꞌeiramo peteĩ botón (techapyrã, peteĩ <a>
térã <div>
), pe atributorole="button"
oñembojoapyva’erã elemento rehe.
Nde elemento control rehegua ojepytasóramo peteĩ elemento oñembotykuaáva rehe – heꞌiséva pe data-bs-target
atributo ohechauka peteĩ id
selector-pe – emoĩvaꞌerã pe aria-controls
atributo elemento control rehegua, oguerekóva pe id
elemento oñembotykuaáva rehegua. Umi pantalla moñeꞌerã koꞌag̃agua ha umi tecnología pytyvõrã ojoguáva oipuru ko atributo omeꞌe hag̃ua puruhárape tape mbykymi ambuéva oho hag̃ua directamente elemento oñembotykuaávape voi.
Eñamindu’u Bootstrap ñemboguata ko’áĝagua ndoikói opaichagua teclado jepuru opcional rehegua oñemombe’úva WAI-ARIA Authoring Practices 1.1 acordeón jeporupyre - tekotevẽta emoinge ko’ãva ndete voi JavaScript jeporupyre reheve.
Sass rehegua
Variables rehegua
$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Mbo’esyrykuéra rehegua
Umi clase transición colapso rehegua ikatu ojejuhu en scss/_transitions.scss
koꞌãva oñembojaꞌoháicha heta componente rupi (collapso ha acordeón).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}
Jeporu rehegua
Pe plugin colapso oipuru mbovymi mbo’esyry omaneha hag̃ua pe levantamiento pohýi:
.collapse
omokañy pe contenido.collapse.show
ohechauka mba’épa oguereko.collapsing
oñembojoapy oñepyrũvo jehaipyre, ha ojeipeꞌa opa vove
Ko’ã mbo’esyry ikatu ojejuhu _transitions.scss
.
Umi atributo de datos rupive
Oñemoĩnte data-bs-toggle="collapse"
ha peteĩ data-bs-target
elemento-pe oñemeꞌe hag̃ua ijeheguiete control peteĩ térã hetave elemento oñembotykuaáva rehegua. Pe data-bs-target
atributo omoneĩ peteĩ CSS jeporavoha omoĩ hag̃ua pe ñemboguejy. Ejesareko porãke emoĩ hag̃ua pe mboꞌepy collapse
pe elemento oñembotývape. Oipotáramo ojepe’a por defecto, emoĩve pe clase adicional show
.
Oñemoĩ hag̃ua acordeón-ichagua jesareko aty rehegua peteĩ área oñembotykuaávape, emoĩve atributo dato rehegua data-bs-parent="#selector"
. Ehechamína pe páhina acordeón rehegua reikuaave hag̃ua.
JavaScript rupive
Emboguata manualmente ko’ãva ndive:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
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-parent=""
.
Téra | Hesegua | Upevakuére | Techaukaha |
---|---|---|---|
parent |
selector rehegua | jQuery mba'e | Elemento DOM rehegua | false |
Oñemeꞌeramo túva, upéicharamo opaite elemento oñembotykuaáva túva ojeꞌevaꞌekue guýpe oñembotýta ojehechauka jave ko mbaꞌe oñembotykuaáva. (ojoguaite acordeón reko yma guarépe - kóva odepende card clase rehe). Pe atributo oñemohendavaꞌerã pe área oñembotýva destino rehe. |
toggle |
booleano rehegua | true |
Ombohasa elemento oñemboguejýva ñehenói jave |
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 oñemboguejýva ramo. Omoneĩ peteĩ opción opcional object
.
Ikatu ejapo peteĩ instancia colapso rehegua constructor ndive, techapyrãramo:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Tapereko | Techaukaha |
---|---|
toggle |
Ombohasa peteĩ elemento oñembotykuaáva ojehechauka térã oñeñomi hag̃ua. Ojevy ohenóivape ojehechauka térã oñeñomi mboyve añetehápe elemento oñembotýva (heꞌiséva oiko mboyve shown.bs.collapse térã hidden.bs.collapse mbaꞌe ojehúva). |
show |
Ohechauka peteĩ elemento oñembotykuaáva. Ojevy ohenóivape ojehechauka mboyve añetehápe elemento oñembotykuaáva (techapyrã, oiko mboyve pe shown.bs.collapse mbaꞌe ojehúva). |
hide |
Oñomi peteĩ elemento oñembotykuaáva. Ojevy ohenóivape oñeñomi mboyve añetehápe elemento oñembotykuaáva (techapyrã, oiko mboyve pe hidden.bs.collapse mbaꞌe ojehúva). |
dispose |
Ombyai peteĩ elemento ñembyai. (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe) |
getInstance |
Método estático ohejáva ndéve rehupyty instancia colapso ojoajúva peteĩ elemento DOM rehe, ikatu reipuru péicha:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Método estático ombojevýva peteĩ instancia colapso ojoajúva peteĩ elemento DOM rehe térã omoheñói peteĩ pyahu en caso noñemoñepyrũi. Ikatu reipuru péicha:bootstrap.Collapse.getOrCreateInstance(element) |
Umi mba’e oikóva
Bootstrap clase de colapso ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad colapso-pe.
Tipo de evento rehegua | Techaukaha |
---|---|
show.bs.collapse |
Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave show método instancia rehegua. |
shown.bs.collapse |
Ko mbaꞌe ojehúva oñembogue ojejapo jave peteĩ elemento collapso ojehecha hag̃ua puruhárape (ohaꞌarõta oñembotývo umi CSS jehasaha). |
hide.bs.collapse |
Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hide método. |
hidden.bs.collapse |
Ko mbaꞌe ojehúva oñembogue oñeñomi jave peteĩ elemento collapso puruháragui (ohaꞌarõta oñembotývo umi CSS jehasaha). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})