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.

Layout: arrumar a página#

Um bloco com @ guarda conteúdo — um gráfico, uma tabela, um formulário. Para arrumar a página em faixas, colunas e grades existe a outra sintaxe, :::nome argumentos … :::, e tudo entre as duas linhas é markdown comum, inclusive outros blocos:

Numa grade, --- separa os itens:

section, hero, split, columns, grid, card, cover, inline, carousel, masonry, marquee, nav, footer e banner — cada argumento é uma escolha de uma lista, nunca CSS, e tudo funciona do celular à tela ultra-wide, no tema claro e no escuro. A lista completa, com exemplos, está na referência e os padrões prontos em padrões.

Filhos#

Alguns componentes aceitam filhos: linhas do corpo que começam com @ e configuram um pedaço da coisa. @data desenha as linhas de uma coleção do space, e os filhos dizem o que filtrar e o que mostrar:

```@data collection:chamados
@filter status eq aberto
@column titulo
@column prioridade
@count
```

Escrever, não só ler#

@form grava numa coleção. Os campos vêm da declaração da coleção (@schema), então o formulário não pode pedir um campo que a tabela não tem:

```@form collection:chamados
titulo
prioridade
```

Para uma inscrição de um campo só — uma newsletter, uma lista de espera — o formulário cabe em uma linha:

```@form collection:lista layout:inline submit:"Assinar"
email
```

Duas ajudas em código inline#

Dentro de uma frase, um trecho em código pode virar duas coisas nossas.

icon:nome desenha um ícone do conjunto do flows.md, no tamanho e na cor do texto em volta:

[Começar agora `icon:arrow-right`](#comecar)

vira os links para as outras versões desta página, quando ela está escrita em mais de um idioma. O lugar é seu — normalmente o rodapé — e o visual é o da página, porque é a sua página que mostra o idioma, não o flows.md:

:::footer
**Sua marca** — uma frase sobre o que você faz.

`languages`
---
**Produto**
- [Recursos](#recursos)
:::

Só aparecem os outros idiomas: quem está lendo já está num deles. Numa página escrita num idioma só, o token não desenha nada — então o mesmo rodapé serve para todas as páginas do site.

Quando você erra#

Uma cerca com um argumento que o componente não declara não é ignorada em silêncio — isso seria uma página que renderiza e mente. Ela vira um bloco de erro no lugar dela, com o que estava errado, um "você quis dizer" quando dá para adivinhar, e a fonte da cerca ainda na tela. O resto da página renderiza normalmente.

A lista inteira#

Referência de componentes — todo componente, todo argumento, gerado por eles mesmos.