Progreso
Utilice el componente Progreso para establecer claridad y expectativas sobre la progresión y finalización de una tarea que tarda más en finalizar. También funciona muy bien para escenarios donde no se conoce el tiempo exacto de finalización y cuando hay un flujo de trabajo mayor, que depende de la finalización de un conjunto de tareas más pequeñas, como el cumplimiento de pedidos o la carga/descarga de archivos. El componente Progreso es visualmente idéntico a la Ignite UI for Angular y Ignite UI for Angular
Progress Demo
Shape and Type
Los indicadores de progreso informan a los usuarios sobre el estado de los procesos en curso, como cargar una aplicación, enviar un formulario o guardar actualizaciones. Progress admite dos formas de diseño para adaptarse a la variedad de casos de uso y requisitos de diseño: una barra circular y una barra lineal. Cada uno de estos diseños viene con una selección adicional del tipo de progresión: Determinada e Indeterminada.
- Los indicadores determinados muestran el progreso de una tarea o proceso que tiene una duración conocida o un tiempo de finalización esperado.
- Los indicadores indeterminados muestran que un proceso está en marcha pero se desconoce el tiempo exacto o el progreso.
State
El Progress se puede utilizar en una de las siguientes combinaciones de colores preestablecidas:
- Predeterminado: utilizando el color primario base de forma predeterminada
- Información: utilizar el color del tema de
info
para mostrar el progreso. - Éxito: utilizar el color del tema
success
para mostrar el progreso. - Advertir: utilizar el color del tema
warn
para mostrar el progreso - Peligro: utilizar el color del tema para mostrar el
error
progreso
Progress Amount
Al utilizar un tipo determinado de progreso, puede seleccionar la cantidad de progreso entre seis opciones de porcentaje. En Figma puedes hacer esto desde la propiedad en la Value
barra lateral derecha. En Sketch, esto se logra con Symbol Overrides
para permitirle cambiar fácilmente entre ellos, mientras que en Adobe XD debe arrastrar la cantidad deseada desde el panel y soltarla encima de la Progress Amount
capa para cambiar el Libraries
valor predeterminado.
Stripes
Cuando se utiliza una forma de diseño de barra lineal para el componente Progreso, vendrá con una opción adicional para franjas sobre el área de relleno. Para eliminar las rayas, simplemente use la propiedad booleana en Figma o establezca la Striped
anulación de 🌈 Stripes
color en Sketch en transparent
.
Estilismo
El componente Progress ofrece un alto grado de flexibilidad de estilo, con varias opciones para personalizar el color, el peso y la posición del texto. Además, los colores de Progreso, Base, Rayas, Relleno y Pista se pueden ajustar según sea necesario, lo que permite una integración perfecta en cualquier esquema de diseño.
Usage
En una barra circular, utilice siempre el valor real para la etiqueta de texto y, cuando agregue texto más elaborado en una barra lineal, proporcione su mejor estimación del estado de finalización de la tarea en tiempo/archivos restantes, en lugar de mostrar una cadena genérica. al usuario. Sin embargo, puede usar las variantes Indeterminadas para ambas barras para mostrar un Progreso sin un tiempo de finalización claro y seguro.
Hacer | No |
---|---|
Additional Resources
Tema relacionado:
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.