DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Desplegable

Mostrar y ocultar

Es un componente que nos permite desplegar un contenedor de contenido para realizar otras acciones.

Dropdown

Mostrar parámetros

Parámetros del componente

              params:
- name: text
  type: string
  required: true
  description: If `html` is set, this is not required. Text for the dropdown. 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 for the dropdown. If `html` is provided, the `text` argument will be ignored.
- name: hiddenText
  type: string
  required: false
  description: Text for screenreaders only after the dropdown element.
- name: classesContainer
  type: string
  required: false
  description: Classes to add to the container div of dropdown and tooltip elements.
- name: classesTooltip
  type: string
  required: false
  description: Classes to add to the tooltip content.
- name: classes
  type: string
  required: false
  description: Classes to add to the dropdown element.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the dropdown 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

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Por defecto"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Con estado activo

Simula activar la pseudo-clase de CSS :active. En realidad sólo se usa para documentar estos ejemplos.

Mostrar códigodel ejemplo: Con estado activo

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Activo",
  "classes": "ds-active"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Con estado hover

Simula activar la pseudo-clase de CSS :hover. En realidad sólo se usa para documentar estos ejemplos.

Mostrar códigodel ejemplo: Con estado hover

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Hover",
  "classes": "ds-hover"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Con estado focus

Simula activar la pseudo-clase de CSS :focus. En realidad sólo se usa para documentar estos ejemplos.

Mostrar códigodel ejemplo: Con estado focus

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Focus",
  "classes": "ds-focus"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Primario

Para acciones primarias.

Mostrar códigodel ejemplo: Primario

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Primario",
  "classes": "c-dropdown--primary"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Transparente

Mostrar códigodel ejemplo: Transparente

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Transparente",
  "classes": "c-dropdown--transparent"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Con estilos de cabecera

Mostrar códigodel ejemplo: Con estilos de cabecera

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Header",
  "classes": "c-dropdown--header"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Peque

Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Botón pequeño con texto muy largo",
  "classes": "c-dropdown--sm"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Peque tiene selección

Un botón con una selección aplicada se muestra con color.

Mostrar códigodel ejemplo: Peque tiene selección

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Botón pequeño con texto muy largo",
  "classes": "c-dropdown--has-selection c-dropdown--sm"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Deshabilitado

Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Deshabilitado",
  "disabled": true
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Con clases de css aplicadas al container

Tanto el botón como los elementos del tooltip están rodeados de un div contenedor al que se le pueden aplicar estilos de CSS.

Mostrar códigodel ejemplo: Con clases de css aplicadas al container

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Clases en container",
  "classesContainer": "inline-block p-base bg-primary-light"
}) %}
<div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
{% endcall  %}

Clases aplicadas al contenido del tooltip

El contenido del tooltip puede tener clases adicionales aplicadas. En este ejemplo se le ha aplicado una altura máxima y scroll vertical si el contenido se desborda.

Mostrar códigodel ejemplo: Clases aplicadas al contenido del tooltip

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Clases al contenido del tooltip",
  "classesTooltip": "max-h-64 overflow-y-auto"
}) %}
<div class=" w-64 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-64 "></div></div>
{% endcall  %}

Clases aplicadas a varios elementos

En este ejemplo, usando clases de CSS, la anchura del contenido establece la anchura del tooltip.

Mostrar códigodel ejemplo: Clases aplicadas a varios elementos

Contenido

Nunjucks macro


{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Dropdown anchura completa",
  "classes": "w-full justify-between",
  "classesTooltip": "w-max max-h-64 overflow-y-auto"
}) %}
<div class=" p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-64 "><div style=" width:900px "></div></div></div>
{% endcall  %}