new AccordionBody(id, options, href, data, include_variablesnullable, contextnullable, use_spinneropt)
Componente que renderiza el body de un Accordion de Bootstrap.
Parameters:
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
id |
string | Identificador unico de body |
||
options |
string | Json string de propiedades que van al Collapse dentro del Body |
||
href |
string | Operacion que se va a ejecutar con tarjet operation al abrir el panel |
||
data |
string | Json string con data que se envia a la operacion (solo si href tiene un valor) |
||
include_variables |
string |
<nullable> |
Lista de variables que se incluyen en la data (separadas por espacio) |
|
context |
string |
<nullable> |
Contexto contenedor de las variables que se van a incluir, es requerido si se incluyen variables |
|
use_spinner |
BooleanString |
<optional> |
"true" | Si es true se muestra un spinner mientras se espera la respuesta del servidor |
- Source:
Example
<accordion default_open="1">
<accordion_item options='{"className":"card card-style"}'>
<div class="card-header d-flex">
<div class="align-self-center">
<h6 class="pt-1 font-14 font-600">Factura 0000-111111</h6>
</div>
<div class="align-self-center ms-auto text-end">
<h6 class="pt-1 font-14 font-600">10/03/2022</h6>
</div>
</div>
<accordion_header target="1">
<!-- header -->
<div class="card-body d-flex mb-2" style="height: auto; padding: 0.5rem 1rem;">
<div class="align-self-center" style="max-width: 240px">
<h6 class="mb-n1 font-12 opacity-60">Heladera con Freezer Gafa 282 Litros</h6>
<h6 class="pt-1 mb-n1 font-12 opacity-60">Smart TV 43" Samsung</h6>
<h6 class="pt-1 mb-n1 font-12 opacity-60">Aire Acondicionado Split</h6>
</div>
<div class="align-self-center ms-auto text-end pt-1">
<p class="mb-0 font-11 opacity-70" style="line-height: 10px">Monto a pagar</p>
<p class="mb-0 font-15 color-blue-dark font-700">$20.000,00</p>
<p class="mb-0 font-11 opacity-70" style="line-height: 10px">Vence</p>
<p class="mb-0 font-13 color-blue-dark font-700">19/03/2022</p>
</div>
</div>
<!-- comprobante fin -->
</accordion_header>
<accordion_body id="1" href='Operacion' data='{"propiedad": "valor"}'>
<strong>
This is the second item's accordion body.
</strong>
You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the{' '}
<code>
.accordion-body
</code>
, though the transition does limit overflow.
</accordion_body>
</accordion_item>