wiki-Progress
Progress
El componente Progress muestra una barra de progreso que puede personalizarse con varios estilos y opciones. Permite mostrar un porcentaje de avance de una tarea o proceso y es altamente configurable.
Referencia de la API
| Propiedad | Tipo | Descripción |
|---|---|---|
completed | number (opcional) | El porcentaje de progreso completado. Debe ser un número entre 0 y 100. Si no se proporciona, el valor predeterminado será 0. |
style | CSSProperties (opcional) | Estilos adicionales que se aplican al contenedor del componente. |
thickness | 'thin' | 'normal' | 'thick' (opcional) | El grosor de la barra de progreso. Los valores posibles son: thin, normal, o thick. El valor predeterminado es normal. |
showPercentage | 'left' | 'right' | 'none' (opcional) | Define dónde mostrar el porcentaje: left, right, o none. El valor predeterminado es none. |
border | Property.BorderStyle (opcional) | Estilo del borde de la barra de progreso. El valor predeterminado es none. |
backgroundColor | Property.BackgroundColor (opcional) | Color de fondo de la barra de progreso. |
progressBackgroundColor | Property.BackgroundColor (opcional) | Color de fondo de la parte completada de la barra de progreso. |
aura-test | string (opcional) | Atributo utilizado para pruebas. Se le asigna un valor único para facilitar la localización de elementos en pruebas automatizadas. |
styled | 'bar' (opcional) | Si se establece en 'bar', se aplica un estilo especial a la barra de progreso. |
classNameProgress | string (opcional) | Clase adicional para la barra de progreso. |
classNamePercentage | string (opcional) | Clase adicional para el porcentaje mostrado en el componente. |
Constantes
SHOW_PERCENTAGE
| Valor | Descripción |
|---|---|
left | Muestra el porcentaje a la izquierda de la barra. |
right | Muestra el porcentaje a la derecha de la barra. |
none | No muestra el porcentaje. |
THICKNESSES
| Valor | Descripción |
|---|---|
thin | Barra de progreso con grosor fino. |
normal | Barra de progreso con grosor normal. |
thick | Barra de progreso con grosor grueso. |
Ejemplo de uso
import { Progress } from '@auravant/ui-kit';
<Progress
completed={60}
thickness="normal"
showPercentage="left"
backgroundColor="#f0f0f0"
progressBackgroundColor="#4caf50"
border="solid 1px #ccc"
/>;