Jamdesk Documentation logo

Resumen de componentes

Explora los componentes MDX de Jamdesk: tarjetas, pestañas, avisos y bloques de código, para encontrar el que mejor se adapte a tu documentación.

Jamdesk incluye componentes MDX que puedes usar en cualquier página. Este resumen te ayuda a elegir el componente adecuado para tu contenido.

Uso

Inserta los componentes directamente en tu MDX:

<Card title="Quickstart" icon="rocket" href="/quickstart">

  Launch your docs in minutes.

</Card>

Diseño y navegación

Accordion

Secciones de contenido plegables que permiten a los usuarios expandir solo lo que necesitan. Ideal para preguntas frecuentes, listas de funciones y opciones de configuración.

Card

Aprende a usar el componente Card para crear contenedores interactivos y con estilo, con iconos, imágenes, enlaces y CTA en diseños de cuadrícula.

Columns

Diseño de cuadrícula responsivo para mostrar Cards, Tiles y otro contenido en paralelo. Se adapta automáticamente al tamaño de la pantalla.

Frame

Frame envuelve imágenes y demostraciones en un contenedor con borde y leyendas opcionales, manteniendo una presentación visual coherente en la documentación.

Panel

Usa Panel para fijar contenido personalizado, como avisos o referencias rápidas, en la barra lateral, manteniéndolo visible mientras los lectores se desplazan.

Steps

Guías numeradas paso a paso para flujos de configuración, tutoriales y solución de problemas. Admite iconos, bloques de código y contenido anidado.

Tabs

Paneles intercambiables para contenido mutuamente excluyente, como gestores de paquetes o lenguajes. Los títulos de pestaña coincidentes se sincronizan en toda la página.

Tile

Los Tiles muestran vistas previas de contenido con un fondo de patrón estilizado y un área de imagen destacada. Úsalos para integraciones, plantillas o galerías visuales.

Tree

Muestra jerarquías de archivos y carpetas con expansión/contracción interactiva y navegación por teclado. Ideal para documentar la estructura de un proyecto.

View

Crea documentación que se adapta al framework o lenguaje que elija el lector. Secciones completas cambian según la selección del usuario.

Contenido y énfasis

Badge

Etiquetas en línea para estados, categorías y metadatos: 11 variantes de color, 4 tamaños, iconos, formas de píldora/redondeadas y contornos.

Callouts

Aprende a usar los componentes Note, Tip, Warning, Danger, Check y Callout personalizados para resaltar información clave en tu documentación.

Expandable

Expandable crea un simple interruptor de mostrar/ocultar para contenido que los lectores pueden querer ver, pero que no es esencial para el flujo principal.

Tooltip

Muestra definiciones y contexto al pasar el cursor. Define términos, explica siglas o enlaza a contenido relacionado sin saturar la página.

Update

Entradas de registro de cambios estilo línea de tiempo, con fechas, descripciones y etiquetas de categoría. Se integra con tu tabla de contenido para la navegación.

Visibility

Muestra contenido diferente a lectores humanos y a agentes de IA en la misma página. Contexto, instrucciones y definiciones exclusivos para agentes, que no aparecen en la documentación renderizada.

Código y datos

CodeGroup

Muestra bloques de código en una interfaz con pestañas. Presenta la misma operación en varios lenguajes, como cURL, Python y JavaScript.

Examples

Fija bloques de código en una barra lateral derecha fija en escritorio para que los lectores puedan consultarlos mientras se desplazan. Admite lenguajes en pestañas.

Fields

Documenta los parámetros de la API y los campos de respuesta con los componentes ParamField y ResponseField. Admite tipos, valores predeterminados y objetos anidados.

Prompt

Usa Prompt para presentar instrucciones de IA reutilizables con copia, acciones integradas de abrir en, destinos personalizados, iconos y opciones de visualización compacta.

Tables

Organiza los datos en filas y columnas. Admite tablas en markdown y componentes Table con ordenación, resaltado y combinación de celdas.

Diagramas y elementos visuales

Color

El componente Color muestra paletas de colores para documentar sistemas de diseño, guías de marca o cualquier especificación de color.

Mermaid Diagrams

Genera diagramas de flujo, diagramas de secuencia, líneas de tiempo, gráficos circulares y más a partir de sintaxis Mermaid basada en texto. Los diagramas se generan como SVG en el momento del build.

D2 Diagrams

Genera diagramas de arquitectura, diagramas de flujo, secuencias y modelos SQL a partir de sintaxis D2 basada en texto. Los diagramas se renderizan como SVG con temas claro y oscuro automáticos.

Interacción

EmailSubscribe

Agrega un formulario de suscripción a boletín o registro de cambios en cualquier página de documentación con el componente EmailSubscribe: captura nativa para siete proveedores, código incrustado para el resto.

Widget

Incorpora una demo en vivo del widget de novedades en tu documentación con el componente MDX Widget: un botón que abre tu registro de cambios en una ventana modal, sin necesidad de etiqueta de script.