Interruptor
Aquí tienes la traducción del archivo fuente de la guía de diseño al español, buscando que suene lo más natural posible:
Descripción
Este componente es un control interactivo que puede alternar entre dos estados: habilitado (encendido) y deshabilitado (apagado). Se utiliza para habilitar o deshabilitar ciertas características, opciones o configuraciones.
Dimensiones
El Switch tiene dos tamaños principales:
- M (Mediano): Para casos de uso estándar. Ofrece a la mayoría de los usuarios una experiencia visual intuitiva.
- L (Grande): Se utiliza cuando el elemento necesita ser resaltado o cuando se prefiere un tamaño de fuente mayor.
Estados
El Switch tiene cuatro estados principales:
- Apagado: un estado inactivo en el que la opción o característica está deshabilitada.
- Encendido: un estado activo en el que la opción o característica está habilitada.
- Hover (Paso del ratón): cuando un usuario pasa el ratón sobre el elemento, este responde visualmente para indicar que se puede interactuar con él.
- Deshabilitado: un estado en el que el elemento está inactivo y no se puede interactuar con él.
Propiedades
El componente puede habilitar/deshabilitar la etiqueta. La etiqueta está deshabilitada por defecto, pero se puede habilitar utilizando la propiedad "Label".
Ten en cuenta que si el elemento cambia de tamaño, el tamaño de la etiqueta se ajustará en consecuencia:
- 13px es el tamaño de fuente para las etiquetas de tamaño M
- 15px es el tamaño de fuente para las etiquetas de tamaño L
Guía de usuario
Para mantener la cohesión visual y la consistencia de la interfaz, utiliza un switch si al activarlo o desactivarlo se producen cambios inmediatos en ciertas opciones o en el estado general de la página. No recomendamos usar el switch y el botón de confirmación de acción juntos. En estas situaciones, es mejor utilizar un checkbox.