Компоненти

Переглянути як Markdown Редагувати на GitHub Документація для 7b38e05

Onedocs реєструє набір компонентів Fumadocs UI для ваших файлів MDX, щоб можна було використовувати їх без імпорту.

Використання компонентів

Передайте mdxComponents у свій вміст MDX:

TSX

import { DocsPage, mdxComponents } from "onedocs";

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

mdxComponents містить стандартні компоненти Fumadocs UI (заголовки з якірними посиланнями, блоки коду, посилання, зображення, таблиці, Card, Cards і Callout), а також Tab, Tabs, Step, Steps, Accordion, Accordions, File, Folder, Files, ImageZoom і TypeTable. Усі наведені нижче приклади працюють із ним без змін.

Блок повідомлення

Виділіть важливу інформацію. type — це одне зі значень info (за замовчуванням), warn, error, success або 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>

Додайте заголовок за допомогою title:

Mdx

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

Вкладки

Упорядкуйте вміст у вкладках. Кожен Tab value відповідає запису в 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>

Картки

Посилайтеся на інші сторінки за допомогою сіток карток:

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>

Кроки

Покажіть пронумеровані кроки:

Mdx

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

Акордеон

Згортаний вміст для поширених запитань і додаткових відомостей. Одночасно відкритий лише один пункт:

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>

Файли

Показати дерева файлів:

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>

Масштабування зображення

Зображення, яке відкривається у повному розмірі після натискання. Для зображень із public/ потрібні width і height:

Mdx

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

Таблиця типів

Задокументуйте властивості або параметри API:

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

Інші компоненти

InstallBlock і CodeBlock з onedocs відсутні в mdxComponents. Щоб використовувати їх у MDX, додайте їх до об’єкта, який передаєте:

TSX

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

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

Для всього іншого імпортуйте компонент із Fumadocs UI у файлі MDX або додайте його таким самим способом:

TypeScript

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

Дивіться документацію Fumadocs, щоб переглянути повний список.