AppShell
O layout de regiões de um produto. Nasce no mobile: cabeçalho em cima, conteúdo embaixo, navegação num Drawer; na tela larga, a gaveta vira a coluna do lado.
Nesta página
Playground
Agendamentos
Lembrete 1: toda semana, 8h.
Lembrete 2: toda semana, 9h.
Lembrete 3: toda semana, 10h.
Lembrete 4: toda semana, 11h.
Lembrete 5: toda semana, 12h.
Lembrete 6: toda semana, 13h.
Lembrete 7: toda semana, 14h.
Lembrete 8: toda semana, 15h.
Lembrete 9: toda semana, 16h.
Lembrete 10: toda semana, 17h.
Quem entrou
Fundo
<div class="feitio-app-frame" style="block-size: 22rem; inline-size: min(100%, 24rem); overflow-y: auto; border: var(--feitio-border-width) solid var(--feitio-color-line)"><div class="feitio-app"><header class="feitio-app-header" data-hide-on-scroll><a class="brand" href="#pg-app-content">Produto</a><button type="button" class="feitio-button menu" data-size="small" popovertarget="pg-app" aria-controls="pg-app">Menu<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-menu"></use></svg></button></header><nav class="feitio-drawer feitio-app-nav" id="pg-app" popover aria-label="Menu"><div class="drawer-header"><h2>Menu</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-app" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Fechar</button></div><div class="drawer-body"><nav class="feitio-nav"><div class="group"><p class="group-title">Trabalho</p><ul><li><a href="#playground" aria-current="page"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg>Agendamentos</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-task"></use></svg>Tarefas</a></li></ul></div><div class="group"><p class="group-title">Produto</p><ul><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-sliders"></use></svg>Ajustes</a></li></ul></div></nav></div></nav><div class="feitio-app-main" id="pg-app-content" tabindex="-1"><div style="padding: var(--feitio-space-4)"><h3>Agendamentos</h3><p>Lembrete 1: toda semana, 8h.</p><p>Lembrete 2: toda semana, 9h.</p><p>Lembrete 3: toda semana, 10h.</p><p>Lembrete 4: toda semana, 11h.</p><p>Lembrete 5: toda semana, 12h.</p><p>Lembrete 6: toda semana, 13h.</p><p>Lembrete 7: toda semana, 14h.</p><p>Lembrete 8: toda semana, 15h.</p><p>Lembrete 9: toda semana, 16h.</p><p>Lembrete 10: toda semana, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span><a class="feitio-button feitio-back-to-top" data-size="small" href="#pg-app-content"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg>Topo</a></div></div></div>Quando usar
- Em toda tela de um produto com mais de um lugar para ir: um painel, um admin.
Quando não usar
- Uma página de leitura solta ou a documentação: só o conteúdo, ou o DocPage.
Exemplos
No mobile
Role dentro da moldura e toque em Menu: a gaveta entra pela direita, com a conta e o "Sair" no rodapé dela. No fim do conteúdo, o ScrollFade e o BackToTop.
Mostrar código
<div class="feitio-app-frame">
<div class="feitio-app">
<header class="feitio-app-header" data-hide-on-scroll>
<a class="brand" href="/">Produto</a>
<button type="button" class="feitio-button menu" data-size="small" popovertarget="menu">Menu…</button>
</header>
<nav class="feitio-drawer feitio-app-nav" id="menu" popover aria-label="Principal">…</nav>
<main class="feitio-app-main" id="conteudo" tabindex="-1">
…
<span class="feitio-scroll-fade" aria-hidden="true"></span>
<a class="feitio-button feitio-back-to-top" data-size="small" href="#conteudo">…Topo</a>
</main>
</div>
</div>Na tela larga
A partir de 64rem de moldura, a gaveta vira a coluna do lado, com o rodapé dela embaixo; o Menu some. O exemplo está reduzido pela metade.
Mostrar código
<!-- o mesmo HTML: a moldura mede a própria largura -->As regiões
| Região | O que vai |
|---|---|
brand | O nome do produto, levando ao início. Obrigatória. |
actions | Opcional, no máximo duas peças usadas toda hora. Nunca a conta nem o "Sair". |
menu | O botão que abre a gaveta, por último, à direita. Some na tela larga. |
nav | Uma Nav, dentro de um Drawer no mobile. |
nav-footer | Opcional: quem está dentro, o "Sair", a versão. |
main | A tela em si, com a tarefa principal primeiro. Traz o ScrollFade e o BackToTop. |
Anatomia
Conteúdo
- brand: leva ao início.
- actions, opcional: o que se usa toda hora.
- menu: abre a gaveta, à direita, do lado do polegar.
- main: a tela em si.
Estados
- Rolando para baixo: o cabeçalho sobe e sai; rolando para cima, volta. Perto do topo, ou com o foco dentro dele, fica à vista.
- Telas grandes: o conteúdo para em 72rem e fica no centro.
Bons e maus padrões
Faça assim
A marca e o Menu no cabeçalho; a conta e o "Sair" no rodapé da gaveta.
O que se usa toda hora fica à mão; o resto, guardado.
Não faça
O "Sair" fixo no cabeçalho, ao lado do Menu, em todas as telas.
O lugar mais nobre da tela com a ação menos usada.
Acessibilidade
- Regiões de verdade:
<header>,<nav>com nome,<main>. - O SkipLink é o primeiro item da página.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-app-frame" | em volta | Mede a própria largura e escolhe a forma. |
class="feitio-app" | obrigatório | O grid das regiões. |
data-hide-on-scroll | no cabeçalho | Some ao rolar para baixo, no mobile. |
class="feitio-drawer feitio-app-nav" | com popover | Gaveta no mobile, coluna na tela larga. |