Vox Mente
Navegação

Componentes

Page Header

beta

Título, descrição e ações de uma tela. Um por tela. A discussão de uso está no padrão Cabeçalho de página.

Ainda não é estável porque 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/page-header

Orientação

Título, descrição e ações de uma tela. Um por tela — dois cabeçalhos são duas telas disfarçadas de uma.

Quando usar

  • A tela precisa se apresentar: o que é, e o que dá para fazer aqui.
  • Existe uma ação principal de tela, que não pertence a nenhuma linha da lista.
  • O registro tem abas e precisa manter nome, status e ação principal visíveis enquanto se navega entre os recortes.

Quando não usar

  • Como título de uma seção interna. Seção é um heading dentro do miolo.
  • Duas vezes na mesma tela. Se parece necessário, o que existe ali são duas telas.
  • Para carregar filtros da lista: filtro pertence à lista, não à identidade da tela.
Playground

Leads, demos e funil

Acompanhe o funil comercial do trimestre.

<PageHeader>
  <PageHeaderContent>
    <PageHeaderTitle>Leads, demos e funil</PageHeaderTitle>
    <PageHeaderDescription>Acompanhe o funil comercial do trimestre.</PageHeaderDescription>
  </PageHeaderContent>
  <PageHeaderActions>
    <Button>
      <Plus data-icon="inline-start" />
      Novo lead
    </Button>
  </PageHeaderActions>
</PageHeader>

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.
PageHeader
  └─ PageHeaderContent
    └─ PageHeaderTitle
    └─ PageHeaderDescription
  └─ PageHeaderActions

Uso

Um por tela. PageHeaderTitle usa text-page, o papel tipográfico de título de página — os componentes de controle param em 16px e não servem aqui. Quando usar título, descrição e faixa de entidade está no padrão Cabeçalho de página; esta página documenta a peça.

Leads, demos e funil

Acompanhe o funil comercial do trimestre.

Só título

PageHeaderDescription é opcional. Sem ela, PageHeaderContent ainda organiza título e ações no mesmo eixo — nada no componente exige a descrição.

Configurações da escola

Múltiplas ações

PageHeaderActions agrupa mais de um botão. Uma ação primária por tela — o resto é outline ou ghost, nunca dois botões default competindo.

Trilha de leitura inferencial

Publicada em 12 de agosto para o 7º ano B.

Quebra em telas estreitas

PageHeaderActions não encolhe (shrink-0): quando falta espaço, PageHeader quebra a linha e as ações descem inteiras para a linha seguinte, em vez de espremer o título numa coluna de duas ou três palavras. min-w-0 em PageHeaderContent é o que permite o título encolher antes disso.

Comunicação com a família

Mensagens enviadas nos últimos 30 dias.

Acessibilidade

O que o componente já garante, e o que continua sendo responsabilidade da tela.
  • O título da tela é o primeiro heading do conteúdo principal; não pule níveis dentro do miolo.
  • As ações do cabeçalho precisam ser alcançáveis por teclado antes do conteúdo longo da tela.
  • Abaixo de 400 px título e ações se empilham; verifique que nada estoura a largura da tela.

Em contexto de produto

Onde isto aparece numa tela real da Vox Mente, e não numa vitrine.

No painel do professor o cabeçalho carrega o nome da tela e a ação principal; no registro de turma ele vira faixa de identidade com abas.

Ver o painel do professor

Componentes relacionados

Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.

Referência da API

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

PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Origem do dado
  • Orientação, acessibilidade e relacionados: documentação
  • 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