flows.md · documentação

Componentes de página

Um bloco de código cujo idioma começa com @ não é código: é uma chamada de componente. A página continua sendo markdown — dá para exportar, colar no GitHub, guardar num arquivo — e o @ é a única sintaxe nova.

A linha de chamada

A primeira linha do bloco é o nome e os argumentos:

```@pages columns:2
/@docs/showcase/orbit
/@docs/showcase/relay
```

@pages é o nome. columns:2 é um argumento — nome:valor, separados por espaço, com aspas quando o valor tiver espaço (title:"Antes do deploy"). O resto do bloco é o corpo, e cada componente diz o que faz com ele: uma linha por item, texto livre, ou nada.

flows.md · documentação

Referência

Toda cerca que uma página pode chamar, com seus argumentos, seu corpo e um exemplo. Nada aqui é escrito à mão: a lista abaixo é uma cerca — @components — e sai da declaração dos próprios componentes. Uma referência com a lista de argumentos copiada é uma página que envelhece na semana seguinte.

flows.md · documentação · Blocos

@data

Mostra as linhas de uma coleção do espaço numa página: uma tabela por padrão, ou a mesma coleção como quadro, lista de tarefas, agenda ou linha do tempo.

Os exemplos leem a coleção tarefas-exemplo, declarada na página do @schema com sete tarefas de uma loja fictícia. Quem lê vê as vistas como estão; quem escreve no espaço arrasta um cartão, marca uma caixa, muda uma data.

Tabela

```@data collection:tarefas-exemplo sort:ordem
@count
@column titulo
@column status format:badge
@column responsavel
@column prazo
```

flows.md · documentação

Temas

Um tema é escolhido, nunca escrito em CSS: cores, fontes, cantos e botões, cada um um valor de uma lista. O flows.md confere o contraste no claro e no escuro e recusa a cor que não dá para ler, dizendo qual tom funciona.

Para não começar do zero, escolha um tema abaixo. Ele entra na sua página como valores na cerca theme, e a partir daí a página é sua: mude o destaque, a fonte ou o que quiser. Mudar um tema aqui não muda a página de ninguém.

• No editor: abra Layout e escolha em Theme…. O menu, os links de título e o logo da página ficam como estavam.
• Por um agente: peça o visual; o MCP aplica o tema e ajusta os valores.
• À mão: copie a cerca de um tema para o topo da página.

Um tema na página de cima vale para as páginas de dentro. Veja na vitrine sites inteiros com um tema só.

Componentes · Padrões · Referência