Komponenten

Als Markdown anzeigen Auf GitHub bearbeiten Dokumentation zu 7b38e05

Onedocs registriert eine Reihe von Fumadocs-UI-Komponenten für deine MDX-Dateien, damit du sie ohne Import verwenden kannst.

Komponenten verwenden

Übergib mdxComponents an deine MDX-Inhalte:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents enthält die Fumadocs-UI-Standards (Überschriften mit Ankerlinks, Codeblöcke, Links, Bilder, Tabellen, Card, Cards und Callout) sowie Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom und TypeTable. Alle folgenden Beispiele funktionieren direkt damit.

Infobox

Hebe wichtige Informationen hervor. type ist entweder info (Standard), warn, error, success oder 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>

Füge mit title eine Überschrift hinzu:

Mdx

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

Tabs

Ordne Inhalte in Tabs an. Jedes Tab-value entspricht einem Eintrag 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>

Karten

Verlinke andere Seiten mit Kartenrastern:

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>

Schritte

Zeige nummerierte Schritte:

Mdx

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

Akkordeon

Aufklappbare Inhalte für FAQs und optionale Details. Es ist immer nur ein Element geöffnet:

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>

Dateien

Zeige Dateibäume:

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

Ein Bild, das beim Anklicken in voller Größe geöffnet wird. Für Bilder aus public/ sind width und height erforderlich:

Mdx

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

Typtabelle

Dokumentiere die Props oder Optionen eines 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",
    },
  }}
/>

Weitere Komponenten

InstallBlock und CodeBlock aus onedocs sind nicht in mdxComponents enthalten. Um sie in MDX zu verwenden, füge sie dem übergebenen Objekt hinzu:

TSX

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

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

Alles Weitere importierst du aus Fumadocs UI in deiner MDX-Datei oder fügst es auf dieselbe Weise hinzu:

TypeScript

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

Die vollständige Liste findest du in der Fumadocs-Dokumentation.