Detalles

Mostrar y ocultar

Son elementos desplegables que incluyen información adicional generalmente en forma de texto.

Details

Mostrar parámetros

Parámetros Nunjucks del componente: "Details"

              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ódigo

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  %}

HTML

<!-- details -->
<details class="">
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black">
    <span class="c-link">
      Más información
    </span>
  </summary>
  <div class="py-sm">
    <div>
      <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>
    </div>
  </div>
</details>
<!-- /details -->

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ódigo

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  %}

HTML

<!-- details -->
<details id="mas-informacion" class="" open>
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black">
    <span class="c-link">
      Más información
    </span>
  </summary>
  <div class="py-sm">
    <div>
      <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>
    </div>
  </div>
</details>
<!-- /details -->

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ódigo

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  %}

HTML

<!-- details -->
<details class="">
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black">
    <span class="c-link">
      Más información <em>actualizada</em>
    </span>
  </summary>
  <div class="py-sm">
    <div>
      <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>
    </div>
  </div>
</details>
<!-- /details -->

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ódigo

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  %}

HTML

<!-- details -->
<details class=" p-base bg-primary-light text-primary-base">
  <summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black">
    <span class="hover:underline">
      Más información <em>actualizada</em>
    </span>
  </summary>
  <div class="py-sm">
    <div class="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>
    </div>
  </div>
</details>
<!-- /details -->

Componentes Índice de páginas

Detalles

Details

Por defecto #

Descripción visual

Contenido

Nunjucks macro

HTML

Expandido #

Descripción visual

Contenido

Nunjucks macro

HTML

Con html #

Descripción visual

Contenido

Nunjucks macro

HTML

Con clases #

Descripción visual

Contenido

Nunjucks macro

HTML