Componentes

Screen Skeleton

beta

A casca de toda tela autenticada: navegação, cabeçalho, miolo e seções. A discussão de uso está no padrão Casca de tela.

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/screen-skeleton

Orientação

A casca de toda tela autenticada: navegação, cabeçalho, miolo e seções. O que muda entre as frentes do produto é o que entra nos slots, nunca a casca.

Quando usar

Toda tela autenticada, sem exceção — é a peça que impede cada frente de inventar o próprio layout.
A tela precisa dos quatro estados (carregando, vazia, sem permissão, erro) na mesma moldura.
É preciso garantir que o cabeçalho e a navegação não se desalinhem entre telas diferentes.

Quando não usar

Em tela pública ou de autenticação, que não tem navegação lateral nem cabeçalho de página.
Para compor um pedaço de tela: a casca é a tela inteira, não um contêiner qualquer.
Para contornar uma limitação da própria casca. Se algo não cabe, corrija a casca — remendar na tela espalha o problema.

Playground

Com navegaçãodemonstração

Títulodemonstração

Descriçãodemonstração

Régua da árealargura

<ScreenSkeleton nav={<EscolaNav />}>
  <ScreenHeader title="Bom dia, Renata" description="Quatro turmas ativas nesta semana.">
    <Button>Programar aplicação</Button>
  </ScreenHeader>
  <ScreenContent>
    <ScreenSection title="Turmas">…</ScreenSection>
  </ScreenContent>
</ScreenSkeleton>

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.

ScreenSkeleton
  └─ ScreenHeader
  └─ ScreenContent
    └─ ScreenSection

Exportadas, mas sem demonstração nesta página: ScreenTopbar.

A forma de toda tela autenticada: navegação fixa à esquerda, cabeçalho e miolo à direita. O que muda entre Backoffice, Escola, Família e Terapeuta é o conteúdo do slot nav, nunca a casca. Quando e por que usar está no padrão Casca de tela — aqui é só a API.

Sem navegação

O prop nav é opcional. Sem ele, a Sidebar não é montada — não existe uma barra vazia ocupando espaço. Use em telas fora do menu principal, como um passo de configuração inicial.

Faixa de identidade de um registro

ScreenEntityHeader substitui o ScreenHeader quando a tela é o recorte de um registro — um aluno, uma turma, uma lição. name, status e actions ficam visíveis enquanto tabs navega entre Resumo, Perfil, Trilha e as demais abas do registro.

A régua de largura é da área, não da tela

ScreenSkeleton declara largura=contida (o miolo prende em --layout-content-max e se centra) ou largura=cheia (a tela inteira trabalha, que é o caso do Backoffice). Cabeçalho, faixa de entidade e miolo leem a mesma régua: quando só o miolo a respeitava, em 1920px o título ia até a borda direita e a tabela parava 384px antes — em 38 das 89 rotas do produto. fullWidth continua existindo como escape de uma tela dentro de uma área contida, e cobra o preço de desalinhar do próprio cabeçalho.

Acessibilidade

O que o componente já garante, e o que continua sendo responsabilidade da tela.

A casca é quem define os marcos da página: navegação, cabeçalho e conteúdo principal precisam ser regiões distintas.
O salto para o conteúdo principal é responsabilidade da casca, não de cada tela.
Em 390 px a navegação some da lateral; verifique que ela continua alcançável antes de considerar a tela responsiva.

Em contexto de produto

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

Os quatro estados de tela são demonstrados dentro da mesma casca, lado a lado, porque o erro comum é desenhar só o estado cheio.

Ver os estados de tela

Componentes relacionados

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