Komponentai

Peržiūrėti kaip Markdown Redaguoti per GitHub Dokumentacija: 7b38e05

Onedocs registruoja Fumadocs UI komponentų rinkinį jūsų MDX failams, todėl galite juos naudoti be importavimo.

Komponentų naudojimas

Perduokite mdxComponents savo MDX turiniui:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents apima numatytuosius Fumadocs UI (antraštes su inkarų nuorodomis, kodo blokus, nuorodas, vaizdus, lenteles, Card, Cards ir Callout) bei Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom ir TypeTable. Visi toliau pateikti pavyzdžiai su juo veikia be pakeitimų.

Informacinis pranešimas

Išryškinkite svarbią informaciją. type yra viena iš reikšmių: info (numatytoji), warn, error, success arba 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>

Pridėkite antraštę naudodami title:

Mdx

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

Kortelės

Suskirstykite turinį į skirtukus. Kiekvienas Tab value atitinka įrašą sąraše 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>

Kortelės

Nuorodas į kitus puslapius pateikite kortelių tinkleliuose:

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>

Veiksmai

Pateikite sunumeruotus veiksmus:

Mdx

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

Išskleidžiamasis sąrašas

Sutraukiamas turinys DUK ir papildomai informacijai. Vienu metu atidarytas gali būti tik vienas elementas:

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>

Failai

Rodykite failų medžius:

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>

Vaizdų mastelio keitimas

Vaizdas, kuris spustelėjus atidaromas visu dydžiu. Vaizdams iš public/ būtini width ir height:

Mdx

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

Tipų lentelė

Dokumentuokite API savybes arba parinktis:

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",
    },
  }}
/>

Kiti komponentai

onedocs komponentai InstallBlock ir CodeBlock neįtraukti į mdxComponents. Norėdami juos naudoti MDX, įtraukite į objektą, kurį perduodate:

TSX

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

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

Visus kitus komponentus importuokite iš Fumadocs UI savo MDX faile arba pridėkite tuo pačiu būdu:

TypeScript

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

Visą sąrašą rasite Fumadocs dokumentacijoje.