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.
Descripción visual
Componente toggle con título "por defecto" en texto negro regular. Contiene un botón "Mostrar detalles" con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto. El componente está dentro de un contenedor con borde gris claro.
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.
Descripción visual
Componente toggle con título "Expandir con JavaScript" en texto negro regular. Contiene un botón "Mostrar detalles" con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto. El componente está dentro de un contenedor con borde gris claro.
Mostrar códigodel ejemplo: Expandir con javascript
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.
Descripción visual
Componente toggle con título "2 iconos" en texto negro regular. Contiene un botón "Mostrar filtros" con icono de flecha descendente a la izquierda, borde azul de 1px, texto azul, fondo blanco, y tamaño compacto. El componente está dentro de un contenedor con borde gris claro.
Usa 'isExpandible': false. En lugar de usar aria-expanded usará aria-pressed.
Descripción visual
Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de reproducción.
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.
Descripción visual
Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de reproducción.
Caja rectangular con borde gris delgado y fondo blanco. Contiene texto en color gris oscuro peso normal alineado a la izquierda, seguido de un botón con borde azul y texto azul que incluye un icono de play orientado hacia la derecha.
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.
Descripción visual
Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo gris en posición izquierda sobre fondo gris claro, precedido por label "Desactivado" en gris y seguido por label "Activado" en negro.
Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo blanco en posición derecha sobre fondo negro, precedido por label "Desactivado" en gris y seguido por label "Activado" en negro.
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.
Descripción visual
Caja rectangular con borde gris claro, fondo blanco, conteniendo un título en texto negro peso normal. Debajo del título aparece un control toggle switch con círculo gris en posición izquierda sobre fondo gris claro, precedido por label "Desactivado" en gris y seguido por label "Activado" en negro.
Mostrar códigodel ejemplo: Isswitch con javascript
Toggle switch compacto con un interruptor deslizante circular blanco sobre fondo gris claro redondeado. El componente incluye label de texto negro a la izquierda que lee "Desactivado" y un indicador de estado "Activado" a la derecha del switch en gris medio. El switch tiene dimensiones pequeñas con bordes redondeados completos y el botón circular está posicionado en el lado izquierdo indicando estado desactivado.