Collapsible
Mostrar parámetros
Parámetros del componente
params:
- name: headerText
type: string
required: true
description: If `headerHtml` is set, this is not required. Text to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.
- name: headerHtml
type: string
required: true
description: If `headerText` is set, this is not required. HTML to use within the header element (the visible part of the collapsible element). If `headerHtml` is provided, the `headerText` argument will be ignored.
- name: text
type: string
required: true
description: If `html` is set, this is not required. Text to use within the disclosed part of the collapsible element. If `html` is provided, the `text` argument will be ignored.
- name: html
type: string
required: true
description: If `text` is set, this is not required. HTML to use within the disclosed part of the collapsible element. If `html` is provided, the `text` argument will be ignored.
- name: id
type: string
required: false
description: Id to add to the collapsible element. Not required, but recommended to improve the accessibility.
- name: open
type: boolean
required: false
description: If true, collapsible element will be expanded.
- name: classes
type: string
required: false
description: Classes to add to the collapsible container element.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the collapsible container element.
Por defecto #
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
"id": "collapsible-example",
"headerText": "Cabecera del collapsible",
"text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}) }}
HTML
<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-module="c-collapsible">
<button aria-expanded="false" id="collapsible-example-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-example">Cabecera del collapsible
<span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
<span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none hidden" aria-hidden="true">Ocultar</span>
</button>
<div aria-hidden="true" class="c-collapsible__content hidden py-sm" id="collapsible-example">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- /collapsible -->
Expandido #
Mostrar códigodel ejemplo: Expandido
Contenido
Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
"id": "help-with-nationality",
"headerText": "Cabecera del collapsible",
"text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"open": true
}) }}
HTML
<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-expanded="true" data-module="c-collapsible">
<button aria-expanded="false" id="help-with-nationality-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="help-with-nationality">Cabecera del collapsible
<span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
<span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none hidden" aria-hidden="true">Ocultar</span>
</button>
<div aria-hidden="true" class="c-collapsible__content hidden py-sm" id="help-with-nationality">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- /collapsible -->
Con html #
Mostrar códigodel ejemplo: Con html
Contenido
Nunjucks macro
{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}
{{ componentCollapsible({
"id": "collapsible-html-example",
"headerText": "Cabecera del collapsible",
"html": "<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod\n tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse\n cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non\n proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
}) }}
HTML
<!-- collapsible -->
<div class="-my-px py-sm border-t border-b border-neutral-base c-collapsible" data-module="c-collapsible">
<button aria-expanded="false" id="collapsible-html-example-title" class="group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-controls="collapsible-html-example">Cabecera del collapsible
<span class="c-collapsible__show absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none " aria-hidden="false">Mostrar</span>
<span class="c-collapsible__hide absolute inset-y-0 right-0 py-sm font-normal text-sm text-neutral-dark underline group-focus:text-black pointer-events-none hidden" aria-hidden="true">Ocultar</span>
</button>
<div aria-hidden="true" class="c-collapsible__content hidden py-sm" id="collapsible-html-example">
<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse
cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- /collapsible -->