desy-html

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: buttonClasses
  type: string
  required: false
  description: Classes to add to the button element.
- name: showClasses
  type: string
  required: false
  description: Classes to add to the show element.
- name: hideClasses
  type: string
  required: false
  description: Classes to add to the hide element.
- name: contentClasses
  type: string
  required: false
  description: Classes to add to the content element.
- 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-default",
  "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."
}) }}

Expandido

Añade open: true a un item para mostrarlo abierto inicialmente.

Mostrar códigodel ejemplo: Expandido

Contenido

Nunjucks macro

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-initially-expanded",
  "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
}) }}

Expandido con javascript

También puedes usar con javascript la función global activateItemCollapsible(element, open), para mostrar un item abierto o cerrado, usando su id, el parámetro open admite true o false, si le pasamos true se mostrará abierto, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe activateItemCollapsible("collapsible-expanded-title", true) para mostrar el item actual abierto.

Mostrar códigodel ejemplo: Expandido con javascript

Contenido

Nunjucks macro

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-expanded",
  "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."
}) }}

Con html

Mostrar códigodel ejemplo: Con html

Contenido

Nunjucks macro

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-html",
  "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>"
}) }}

Con clases aplicadas

Puedes añadir clases a todos los elementos para cambiar su apariencia

Mostrar códigodel ejemplo: Con clases aplicadas

Contenido

Nunjucks macro

{% from "components/collapsible/_macro.collapsible.njk" import componentCollapsible %}

{{ componentCollapsible({
  "id": "collapsible-classes",
  "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.",
  "classes": "p-base bg-primary-light flex flex-wrap gap-base",
  "buttonClasses": "c-button self-start",
  "showClasses": "!hidden",
  "hideClasses": "!hidden",
  "contentClasses": "flex-1 border border-neutral-base p-base bg-white rounded"
}) }}