Referência de Componentes Customizados em Markdown

Aprimore sua documentação com estes poderosos componentes customizados em Markdown. Este guia cobre sintaxe, exemplos de uso e melhores práticas para cada tipo de componente.

Índice

• Componente de Abas
• Componente de Cards
• Avisos (Callouts)
• Passos
• Acordeões
• Ícones
• Downloads de Arquivos

Componente de Abas

Organize conteúdos relacionados em seções com abas para melhor navegação e aproveitamento de espaço.

Sintaxe Básica

Características

• defaultTab: Define qual aba abre por padrão
• TabList: Container para os botões das abas
• TabPanel: Container de conteúdo para cada aba
• Suporta Markdown e HTML completos nas áreas de conteúdo

Melhores Práticas

• Limite a 3-5 abas para melhor usabilidade
• Use rótulos claros e concisos nas abas
• Mantenha o conteúdo das abas focado e relacionado

Componente de Cards

Crie layouts flexíveis de cards para exibir itens relacionados em grade.

Sintaxe Básica

Propriedades do Card

Recomendamos usar ícones Lucide para manter a consistência. Veja todos os ícones disponíveis, mas você também pode usar tags <img/> com imagens externas ou internas.

Avisos (Callouts)

Destaque informações importantes com caixas de aviso estilizadas.

Tipos Disponíveis

Sugestão útil

Sugestão útil

Possível problema

Possível problema

Informação crítica

Informação crítica

Mensagem de alerta

Mensagem de alerta

Contexto adicional

Contexto adicional

Personalização

Dica Pro

Use abas para organizar conteúdos relacionados

• Mantenha o conteúdo conciso
• Limite a 3-5 abas

Passos

Crie instruções passo a passo ou fluxos de trabalho.

Exemplo de Sintaxe

Acordeões

Seções de conteúdo colapsáveis para organizar informações.

Implementação

Único

Ícones

Use ícones Lucide no seu Markdown.

Uso

Veja todos os ícones disponíveis

Downloads de Arquivos

Link para recursos para download.

Sintaxe

Baixar ZIP - Arquivos do projeto

Open API

Assim como imagens ou links, você pode usar o componente <OpenAPI /> para exibir especificações OpenAPI de arquivos locais ou remotos. Veja um exemplo de uso:

Como o Strapi não suporta arquivos yaml, você pode converter seus arquivos OpenAPI yaml para json usando ferramentas online, utilitários de linha de comando ou referenciar arquivos remotos diretamente.

Melhores Práticas

1. Consistência

   • Use o mesmo estilo de componente em toda a documentação
   • Mantenha níveis de títulos uniformes

2. Acessibilidade

   • Sempre inclua texto alternativo para imagens
   • Use textos de link descritivos

3. Organização

   • Agrupe componentes relacionados
   • Use componentes de forma intencional, não apenas decorativa