desy-html

Toggle

Parámetros Nunjucks del componente: "Toggle". Versión: 12.0.1

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

        {"val":"params:\n- name: id\n  type: string\n  required: true\n  description: Required id attribute to add to the button for activation.\n- name: isExpandible\n  type: boolean\n  required: false\n  description: Defaults to `true`. If `true` the button has `aria-expanded` instead of `aria-pressed`.\n- name: isSwitch\n  type: boolean\n  required: false\n  description: Defaults to `false`. If `true` the button has role `switch` and has `aria-checked` instead of `aria-pressed`.\n- name: pressed\n  type: boolean\n  required: false\n  description: Defaults to `false`. If `true` the button informs the screenreader that the button is pressed.\n- name: onState\n  type: object\n  required: true\n  description: On state elements\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within the state. 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 to use within the state. If `html` is provided, the `text` argument will be ignored.\n  - name: id\n    type: string\n    required: false\n    description: Id to add to the toggle element. Not required, but recommended to improve the accessibility.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the state span tag.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the state span tag.\n- name: offState\n  type: object\n  required: true\n  description: Off state elements\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within the state. 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 to use within the state. If `html` is provided, the `text` argument will be ignored.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the state span tag.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the state span tag.\n- name: classes\n    type: string\n    required: false\n    description: Classes to add to the test component span tag.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the test component span tag.\n","length":2526}

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.

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    aria-expanded="false"
    type="button"
    class="c-toggle__button c-button"
    id="toggle-default" aria-controls="id-panel-oculto">
    <span class="c-button--is-not-pressed pointer-events-none">Mostrar detalles</span>
    <span class="c-button--is-pressed hidden pointer-events-none"><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></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/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"
  }
}) }}
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.

Ejemplo: "Expandir con javascript", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    aria-expanded="false"
    type="button"
    class="c-toggle__button c-button"
    id="toggle-expanded-js">
    <span class="c-button--is-not-pressed pointer-events-none">Mostrar detalles</span>
    <span class="c-button--is-pressed hidden pointer-events-none"><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></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "Expandir con javascript", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/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>"
  }
}) }}
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.

Ejemplo: "2 iconos", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    aria-expanded="false"
    type="button"
    class="c-toggle__button c-button c-button--sm"
    id="toggle-2-icons" aria-controls="id-panel-oculto">
    <span class="c-button--is-not-pressed pointer-events-none"><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></span>
    <span class="c-button--is-pressed hidden pointer-events-none"><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></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "2 iconos", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/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"
  }
}) }}
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.

Ejemplo: "No expandible", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    aria-pressed="false"
    type="button"
    class="c-toggle__button c-button"
    id="toggle-not-expandible">
    <span class="c-button--is-not-pressed pointer-events-none"><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></span>
    <span class="c-button--is-pressed hidden pointer-events-none"><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></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "No expandible", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/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>"
  }
}) }}
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.

Ejemplo: "Pressed con javascript", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    aria-pressed="false"
    type="button"
    class="c-toggle__button c-button"
    id="toggle-pressed-js">
    <span class="c-button--is-not-pressed pointer-events-none"><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></span>
    <span class="c-button--is-pressed hidden pointer-events-none"><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></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "Pressed con javascript", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/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>"
  }
}) }}
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.

Ejemplo: "Pressed", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    aria-pressed="true"
    type="button"
    class="c-toggle__button c-button"
    id="toggle-pressed">
    <span class="c-button--is-not-pressed pointer-events-none"><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></span>
    <span class="c-button--is-pressed hidden pointer-events-none"><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></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "Pressed", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/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>"
  }
}) }}
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.

Ejemplo: "Isswitch", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    role="switch"
    aria-checked="false"
    type="button"
    class="c-toggle__button focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
    id="toggle-isswitch" aria-labelledby="id-text">
    <span class="c-button--is-not-pressed pointer-events-none"><span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</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">On</span></span></span>
    <span class="c-button--is-pressed hidden pointer-events-none"><span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</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">On</span></span></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "Isswitch", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "id": "toggle-isswitch",
  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</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'>On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</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'>On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}
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-none focus:shadow-outline-focus focus:text-black",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</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'>On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</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'>On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}

Isswitch pressed

Usa 'pressed': true para activarlo inicialmente.

Ejemplo: "Isswitch pressed", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    role="switch"
    aria-checked="true"
    type="button"
    class="c-toggle__button focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
    id="toggle-isswitch-pressed" aria-labelledby="id-text">
    <span class="c-button--is-not-pressed pointer-events-none"><span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</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">On</span></span></span>
    <span class="c-button--is-pressed hidden pointer-events-none"><span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</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">On</span></span></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "Isswitch pressed", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "id": "toggle-isswitch-pressed",
  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
  "pressed": true,
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</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'>On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</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'>On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}
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-none focus:shadow-outline-focus focus:text-black",
  "pressed": true,
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</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'>On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</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'>On</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.

Ejemplo: "Isswitch con javascript", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    role="switch"
    aria-checked="false"
    type="button"
    class="c-toggle__button focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
    id="toggle-switch-js" aria-labelledby="id-text">
    <span class="c-button--is-not-pressed pointer-events-none"><span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</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">On</span></span></span>
    <span class="c-button--is-pressed hidden pointer-events-none"><span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</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">On</span></span></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "Isswitch con javascript", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
  "id": "toggle-switch-js",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</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'>On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</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'>On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}
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-none focus:shadow-outline-focus focus:text-black",
  "id": "toggle-switch-js",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</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'>On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-sm' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</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'>On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}

Isswitch peque

Ejemplo: "Isswitch peque", de código HTML, para maquetar el componente: "Toggle", versión: 12.0.1, 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>.

<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
  <!-- Button -->
  <button
    role="switch"
    aria-checked="false"
    type="button"
    class="c-toggle__button focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black"
    id="toggle-small" aria-labelledby="id-text">
    <span class="c-button--is-not-pressed pointer-events-none"><span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</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">On</span></span></span>
    <span class="c-button--is-pressed hidden pointer-events-none"><span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</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">On</span></span></span>
  </button>
</div>
<!-- /toggle -->

Ejemplo: "Isswitch peque", de código Nunjucks, para maquetar el componente: "Toggle", versión: 12.0.1, 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/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "id": "toggle-small",
  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</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'>On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</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'>On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}
Mostrar códigodel ejemplo: Isswitch peque

Contenido

Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

{{ componentToggle({
  "id": "toggle-small",
  "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
  "isSwitch": true,
  "offState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs' aria-hidden='true'>Off</span><span class='bg-neutral-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>Off</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'>On</span></span>"
  },
  "onState": {
    "classes": "",
    "html": "<span class='flex align-center justify-between gap-xs'><span class='text-xs' aria-hidden='true'>Off</span><span class='bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75'><span class='sr-only'>On</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'>On</span></span>"
  },
  "attributes": {
    "aria-labelledby": "id-text"
  }
}) }}