Komponenty

Zobraziť ako Markdown Upraviť na GitHub Dokumentácia na 7b38e05

Onedocs registruje sadu komponentov Fumadocs UI pre vaše súbory MDX, takže ich môžete používať bez importovania.

Používanie komponentov

Odovzdajte mdxComponents svojmu obsahu MDX:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents obsahuje predvolené hodnoty Fumadocs UI (nadpisy s kotvovými odkazmi, bloky kódu, odkazy, obrázky, tabuľky, Card, Cards a Callout) a tiež Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom a TypeTable. Každý príklad nižšie funguje bez úprav.

Upozornenie

Zvýraznite dôležité informácie. type je jednou z možností info (predvolená), warn, error, success alebo 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>

Pridajte nadpis pomocou title:

Mdx

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

Karty

Usporiadajte obsah do kariet. Každá karta Tab value zodpovedá položke 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 ďalšie stránky pomocou mriežky kariet:

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 očíslované kroky:

Mdx

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

Akordeón

Rozbaľovací obsah pre často kladené otázky a doplňujúce podrobnosti. Naraz je otvorená iba 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>

Súbory

Zobrazte stromové zobrazenia súborov:

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>

Priblíženie obrázka

Obrázok, ktorý sa po kliknutí otvorí v plnej veľkosti. Pre obrázky z public/ sú potrebné width a height:

Mdx

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

Tabuľka typov

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

Ďalšie komponenty

InstallBlock a CodeBlock z onedocs nie sú v mdxComponents. Ak ich chcete použiť v MDX, pridajte ich do odovzdávaného objektu:

TSX

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

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

Všetko ostatné importujte z Fumadocs UI do súboru MDX alebo to pridajte rovnakým spôsobom:

TypeScript

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

Úplný zoznam nájdete v dokumentácii Fumadocs.