Composants

Afficher au format Markdown Modifier sur GitHub Documentation de 7b38e05

Onedocs enregistre un ensemble de composants Fumadocs UI pour vos fichiers MDX, que vous pouvez ainsi utiliser sans les importer.

Utiliser les composants

Transmettez mdxComponents à votre contenu MDX :

TSX

import { DocsPage, mdxComponents } from "onedocs";

// In your page component:
<MDX components={mdxComponents} />

mdxComponents contient les valeurs par défaut de Fumadocs UI (titres avec liens d’ancrage, blocs de code, liens, images, tableaux, Card, Cards et Callout), ainsi que Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom et TypeTable. Tous les exemples ci-dessous fonctionnent tels quels avec cette configuration.

Encadré

Mettez en évidence les informations importantes. type est l’une des valeurs suivantes : info (par défaut), warn, error, success ou idea :

Mdx

<Callout type="info">
  This is an informational callout.
</Callout>

<Callout type="warn">
  This is a warning callout.
</Callout>

<Callout type="error">
  This is an error callout.
</Callout>

Ajoutez un titre avec title :

Mdx

<Callout type="warn" title="Breaking change">
  The `docs` option was removed in version 2.
</Callout>

Onglets

Organisez le contenu en onglets. Chaque Tab value correspond à une entrée dans items :

Mdx

<Tabs items={["npm", "yarn", "pnpm", "bun"]}>
  <Tab value="npm">npm install onedocs</Tab>
  <Tab value="yarn">yarn add onedocs</Tab>
  <Tab value="pnpm">pnpm add onedocs</Tab>
  <Tab value="bun">bun add onedocs</Tab>
</Tabs>

Cartes

Créez des liens vers d’autres pages à l’aide de grilles de cartes :

Mdx

<Cards>
  <Card title="Getting Started" href="/docs/getting-started">
    Learn how to set up Onedocs
  </Card>
  <Card title="Configuration" href="/docs/configuration">
    Configure your documentation
  </Card>
</Cards>

Étapes

Présentez des étapes numérotées :

Mdx

<Steps>
  <Step>Install Onedocs</Step>
  <Step>Create configuration</Step>
  <Step>Write documentation</Step>
</Steps>

Accordéon

Contenu repliable pour les FAQ et les détails facultatifs. Un seul élément peut être ouvert à la fois :

Mdx

<Accordions>
  <Accordion title="What is Onedocs?">
    Layouts, components and SEO helpers for documentation sites built with Next.js and Fumadocs.
  </Accordion>
  <Accordion title="How do I install it?">
    Follow the install step in Getting Started.
  </Accordion>
</Accordions>

Fichiers

Affichez des arborescences de fichiers :

Mdx

<Files>
  <Folder name="content" defaultOpen>
    <Folder name="docs" defaultOpen>
      <File name="index.mdx" />
      <File name="getting-started.mdx" />
    </Folder>
  </Folder>
  <File name="onedocs.config.ts" />
</Files>

Zoom sur les images

Une image qui s’ouvre en taille réelle lorsqu’on clique dessus. width et height sont obligatoires pour les images provenant de public/ :

Mdx

<ImageZoom src="/screenshot.png" alt="Dashboard" width={1200} height={800} />

Tableau des types

Documentez les props ou options d’un API :

Mdx

<TypeTable
  type={{
    title: {
      type: "string",
      description: "Site name shown in the navbar.",
    },
    description: {
      type: "string",
      description: "Used for meta tags and the home page.",
      default: "undefined",
    },
  }}
/>

Autres composants

InstallBlock et CodeBlock de onedocs ne figurent pas dans mdxComponents. Pour les utiliser dans MDX, ajoutez-les à l’objet transmis :

TSX

import { CodeBlock, DocsPage, InstallBlock, mdxComponents } from "onedocs";

// In your page component:
<MDX components={{ ...mdxComponents, InstallBlock, CodeBlock }} />

Pour tout autre composant, importez-le depuis Fumadocs UI dans votre fichier MDX ou ajoutez-le de la même manière :

TypeScript

import { Banner } from "fumadocs-ui/components/banner";
import { InlineTOC } from "fumadocs-ui/components/inline-toc";

Consultez la documentation de Fumadocs pour obtenir la liste complète.