Componenten

Bekijken als Markdown Bewerken op GitHub Documentatie op 7b38e05

Onedocs registreert een set Fumadocs UI-componenten voor uw MDX-bestanden, zodat u ze kunt gebruiken zonder ze te importeren.

Componenten gebruiken

Geef mdxComponents door aan uw MDX-inhoud:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents bevat de standaardinstellingen van Fumadocs UI (koppen met ankerlinks, codeblokken, links, afbeeldingen, tabellen, Card, Cards en Callout), plus Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom en TypeTable. Alle onderstaande voorbeelden werken er direct mee.

Melding

Benadruk belangrijke informatie. type is een van info (standaard), warn, error, success of 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>

Voeg een kop toe met title:

Mdx

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

Tabbladen

Orden inhoud in tabbladen. Elke Tab value komt overeen met een item in 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>

Kaarten

Link naar andere pagina's met kaartroosters:

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>

Stappen

Toon genummerde stappen:

Mdx

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

Accordeon

Inklapbare inhoud voor veelgestelde vragen en optionele details. Er is steeds maar één item tegelijk geopend:

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>

Bestanden

Toon bestandsbomen:

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>

Inzoomen op afbeeldingen

Een afbeelding die na aanklikken op ware grootte wordt geopend. width en height zijn vereist voor afbeeldingen uit public/:

Mdx

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

Typetabel

Documenteer de props of opties van een 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",
    },
  }}
/>

Meer componenten

InstallBlock en CodeBlock uit onedocs zijn niet opgenomen in mdxComponents. Als u ze in MDX wilt gebruiken, voegt u ze toe aan het object dat u doorgeeft:

TSX

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

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

Importeer al het andere uit Fumadocs UI in uw MDX-bestand of voeg het op dezelfde manier toe:

TypeScript

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

Zie de Fumadocs-documentatie voor de volledige lijst.