Sistema de diseño
Progress indicator
Elemento visual utilizado para indicar el avance o progreso de una tarea, proceso o actividad en la interfaz de usuario.
Figma
Storybook
AEM
Overview
Es una herramienta útil para informar a los usuarios sobre el estado y el avance de una tarea o proceso en curso, lo que contribuye a una experiencia de usuario más clara y satisfactoria.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
En Oxygen, el componente tiene dos variantes: default y small. Ambas variantes pueden funcionar en orientación vertical y horizontal.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
El progress indicator ofrece varias opciones para personalizar la visualización del progreso, permitiendo ajustar el componente según las necesidades. Las opciones disponibles son:
Number
En la variante default, los pasos se representan por defecto con un indicador numérico.
Radio
Disponible en la variante default. El radio sustituye al indicador numérico con un circulo de selección.
Icon
Disponible en la variante default. Sustituye el indicador numérico por un ícono. No se pueden utilizar simultáneamente las opciones Number, Radio y Icon.
Detail
Disponible en la variante default. Permite añadir un campo de detalle siempre que el heading esté activo.
Heading (Mobile only)
Disponible en la variante default. El heading puede ocultarse únicamente en dispositivos con breakpoint mobile si el espacio disponible es limitado y el contenido genera saltos de línea.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Resizing
El progress indicador ocupa el ancho completo del contenedor en el que se encuentra. En los breakpoints XS y S, se ajusta al ancho del dispositivo.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes