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 en texto negro regular. Contiene un botón con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto.
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 en texto negro regular. Contiene un botón con borde azul de 1px, texto azul, fondo blanco, y tamaño compacto.
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 en texto negro regular. Contiene un botón con icono de flecha descendente a la izquierda, borde azul de 1px, texto azul, fondo blanco, y tamaño compacto.
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.
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.
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 acción.
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 de estado en gris y seguido por label de estado 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 de estado en gris y seguido por label de estado 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 de estado en gris y seguido por label de estado 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 y un indicador de estado 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 inactivo.