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

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

Grande

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

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-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.

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