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

Por defecto

Descripción visual

Botón dropdown con texto en azul (color de enlace), seguido de un ícono de caret hacia abajo. Borde azul de 1px con esquinas redondeadas, fondo blanco. Tamaño compacto con padding interno moderado.

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.

Descripción visual

Botón dropdown con texto en azul (color de enlace), seguido de un ícono de caret hacia abajo. Borde azul de 1px con esquinas redondeadas, fondo blanco. Tamaño compacto con padding interno moderado.

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.

Descripción visual

Botón dropdown con texto en azul (color de enlace), seguido de un ícono de caret hacia abajo. Borde azul de 1px con esquinas redondeadas, fondo blanco. Tamaño compacto con padding interno moderado.

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.

Descripción visual

Botón rectangular con fondo amarillo brillante, texto negro en peso medio, y borde amarillo oscuro de 2px. Incluye un icono de flecha hacia abajo a la derecha del texto. El botón tiene padding interno generoso y esquinas ligeramente redondeadas.

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.

Descripción visual

Botón rectangular con fondo azul oscuro sólido, texto blanco en peso medio, sin borde visible. Incluye un icono de flecha hacia abajo a la derecha del texto. El botón tiene padding interno generoso y esquinas ligeramente redondeadas.

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

Descripción visual

Botón rectangular con fondo transparente (blanco), texto azul en peso normal, sin borde visible. Incluye un icono de flecha hacia abajo a la derecha del texto. El botón tiene padding interno estándar y esquinas ligeramente redondeadas.

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

Descripción visual

Dropdown con botón que muestra texto negro tamaño estándar, seguido de un ícono de caret descendente. El botón tiene fondo blanco, borde gris de 1px, padding moderado, y esquinas ligeramente redondeadas. El componente está contenido dentro de un rectángulo con borde gris claro.

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

Grande

Descripción visual

Dropdown con botón que muestra texto azul mediano, seguido de un ícono de caret descendente. El botón tiene fondo blanco, borde azul de 1-2px, padding compacto, y esquinas redondeadas. Encima del botón aparece un label en texto negro pequeño.

Mostrar códigodel ejemplo: Grande

Contenido

Nunjucks macro

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

Peque

Descripción visual

Dropdown con botón que muestra texto azul de tamaño pequeño con una línea larga de contenido, seguido de un ícono de caret descendente. El botón tiene fondo blanco, borde azul de 1-2px, padding compacto, y esquinas redondeadas. Encima del botón aparece un label en texto negro pequeño.

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.

Descripción visual

Botón dropdown con texto azul y fondo blanco. Borde azul de 1px con esquinas redondeadas, ícono de flecha hacia abajo en el lado derecho. Altura compacta con padding ajustado alrededor del texto.

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

Descripción visual

Botón dropdown con texto gris claro y fondo gris muy claro. Borde gris claro de 1px con esquinas redondeadas, ícono de flecha hacia abajo gris en el lado derecho. Altura estándar con apariencia visual inactiva, sin interactividad disponible.

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.

Descripción visual

Botón dropdown con texto azul y fondo blanco. Borde azul de 1px con esquinas redondeadas, ícono de flecha hacia abajo en el lado derecho. Altura estándar con padding uniforme alrededor del contenido.

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.

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro de 1px. Botón dropdown con texto azul y flecha descendente, borde azul de 1px, fondo blanco. Label superior en texto gris oscuro, peso normal, tamaño pequeño.

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.

Descripción visual

Contenedor rectangular con fondo gris muy claro y borde gris medio de 1px. Campo dropdown con texto negro, fondo blanco, borde gris oscuro de 1px, flecha arriba/abajo a la derecha. Label superior en texto negro, peso negrita, tamaño pequeño.

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-40 overflow-y-auto"
}) %}
<div class=' p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '><div style=' width:120px '></div></div></div>
{% endcall  %}

Con role dialog

Usa los atributos data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional" para abrir un desplegable que no contenga un menú, por ejemplo un panel informativo.

Descripción visual

Contenedor rectangular con fondo blanco y borde gris claro de 1px. Botón con texto azul seguido de símbolo más, borde azul de 1px, fondo blanco, esquinas redondeadas. Label superior en texto negro, peso normal, tamaño pequeño.

Mostrar códigodel ejemplo: Con role dialog

Contenido

Nunjucks macro

{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% call componentDropdown({
  "text": "Marta Pérez",
  "attributes": {
    "data-aria-haspopup": "dialog",
    "data-role": "dialog",
    "data-aria-modal": "false",
    "data-aria-label": "Información adicional"
  }
}) %}
<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>
{% endcall  %}