Komponensek

Megtekintés Markdownként Szerkesztés itt: GitHub Dokumentáció itt: 7b38e05

A Onedocs egy sor Fumadocs UI komponenst regisztrál az MDX fájlokhoz, így importálás nélkül használhatja őket.

Komponensek használata

Adja át a mdxComponents értéket az MDX tartalmának:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

A mdxComponents tartalmazza az Fumadocs UI alapértelmezett elemeit (horgonyhivatkozásos címsorok, kódblokkok, hivatkozások, képek, táblázatok, Card, Cards és Callout), valamint a következőket: Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom és TypeTable. Az alábbi példák mindegyike azonnal használható vele.

Kiemelődoboz

Emelje ki a fontos információkat. A type értéke a következők egyike lehet: info (alapértelmezett), warn, error, success vagy 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>

Címsor hozzáadása a title használatával:

Mdx

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

Lapfülek

Rendezze fülekbe a tartalmat. Minden Tab value elem a items egyik bejegyzésének felel meg:

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>

Kártyák

Hivatkozzon más oldalakra kártyarácsokkal:

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>

Lépések

Jelenítsen meg számozott lépéseket:

Mdx

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

Harmonika

Összecsukható tartalom GYIK-ekhez és kiegészítő részletekhez. Egyszerre csak egy elem van megnyitva:

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>

Fájlok

Jelenítsen meg fájlstruktúrákat:

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>

Képnagyítás

A képre kattintva teljes méretben nyílik meg. A public/ képeinél kötelező a width és a height:

Mdx

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

Típustáblázat

Dokumentálja egy API tulajdonságait vagy beállításait:

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

További komponensek

A onedocs csomag InstallBlock és CodeBlock komponensei nem találhatók meg a mdxComponents csomagban. Ha használni szeretné őket az MDX tartalmában, adja hozzá őket az átadott objektumhoz:

TSX

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

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

Minden más elemet importáljon a MDX fájlban található Fumadocs UI modulból, vagy adja hozzá ugyanígy:

TypeScript

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

A teljes listáért lásd a Fumadocs dokumentációját.