Componente

Vizualizați ca Markdown Editați pe GitHub Documentație la 7b38e05

Onedocs înregistrează un set de componente Fumadocs UI pentru fișierele MDX, astfel încât să le puteți folosi fără să le importați.

Utilizarea componentelor

Transmiteți mdxComponents conținutului MDX:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents conține componentele implicite din Fumadocs UI (titluri cu linkuri-ancoră, blocuri de cod, linkuri, imagini, tabele, Card, Cards și Callout) plus Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom și TypeTable. Fiecare exemplu de mai jos funcționează direct cu acesta.

Casetă informativă

Evidențiați informațiile importante. type este una dintre valorile info (implicită), warn, error, success sau 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>

Adăugați un titlu cu title:

Mdx

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

File

Organizați conținutul în file. Fiecare Tab value corespunde unei intrări din 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>

Carduri

Creați linkuri către alte pagini cu grile de carduri:

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>

Pași

Afișați pași numerotați:

Mdx

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

Acordeon

Conținut restrângibil pentru întrebări frecvente și detalii opționale. Un singur element este deschis la un moment dat:

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>

Fișiere

Afișați arbori de fișiere:

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 pentru imagini

O imagine care se deschide la dimensiunea completă la clic. width și height sunt necesare pentru imaginile din public/:

Mdx

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

Tabel de tipuri

Documentați proprietățile sau opțiunile unui 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",
    },
  }}
/>

Mai multe componente

InstallBlock și CodeBlock din onedocs nu sunt incluse în mdxComponents. Pentru a le folosi în MDX, adăugați-le obiectului pe care îl transmiteți:

TSX

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

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

Pentru orice altceva, importați-l din Fumadocs UI în fișierul MDX sau adăugați-l în același mod:

TypeScript

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

Consultați documentația Fumadocs pentru lista completă.