Progress Bar
Una progress bar es un indicador horizontal que comunica el progreso de una operación. Establece value para un progreso determinado, u omítelo para mostrar una animación indeterminada cuando la duración es desconocida.
Uso
<script>
import { ProgressBar } from 'fluentui-svelte';
</script>
<ProgressBar value={50} />Valor
La prop value establece el valor actual de progreso de la barra. Debe ser un número entre 0 y 100.
Indeterminado
Si no estableces la prop value, la barra de progreso entra en un estado indeterminado, lo que significa que no tiene un valor específico. Esto es útil para operaciones cuya duración es desconocida.
Ocultar riel
La prop hideRail puede usarse para ocultar el riel de la barra de progreso.
Estado
La prop status te permite establecer el estado de la barra de progreso como 'paused' o 'error'. Esto cambia el color de la barra de progreso para indicar distintos estados.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
value bindable | number | null | El valor actual de la barra de progreso. Déjalo sin definir para una barra indeterminada. | |
class | string | La clase que se aplica a la barra de progreso. | |
ref bindable | SVGElement | La referencia del DOM del elemento de la barra de progreso. | |
min | number | 0 | El valor mínimo de la barra de progreso. |
max | number | 100 | El valor máximo de la barra de progreso. |
hideRail | boolean | Si se oculta el elemento rail. | |
railElement bindable | SVGRectElement | La referencia del DOM del elemento del riel. | |
secondaryTrackElement bindable | SVGRectElement | La referencia del DOM del elemento track secundario, que se usa mientras es indeterminada. | |
trackElement bindable | SVGRectElement | La referencia del DOM del elemento de la pista. | |
status | 'paused' | 'error' | El estado actual de la barra de progreso, que recolorea el track. | |
| Element Attributes |