Komponenti

Skatīt kā Markdown Rediģēt vietnē GitHub Dokumentācija vietnē 7b38e05

Onedocs reģistrē MDX failiem paredzētu Fumadocs UI komponentu kopu, lai tās varētu izmantot bez importēšanas.

Komponentu izmantošana

Padodiet mdxComponents savam MDX saturam:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents ietver Fumadocs UI noklusējuma iespējas (virsrakstus ar enkursaitēm, koda blokus, saites, attēlus, tabulas, Card, Cards un Callout), kā arī Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom un TypeTable. Visi tālāk minētie piemēri darbojas bez izmaiņām.

Piezīme

Izcelt svarīgu informāciju. type ir viens no info (noklusējuma variants), warn, error, success vai 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>

Pievienot virsrakstu ar title:

Mdx

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

Cilnes

Sakārtot saturu cilnēs. Katrs Tab value atbilst ierakstam sadaļā 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>

Kartītes

Pievienot saites uz citām lapām, izmantojot kartīšu režģus:

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>

Darbības

Parādīt numurētas darbības:

Mdx

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

Akordeons

Saturs, ko var sakļaut, piemēram, bieži uzdotie jautājumi un papildu informācija. Vienlaikus atvērts ir tikai viens vienums:

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>

Faili

Parādīt failu kokus:

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>

Attēla pietuvināšana

Attēls, kas, noklikšķinot, tiek atvērts pilnā izmērā. Attēliem no public/ obligāti jānorāda width un height:

Mdx

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

Tipu tabula

Dokumentēt API rekvizītus vai opcijas:

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

Citi komponenti

InstallBlock un CodeBlock no onedocs nav iekļauti mdxComponents. Lai tos izmantotu MDX, pievienojiet tos objektam, ko padodat:

TSX

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

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

Pārējos komponentus importējiet no Fumadocs UI savā MDX failā vai pievienojiet tādā pašā veidā:

TypeScript

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

Plašāku sarakstu skatiet Fumadocs dokumentācijā.