Ñembyaipa

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.

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.

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

<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

<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 joaju opcional oñemombe’úva ARIA Authoring Practices Guide acordeón ra’ãngápe - 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:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

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}'.

Método-kuéra rehegua

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:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Umi mba’e oikóva

Bootstrap clase de colapso ohechauka mbovymi mbaꞌe ojehúva oñembojoaju hag̃ua funcionalidad colapso-pe.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})