Jamdesk Documentation logo

Aperçu des composants

Découvrez les composants MDX de Jamdesk : cartes, onglets, encadrés et blocs de code, pour trouver celui qui convient à votre documentation.

Jamdesk propose des composants MDX que vous pouvez utiliser sur n'importe quelle page. Cet aperçu vous aide à choisir le composant adapté à votre contenu.

Utilisation

Insérez les composants directement dans votre MDX :

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

  Launch your docs in minutes.

</Card>

Mise en page et navigation

Accordion

Sections de contenu réductibles qui permettent aux utilisateurs de déplier uniquement ce dont ils ont besoin. Idéal pour les FAQ, les listes de fonctionnalités et les options de configuration.

Card

Apprenez à utiliser le composant Card pour créer des conteneurs cliquables et stylisés avec des icônes, des images, des liens et des CTA dans des mises en page en grille.

Columns

Mise en page en grille responsive pour afficher des Cards, des Tiles et d'autres contenus côte à côte. S'adapte automatiquement à la taille de l'écran.

Frame

Frame encadre les images et les démonstrations dans un conteneur avec bordure et légendes optionnelles, pour une présentation visuelle cohérente de la documentation.

Panel

Utilisez Panel pour épingler du contenu personnalisé comme des avertissements ou des références rapides dans la barre latérale, en le gardant visible pendant que les lecteurs font défiler la page.

Steps

Guides étape par étape numérotés pour les flux de configuration, les tutoriels et le dépannage. Prend en charge les icônes, les blocs de code et le contenu imbriqué.

Tabs

Panneaux interchangeables pour du contenu mutuellement exclusif, comme les gestionnaires de paquets ou les langages. Les titres d'onglets identiques se synchronisent sur toute la page.

Tile

Les Tiles affichent des aperçus de contenu avec un arrière-plan à motif stylisé et une zone d'image proéminente. Utilisez-les pour les intégrations, les modèles ou les galeries visuelles.

Tree

Affichez des hiérarchies de fichiers et de dossiers avec un développement/réduction interactif et une navigation au clavier. Idéal pour la documentation de la structure d'un projet.

View

Créez une documentation qui s'adapte au framework ou au langage choisi par le lecteur. Des sections entières changent selon la sélection de l'utilisateur.

Contenu et mise en valeur

Badge

Étiquettes en ligne pour les statuts, les catégories et les métadonnées : 11 variantes de couleur, 4 tailles, des icônes, des formes pilule/arrondie et des contours.

Callouts

Apprenez à utiliser les composants Note, Tip, Warning, Danger, Check et Callout personnalisés pour mettre en évidence les informations clés de votre documentation.

Expandable

Expandable crée un simple bouton d'affichage/masquage pour du contenu que les lecteurs peuvent vouloir consulter, mais qui n'est pas essentiel au flux principal.

Tooltip

Affichez des définitions et du contexte au survol. Définissez des termes, expliquez des acronymes ou créez des liens vers du contenu associé sans surcharger la page.

Update

Entrées de journal des modifications sous forme de chronologie, avec dates, descriptions et étiquettes de catégorie. S'intègre à votre table des matières pour la navigation.

Visibility

Affichez un contenu différent aux lecteurs humains et aux agents IA sur la même page. Contexte, instructions et définitions réservés aux agents, qui restent absents de la documentation rendue.

Code et données

CodeGroup

Affichez des blocs de code dans une interface à onglets. Montrez la même opération dans plusieurs langages comme cURL, Python et JavaScript.

Examples

Épinglez des blocs de code dans une barre latérale droite fixe sur ordinateur, pour que les lecteurs puissent s'y référer en faisant défiler la page. Prend en charge les langages à onglets.

Fields

Documentez les paramètres d'API et les champs de réponse avec les composants ParamField et ResponseField. Prend en charge les types, les valeurs par défaut et les objets imbriqués.

Prompt

Utilisez Prompt pour présenter des instructions IA réutilisables avec copie, des actions d'ouverture intégrées, des destinations personnalisées, des icônes et des options d'affichage compact.

Tables

Organisez les données en lignes et en colonnes. Prend en charge les tableaux markdown et les composants Table avec tri, mise en surbrillance et fusion de cellules.

Diagrammes et visuels

Color

Le composant Color affiche des palettes de couleurs pour documenter des systèmes de design, des chartes graphiques ou toute spécification de couleur.

Mermaid Diagrams

Générez des organigrammes, des diagrammes de séquence, des chronologies, des diagrammes circulaires et plus encore à partir d'une syntaxe Mermaid textuelle. Les diagrammes sont générés en SVG au moment du build.

D2 Diagrams

Générez des diagrammes d'architecture, des organigrammes, des séquences et des modèles SQL à partir d'une syntaxe D2 textuelle. Les diagrammes s'affichent en SVG avec un thème clair et sombre automatique.

Engagement

EmailSubscribe

Ajoutez un formulaire d'inscription à une newsletter ou à un journal des modifications sur n'importe quelle page de documentation avec le composant EmailSubscribe : capture native pour sept fournisseurs, intégrations pour les autres.

Widget

Intégrez une démo en direct du widget Nouveautés dans votre documentation avec le composant MDX Widget : un bouton déclencheur qui ouvre votre journal des modifications dans une fenêtre modale, sans balise script nécessaire.