PanelShell
PanelShell é a moldura que envolve cada tela do painel depois do login. Ela põe o link «Pular para o conteúdo», o menu lateral, o título da tela num único h1, o aviso do topo e, quando a tela pede, a coluna de contexto à direita. O corpo da tela entra como main.
Quando usar
Seção intitulada “Quando usar”Você não monta a moldura numa tela de módulo. A tela devolve o título, o conteúdo e, se quiser, a coluna lateral e o aviso. O createShellRender do painel (panel/app/shell.ts:35) é quem chama PanelShell com o menu do usuário que entrou, o papel dele e o token do formulário.
Use rail para a coluna «Contexto», um aside de três das doze colunas (ui/panel/panel-shell.ts:44). Use notice para uma mensagem no topo da área principal. Um aviso de erro sai com o prefixo «Erro:» e role="alert", a não ser que seja persistent, que vira role="status" (ui/panel/panel-shell.ts:34 e :35).
O main não pode ter um h1: a moldura já põe o título da tela (ui/panel/panel-shell.ts:20).
Onde aparece no painel
Seção intitulada “Onde aparece no painel”Em todas as telas com sessão iniciada, como a Visão geral, Posts, Mídia, Usuários e Configurações. As telas de acesso (Entrar, Recuperar acesso, Definir nova senha e Aceitar convite) ficam fora dela, porque ninguém está logado ali (panel/screens/auth/page.ts:8). O Editor de post usa a coluna lateral para os painéis de publicação (modules/posts/screens/page.ts:206).
Variantes e propriedades
Seção intitulada “Variantes e propriedades”PanelShell
Pasta: ui/panel
Variantes
| Id | Variante | Tom |
|---|---|---|
panel-shell-no-rail-light | no-rail | light |
panel-shell-atividade-light | rail-atividade | light |
panel-shell-atividade-dark | rail-atividade | dark |
panel-shell-resumo-light | rail-resumo | light |
panel-shell-ajuda-light | rail-ajuda | light |
panel-shell-previa-light | rail-previa | light |
panel-shell-filtros-light | rail-filtros | light |
panel-shell-novo-light | rail-novo | light |
panel-shell-publicacao-light | rail-publicacao | light |
panel-shell-arquivo-light | rail-arquivo | light |
panel-shell-log-light | rail-log | light |
panel-shell-campos-light | rail-campos | light |
Propriedades
| Propriedade | Tipo | Obrigatória | Descrição |
|---|---|---|---|
title | string | Sim | — |
nav | readonly NavGroup[] | Sim | — |
main | SafeHtml | Sim | Screen body; it must not contain an h1, the shell owns it. |
rail | SafeHtml | Não | — |
notice | PanelNotice | Não | — |
active | string | Sim | `id` of the current item. |
user | PanelUser | Sim | — |
csrf | string | Sim | — |
profileHref | string | Não | — |
logoutAction | string | Não | — |
Captura
Seção intitulada “Captura”A primeira variante do catálogo, sem coluna lateral, em 1280 px:
A mesma variante em 360 px, com o menu recolhido num botão «Menu», acima do conteúdo (ui/panel/side-nav.ts:57):
ui/panel/panel-shell.ts: a funçãoPanelShelle o tipoPanelShellProps.ui/panel/panel-shell.gallery.ts: as variantes do catálogo (uma por coluna de contexto e tom).panel/app/shell.ts: a chamada que monta a moldura em cada tela com sessão.