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#
| Tarefa | Status | Quem | Prazo |
|---|---|---|---|
| Escolher o nome da loja | pronto | Lia | November 2, 2026 |
| Fotografar as peças novas | pronto | Bruno | November 5, 2026 |
| Escrever a página Sobre | revisao | Carla | November 9, 2026 |
| Montar a tabela de preços | fazendo | Lia | November 12, 2026 |
| Configurar o formulário de contato | fazendo | Davi | November 14, 2026 |
| Preparar a newsletter de estreia | ideia | Carla | November 20, 2026 |
| Abrir as encomendas | ideia | Bruno | November 28, 2026 |
```@data collection:tarefas-exemplo sort:ordem
@count
@column titulo
@column status format:badge
@column responsavel
@column prazo
```Uma linha @column por coluna, na ordem; sem nenhuma, todos os campos. @count, @sum campo e @avg campo imprimem uma conta sobre a tabela.
format: muda como a coluna aparece: date, datetime, age, number, badge, link, text, e três para arquivos. Num campo url ou text que guarda o endereço de um arquivo enviado ao site (/f/…), format:video toca o vídeo num player pequeno, format:image mostra a imagem em miniatura e format:file vira um link de download com o nome do arquivo.
Filtros para o leitor#
filter_by: vira abas (até cinco opções) ou um menu; search: põe uma caixa de busca. Um @filter na cerca restringe antes de tudo — aqui, nada do que está pronto.
| Tarefa | Status | Prazo |
|---|---|---|
| Montar a tabela de preços | fazendo | November 12, 2026 |
| Configurar o formulário de contato | fazendo | November 14, 2026 |
```@data collection:tarefas-exemplo sort:prazo filter_by:status search:titulo
@filter status ne pronto
@column titulo
@column status format:badge
@column prazo
```Quadro#
view:board group:status: uma coluna por opção do campo, cada linha um cartão. A primeira @column é o título do cartão.
Preparar a newsletter de estreia
Quem Carla
Abrir as encomendas
Quem Bruno
Montar a tabela de preços
Quem Lia
Configurar o formulário de contato
Quem Davi
Escrever a página Sobre
Quem Carla
Escolher o nome da loja
Quem Lia
Fotografar as peças novas
Quem Bruno
```@data collection:tarefas-exemplo view:board group:status sort:ordem
@column titulo
@column responsavel
```wip:"fazendo=2" marca uma coluna que passou do limite; columns:"fazendo,revisao" escolhe quais colunas aparecem; order:ordem deixa quem escreve reordenar os cartões.
Lista de tarefas#
view:checklist done:pronto: uma caixa por linha, ligada ao campo, com a contagem.
2 of 7 done
```@data collection:tarefas-exemplo view:checklist done:pronto sort:ordem
@column titulo
```Linha do tempo#
view:timeline state:status: cada linha um passo de uma :::timeline. states: diz qual valor do campo é cada marcador.
Escolher o nome da loja
Lia
Fotografar as peças novas
Bruno
Escrever a página Sobre
Carla
Montar a tabela de preços
Lia
Configurar o formulário de contato
Davi
Preparar a newsletter de estreia
Carla
Abrir as encomendas
Bruno
```@data collection:tarefas-exemplo view:timeline state:status states:"pronto=done, revisao=current, fazendo=current, ideia=upcoming" date:prazo sort:ordem
@column titulo
@column responsavel
```Um campo#
view:field: um campo de uma linha, como o controle do tipo dele — o status do post na página do próprio post, a caixa de feito na página da tarefa. Os @filter escolhem a linha; field: diz o campo, e fields: põe vários lado a lado. Quem escreve no espaço muda o valor ali mesmo, e ele é salvo na hora. Aqui você só vê os valores: ninguém escreve no espaço da documentação, e as coleções de exemplo não aceitam envios de ninguém.
```@data collection:tarefas-exemplo view:field fields:status,prazo,pronto
@filter ordem eq 3
```Agenda#
view:calendar date:prazo põe cada linha no seu dia, num mês (ou numa semana, period:week) que o leitor avança e volta. Abre no período de hoje, ou no de start: — uma data (start:2026-10-13) ou um dia contado a partir de hoje (start:today+2d). Não está desenhada aqui: as tarefas de exemplo têm datas fixas.
```@data collection:tarefas-exemplo view:calendar date:prazo
@column titulo
```O que precisa#
Uma coleção do espaço, declarada com @schema. Numa página publicada, a coleção precisa de visibility:public para o leitor ver as linhas. Todos os argumentos de cada vista estão na Referência.