Komponenty

Zobrazit jako Markdown Upravit na GitHub Dokumentace na 7b38e05

Onedocs registruje sadu komponent Fumadocs UI pro vaše soubory MDX, takže je můžete používat bez importu.

Používání komponent

Předejte mdxComponents svému obsahu MDX:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents obsahuje výchozí hodnoty Fumadocs UI (nadpisy s kotevními odkazy, bloky kódu, odkazy, obrázky, tabulky, Card, Cards a Callout) a také Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom a TypeTable. Každý následující příklad s ním funguje bez úprav.

Upozornění

Zvýrazněte důležité informace. type je jedna z možností info (výchozí), warn, error, success nebo 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>

Přidejte nadpis pomocí title:

Mdx

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

Karty

Uspořádejte obsah do karet. Každá karta Tab value odpovídá položce v 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>

Karty

Odkazujte na další stránky pomocí mřížek karet:

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>

Kroky

Zobrazte číslované kroky:

Mdx

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

Akordeon

Sbalitelný obsah pro často kladené otázky a doplňující informace. Otevřená může být vždy jen jedna položka:

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>

Soubory

Zobrazte stromové struktury souborů:

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 obrázků

Obrázek, který se po kliknutí otevře v plné velikosti. Pro obrázky z public/ jsou vyžadovány hodnoty width a height:

Mdx

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

Tabulka typů

Zdokumentujte vlastnosti nebo možnosti 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",
    },
  }}
/>

Další komponenty

InstallBlock a CodeBlock z onedocs nejsou součástí mdxComponents. Chcete-li je použít v MDX, přidejte je do předávaného objektu:

TSX

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

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

Vše ostatní importujte z Fumadocs UI do svého souboru MDX nebo to přidejte stejným způsobem:

TypeScript

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

Úplný seznam najdete v dokumentaci Fumadocs.