Referencia de Componentes Personalizados de Markdown

Mejora tu documentación con estos potentes componentes personalizados de Markdown. Esta guía cubre la sintaxis, ejemplos de uso y mejores prácticas para cada tipo de componente.

Tabla de Contenidos

• Componente de Pestañas
• Componente de Tarjetas
• Avisos
• Pasos
• Acordeones
• Iconos
• Descarga de Archivos

Componente de Pestañas

Organiza contenido relacionado en secciones con pestañas para una mejor navegación y eficiencia de espacio.

Sintaxis Básica

Características

• defaultTab: Define qué pestaña se abre por defecto
• TabList: Contenedor para los botones de pestañas
• TabPanel: Contenedor de contenido para cada pestaña
• Soporta Markdown y HTML completo en las áreas de contenido

Mejores Prácticas

• Limita a 3-5 pestañas para mejor usabilidad
• Usa etiquetas de pestañas claras y concisas
• Mantén el contenido de las pestañas enfocado y relacionado

Componente de Tarjetas

Crea diseños flexibles de tarjetas para mostrar elementos relacionados en una cuadrícula.

Sintaxis Básica

Propiedades de la Tarjeta

Recomendamos usar iconos de Lucide para mantener la consistencia. Explora todos los iconos disponibles, pero también puedes usar etiquetas <img/> con imágenes externas o internas.

Avisos

Destaca información importante con cajas de aviso estilizadas.

Tipos Disponibles

Sugerencia útil

Sugerencia útil

Posible problema

Posible problema

Información crítica

Información crítica

Mensaje de advertencia

Mensaje de advertencia

Contexto adicional

Contexto adicional

Personalización

Consejo Pro

Usa pestañas para organizar contenido relacionado

• Mantén el contenido conciso
• Limita a 3-5 pestañas

Pasos

Crea instrucciones o flujos de trabajo paso a paso.

Ejemplo de Sintaxis

Acordeones

Secciones de contenido colapsables para organizar información.

Implementación

Solo

Iconos

Usa iconos de Lucide en tu Markdown.

Uso

Explora todos los iconos disponibles

Descarga de Archivos

Enlaza a recursos descargables.

Sintaxis

Descargar ZIP - Archivos del proyecto

Open API

Puedes usar el componente <OpenAPI /> para mostrar especificaciones OpenAPI de archivos locales o remotos. Aquí tienes un ejemplo de cómo utilizarlo:

Como Strapi no soporta archivos yaml, puedes convertir tus archivos OpenAPI yaml a json usando herramientas en línea, utilidades de línea de comandos o referenciar archivos remotos directamente.

Mejores Prácticas

1. Consistencia

   • Usa el mismo estilo de componente en toda tu documentación
   • Mantén niveles de encabezado uniformes

2. Accesibilidad

   • Incluye siempre texto alternativo para imágenes
   • Usa texto descriptivo en los enlaces

3. Organización

   • Agrupa componentes relacionados
   • Usa los componentes con un propósito, no solo decorativamente