Komponenter

Visa som Markdown Redigera på GitHub Dokumentation på 7b38e05

Onedocs registrerar en uppsättning Fumadocs UI-komponenter för dina MDX-filer, så att du kan använda dem utan att importera dem.

Använda komponenter

Skicka mdxComponents till ditt MDX-innehåll:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents innehåller standardvärdena för Fumadocs UI (rubriker med ankarlänkar, kodblock, länkar, bilder, tabeller, Card, Cards och Callout) samt Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom och TypeTable. Alla exempel nedan fungerar direkt.

Informationsruta

Markera viktig information. type är ett av info (standardvärdet), warn, error, success eller 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>

Lägg till en rubrik med title:

Mdx

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

Flikar

Ordna innehåll i flikar. Varje Tab value motsvarar en post i 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>

Kort

Länka till andra sidor med kortnät:

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>

Steg

Visa numrerade steg:

Mdx

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

Dragspel

Utfällbart innehåll för vanliga frågor och valfria detaljer. Endast ett objekt är öppet åt gången:

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>

Filer

Visa filträd:

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>

Bildzoom

En bild som öppnas i full storlek när du klickar på den. width och height krävs för bilder från public/:

Mdx

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

Typinformationstabell

Dokumentera props eller alternativ för en 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",
    },
  }}
/>

Fler komponenter

InstallBlock och CodeBlock från onedocs finns inte i mdxComponents. Om du vill använda dem i MDX lägger du till dem i objektet du skickar med:

TSX

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

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

För allt annat importerar du det från Fumadocs UI i filen MDX eller lägger till det på samma sätt:

TypeScript

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

Se dokumentationen för Fumadocs för hela listan.