Komponentit

Näytä Markdown-muodossa Muokkaa palvelussa GitHub Dokumentaatio: 7b38e05

Onedocs rekisteröi joukon Fumadocs UI -komponentteja MDX-tiedostoja varten, jotta voit käyttää niitä ilman tuontia.

Komponenttien käyttö

Välitä mdxComponents MDX-sisällöllesi:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents sisältää Fumadocs UI-oletukset (ankkurilinkilliset otsikot, koodilohkot, linkit, kuvat, taulukot, Card, Cards ja Callout) sekä Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files ja ImageZoom, TypeTable. Kaikki alla olevat esimerkit toimivat sellaisinaan.

Ilmoituslaatikko

Korosta tärkeitä tietoja. type on yksi seuraavista: info (oletus), warn, error, success tai 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>

Lisää otsikko käyttämällä title:

Mdx

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

Välilehdet

Järjestä sisältö välilehtiin. Kukin Tab value vastaa kohdetta joukossa 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>

Kortit

Linkitä muille sivuille korttiruudukkojen avulla:

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>

Vaiheet

Näytä numeroidut vaiheet:

Mdx

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

Haitarivalikko

Kokoon taitettavaa sisältöä UKK:ta ja lisätietoja varten. Vain yksi kohde on kerrallaan avattuna:

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>

Tiedostot

Näytä tiedostopuita:

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>

Kuvan suurennus

Kuva avautuu täysikokoisena, kun sitä napsautetaan. width ja height vaaditaan kohteesta public/ peräisin oleville kuville:

Mdx

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

Tyyppitaulukko

Dokumentoi API-olion ominaisuudet tai asetukset:

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

Lisää komponentteja

InstallBlock ja CodeBlock kohteesta onedocs eivät sisälly kohteeseen mdxComponents. Jos haluat käyttää niitä kohteessa MDX, lisää ne välittämääsi olioon:

TSX

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

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

Tuo kaikki muut kohteesta Fumadocs UI MDX-tiedostoosi tai lisää ne samalla tavalla:

TypeScript

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

Katso täydellinen luettelo Fumadocs-dokumentaatiosta.