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

Ñ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 heightivalór koꞌag̃agua guive 0. Oñeme’ẽvo mba’éichapa CSS oñatende umi animación rehe, ndaikatúi reipuru paddingpeteĩ .collapseelemento rehe. 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ã

Emboguejy umi botón iguýpe ehechauka ha emokañy hag̃ua ambue elemento mbo’esyry ñemoambue rupive:

  • .collapseomokañy contenido
  • .collapsingojeporu umi transición aja
  • .collapse.showohechauka contenido rehegua

Generalmente, romomarandu reipuru hag̃ua peteĩ botón orekóva data-bs-targetatributo. Ndojeguerohorýiramo jepe peteĩ punto de vista semántico-gui, ikatu avei reipuru peteĩ joajuha hrefatributo reheve (ha peteĩ role="button"). Mokõivévape, data-bs-toggle="collapse"oñeikotevẽ pe.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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-horizontalmbo’esyry modificador rehegua embohasa hag̃ua pe widthrangue heightha emohenda peteĩ widthelemento 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 .

Eñatendéke pe techapyrã oĩva iguýpe oguerekóramo jepe peteĩ min-heightconjunto ani hag̃ua oñepinta jey hetaiterei ore docs-pe, kóva noñeikotevẽi explícitamente. Oñeikotevẽ pe widthelemento mitã ári añoite.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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 hreftérã data-bs-targetatributo-pe. Múltiple <button>térã <a>ikatu ohechauka ha omokañy peteĩ elemento peteĩteĩva oñembohasáramo hese i hreftérã data-bs-targetatributo reheve

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.
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.
<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-expandedhag̃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 showmboꞌ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-targetatributo ohechauka peteĩ idselector-pe – emoĩvaꞌerã pe aria-controlsatributo elemento control rehegua, oguerekóva pe idelemento 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.scsskoꞌã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:

  • .collapseomokañy pe contenido
  • .collapse.showohechauka mba’épa oguereko
  • .collapsingoñ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-targetelemento-pe oñemeꞌe hag̃ua ijeheguiete control peteĩ térã hetave elemento oñembotykuaáva rehegua. Pe data-bs-targetatributo omoneĩ peteĩ CSS jeporavoha omoĩ hag̃ua pe ñemboguejy. Ejesareko porãke emoĩ hag̃ua pe mboꞌepy collapsepe 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 cardclase 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 .

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

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.collapsetérã hidden.bs.collapsembaꞌ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.collapsembaꞌ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.collapsembaꞌ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 showmé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 hidemé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...
})