flows.md · documentação · Blocos

:::shell#

A moldura de um aplicativo: uma coluna lateral — quase sempre um :::sidenav — ao lado da parte principal. Numa tela larga, é um painel com a coluna de largura fixa; no celular, ocupa a tela, a coluna sai, e uma primeira linha da parte principal que seja um link com vira a barra de voltar.

Ao vivo#

:::shell
:::sidenav
**Conta**

[`icon:user` Perfil](/@docs/blocks/shell)

[`icon:settings` Preferências](/@docs/blocks/rows)
---
**Espaço**

[`icon:palette` Aparência](/@docs/blocks/tokens)
:::
---
[`icon:chevron-left` Ajustes](/@docs/blocks)

# Perfil

## Público

:::rows
**Nome**

`dropdown:Marta Exemplo`
---
**Aparecer na busca do site**

`switch:on`
:::
:::

O primeiro item é a coluna lateral, o segundo a parte principal. Na parte principal, um # é o título da tela, com uma linha fina embaixo, e um ## é um rótulo pequeno sobre um grupo de linhas, como numa tela de ajustes. O link da página que se está lendo fica marcado no :::sidenav.

Argumentos#

• rail — a largura da coluna lateral, em rem: 14, 16 (o padrão), 18 ou 20.
• frame — panel (o padrão) é um painel elevado; plain não desenha painel; full faz da moldura a página inteira, de ponta a ponta.
• divider — line (o padrão) ou none entre as duas partes.
• narrow — no celular, back (o padrão) deixa só o caminho de volta; drawer acrescenta um botão de menu que abre a coluna como uma gaveta.

Escrita uma vez num modelo, a moldura vale para todas as páginas que o vestem, com um :::slot no lugar da parte principal: a página dos modelos mostra como.