Vox Mente
Navegação

Componentes

Filter Panel

beta

Painel de filtros aplicados sobre uma lista.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/filter-panel

Playground
Trilha
<FilterGroup label="Trilha">
  <FilterOption count={12}>
    <Checkbox defaultChecked />
    Trilha 1 — Suporte Intensivo
  </FilterOption>
</FilterGroup>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
FilterPanel
  └─ FilterPanelHeader
  └─ FilterGroup
    └─ FilterOption

Uso

Filtros facetados para a Biblioteca de lições — um acervo navegado por trilha, disciplina e habilidade, não uma tabela.

Cabeçalho

`FilterPanelHeader` mostra o rótulo do painel e reserva `onClear` para a saída que limpa a seleção inteira.

Vários grupos

Cada faceta do material impresso — trilha, disciplina, habilidade da BNCC, canal sensorial — vira um `FilterGroup` próprio.

Opção sem resultado

`count={0}` mantém a opção visível, mas desabilitada — escondê-la faria o acervo parecer menor do que é.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

FilterGroup

PropTipoPadrão
labelstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—

Também aceita as props de React, incluindo className e os atributos de DOM.

FilterOption

PropTipoPadrão
countnumber—

Também aceita as props de React, incluindo className e os atributos de DOM.

FilterPanelHeader

PropTipoPadrão
onClearstring | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null—

Também aceita as props de React, incluindo className e os atributos de DOM.

FilterPanel não tem props próprias — aceita apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css