Página de Teste
Página "kitchen-sink": reúne todos os elementos e componentes usados na documentação do Arrow System, num só lugar, pra inspecionar e ajustar a estilização de cada um. Acesse em
/teste.
1. Títulos (h1–h6)
Título h1
Título h2
Título h3
Título h4
Título h5
Título h6
2. Texto e inline
Parágrafo normal com negrito, itálico, negrito e itálico, tachado, código inline (ex.: #081128) e um link interno para Fundamentos e um link externo.
Texto com Ctrl + C (teclas), subscrito H2O e sobrescrito x2.
3. Listas
Não ordenada
- Item um
- Item dois
- Sub-item 2.1
- Sub-item 2.2
- Item três
Ordenada
- Primeiro
- Segundo
- Segundo-A
- Segundo-B
- Terceiro
Tarefas (checklist)
- [x] Tarefa concluída
- [ ] Tarefa pendente
- [ ] Outra pendente
4. Citação (blockquote)
Esta é uma citação. Serve pra destacar uma fala, um princípio ou uma definição importante do design system.
— Arrow System
5. Divisor (horizontal rule)
O divisor abaixo é um --- no markdown:
6. Tabela nativa (markdown)
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
label | string | - | Texto do componente. |
variant | 'blue' | 'red' | 'gray' | 'blue' | Cor principal. |
disabled | boolean | false | Desabilita a interação. |
7. Bloco de código
vue
<script setup>
import { MeButton } from '@me/ui-vue3'
</script>
<template>
<MeButton label="Salvar" variant="blue" />
</template>bash
npm run dev # http://localhost:51738. Containers do VitePress
Informação
Container info — contexto neutro.
Dica
Container tip — boa prática ou atalho útil.
Atenção
Container warning — cuidado, há restrições.
Perigo
Container danger — ação destrutiva ou erro.
Ver detalhes
Container details — conteúdo recolhível (clique pra expandir).
9. Componentes de documentação (projeto)
9.1 DocBanner
9.2 DocAlert
Info
Alerta informativo do projeto (componente `DocAlert`).
Dica
Alerta de dica.
Sucesso
Alerta de sucesso.
Atenção
Alerta de atenção.
Erro
Alerta de erro.
9.3 DocTable
| Token | Valor | Uso |
|---|---|---|
| --space-2 | 8px | Espaçamento micro |
| --space-4 | 16px | Espaçamento base |
| --radius-10 | 10px | Raio interativo grande |
9.4 TokenTable
| Token | Hex | Uso semântico | |
|---|---|---|---|
--color-action-primary | CTA primário (Blizzard) | ||
--color-content-accent | Texto de destaque | ||
--color-surface-raised | Superfície elevada |
9.5 DemoBlock (com componente Me*)
Novo
vue
<MeButton label="Salvar" variant="blue" />
<MeButton label="Cancelar" variant="gray" :outlined="true" />
<MeBadge>Novo</MeBadge>