Forehead
Cabeçalho de documento — banner, título, status, progresso e ações. O Subheader do documento.
Forehead, usado no código como <MeForehead>. Compõe UBadge (status) + UProgress (prazo) + MeForeheadActionBar. No Figma, use o componente da Library.O Forehead é o cabeçalho de uma tela de documento (cotação, pedido, contrato): reúne a identidade (banner + título + código), o status, o progresso (prazo/saldo) e a barra de ações do registro. É o equivalente, no documento, ao Subheader na index.
Variantes por tipo
Cada tipo de registro tem a sua variação — muda o badge de identidade (DocumentBadge ou imagem), o título, as etiquetas, os dados e as ações. A anatomia é a mesma (Banner / Leading / Trailing); o que muda é o conteúdo do registro.
Documentos (transações)
Cotação, Pedido, Pré-Pedido, Contrato, Requisição, FRS e Nota Fiscal: o DocumentBadge (tipo + número, com copiar), o título, a classificação, o valor e o status. O progresso (UProgress) aparece quando há prazo ou saldo.
Produto (catálogo)
No catálogo o registro é um produto: o badge vira um espaço de imagem; ao lado, o nome com etiquetas de tipo (ex.: Material · Normal) e uma descrição curta. No trailing entra a área de carrinho — preço por unidade (BRL (un)) e Baseline lado a lado, o seletor de quantidade (InputNumber) e o botão Adicionar ao carrinho. É o que permite comprar direto da listagem. Ver Estrutura de Index › Catálogo.
Fornecedor
O fornecedor traz o logo no lugar do badge, a razão social (com código) e etiquetas de relacionamento e situação — Meu fornecedor, o status (Liberado · Em homologação · Bloqueado) e o tempo de relação (ex.: 3 anos). Os dados de contato — CNPJ, endereço (com +N para mais endereços), telefones, e-mail e site — ficam no leading. No trailing, o selo Visível para o marketplace / Privado sinaliza a exposição do cadastro. Ver Estrutura de Index › Fornecedores.
Item "novo"
Quando o registro acabou de ser criado ou adicionado, uma barra azul à esquerda marca o item como novo — a pessoa localiza na hora o que mudou na lista.
Na listagem
Na index, o mesmo registro vira a linha da view Lista: o mesmo Forehead empilhado, entidade-aware — documentos mostram o cabeçalho do documento; produtos, a versão com carrinho; fornecedores, a ficha. Mantém a leitura numa varredura, sem abrir o registro. Ver Views.
Composição
| Zona | O que traz |
|---|---|
| Banner | Identidade do tipo: DocumentBadge (tipo + número) nos documentos, ou imagem / logo em produto e fornecedor (bannerVariant: text · icon · image · user). |
| Leading | Título + código + etiquetas (UBadge: status, tipo, relacionamento) + meta (dados do registro / contatos) + progresso (UProgress). |
| Trailing | Valor, ou área de carrinho (produto), ou selo Visível para o marketplace (fornecedor); MeForeheadActionBar — ações neutras (favoritar, mensagens, Genius, mais) + "Ver mais". |
Variantes
| Quero… | Use |
|---|---|
| Identificar por ícone / imagem / avatar | bannerVariant="icon" | "image" | "user" |
| Mostrar prazo / saldo | progresso via UProgress no leading |
| Comprar da listagem (qtd + preço + CTA) | área de carrinho (MeForeheadCartArea) — produto / catálogo |
| Sinalizar exposição no marketplace | selo Visível para o marketplace / Privado — fornecedor |
| Marcar item recém-criado | barra "novo" à esquerda |
Estados
| Estado | Comportamento |
|---|---|
| Por status | O status (UBadge) e as ações disponíveis mudam conforme o fluxo do documento. |
| Drawer | "Ver mais" expande indicadores / ações secundárias sem sair da tela. |
| Selecionável | Na view Lista, o item ganha checkbox de seleção e entra nas ações em massa. |
Responsividade
No mobile, o Forehead empilha as zonas: a imagem / badge ocupa a largura toda no topo, o checkbox de seleção fica sobreposto ao canto superior-esquerdo do badge, e os botões do trailing alinham na horizontal (em vez de empilhados). No desktop, as zonas ficam lado a lado.
No código
<MeForehead> é um componente EletroDS. Doc técnica em eletro.design/components/forehead. Aqui o foco é o uso em Design.
Acessibilidade
O título do documento é o heading da tela (h1). Ações só-ícone da action bar precisam de rótulo acessível. O status não pode depender só da cor — o rótulo textual no badge é o que garante a leitura.