flows.md · documentação · Blocos

@use#

Um componente do tema que a página veste — um cartão de curso, um cartão de evento, um passo a passo —, preenchido com as palavras desta página. O desenho é do tema; as palavras são da página.

Por que não está desenhado aqui#

Um componente mora num tema publicado: cada um é uma página do tema, com o desenho e os espaços (slots) que um @use preenche. O tema destas páginas não tem componentes, então um @use aqui não teria o que desenhar.

O markdown#

```@use cartao-de-curso
titulo: Cerâmica para iniciantes
data: Sáb · 14 jun · 10h
link: https://example.com/inscricao
```

Um slot por linha, slot: palavras. Uma lista é uma linha por item, com os campos na ordem que o componente declara:

```@use passo-a-passo
etapas: Pedido feito | done | 10 mar
etapas: Em produção | current | 12 mar
etapas: Enviado | upcoming | 15 mar
```

Como um componente é feito#

Na pasta components do tema, uma página por componente: uma cerca ```component que diz para que ele serve e quais slots ele tem, e depois markdown comum — diretivas, blocos, controles — com {{titulo}} onde entram as palavras de quem o usa.

```component
name: Cartão de curso
when: Para anunciar um curso com data, vagas e preço.
slot titulo: O nome do curso *
slot data: Dia e hora do primeiro encontro *
slot link: Para onde o botão leva
```

:::card tone:soft
`pill:info:{{data}}`
### {{titulo}}
[Inscrever]({{link}}){primary}
:::

A tela do tema lista os componentes, com quando usar cada um e os slots. Um @data view:timeline item:passo-a-passo desenha cada linha de uma coleção com um componente.

O que precisa#

Um tema publicado com componentes, vestido pela página (ou por uma página acima dela).