Progress
Barra de progresso de 6px na cor primária (andamento de curso, upload, etapas). Valor de 0 a max (100 por padrão).
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Com rótulo
Módulo 28 de 12 aulas
import { Progress } from "@t2-educacao/midas";Uso
<Progress value={60} aria-label="Progresso do curso" />Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
value | number | null | Valor atual. null = indeterminado | |
max | number | 100 | Valor máximo |
aria-label | string | Nome da barra (obrigatório) |
Exemplos
Com rótulo
<div className="grid gap-2">
<div className="flex justify-between text-sm">
<span>Módulo 2</span>
<span className="text-muted-foreground">8 de 12 aulas</span>
</div>
<Progress value={8} max={12} aria-label="Aulas concluídas do módulo 2" />
</div>Acessibilidade
- Tem
role="progressbar"comaria-valuenow: sempre dê umaria-label.
Popover
Painel flutuante aberto por clique, para conteúdo rico e interativo (formulários curtos, detalhes, filtros). Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription, PopoverClose e PopoverAnchor.
Questionnaire
Questionário em etapas guiado por dados. Escolha única ou múltipla, resposta livre (outro), pular, atalhos de teclado (letras ou números), validação, perguntas condicionais, progresso em texto, barra ou fração, variante card, animação, e etapa e respostas controláveis (para salvar e retomar).