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

Parámetros Nunjucks del componente: "Dropdown". Versión: 4.0.0

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

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

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Por defecto</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Con estado activo", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown ds-active" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Activo</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Con estado activo", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Con estado hover", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown ds-hover" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Hover</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Con estado hover", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Con estado focus", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown ds-focus" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Focus</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Con estado focus", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Primario", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--primary" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Primario</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Primario", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Transparente", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--transparent" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Transparente</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Transparente", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Con estilos de cabecera", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--header" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Header</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Con estilos de cabecera", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Grande", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--lg" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Grande</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Grande", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--sm" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Botón pequeño con texto muy largo</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Peque tiene selección", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown c-dropdown--has-selection c-dropdown--sm" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Botón pequeño con texto muy largo</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Peque tiene selección", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Deshabilitado", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true" disabled="disabled" aria-disabled="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Deshabilitado</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Deshabilitado", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Con clases de css aplicadas al container", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class="inline-block p-base bg-primary-light">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Clases en container</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=' w-48 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Con clases de css aplicadas al container", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Clases aplicadas al contenido del tooltip", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Clases al contenido del tooltip</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white max-h-64 overflow-y-auto" data-module="c-dropdown-tooltip">
    <div class=' w-64 p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Clases aplicadas al contenido del tooltip", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

Ejemplo: "Clases aplicadas a varios elementos", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown w-full justify-between" data-module="c-dropdown-button" aria-haspopup="true">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Dropdown anchura completa</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white w-max max-h-64 overflow-y-auto" data-module="c-dropdown-tooltip">
    <div class=' p-2 '>
      <div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '>
        <div style=' width:900px '></div>
      </div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Clases aplicadas a varios elementos", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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

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.

Ejemplo: "Con role dialog", de código HTML, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: desy-html.

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: desy-html.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
  <button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true" data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional">
    <span class="inline-flex self-center max-w-xs align-middle truncate">Marta Pérez</span>
    <svg class="inline-block -mr-2  align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
      <g>
        <path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
      </g>
    </svg></button>
  <div class="c-dropdown__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
    <div class=" w-48 p-2 ">
      <div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div>
    </div>
  </div>
</div>
<!-- /dropdown -->

Ejemplo: "Con role dialog", de código Nunjucks, para maquetar el componente: "Dropdown", versión: 4.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


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