FeedbackDisponible
Exercise Track
Progreso tipo niveles para un intento de práctica: un segmento por ejercicio, los hechos en menta y el actual elevado en lila.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/exercise-track.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
tsx
import { ExerciseTrack } from "@/components/ui/exercise-track";
export default function Demo() {
return (
<div className="grid w-full max-w-xl gap-6">
<ExerciseTrack total={6} current={2} label="Exercise 3 of 6" />
<ExerciseTrack total={6} current={2} completed={3} label="Exercise 3 of 6 · answered" />
<ExerciseTrack total={24} current={17} label="Exercise 18 of 24" />
</div>
);
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
- Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| total / current / completed | number / number / number | Required | Exercise count, zero-based index on screen and answered exercises (defaults to current). |
| label | string | Required | Visible text that also names the progressbar, for example "Exercise 2 of 6". |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Una sola barra de progreso nombrada por la etiqueta visible, con valor, máximo y texto de valor; los segmentos son decorativos.
El estado se comunica con la posición y la etiqueta, no solo con el color.