# 组件

Onedocs 会为你的 MDX 文件注册一组 Fumadocs UI 组件，因此无需导入即可使用。

## 使用组件

将 `mdxComponents` 传递给你的 MDX 内容：

```tsx title="src/app/docs/[[...slug]]/page.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` 未包含在 `mdxComponents` 中。要在 MDX 中使用它们，请将其添加到你传入的对象中：`onedocs`

```tsx title="src/app/docs/[[...slug]]/page.tsx"
import { CodeBlock, DocsPage, InstallBlock, mdxComponents } from "onedocs";

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

其他组件可在你的 MDX 文件中从 Fumadocs UI 导入，或用相同方式添加：

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

完整列表请参阅 [Fumadocs 文档](https://fumadocs.dev/docs/ui/components)。