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

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-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-toggle="collapse"oñeikotevẽ pe.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-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 .widthmbo’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-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      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ĩ JQuery jeporavoha ndive i hreftérã data-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-targetatributo reheve

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-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>

Acordeón techapyrã

Eipurúvo componente tarjeta rehegua, ikatu embopuku pe comportamiento colapso por defecto emoheñói hag̃ua peteĩ acordeón. Ojehupyty hagua hekopete pe estilo acordeón rehegua, katuete ojepuru .accordionenvoltura ramo.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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-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 oñemombe’úva ARIA Ñemboguatarã Ñemboguatarã Acordeón ñemohendapyrépe - tekotevẽta ndete voi remoinge ko’ãva JavaScript jeporupyre reheve.

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-toggle="collapse"ha peteĩ data-targetelemento-pe oñemeꞌe hag̃ua ijeheguiete control peteĩ térã hetave elemento oñembotykuaáva rehegua. Pe data-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-parent="#selector". Ehechamína pe demostración rehecha hag̃ua kóva acción-pe.

JavaScript rupive

Emboguata manualmente ko’ãva ndive:

$('.collapse').collapse()

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-, -peguáicha data-parent="".

Método-kuéra rehegua

.collapse(options)

Omomba’apo ne contenido peteĩ elemento oñemboguejýva ramo. Omoneĩ peteĩ opción opcional object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('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).

.collapse('show')

Ohechauka peteĩ elemento oñembotykuaáva. Ojevy ohenóivape ojehechauka mboyve añetehápe elemento oñembotykuaáva (heꞌiséva oiko mboyve pe shown.bs.collapsembaꞌe ojehúva).

.collapse('hide')

Oñomi peteĩ elemento oñembotykuaáva. Ojevy ohenóivape oñeñomi mboyve añetehápe elemento oñembotykuaáva (heꞌiséva oiko mboyve pe hidden.bs.collapsembaꞌe ojehúva).

.collapse('dispose')

Ombyai peteĩ elemento ñembyai.

Umi mba’e oikóva

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

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})