Índice de apartados de esta página
Interruptor
Un botón interruptor o toggle se emplea cuando se desea cambiar rápidamente entre dos estados excluyentes entre sí.
Toggle
Mostrar parámetros
Parámetros del componente
params:
- name: isExpandible
type: boolean
required: false
description: Defaults to `true`. If `true` the button has `aria-expanded` instead of `aria-pressed`.
- name: isSwitch
type: boolean
required: false
description: Defaults to `false`. If `true` the button has role `switch` and has `aria-checked` instead of `aria-pressed`.
- name: pressed
type: boolean
required: false
description: Defaults to `false`. If `true` the button informs the screenreader that the button is pressed.
- name: onState
type: object
required: true
description: On state elements
- name: text
type: string
required: true
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.
- name: html
type: string
required: true
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.
- name: id
type: string
required: false
description: Id to add to the toggle element. Not required, but recommended to improve the accessibility.
- name: classes
type: string
required: false
description: Classes to add to the state span tag.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the state span tag.
- name: offState
type: object
required: true
description: Off state elements
- name: text
type: string
required: true
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.
- name: html
type: string
required: true
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.
- name: classes
type: string
required: false
description: Classes to add to the state span tag.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the state span tag.
- name: classes
type: string
required: false
description: Classes to add to the test component span tag.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the test component span tag.
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({
"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"
}
}) }}HTML
<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
<!-- Button -->
<button
aria-expanded="false"
type="button"
class="c-toggle__button c-button"
id="" 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 -->
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>"
}
}) }}HTML
<!-- 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 -->
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({
"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"
}
}) }}HTML
<!-- 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="" 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 -->
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({
"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>"
}
}) }}HTML
<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
<!-- Button -->
<button
aria-pressed="false"
type="button"
class="c-toggle__button c-button"
id="">
<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 -->
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>"
}
}) }}HTML
<!-- 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 -->
Pressed #
Usa "pressed": true para activarlo inicialmente.
Mostrar códigodel ejemplo: Pressed
Contenido
Nunjucks macro
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
{{ componentToggle({
"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>"
}
}) }}HTML
<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
<!-- Button -->
<button
aria-pressed="true"
type="button"
class="c-toggle__button c-button"
id="">
<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 -->
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({
"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"
}
}) }}HTML
<!-- 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="" 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 -->
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({
"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"
}
}) }}HTML
<!-- 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="" 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 -->
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-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"
}
}) }}HTML
<!-- 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 -->
Isswitch peque #
Mostrar códigodel ejemplo: Isswitch peque
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",
"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"
}
}) }}HTML
<!-- 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="" 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 -->