内容组件

用于构建富文本文档内容的组件

手风琴

使用 accordion 和 accordion-item 创建可折叠的内容区域。手风琴适合用于组织常见问题、可展开的详细信息或以交互方式分组的信息。

::accordion

:::accordion-item{label="什么是语义化 HTML？" icon="i-lucide-circle-help"}
语义化 HTML 是使用正确的标签来描述内容的含义，而不仅仅是外观。它有助于搜索引擎理解和屏幕阅读器访问网页。
:::

:::accordion-item{label="如何提高网站的可访问性？" icon="i-lucide-circle-help"}
可以通过使用语义化标签、提供替代文本、确保足够的颜色对比度、支持键盘导航等方式来提高可访问性。
:::

::

徽章

使用 badge 显示状态指示器或标签。徽章适合用于突出显示版本号、状态或内容中的类别。

v3.0.0-alpha.10

::badge
**v3.0.0-alpha.10**
::

提示框

使用 callout 强调重要的上下文信息。提示框可以引起对注释、提示、警告或注意事项的注意，使关键信息脱颖而出。

可以使用 icon 和 color 属性进行自定义，或使用 note、tip、warning、caution 快捷方式获得预定义的语义样式。

这是一个具有完整 markdown 支持的 callout。

::callout
这是一个具有完整 **markdown** 支持的 `callout`。
::

Here's some additional information for you.

Here's a helpful suggestion.

Be careful with this action as it might have unexpected results.

This action cannot be undone.

::note
这里有一些额外信息。
::

::tip
这是一个有用的建议。
::

::warning
此操作要小心，可能会产生意外结果。
::

::caution
此操作无法撤销。
::

卡片

使用 card 突出显示内容块。卡片适合用于在视觉上独特和交互式容器中展示功能、资源或相关信息。

可以使用 title、icon 和 color 属性进行自定义。卡片还可以使用链接属性作为导航链接。

W3C 官方网站

了解最新的 Web 标准和规范。

::card
---
title: W3C 官方网站
icon: i-simple-icons-w3c
to: https://www.w3.org/
target: _blank
---
了解最新的 Web 标准和规范。
::

卡片组

使用 card-group 将卡片排列在网格布局中。card-group 非常适合以结构化、视觉吸引和响应式网格显示卡片集合。

HTML 规范

查看 HTML 标准的最新规范文档。

CSS 规范

探索 CSS 样式表的完整规范。

Web 文档

浏览我们的 Web 标准技术文档。

博客文章

阅读 Web 技术相关的博客文章。

::card-group

::card
---
title: HTML 规范
icon: i-simple-icons-w3c
to: https://www.w3.org/TR/html/
target: _blank
---
查看 HTML 标准的最新规范文档。
::

::card
---
title: CSS 规范
icon: i-simple-icons-css3
to: https://www.w3.org/Style/CSS/
target: _blank
---
探索 CSS 样式表的完整规范。
::

::card
---
title: Web 文档
icon: i-lucide-book-open
to: /docs
target: _blank
---
浏览我们的 Web 标准技术文档。
::

::card
---
title: 博客文章
icon: i-lucide-file-pen
to: /blog
target: _blank
---
阅读 Web 技术相关的博客文章。
::

::

可折叠内容

使用 collapsible 隐藏和显示内容区域。collapsible 非常适合用于显示可选详细信息、技术规范或不常用的信息。

属性	默认值	类型
`name`		`string`
`size`	`md`	`string`
`color`	`neutral`	`string`

::collapsible

| Prop    | Default   | Type                     |
|---------|-----------|--------------------------|
| `name`  |           | `string`{lang="ts-type"} |
| `size`  | `md`      | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |

::

字段

使用 field 描述特定字段、属性或参数。field 组件非常适合用于记录 API 参数、组件属性或配置选项。

name

string required

description 可以设置为属性或在默认插槽中设置，具有完整的 markdown 支持。

::field{name="name" type="string" required}
`description` 可以设置为属性或在默认插槽中设置，具有完整的 **markdown** 支持。
::

字段组

使用 field-group 将相关字段分组在一个列表中。field-group 有助于组织和构建多个相关字段或属性的文档结构。

analytics

boolean

默认为 false - 为项目启用分析功能（即将推出）。

blob

boolean

默认为 false - 启用 blob 存储以存储静态资源，如图片、视频等。

cache

boolean

默认为 false - 启用缓存存储以缓存服务器路由响应或函数，使用 Nitro 的 cachedEventHandler 和 cachedFunction

database

boolean

默认为 false - 启用 SQL 数据库以存储应用程序数据。

::field-group
::field{name="analytics" type="boolean"}
默认为 `false` - 为项目启用分析功能（即将推出）。
::

::field{name="blob" type="boolean"}
默认为 `false` - 启用 blob 存储以存储静态资源，如图片、视频等。
::

::field{name="cache" type="boolean"}
默认为 `false` - 启用缓存存储以缓存服务器路由响应或函数，使用 Nitro 的 `cachedEventHandler` 和 `cachedFunction`
::

::field{name="database" type="boolean"}
默认为 `false` - 启用 SQL 数据库以存储应用程序数据。
::
::

图标

使用 icon 从图标库插入图标。图标提供视觉提示并增强文档的用户界面。

:icon{name="i-simple-icons-w3c"}

键盘按键

使用 kbd 显示键盘按键或快捷键。kbd 组件清晰地指示指令或命令引用的键盘输入。

K

:kbd{value="meta"} :kbd{value="K"}

选项卡

使用 tabs 和 tabs-item 将内容组织到选项卡界面中。选项卡有效地将内容分离为逻辑部分，提高内容的可发现性和组织性。

::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::

::tabs

:::tabs-item{label="代码" icon="i-lucide-code"}

```mdc
::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::
```

:::

:::tabs-item{label="预览" icon="i-lucide-eye"}

::::callout
Lorem velit voluptate ex reprehenderit ullamco et culpa.
::::

:::

::

步骤

使用 steps 从文档标题创建逐步指南。steps 组件自动为标题编号，为流程和教程创建编号指南。

设置 level 属性以定义要包含在逐步指南中的标题级别。

使用语义化 HTML 标签

<article>
  <header>
    <h1>文章标题</h1>
  </header>
  <p>文章内容...</p>
</article>

添加 ARIA 属性提高可访问性

<button aria-label="关闭对话框">
  <i class="icon-close"></i>
</button>

使用正确的文档类型声明

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <!-- 内容 -->
  </body>
</html>

添加元数据优化 SEO

<meta name="description" content="页面描述">
<meta name="keywords" content="关键词">
<link rel="canonical" href="https://example.com/">

::steps{level="4"}

#### 使用语义化 HTML 标签

```html
<article>
<header>
  <h1>文章标题</h1>
</header>
<p>文章内容...</p>
</article>
```

#### 添加 ARIA 属性提高可访问性

```html
<button aria-label="关闭对话框">
<i class="icon-close"></i>
</button>
```

#### 使用正确的文档类型声明

```html
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <!-- 内容 -->
</body>
</html>
```

#### 添加元数据优化 SEO

```html
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词">
<link rel="canonical" href="https://example.com/">
```

::

代码块

显示内联代码和代码块

图片和嵌入

添加图片、视频和其他 HTML 元素