Komponendid

Vaata Markdownina Muuda teenuses GitHub Dokumentatsioon: 7b38e05

Onedocs registreerib Fumadocs UI komponentide komplekti sinu MDX failide jaoks, et saaksid neid kasutada ilma importimata.

Komponentide kasutamine

Anna mdxComponents oma MDX sisule:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents sisaldab Fumadocs UI vaikeväärtusi (ankurlinkidega pealkirjad, koodiplokid, lingid, pildid, tabelid, Card, Cards ja Callout) ning Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom ja TypeTable. Kõik allolevad näited toimivad sellega kohe.

Teavitus

Tõsta oluline teave esile. type on üks väärtustest info (vaikeväärtus), warn, error, success või 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>

Lisa pealkiri atribuudiga title:

Mdx

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

Vahekaardid

Korralda sisu vahekaartideks. Iga Tab value vastab kirjele loendis 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>

Kaardid

Lingi teistele lehtedele kaardivõrgustike abil:

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>

Sammud

Kuva nummerdatud samme:

Mdx

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

Akordion

Ahendatav sisu KKK-de ja lisateabe jaoks. Korraga on avatud ainult üks üksus:

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>

Failid

Kuva failipuid:

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>

Pildi suurendamine

Pilt avaneb klõpsamisel täissuuruses. Asukohast public/ pärit piltide puhul on nõutavad width ja height:

Mdx

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

Tüübiteabe tabel

Dokumenteeri API rekvisiite või valikuid:

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

Rohkem komponente

InstallBlock ja CodeBlock asukohast onedocs ei sisaldu jaotises mdxComponents. Nende kasutamiseks jaotises MDX lisa need objektile, mille edasi annad:

TSX

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

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

Kõik muu impordi failis MDX otse paketist Fumadocs UI või lisa samal viisil:

TypeScript

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

Täielikku loendit vaata Fumadocs dokumentatsioonist.