组件使用指南

AR Docs 提供了多种内置组件，可以在 MDX 文档中直接使用。

Callout 提示框

用于显示提示、警告、危险等信息。

import Callout from '../../components/Callout.astro';

<Callout type="info">
  这是一条提示信息。
</Callout>

<Callout type="warning" title="自定义标题">
  这是一条警告信息。
</Callout>

<Callout type="danger">
  这是一条危险警告。
</Callout>

<Callout type="tip">
  这是一条技巧提示。
</Callout>

属性说明：

属性	类型	默认值	说明
type	’info’ \| ‘warning’ \| ‘danger’ \| ‘tip'	'info’	提示框类型
title	string	自动根据类型生成	自定义标题

Badge 徽章

用于显示状态、标签等信息。

import Badge from '../../components/Badge.astro';

<Badge>默认</Badge>
<Badge variant="primary">主要</Badge>
<Badge variant="success">成功</Badge>
<Badge variant="warning">警告</Badge>
<Badge variant="danger">危险</Badge>
<Badge variant="info">信息</Badge>

属性说明：

属性	类型	默认值	说明
variant	’default’ \| ‘primary’ \| ‘success’ \| ‘warning’ \| ‘danger’ \| ‘info'	'default’	徽章样式
size	’small’ \| ‘medium’ \| ‘large'	'medium’	徽章大小

Card 卡片

用于展示链接、功能特性等。

import Card from '../../components/Card.astro';

<Card title="快速入门" href="/docs/getting-started">
  5 分钟快速搭建你的第一个 AR Docs 页面
</Card>

<Card title="带图标" icon="🚀">
  这是一个带图标的卡片
</Card>

属性说明：

属性	类型	默认值	说明
title	string	-	卡片标题
href	string	-	链接地址（可选）
icon	string	-	图标 HTML（可选）

FileTree 文件树

用于展示目录结构。

import FileTree from '../../components/FileTree.astro';

<FileTree data={`
src/
├── components/
│   ├── Callout.astro
│   ├── Badge.astro
│   └── Card.astro
├── content/
│   └── docs/
└── pages/
`} />

属性说明：

属性	类型	默认值	说明
data	string	-	文件树字符串

Steps 步骤

用于展示操作步骤。

import Steps from '../../components/Steps.astro';

<Steps items={[
  '安装依赖：npm install',
  '启动开发服务器：npm run dev',
  '打开浏览器访问 http://localhost:4321'
]} />

属性说明：

属性	类型	默认值	说明
items	string[]	-	步骤内容数组

组合使用

这些组件可以组合使用，创建丰富的文档内容：

import Callout from '../../components/Callout.astro';
import Badge from '../../components/Badge.astro';
import Card from '../../components/Card.astro';

<Callout type="tip">
  使用 <Badge variant="primary">MDX</Badge> 格式可以使用组件。
</Callout>

<Card title="了解更多" href="/api">
  查看 API 参考文档
</Card>

提示
所有组件都支持深色模式，会自动适应当前主题。