DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Interruptor

Mostrar y ocultar

Un botón interruptor o toggle se emplea cuando se desea cambiar rápidamente entre dos estados excluyentes entre sí.

Toggle

Por defecto

Apariencia de botón, sin cambio en el texto del botón, sólo cambia su estado visual. Necesita un elemento externo con un id para referenciarlo con su aria-controls para mostrar/ocultar ese elemento externo.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "id": "toggle-default",
  "classes": "c-button",
  "offState": {
    "classes": "",
    "html": "Mostrar detalles"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z' fill='currentColor'/></svg>Mostrar detalles</span>"
  },
  "attributes": {
    "aria-controls": "id-panel-oculto"
  }
}) }}

Expandir con javascript

También puedes usar con javascript la función global activateItemToggle(element, open), para expandir un item , usando su id, el parámetro open admite true o false, si le pasamos true se mostrará expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe activateItemToggle('toggle-expanded-js', true) para mostrar el item actual expandido.

Mostrar códigodel ejemplo: Expandir con javascript

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "classes": "c-button",
  "id": "toggle-expanded-js",
  "offState": {
    "classes": "",
    "html": "Mostrar detalles"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z' fill='currentColor'/></svg>Mostrar detalles</span>"
  }
}) }}

2 iconos

Apariencia de botón, sin cambio en el texto del botón, sólo cambian sus iconos. Necesita un elemento externo con un id para referenciarlo con su aria-controls para mostrar/ocultar ese elemento externo.

Mostrar códigodel ejemplo: 2 iconos

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "id": "toggle-2-icons",
  "classes": "c-button c-button--sm",
  "offState": {
    "classes": "",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M13.71 2.3a1.45 1.45 0 0 0 .14-1.51A1.41 1.41 0 0 0 12.57 0H1.43A1.4 1.4 0 0 0 .15.8a1.43 1.43 0 0 0 .16 1.52l5.13 6.32a.25.25 0 0 1 .06.16v4.7a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.8a.25.25 0 0 1 .06-.16ZM7.6 6.65a.29.29 0 0 1-.2.09h-.8a.29.29 0 0 1-.2-.09L3 2.41a.26.26 0 0 1 0-.27.26.26 0 0 1 .15-.14h7.7a.26.26 0 0 1 .22.14.26.26 0 0 1 0 .27Z' fill='currentColor' transform='scale(3.42857)'/></svg>Mostrar filtros</span>"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M13.9.8a.51.51 0 0 0 0-.52.51.51 0 0 0-.4-.28H.5a.51.51 0 0 0-.45.28A.51.51 0 0 0 .1.8l5.19 6.79a1 1 0 0 1 .21.61v5.3a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.2a1 1 0 0 1 .21-.61Z' fill='currentColor' transform='scale(3.42857)'/></svg>Mostrar filtros</span>"
  },
  "attributes": {
    "aria-controls": "id-panel-oculto"
  }
}) }}

No expandible

Usa 'isExpandible': false. En lugar de usar aria-expanded usará aria-pressed.

Mostrar códigodel ejemplo: No expandible

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "id": "toggle-not-expandible",
  "isExpandible": false,
  "classes": "c-button",
  "offState": {
    "classes": "",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z' fill='currentColor' transform='scale(3.42857)'/></svg>Reproducir sonido</span>"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z' fill='currentColor' transform='scale(3.42857)'/><path d='M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z' fill='currentColor' transform='scale(3.42857)'/></svg>Reproducir sonido</span>"
  }
}) }}

Pressed con javascript

También puedes usar con javascript la función global activateItemToggle(element, toggle), para expandir un item , usando su id, el parámetro toggle admite true o false, si le pasamos true se mostrará expandido, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe activateItemToggle('toggle-pressed-js', true) para mostrar el item actual expandido.

Mostrar códigodel ejemplo: Pressed con javascript

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "isExpandible": false,
  "classes": "c-button",
  "id": "toggle-pressed-js",
  "offState": {
    "classes": "",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z' fill='currentColor' transform='scale(3.42857)'/></svg>Reproducir sonido</span>"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z' fill='currentColor' transform='scale(3.42857)'/><path d='M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z' fill='currentColor' transform='scale(3.42857)'/></svg>Reproducir sonido</span>"
  }
}) }}

Pressed

Usa 'pressed': true para activarlo inicialmente.

Mostrar códigodel ejemplo: Pressed

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "id": "toggle-pressed",
  "pressed": true,
  "classes": "c-button",
  "offState": {
    "classes": "",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z' fill='currentColor' transform='scale(3.42857)'/></svg>Reproducir sonido</span>"
  },
  "onState": {
    "classes": "c-button--has-selection",
    "html": "<span class='inline-flex'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' class='self-center mr-2' aria-hidden='true' width='1em' height='1em'><path d='M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z' fill='currentColor' transform='scale(3.42857)'/><path d='M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z' fill='currentColor' transform='scale(3.42857)'/></svg>Reproducir sonido</span>"
  }
}) }}

Isswitch

Apariencia de Switch con 'isSwitch': true, sin cambio en el texto, sólo cambia su estado visual. Necesita un elemento externo con un id para referenciarlo con su aria-labelledby.

Mostrar códigodel ejemplo: Isswitch

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "id": "toggle-isswitch",
  "classes": "focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black group",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}

Isswitch pressed

Usa 'pressed': true para activarlo inicialmente.

Mostrar códigodel ejemplo: Isswitch pressed

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "id": "toggle-isswitch-pressed",
  "classes": "focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black group",
  "pressed": true,
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}

Isswitch con javascript

También puedes usar con javascript la función global activateItemToggle(element, toggle), para modificar el estado del Switch, usando su id, el parámetro toggle admite true o false, si le pasamos true se mostrará activado, y si le pasamos false se mostrará desactivado. Ej: Abre la consola del navegador y escribe activateItemToggle('toggle-switch-js', true) para mostrar el switch activado.

Mostrar códigodel ejemplo: Isswitch con javascript

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "classes": "focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black group",
  "id": "toggle-switch-js",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-5 w-9 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-sm' aria-hidden='true'>Activado</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}

Isswitch peque

Mostrar códigodel ejemplo: Isswitch peque

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
  "id": "toggle-small",
  "classes": "mb-sm focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black group",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-neutral-base group-focus:bg-black relative inline-flex shrink-0 h-4 w-8 border-2 border-neutral-base group-focus:border-black rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Desactivado</span><span aria-hidden='true' class='translate-x-0 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-xs' aria-hidden='true'>Activado</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs group-focus:text-black' aria-hidden='true'>Desactivado</span><span class='bg-primary-base relative inline-flex shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer focus:outline-hidden focus-visible:ring-2  focus-visible:ring-white/75'><span class='sr-only'>Activado</span><span aria-hidden='true' class='translate-x-4 pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200'></span></span><span class='text-xs' aria-hidden='true'>Activado</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}