desy-html

Details

Mostrar parámetros

Parámetros del componente

              params:
- name: summary
  type: object
  required: true
  description: Summary that opens the content
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the summary element (the visible part of the details element). If `summaryHtml` is provided, the `summaryText` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the inner `span` container inside the `<summary>` element. If not privided, it uses .c-link class.
- name: containerClasses
  type: string
  required: false
  description: Classes that can be added to the inner container.
- name: id
  type: string
  required: false
  description: Id to add to the details element.
- name: open
  type: boolean
  required: false
  description: If true, details element will be expanded.
- name: classes
  type: string
  required: false
  description: Classes to add to the `<details>` element.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the `<details>` element.
- name: caller
  type: nunjucks-block
  required: false
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.

Por defecto

Más información

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro


{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "summary": {
    "html": "Más información"
  }
}) %}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid distinctio mollitia itaque placeat voluptatibus, veritatis recusandae odio facere corporis laboriosam quam quia sequi, possimus consequatur enim veniam eius soluta esse.</p>
{% endcall  %}

Expandido

Usa el parámetro "open": true para mostrar inicialmente abierto un item.

Más información

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.

Mostrar códigodel ejemplo: Expandido

Contenido

Nunjucks macro


{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "id": "mas-informacion",
  "summary": {
    "text": "Más información"
  },
  "open": true
}) %}
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates eum cupiditate quod minima consequuntur, eveniet aspernatur eius, consectetur ad, a enim atque dicta, repellat voluptatum iusto hic perspiciatis laboriosam unde.</p>
{% endcall  %}

Con html

Más información actualizada

Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.

Mostrar códigodel ejemplo: Con html

Contenido

Nunjucks macro


{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "summary": {
    "html": "Más información <em>actualizada</em>"
  }
}) %}
<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>
{% endcall  %}

Con clases

Más información actualizada

Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.

Mostrar códigodel ejemplo: Con clases

Contenido

Nunjucks macro


{% from "components/details/_macro.details.njk" import componentDetails %}
{% call componentDetails({
  "summary": {
    "html": "Más información <em>actualizada</em>",
    "classes": "hover:underline"
  },
  "classes": "p-base bg-primary-light text-primary-base",
  "containerClasses": "p-base"
}) %}
<p>Lorem ipsum dolor, sit amet <strong>consectetur</strong>, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>
{% endcall  %}