@mdui/mcp 2.1.0

package/data/documents.js

@@ -0,0 +1,523 @@
+// 此文件由 scripts/mcp/build-documents.ts 自动生成，请勿手动修改
+export const documents = {
+    "ai--llms": {
+        "key": "ai--llms",
+        "title": "LLMs.txt",
+        "description": "mdui 提供了 `llms.txt` 与 `llms-full.txt`，用于为 LLM（大语言模型）提供准确、可引用的上下文，帮助 AI 更可靠地回答 mdui 相关问题。",
+        "content": "# LLMs.txt\n\nmdui 提供了 `llms.txt` 与 `llms-full.txt`，用于为 LLM（大语言模型）提供准确、可引用的上下文，帮助 AI 更可靠地回答 mdui 相关问题。\n\n## 使用 llms.txt 为 AI 提供上下文 {#context}\n\n两个入口：\n\n- `llms.txt`：https://www.mdui.org/zh-cn/docs/2/llms.txt\n- `llms-full.txt`：https://www.mdui.org/zh-cn/docs/2/llms-full.txt\n\n`llms.txt` 是精简索引，适合供可联网的模型按链接抓取所需 Markdown 页面，或先提供项目概览。\n\n`llms-full.txt` 含完整上下文，包含 `llms.txt` 中的所有页面内容，适合模型无法联网或需一次性提供完整上下文。\n\n## 文档的 Markdown 版本 {#md-mirror}\n\n每个文档页面都提供了对应的 Markdown 版本：在页面 URL 末尾追加 `.md` 即可（首页追加 `index.md`）。\n\n例如：\n\n    https://www.mdui.org/zh-cn/docs/2/components/button → https://www.mdui.org/zh-cn/docs/2/components/button.md\n    https://www.mdui.org/zh-cn/docs/2/ → https://www.mdui.org/zh-cn/docs/2/index.md\n\n可直接把该 Markdown 链接或其纯文本作为上下文，获得更聚焦、准确的回答。\n\n## 在 ChatGPT、Claude 等 LLM 中如何使用 {#how-to-use}\n\n根据模型是否支持联网/文件上传，选择以下一种或组合使用：\n\n1. 直接粘贴：将 `llms-full.txt` 的内容作为系统提示或首条消息。\n\n   示例：“以下是 mdui 的上下文。请严格依据它回答后续问题；若有冲突，以该上下文为准：\\n\\n[粘贴 llms-full.txt 内容]”。\n\n2. 上传文件：上传 `llms-full.txt`（或 `llms.txt`），并在首条提示说明“以附件为主要上下文”。\n\n   示例：“基于附件中的 mdui 文档，给出 `<mdui-button>` 的用法与常见坑”。\n\n3. 在线读取：在对话中给出 `llms.txt` 或 `llms-full.txt` 的链接。\n\n   示例：“请读取并遵循 https://www.mdui.org/zh-cn/docs/2/llms-full.txt 作为上下文，回答我关于 mdui 的问题”。\n\n4. 指向具体页面：只讨论特定组件/函数时，直接给出该页面的 Markdown 地址。\n\n   示例：“请阅读 https://www.mdui.org/zh-cn/docs/2/components/button.md ，并基于该文档给出三段最佳实践”。\n\n**提示**：可点击页面右上角的 <mdui-icon name=\"auto_awesome\"></mdui-icon> 图标，支持一键复制上述链接、打开当前页面的 Markdown 版本，或将当前页面、或 `llms-full.txt` 作为上下文在 ChatGPT 中打开。\n\n"
+    },
+    "ai--mcp": {
+        "key": "ai--mcp",
+        "title": "MCP 服务",
+        "description": "mdui 提供专用的 [MCP（Model Context Protocol）](https://modelcontextprotocol.io/) 服务器 `@mdui/mcp`，用于在本地为 AI 与 IDE 提供组件、图标、CSS 变量和文档的查询能力。",
+        "content": "# MCP 服务\n\nmdui 提供专用的 [MCP（Model Context Protocol）](https://modelcontextprotocol.io/) 服务器 `@mdui/mcp`，用于在本地为 AI 与 IDE 提供组件、图标、CSS 变量和文档的查询能力。\n\n它可与 Claude Code、Cursor、Github Copilot 等工具配合，辅助生成代码，并更好地使用 mdui 的组件与样式。\n\n## 工具\n\nmdui 的 MCP 服务器向 AI 暴露以下工具：\n\n- `list_components`：列出全部 mdui 组件。\n- `get_component_metadata`：获取单个组件的详细 API 元数据。\n- `list_css_classes`：列出全局 CSS 类名。\n- `list_css_variables`：列出全局 CSS 变量。\n- `list_documents`：列出所有文档。\n- `get_document`：获取单个文档的完整内容。\n- `list_icon_codes`：列出可用于属性或 API 的图标代码。\n- `list_icon_components`：列出独立的图标组件及其 ESM 导入语句。\n\n## 使用方式\n\nMCP 服务仅支持 [stdio 传输](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio)，可在 VS Code、Cursor、Claude Code、Windsurf、Zed 等客户端中直接使用。\n\n### VS Code\n\n> 确保已安装 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 与 [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) 扩展。\n\n1. 在项目根目录创建 `.vscode/mcp.json`，添加以下配置：\n\n   ```json\n   {\n     \"servers\": {\n       \"mdui\": {\n         \"command\": \"npx\",\n         \"args\": [\"-y\", \"@mdui/mcp\"]\n       }\n     }\n   }\n   ```\n\n2. 点击 `mcp.json` 文件中的“启动”按钮。\n3. 在 Github Copilot Chat 中开始对话。\n\n### Cursor\n\n1. 在项目根目录创建或编辑 `.cursor/mcp.json`，添加以下配置：\n\n   ```json\n   {\n     \"mcpServers\": {\n       \"mdui\": {\n         \"command\": \"npx\",\n         \"args\": [\"-y\", \"@mdui/mcp\"]\n       }\n     }\n   }\n   ```\n\n2. 进入 Settings > Cursor Settings > MCP & Integrations，启用 mdui 服务器。\n3. 在 Cursor Chat 中开始对话。\n\n### Claude Code\n\n1. 在终端中运行以下命令添加 mdui MCP 服务：\n\n   ```bash\n   claude mcp add mdui -- npx -y @mdui/mcp\n   ```\n\n2. 随后运行 `claude` 启动会话。\n3. 输入提示词开始使用。\n\n### Windsurf\n\n1. 前往 Settings > Windsurf Settings > Cascade\n2. 点击 Manage MCPs，再点击 “View raw config”，在配置文件中添加：\n\n   ```json\n   {\n     \"mcpServers\": {\n       \"mdui\": {\n         \"command\": \"npx\",\n         \"args\": [\"-y\", \"@mdui/mcp\"]\n       }\n     }\n   }\n   ```\n\n   > 如 MCP 服务未自动出现，可点击 Refresh 刷新列表。\n\n3. 输入提示词开始对话。\n\n### Zed\n\n1. 打开 Settings > Open Settings，在 `settings.json` 文件中添加以下配置：\n\n   ```json\n   {\n     \"context_servers\": {\n       \"mdui\": {\n         \"source\": \"custom\",\n         \"command\": \"npx\",\n         \"args\": [\"-y\", \"@mdui/mcp\"]\n       }\n     }\n   }\n   ```\n\n2. 输入提示词开始使用。\n\n### 自定义 MCP 客户端\n\n在本地或开发环境中使用自定义 MCP 客户端时，将该服务器添加到客户端的配置文件即可。例如：\n\n```json\n{\n  \"mcpServers\": {\n    \"mdui\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@mdui/mcp\"]\n    }\n  }\n}\n```\n\n"
+    },
+    "components--avatar": {
+        "key": "components--avatar",
+        "title": "头像组件 Avatar",
+        "description": "头像用于表示用户或事物，支持多种形式，包括图片、图标或字符等。",
+        "content": "# 头像组件 Avatar\n\n头像用于表示用户或事物，支持多种形式，包括图片、图标或字符等。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/avatar.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Avatar } from 'mdui/components/avatar.js';\n```\n\n使用示例：\n\n```html\n<mdui-avatar src=\"https://avatars.githubusercontent.com/u/3030330?s=40&v=4\"></mdui-avatar>\n```\n\n## 示例 {#examples}\n\n### 图片头像 {#example-src}\n\n可以使用 `src` 属性指定一个图片链接作为头像，或者在 default slot 中提供一个 `<img>` 元素作为头像。\n\n```html\n<mdui-avatar src=\"https://avatars.githubusercontent.com/u/3030330?s=40&v=4\"></mdui-avatar>\n\n<mdui-avatar>\n  <img src=\"https://avatars.githubusercontent.com/u/3030330?s=40&v=4\" alt=\"图片头像示例\"/>\n</mdui-avatar>\n```\n\n可以使用 `fit` 属性定义图片如何适应容器框，类似于原生的 [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。\n\n### 图标头像 {#example-icon}\n\n可以使用 `icon` 属性指定一个 Material Icons 图标作为头像，或者在 default slot 中提供一个图标元素作为头像。\n\n```html\n<mdui-avatar icon=\"people_alt\"></mdui-avatar>\n\n<mdui-avatar>\n  <mdui-icon name=\"people_alt\"></mdui-icon>\n</mdui-avatar>\n```\n\n### 字符头像 {#example-char}\n\n可以在 default slot 中使用任意文字作为头像。\n\n```html\n<mdui-avatar>A</mdui-avatar>\n```\n\n",
+        "tagNames": [
+            "mdui-avatar"
+        ]
+    },
+    "components--badge": {
+        "key": "components--badge",
+        "title": "徽标组件 Badge",
+        "description": "徽标用于展示动态信息，如计数或状态指示。它可以包含文字或数字。",
+        "content": "# 徽标组件 Badge\n\n徽标用于展示动态信息，如计数或状态指示。它可以包含文字或数字。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/badge.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Badge } from 'mdui/components/badge.js';\n```\n\n使用示例：\n\n```html\n<mdui-badge>12</mdui-badge>\n```\n\n## 示例 {#examples}\n\n### 形状 {#example-variant}\n\n使用 `variant` 属性来设置徽标的形状。当 `variant` 为 `large` 时，将显示大型徽标。你可以在 default slot 中指定要显示的文本。\n\n```html\n<mdui-badge variant=\"small\"></mdui-badge>\n<mdui-badge variant=\"large\">99+</mdui-badge>\n```\n\n",
+        "tagNames": [
+            "mdui-badge"
+        ]
+    },
+    "components--bottom-app-bar": {
+        "key": "components--bottom-app-bar",
+        "title": "底部应用栏组件 BottomAppBar",
+        "description": "底部应用栏主要用于在移动端页面底部展示导航项和其他重要操作。",
+        "content": "# 底部应用栏组件 BottomAppBar\n\n底部应用栏主要用于在移动端页面底部展示导航项和其他重要操作。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/bottom-app-bar.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';\n```\n\n使用示例：（注意：示例中的 `style=\"position: relative\"` 是为了演示需要，实际使用时请移除该样式。）\n\n```html\n<mdui-bottom-app-bar style=\"position: relative;\">\n  <mdui-button-icon icon=\"check_box--outlined\"></mdui-button-icon>\n  <mdui-button-icon icon=\"edit--outlined\"></mdui-button-icon>\n  <mdui-button-icon icon=\"mic_none--outlined\"></mdui-button-icon>\n  <mdui-button-icon icon=\"image--outlined\"></mdui-button-icon>\n  <div style=\"flex-grow: 1\"></div>\n  <mdui-fab icon=\"add\"></mdui-fab>\n</mdui-bottom-app-bar>\n```\n\n**注意事项：**\n\n该组件默认使用 `position: fixed` 定位，并会自动在 `body` 上添加 `padding-bottom` 样式，以防止页面内容被该组件遮挡。\n\n但在以下两种情况下，会默认使用 `position: absolute` 定位：\n\n1. 当指定了 `scroll-target` 属性时。此时会在 `scroll-target` 的元素上添加 `padding-bottom` 样式。\n2. 当位于 [`<mdui-layout></mdui-layout>`](/zh-cn/docs/2/components/layout) 组件中时。此时不会添加 `padding-bottom` 样式。\n\n## 示例 {#examples}\n\n### 位于指定容器内 {#example-scroll-target}\n\n默认情况下，底部应用栏会相对于当前窗口，在页面底部显示。\n\n如果你希望将底部应用栏放在指定的容器内，可以指定 `scroll-target` 属性，其值为可滚动内容的容器的 CSS 选择器或 DOM 元素。此时，底部应用栏会相对于父元素显示（你需要自行在父元素上添加 `position: relative; overflow: hidden` 样式）。\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-bottom-app-bar scroll-target=\".example-scroll-target\">Content</mdui-bottom-app-bar>\n\n  <div class=\"example-scroll-target\" style=\"height: 200px;overflow: auto;\">\n    <div style=\"height: 1000px\"></div>\n  </div>\n</div>\n```\n\n### 滚动时隐藏 {#example-scroll-behavior}\n\n设置 `scroll-behavior` 属性为 `hide`，可以在页面向下滚动时隐藏底部应用栏，向上滚动时显示底部应用栏。\n\n使用 `scroll-threshold` 属性，可以设置滚动多少像素后开始隐藏底部应用栏。\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-bottom-app-bar\n    scroll-behavior=\"hide\"\n    scroll-threshold=\"30\"\n    scroll-target=\".example-scroll-behavior\"\n  >Content</mdui-bottom-app-bar>\n\n  <div class=\"example-scroll-behavior\" style=\"height: 200px;overflow: auto;\">\n    <div style=\"height: 1000px\"></div>\n  </div>\n</div>\n```\n\n### 固定浮动操作按钮 {#example-fab-detach}\n\n如果底部应用栏中包含了[浮动操作按钮](/zh-cn/docs/2/components/fab)，则可以添加 `fab-detach` 属性，使得在页面滚动，底部应用栏隐藏时，浮动操作按钮仍然停留在页面右下角。\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-bottom-app-bar\n    fab-detach\n    scroll-behavior=\"hide\"\n    scroll-threshold=\"30\"\n    scroll-target=\".example-fab-detach\"\n  >\n    <mdui-button-icon icon=\"check_box--outlined\"></mdui-button-icon>\n    <mdui-button-icon icon=\"edit--outlined\"></mdui-button-icon>\n    <mdui-button-icon icon=\"mic_none--outlined\"></mdui-button-icon>\n    <mdui-button-icon icon=\"image--outlined\"></mdui-button-icon>\n    <div style=\"flex-grow: 1\"></div>\n    <mdui-fab icon=\"add\"></mdui-fab>\n  </mdui-bottom-app-bar>\n\n  <div class=\"example-fab-detach\" style=\"height: 200px;overflow: auto;\">\n    <div style=\"height: 1000px\"></div>\n  </div>\n</div>\n```\n\n",
+        "tagNames": [
+            "mdui-bottom-app-bar"
+        ]
+    },
+    "components--button-icon": {
+        "key": "components--button-icon",
+        "title": "图标按钮组件 ButtonIcon",
+        "description": "图标按钮主要用于执行一些次要的操作。",
+        "content": "# 图标按钮组件 ButtonIcon\n\n图标按钮主要用于执行一些次要的操作。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/button-icon.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { ButtonIcon } from 'mdui/components/button-icon.js';\n```\n\n使用示例：\n\n```html\n<mdui-button-icon icon=\"search\"></mdui-button-icon>\n```\n\n## 示例 {#examples}\n\n### 图标 {#example-icon}\n\n使用 `icon` 属性指定 Material Icons 图标名称。也可以通过 default slot 指定图标元素。\n\n```html\n<mdui-button-icon icon=\"search\"></mdui-button-icon>\n<mdui-button-icon>\n  <mdui-icon name=\"search\"></mdui-icon>\n</mdui-button-icon>\n```\n\n### 形状 {#example-variant}\n\n使用 `variant` 属性设置图标按钮的形状。\n\n```html\n<mdui-button-icon variant=\"standard\" icon=\"search\"></mdui-button-icon>\n<mdui-button-icon variant=\"filled\" icon=\"search\"></mdui-button-icon>\n<mdui-button-icon variant=\"tonal\" icon=\"search\"></mdui-button-icon>\n<mdui-button-icon variant=\"outlined\" icon=\"search\"></mdui-button-icon>\n```\n\n### 可选中 {#example-selectable}\n\n添加 `selectable` 属性使图标按钮可被选中。\n\n```html\n<mdui-button-icon selectable icon=\"favorite_border\"></mdui-button-icon>\n```\n\n使用 `selected-icon` 属性指定选中状态的 Material Icons 图标名称。也可以通过 `selected-icon` slot 指定选中状态的图标元素。\n\n```html\n<mdui-button-icon selectable icon=\"favorite_border\" selected-icon=\"favorite\"></mdui-button-icon>\n<mdui-button-icon selectable icon=\"favorite_border\">\n  <mdui-icon slot=\"selected-icon\" name=\"favorite\"></mdui-icon>\n</mdui-button-icon>\n```\n\n图标按钮被选中后，`selected` 属性变为 `true`。也可以通过添加 `selected` 属性，使图标按钮默认处于选中状态。\n\n```html\n<mdui-button-icon selectable selected icon=\"favorite_border\" selected-icon=\"favorite\"></mdui-button-icon>\n```\n\n### 链接 {#example-link}\n\n添加 `href` 属性，可使图标按钮变为链接，此时还可使用这些和链接相关的属性：`download`、`target`、`rel`。\n\n```html\n<mdui-button-icon icon=\"search\" href=\"https://www.mdui.org\" target=\"_blank\"></mdui-button-icon>\n```\n\n### 禁用及 loading 状态 {#example-disabled}\n\n添加 `disabled` 属性可禁用图标按钮；添加 `loading` 属性可为图标按钮添加加载中状态。\n\n```html\n<mdui-button-icon disabled icon=\"search\" variant=\"tonal\"></mdui-button-icon>\n<mdui-button-icon loading icon=\"search\" variant=\"tonal\"></mdui-button-icon>\n<mdui-button-icon loading disabled icon=\"search\" variant=\"tonal\"></mdui-button-icon>\n```\n\n",
+        "tagNames": [
+            "mdui-button-icon"
+        ]
+    },
+    "components--button": {
+        "key": "components--button",
+        "title": "按钮组件 Button",
+        "description": "按钮主要用于执行一些操作，例如发送邮件、分享文档或点赞评论等。",
+        "content": "# 按钮组件 Button\n\n按钮主要用于执行一些操作，例如发送邮件、分享文档或点赞评论等。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/button.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Button } from 'mdui/components/button.js';\n```\n\n使用示例：\n\n```html\n<mdui-button>Button</mdui-button>\n```\n\n## 示例 {#examples}\n\n### 形状 {#example-variant}\n\n使用 `variant` 属性设置按钮的形状。\n\n```html\n<mdui-button variant=\"elevated\">Elevated</mdui-button>\n<mdui-button variant=\"filled\">Filled</mdui-button>\n<mdui-button variant=\"tonal\">Tonal</mdui-button>\n<mdui-button variant=\"outlined\">Outlined</mdui-button>\n<mdui-button variant=\"text\">Text</mdui-button>\n```\n\n### 全宽 {#example-full-width}\n\n添加 `full-width` 属性可以使按钮占据父元素的全部宽度。\n\n```html\n<mdui-button full-width>Button</mdui-button>\n```\n\n### 图标 {#example-icon}\n\n设置 `icon`、`end-icon` 属性，可以分别在按钮左侧、右侧添加 Material Icons 图标。也可以通过 `icon`、`end-icon` slot 在按钮左侧、右侧添加元素。\n\n```html\n<mdui-button icon=\"search\" end-icon=\"arrow_forward\">Icon</mdui-button>\n<mdui-button>\n  Slot\n  <mdui-icon slot=\"icon\" name=\"downloading\"></mdui-icon>\n  <mdui-icon slot=\"end-icon\" name=\"attach_file\"></mdui-icon>\n</mdui-button>\n```\n\n### 链接 {#example-link}\n\n设置 `href` 属性，可以使按钮变为链接，此时还可以使用这些和链接相关的属性：`download`、`target`、`rel`。\n\n```html\n<mdui-button href=\"https://www.mdui.org\" target=\"_blank\">Link</mdui-button>\n```\n\n### 禁用及 loading 状态 {#example-disabled}\n\n添加 `disabled` 属性可以禁用按钮；添加 `loading` 属性可以为按钮添加加载中状态。\n\n```html\n<mdui-button disabled>Disabled</mdui-button>\n<mdui-button loading>Loading</mdui-button>\n<mdui-button loading disabled>Loading & Disabled</mdui-button>\n```\n\n",
+        "tagNames": [
+            "mdui-button"
+        ]
+    },
+    "components--card": {
+        "key": "components--card",
+        "title": "卡片组件 Card",
+        "description": "卡片是一个多功能组件，用于承载与单一主题相关的内容和操作。",
+        "content": "# 卡片组件 Card\n\n卡片是一个多功能组件，用于承载与单一主题相关的内容和操作。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/card.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Card } from 'mdui/components/card.js';\n```\n\n使用示例：\n\n```html\n<mdui-card style=\"width: 200px;height: 124px\">Card</mdui-card>\n```\n\n## 示例 {#examples}\n\n### 形状 {#example-variant}\n\n使用 `variant` 属性设置卡片的形状。\n\n```html\n<mdui-card variant=\"elevated\" style=\"width: 200px;height: 124px\"></mdui-card>\n<mdui-card variant=\"filled\" style=\"width: 200px;height: 124px\"></mdui-card>\n<mdui-card variant=\"outlined\" style=\"width: 200px;height: 124px\"></mdui-card>\n```\n\n### 可点击 {#example-clickable}\n\n添加 `clickable` 属性可以使卡片可点击，此时会添加鼠标悬浮效果和点击涟漪效果。\n\n```html\n<mdui-card clickable style=\"width: 200px;height: 124px\"></mdui-card>\n```\n\n### 链接 {#example-link}\n\n添加 `href` 属性，可以使卡片变为链接，此时还可以使用这些和链接相关的属性：`download`、`target`、`rel`。\n\n```html\n<mdui-card href=\"https://www.mdui.org\" target=\"_blank\" style=\"width: 200px;height: 124px\"></mdui-card>\n```\n\n### 禁用状态 {#example-disabled}\n\n添加 `disabled` 属性可以禁用卡片。\n\n```html\n<mdui-card disabled style=\"width: 200px;height: 124px\"></mdui-card>\n```\n\n",
+        "tagNames": [
+            "mdui-card"
+        ]
+    },
+    "components--checkbox": {
+        "key": "components--checkbox",
+        "title": "复选框组件 Checkbox",
+        "description": "复选框允许用户从一组选项中选择一个或多个选项，或者切换单个选项的开/关状态。",
+        "content": "# 复选框组件 Checkbox\n\n复选框允许用户从一组选项中选择一个或多个选项，或者切换单个选项的开/关状态。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/checkbox.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Checkbox } from 'mdui/components/checkbox.js';\n```\n\n使用示例：\n\n```html\n<mdui-checkbox>Checkbox</mdui-checkbox>\n```\n\n## 示例 {#examples}\n\n### 选中状态 {#example-checked}\n\n复选框选中时，`checked` 属性值为 `true`。添加 `checked` 属性可以使复选框默认处于选中状态。\n\n```html\n<mdui-checkbox checked>Checkbox</mdui-checkbox>\n```\n\n### 禁用状态 {#example-disabled}\n\n添加 `disabled` 属性可以禁用复选框。\n\n```html\n<mdui-checkbox disabled>Checkbox</mdui-checkbox>\n<mdui-checkbox disabled checked>Checkbox</mdui-checkbox>\n```\n\n### 不确定状态 {#example-indeterminate}\n\n添加 `indeterminate` 属性表示复选框处于不确定状态。\n\n```html\n<mdui-checkbox indeterminate>Checkbox</mdui-checkbox>\n```\n\n### 图标 {#example-icon}\n\n通过设置 `unchecked-icon`、`checked-icon`、`indeterminate-icon` 属性，可以分别设置未选中、选中、不确定状态时的复选框的 Material Icons 图标。也可以通过 `unchecked-icon`、`checked-icon`、`indeterminate-icon` slot 进行设置。\n\n```html\n<mdui-checkbox\n  unchecked-icon=\"radio_button_unchecked\"\n  checked-icon=\"check_circle\"\n  indeterminate-icon=\"playlist_add_check_circle\"\n>Checkbox</mdui-checkbox>\n\n<mdui-checkbox\n  indeterminate\n  unchecked-icon=\"radio_button_unchecked\"\n  checked-icon=\"check_circle\"\n  indeterminate-icon=\"playlist_add_check_circle\"\n>Checkbox</mdui-checkbox>\n\n<br/>\n\n<mdui-checkbox>\n  <mdui-icon slot=\"unchecked-icon\" name=\"radio_button_unchecked\"></mdui-icon>\n  <mdui-icon slot=\"checked-icon\" name=\"check_circle\"></mdui-icon>\n  <mdui-icon slot=\"indeterminate-icon\" name=\"playlist_add_check_circle\"></mdui-icon>\n  Checkbox\n</mdui-checkbox>\n\n<mdui-checkbox indeterminate>\n  <mdui-icon slot=\"unchecked-icon\" name=\"radio_button_unchecked\"></mdui-icon>\n  <mdui-icon slot=\"checked-icon\" name=\"check_circle\"></mdui-icon>\n  <mdui-icon slot=\"indeterminate-icon\" name=\"playlist_add_check_circle\"></mdui-icon>\n  Checkbox\n</mdui-checkbox>\n```\n\n",
+        "tagNames": [
+            "mdui-checkbox"
+        ]
+    },
+    "components--chip": {
+        "key": "components--chip",
+        "title": "纸片组件 Chip",
+        "description": "纸片组件用于辅助用户输入信息、进行选择、筛选内容或执行相关操作。",
+        "content": "# 纸片组件 Chip\n\n纸片组件用于辅助用户输入信息、进行选择、筛选内容或执行相关操作。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/chip.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Chip } from 'mdui/components/chip.js';\n```\n\n使用示例：\n\n```html\n<mdui-chip>Chip</mdui-chip>\n```\n\n## 示例 {#examples}\n\n### 形状 {#example-variant}\n\n使用 `variant` 属性设置纸片的形状。纸片有 4 种形状，可以根据用途选择：\n\n- `assist`：用于显示与当前上下文相关的辅助操作。例如，在点餐页面，提供分享，收藏等功能。\n- `filter`：用于对内容进行筛选。例如，在搜索结果页，对搜索结果进行过滤。\n- `input`：用于表示用户输入的信息片段。例如，在 Gmail 中的“收件人”字段中的联系人。\n- `suggestion`：用于提供动态生成的推荐信息，以简化用户操作。例如，在聊天应用中猜测用户可能想发送的信息，供用户选择。\n\n```html\n<mdui-chip variant=\"assist\">Assist</mdui-chip>\n<mdui-chip variant=\"filter\">Filter</mdui-chip>\n<mdui-chip variant=\"input\">Input</mdui-chip>\n<mdui-chip variant=\"suggestion\">Suggestion</mdui-chip>\n```\n\n### 阴影 {#example-elevated}\n\n添加 `elevated` 属性可以使纸片拥有阴影。\n\n```html\n<mdui-chip elevated>Chip</mdui-chip>\n```\n\n### 图标 {#example-icon}\n\n添加 `icon`、`end-icon` 属性，可以分别在纸片左侧、右侧添加 Material Icons 图标。也可以通过 `icon`、`end-icon` slot 在纸片左侧、右侧添加元素。\n\n```html\n<mdui-chip icon=\"search\">Icon</mdui-chip>\n<mdui-chip end-icon=\"arrow_forward\">End Icon</mdui-chip>\n<mdui-chip>\n  Slot\n  <mdui-icon slot=\"icon\" name=\"downloading\"></mdui-icon>\n  <mdui-icon slot=\"end-icon\" name=\"attach_file\"></mdui-icon>\n</mdui-chip>\n```\n\n### 链接 {#example-link}\n\n添加 `href` 属性，可以使纸片变为链接，此时还可以使用这些和链接相关的属性：`download`、`target`、`rel`。\n\n```html\n<mdui-chip href=\"https://www.mdui.org\" target=\"_blank\">Link</mdui-chip>\n```\n\n### 禁用及加载中状态 {#example-disabled}\n\n添加 `disabled` 属性可以禁用纸片；添加 `loading` 属性可以为纸片添加加载中状态。\n\n```html\n<mdui-chip disabled>Disabled</mdui-chip>\n<mdui-chip loading>Loading</mdui-chip>\n<mdui-chip loading disabled>Loading & Disabled</mdui-chip>\n```\n\n### 可选中 {#example-selectable}\n\n添加 `selectable` 属性可以使纸片可被选中。\n\n```html\n<mdui-chip selectable>Chip</mdui-chip>\n```\n\n使用 `selected-icon` 属性可以指定选中状态的 Material Icons 图标名称。也可以通过 `selected-icon` slot 指定选中状态的图标元素。\n\n```html\n<mdui-chip selectable selected-icon=\"favorite\">Chip</mdui-chip>\n<mdui-chip selectable>\n  Chip\n  <mdui-icon slot=\"selected-icon\" name=\"favorite\"></mdui-icon>\n</mdui-chip>\n```\n\n纸片被选中后，`selected` 属性变为 `true`。也可以通过添加 `selected` 属性，使纸片默认处于选中状态。\n\n```html\n<mdui-chip selectable selected>Chip</mdui-chip>\n```\n\n### 可删除 {#example-deletable}\n\n添加 `deletable` 属性后，纸片右侧会出现一个删除图标。点击该图标会触发 `delete` 事件。您可以通过 `delete-icon` 属性指定删除图标的 Material Icons 图标名，或者通过 `delete-icon` slot 指定删除图标的元素。\n\n```html\n<mdui-chip deletable>Chip</mdui-chip>\n<mdui-chip deletable delete-icon=\"backspace\">Chip</mdui-chip>\n<mdui-chip deletable>\n  Chip\n  <mdui-icon slot=\"delete-icon\" name=\"backspace\"></mdui-icon>\n</mdui-chip>\n```\n\n",
+        "tagNames": [
+            "mdui-chip"
+        ]
+    },
+    "components--circular-progress": {
+        "key": "components--circular-progress",
+        "title": "圆形进度指示器组件 CircularProgress",
+        "description": "圆形进度指示器是一个用于显示任务进度的圆形组件，例如数据加载或表单提交等。",
+        "content": "# 圆形进度指示器组件 CircularProgress\n\n圆形进度指示器是一个用于显示任务进度的圆形组件，例如数据加载或表单提交等。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/circular-progress.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { CircularProgress } from 'mdui/components/circular-progress.js';\n```\n\n使用示例：\n\n```html\n<mdui-circular-progress></mdui-circular-progress>\n```\n\n## 示例 {#examples}\n\n### 固定进度 {#example-value}\n\n圆形进度指示器默认为不确定的进度，可以通过 `value` 属性设置当前进度，默认进度最大值为 `1`。\n\n```html\n<mdui-circular-progress value=\"0.5\"></mdui-circular-progress>\n```\n\n可以通过 `max` 属性设置进度的最大值。\n\n```html\n<mdui-circular-progress value=\"30\" max=\"100\"></mdui-circular-progress>\n```\n\n",
+        "tagNames": [
+            "mdui-circular-progress"
+        ]
+    },
+    "components--collapse": {
+        "key": "components--collapse",
+        "title": "折叠面板组件 Collapse",
+        "description": "折叠面板组件用于将复杂的内容区域进行分组和隐藏，以保持页面的整洁。",
+        "content": "# 折叠面板组件 Collapse\n\n折叠面板组件用于将复杂的内容区域进行分组和隐藏，以保持页面的整洁。\n\n请注意，折叠面板组件本身不包含任何样式，你需要自行添加样式，或者与其他组件一起使用。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/collapse.js';\nimport 'mdui/components/collapse-item.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Collapse } from 'mdui/components/collapse.js';\nimport type { CollapseItem } from 'mdui/components/collapse-item.js';\n```\n\n使用示例：\n\n```html\n<mdui-collapse>\n  <mdui-collapse-item header=\"first header\">first content</mdui-collapse-item>\n  <mdui-collapse-item header=\"second header\">second content</mdui-collapse-item>\n</mdui-collapse>\n```\n\n## 示例 {#examples}\n\n### 面板标题与内容 {#example-header}\n\n通过 `<mdui-collapse-item>` 组件的 `header` 属性可以设置面板头部的文本，也可以通过 `header` slot 来指定面板头部元素。组件的 default slot 用于面板内容。\n\n```html\n<mdui-list>\n  <mdui-collapse>\n    <mdui-collapse-item>\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 1</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 1 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n    <mdui-collapse-item>\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 2</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 2 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n  </mdui-collapse>\n</mdui-list>\n```\n\n### 手风琴模式 {#example-accordion}\n\n在 `<mdui-collapse>` 组件上添加 `accordion` 属性可以启用手风琴模式，这样一次只会有一个面板处于打开状态。\n\n```html\n<mdui-list>\n  <mdui-collapse accordion>\n    <mdui-collapse-item>\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 1</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 1 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n    <mdui-collapse-item>\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 2</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 2 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n  </mdui-collapse>\n</mdui-list>\n```\n\n### 设置激活的面板 {#example-value}\n\n通过 `<mdui-collapse>` 组件的 `value` 属性，你可以获取当前打开的面板，或设置需要打开的面板。\n\n在手风琴模式下，`value` 属性的值为字符串，你可以使用 HTML 属性或 JavaScript 属性来操作该属性；在非手风琴模式下，`value` 属性的值为数组，此时只能通过 JavaScript 属性进行操作。\n\n```html\n<mdui-list>\n  <mdui-list-subheader>手风琴模式</mdui-list-subheader>\n  <mdui-collapse accordion value=\"item-1\">\n    <mdui-collapse-item value=\"item-1\">\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 1</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 1 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n    <mdui-collapse-item value=\"item-2\">\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 2</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 2 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n  </mdui-collapse>\n\n  <mdui-list-subheader>非手风琴模式</mdui-list-subheader>\n  <mdui-collapse class=\"example-value\">\n    <mdui-collapse-item value=\"item-1\">\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 1</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 1 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n    <mdui-collapse-item value=\"item-2\">\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 2</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 2 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n  </mdui-collapse>\n</mdui-list>\n\n<script>\n  const collapse = document.querySelector(\".example-value\");\n  collapse.value = [\"item-1\", \"item-2\"];\n</script>\n```\n\n### 禁用状态 {#example-disabled}\n\n通过在 `<mdui-collapse>` 组件上添加 `disabled` 属性，可以禁用整个折叠面板组。同样，通过在 `<mdui-collapse-item>` 组件上添加 `disabled` 属性，可以禁用特定的折叠面板。\n\n```html\n<mdui-list>\n  <mdui-list-subheader>全部禁用</mdui-list-subheader>\n  <mdui-collapse disabled>\n    <mdui-collapse-item>\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 1</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 1 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n    <mdui-collapse-item>\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 2</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 2 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n  </mdui-collapse>\n\n  <mdui-list-subheader>禁用第一个面板</mdui-list-subheader>\n  <mdui-collapse>\n    <mdui-collapse-item disabled>\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 1</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 1 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n    <mdui-collapse-item>\n      <mdui-list-item slot=\"header\" icon=\"near_me\">Item 2</mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 2 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n  </mdui-collapse>\n</mdui-list>\n```\n\n### 触发折叠的元素 {#example-trigger}\n\n默认情况下，点击整个面板头部区域会触发折叠。你可以通过设置 `<mdui-collapse-item>` 组件的 `trigger` 属性来指定触发折叠的元素。`trigger` 属性可以是 CSS 选择器或 DOM 元素。\n\n```html\n<mdui-list>\n  <mdui-collapse>\n    <mdui-collapse-item trigger=\".example-trigger\">\n      <mdui-list-item slot=\"header\" icon=\"near_me\">\n        Item 1\n        <mdui-icon slot=\"end-icon\" class=\"example-trigger\" name=\"keyboard_arrow_down\"></mdui-icon>\n      </mdui-list-item>\n      <div style=\"margin-left: 2.5rem\">\n        <mdui-list-item>Item 1 - subitem</mdui-list-item>\n      </div>\n    </mdui-collapse-item>\n  </mdui-collapse>\n</mdui-list>\n```\n\n",
+        "tagNames": [
+            "mdui-collapse",
+            "mdui-collapse-item"
+        ]
+    },
+    "components--dialog": {
+        "key": "components--dialog",
+        "title": "对话框组件 Dialog",
+        "description": "对话框用于在用户的操作流程中提供重要提示。",
+        "content": "# 对话框组件 Dialog\n\n对话框用于在用户的操作流程中提供重要提示。\n\n除了直接使用该组件外，mdui 还提供了四个函数：[`mdui.dialog`](/zh-cn/docs/2/functions/dialog)、[`mdui.alert`](/zh-cn/docs/2/functions/alert)、[`mdui.confirm`](/zh-cn/docs/2/functions/confirm)、[`mdui.prompt`](/zh-cn/docs/2/functions/prompt)。这些函数可以简化 Dialog 组件的使用。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/dialog.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Dialog } from 'mdui/components/dialog.js';\n```\n\n使用示例：\n\n```html\n<mdui-dialog class=\"example-dialog\">\n  Dialog\n  <mdui-button>关闭</mdui-button>\n</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-dialog\");\n  const openButton = dialog.nextElementSibling;\n  const closeButton = dialog.querySelector(\"mdui-button\");\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n  closeButton.addEventListener(\"click\", () => dialog.open = false);\n</script>\n```\n\n## 示例 {#examples}\n\n### 点击遮罩关闭 {#example-close-on-overlay-click}\n\n添加 `close-on-overlay-click` 属性，点击遮罩层时会关闭对话框。\n\n```html\n<mdui-dialog close-on-overlay-click class=\"example-overlay\">Dialog</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-overlay\");\n  const openButton = dialog.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n</script>\n```\n\n### 按下 ESC 键关闭 {#example-close-on-esc}\n\n添加 `close-on-esc` 属性，按下 ESC 键时会关闭对话框。\n\n```html\n<mdui-dialog\n  close-on-esc\n  close-on-overlay-click\n  class=\"example-ecs\"\n>Dialog</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-ecs\");\n  const openButton = dialog.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n</script>\n```\n\n### 全屏 {#example-fullscreen}\n\n添加 `fullscreen` 属性，对话框会全屏显示。\n\n```html\n<mdui-dialog fullscreen class=\"example-fullscreen\">\n  Dialog\n  <mdui-button>关闭</mdui-button>\n</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-fullscreen\");\n  const openButton = dialog.nextElementSibling;\n  const closeButton = dialog.querySelector(\"mdui-button\");\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n  closeButton.addEventListener(\"click\", () => dialog.open = false);\n</script>\n```\n\n### 图标 {#example-icon}\n\n设置 `icon` 属性，对话框上方会添加 Material Icons 图标。\n\n```html\n<mdui-dialog\n  icon=\"restart_alt\"\n  close-on-overlay-click\n  class=\"example-icon\"\n>Dialog</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-icon\");\n  const openButton = dialog.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n</script>\n```\n\n也可以通过 `icon` slot 在对话框上方添加图标元素。\n\n```html\n<mdui-dialog close-on-overlay-click class=\"example-icon-slot\">\n  Dialog\n  <mdui-icon slot=\"icon\" name=\"restart_alt\"></mdui-icon>\n</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-icon-slot\");\n  const openButton = dialog.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n</script>\n```\n\n### 标题与描述 {#example-headline}\n\n通过 `headline` 和 `description` 属性设置对话框的标题和描述。\n\n```html\n<mdui-dialog\n  headline=\"Delete selected images?\"\n  description=\"Images will be permenantly removed from you account and all synced devices.\"\n  close-on-overlay-click\n  class=\"example-headline\"\n></mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-headline\");\n  const openButton = dialog.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n</script>\n```\n\n也可以通过 `headline` 和 `description` slot 来设置对话框的标题元素和描述元素。\n\n```html\n<mdui-dialog close-on-overlay-click class=\"example-headline-slot\">\n  <span slot=\"headline\">Delete selected images?</span>\n  <span slot=\"description\">Images will be permenantly removed from you account and all synced devices.</span>\n</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-headline-slot\");\n  const openButton = dialog.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n</script>\n```\n\n### 底部操作按钮 {#example-action}\n\n可以通过 `action` slot 添加底部操作按钮。\n\n```html\n<mdui-dialog\n  close-on-overlay-click\n  headline=\"Delete selected images?\"\n  class=\"example-action\"\n>\n  <mdui-button slot=\"action\" variant=\"text\">取消</mdui-button>\n  <mdui-button slot=\"action\" variant=\"tonal\">删除</mdui-button>\n</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-action\");\n  const openButton = dialog.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n</script>\n```\n\n添加 `stacked-actions` 属性，使底部操作按钮垂直排列。\n\n```html\n<mdui-dialog\n  stacked-actions\n  close-on-overlay-click\n  headline=\"Use location service?\"\n  class=\"example-stacked-actions\"\n>\n  <mdui-button slot=\"action\" variant=\"text\">Turn on speed boost</mdui-button>\n  <mdui-button slot=\"action\" variant=\"text\">No thanks</mdui-button>\n</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-stacked-actions\");\n  const openButton = dialog.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n</script>\n```\n\n### 顶部内容 {#example-header}\n\n可以通过 `header` slot 设置对话框顶部内容。\n\n```html\n<mdui-dialog close-on-overlay-click class=\"example-header\">\n  <mdui-top-app-bar slot=\"header\">\n    <mdui-button-icon icon=\"close\"></mdui-button-icon>\n    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n    <mdui-button variant=\"text\">Save</mdui-button>\n  </mdui-top-app-bar>\n  <div style=\"height: 100px\"></div>\n</mdui-dialog>\n\n<mdui-button>打开对话框</mdui-button>\n\n<script>\n  const dialog = document.querySelector(\".example-header\");\n  const openButton = dialog.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => dialog.open = true);\n</script>\n```\n\n",
+        "tagNames": [
+            "mdui-dialog"
+        ]
+    },
+    "components--divider": {
+        "key": "components--divider",
+        "title": "分割线组件 Divider",
+        "description": "分隔线是一条细线，用于在列表和容器中对内容进行分组。",
+        "content": "# 分割线组件 Divider\n\n分隔线是一条细线，用于在列表和容器中对内容进行分组。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/divider.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Divider } from 'mdui/components/divider.js';\n```\n\n使用示例：\n\n```html\n<mdui-divider></mdui-divider>\n```\n\n## 示例 {#examples}\n\n### 垂直分割线 {#example-vertical}\n\n添加 `vertical` 属性，可以使分割线垂直显示。\n\n```html\n<div style=\"height: 80px;padding: 0 20px\">\n  <mdui-divider vertical></mdui-divider>\n</div>\n```\n\n### 左侧缩进 {#example-inset}\n\n添加 `inset` 属性，可以使分割线左侧缩进。这通常用于列表中，以使分割线和左侧文本对齐。\n\n```html\n<mdui-list>\n  <mdui-list-item>Item 1</mdui-list-item>\n  <mdui-divider inset></mdui-divider>\n  <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```\n\n### 两侧缩进 {#example-middle}\n\n添加 `middle` 属性，可以使分割线两侧缩进。\n\n```html\n<mdui-list>\n  <mdui-list-item>Item 1</mdui-list-item>\n  <mdui-divider middle></mdui-divider>\n  <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```\n\n",
+        "tagNames": [
+            "mdui-divider"
+        ]
+    },
+    "components--dropdown": {
+        "key": "components--dropdown",
+        "title": "下拉组件 Dropdown",
+        "description": "下拉组件用于在一个弹出的控件中展示特定内容，通常与菜单组件一起使用。",
+        "content": "# 下拉组件 Dropdown\n\n下拉组件用于在一个弹出的控件中展示特定内容，通常与菜单组件一起使用。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/dropdown.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Dropdown } from 'mdui/components/dropdown.js';\n```\n\n使用示例：\n\n```html\n<mdui-dropdown>\n  <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n  <mdui-menu>\n    <mdui-menu-item>Item 1</mdui-menu-item>\n    <mdui-menu-item>Item 2</mdui-menu-item>\n  </mdui-menu>\n</mdui-dropdown>\n```\n\n## 示例 {#examples}\n\n### 禁用状态 {#example-disabled}\n\n添加 `disabled` 属性可以禁用下拉组件。\n\n```html\n<mdui-dropdown disabled>\n  <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n  <mdui-menu>\n    <mdui-menu-item>Item 1</mdui-menu-item>\n    <mdui-menu-item>Item 2</mdui-menu-item>\n  </mdui-menu>\n</mdui-dropdown>\n```\n\n### 打开位置 {#example-placement}\n\n使用 `placement` 属性可以设置下拉组件的打开位置。\n\n```html\n<mdui-dropdown placement=\"right-start\">\n  <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n  <mdui-menu>\n    <mdui-menu-item>Item 1</mdui-menu-item>\n    <mdui-menu-item>Item 2</mdui-menu-item>\n  </mdui-menu>\n</mdui-dropdown>\n```\n\n### 触发方式 {#example-trigger}\n\n使用 `trigger` 属性可以设置下拉组件的触发方式。\n\n```html\n<mdui-dropdown trigger=\"hover\">\n  <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n  <mdui-menu>\n    <mdui-menu-item>Item 1</mdui-menu-item>\n    <mdui-menu-item>Item 2</mdui-menu-item>\n  </mdui-menu>\n</mdui-dropdown>\n```\n\n### 在光标处打开 {#example-open-on-pointer}\n\n添加 `open-on-pointer` 属性可以在光标处打开下拉组件。通常与 `trigger=\"contextmenu\"` 配合使用，实现用鼠标右键打开菜单。\n\n```html\n<mdui-dropdown trigger=\"contextmenu\" open-on-pointer>\n  <mdui-card slot=\"trigger\" style=\"width:100%;height: 80px\">在此区域使用鼠标右键打开菜单</mdui-card>\n  <mdui-menu>\n    <mdui-menu-item>Item 1</mdui-menu-item>\n    <mdui-menu-item>Item 2</mdui-menu-item>\n  </mdui-menu>\n</mdui-dropdown>\n```\n\n### 保持菜单打开状态 {#example-stay-open-on-click}\n\n在下拉组件中使用菜单时，默认点击菜单项后，会自动关闭下拉组件。通过添加 `stay-open-on-click` 属性，可以在点击菜单项时，保持下拉组件的打开状态。\n\n```html\n<mdui-dropdown trigger=\"click\" stay-open-on-click>\n  <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n  <mdui-menu>\n    <mdui-menu-item>Item 1</mdui-menu-item>\n    <mdui-menu-item>Item 2</mdui-menu-item>\n  </mdui-menu>\n</mdui-dropdown>\n```\n\n### 打开/关闭的延时 {#example-delay}\n\n在设置了 `trigger=\"hover\"` 时，可以通过 `open-delay`、`close-delay` 属性设置打开和关闭的延时。\n\n```html\n<mdui-dropdown trigger=\"hover\" open-delay=\"1000\" close-delay=\"1000\">\n  <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n  <mdui-menu>\n    <mdui-menu-item>Item 1</mdui-menu-item>\n    <mdui-menu-item>Item 2</mdui-menu-item>\n  </mdui-menu>\n</mdui-dropdown>\n```\n\n",
+        "tagNames": [
+            "mdui-dropdown"
+        ]
+    },
+    "components--fab": {
+        "key": "components--fab",
+        "title": "浮动操作按钮组件 Fab",
+        "description": "浮动操作按钮（FAB）用于突出显示页面上的主要操作，它将关键操作置于易于访问的位置。",
+        "content": "# 浮动操作按钮组件 Fab\n\n浮动操作按钮（FAB）用于突出显示页面上的主要操作，它将关键操作置于易于访问的位置。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/fab.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Fab } from 'mdui/components/fab.js';\n```\n\n使用示例：\n\n```html\n<mdui-fab icon=\"edit\"></mdui-fab>\n```\n\n## 示例 {#examples}\n\n### 图标 {#example-icon}\n\n使用 `icon` 属性指定 Material Icons 图标名称。也可以通过 `icon` slot 指定图标元素。\n\n```html\n<mdui-fab icon=\"edit\"></mdui-fab>\n<mdui-fab>\n  <mdui-icon slot=\"icon\" name=\"edit\"></mdui-icon>\n</mdui-fab>\n```\n\n### 展开状态 {#example-extended}\n\n添加 `extended` 属性可以将 FAB 设置为展开状态，此时 default slot 中的文本将显示出来。\n\n```html\n<mdui-fab extended icon=\"edit\">Compose</mdui-fab>\n```\n\n### 形状 {#example-variant}\n\n使用 `variant` 属性可以设置 FAB 的形状。\n\n```html\n<mdui-fab variant=\"primary\" icon=\"edit\"></mdui-fab>\n<mdui-fab variant=\"surface\" icon=\"edit\"></mdui-fab>\n<mdui-fab variant=\"secondary\" icon=\"edit\"></mdui-fab>\n<mdui-fab variant=\"tertiary\" icon=\"edit\"></mdui-fab>\n```\n\n### 大小 {#example-size}\n\n使用 `size` 属性可以设置 FAB 的大小。\n\n```html\n<mdui-fab size=\"small\" icon=\"edit\"></mdui-fab>\n<mdui-fab size=\"normal\" icon=\"edit\"></mdui-fab>\n<mdui-fab size=\"large\" icon=\"edit\"></mdui-fab>\n```\n\n### 链接 {#example-link}\n\n添加 `href` 属性，可以使 FAB 具有链接功能，此时还可以使用与链接相关的属性：`download`、`target`、`rel`。\n\n```html\n<mdui-fab icon=\"edit\" href=\"https://www.mdui.org\" target=\"_blank\"></mdui-fab>\n```\n\n### 禁用及加载中状态 {#example-disabled}\n\n添加 `disabled` 属性可以禁用 FAB；添加 `loading` 属性可以为 FAB 添加加载中状态。\n\n```html\n<mdui-fab disabled icon=\"edit\"></mdui-fab>\n<mdui-fab loading icon=\"edit\"></mdui-fab>\n<mdui-fab loading disabled icon=\"edit\"></mdui-fab>\n```\n\n",
+        "tagNames": [
+            "mdui-fab"
+        ]
+    },
+    "components--icon": {
+        "key": "components--icon",
+        "title": "图标组件 Icon",
+        "description": "图标用于表示常见的操作。它支持 Material Icons 图标，也支持使用 SVG 图标。",
+        "content": "# 图标组件 Icon\n\n图标用于表示常见的操作。它支持 Material Icons 图标，也支持使用 SVG 图标。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/icon.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Icon } from 'mdui/components/icon.js';\n```\n\n使用示例：\n\n```html\n<mdui-icon name=\"search\"></mdui-icon>\n```\n\n### 使用 Material Icons 图标 {#usage-material-icons}\n\n如果需要通过该组件使用 Material Icons 图标，你需要单独导入 Material Icons 的 CSS 文件。Material Icons 共有 5 种变体，分别为：Filled、Outlined、Rounded、Sharp、Two Tone，请根据你要使用的图标变体，导入对应的 CSS 文件：\n\n```html\n<!-- Filled -->\n<link\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons\"\n  rel=\"stylesheet\"\n/>\n\n<!-- Outlined -->\n<link\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons+Outlined\"\n  rel=\"stylesheet\"\n/>\n\n<!-- Rounded -->\n<link\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons+Round\"\n  rel=\"stylesheet\"\n/>\n\n<!-- Sharp -->\n<link\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons+Sharp\"\n  rel=\"stylesheet\"\n/>\n\n<!-- Two Tone -->\n<link\n  href=\"https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone\"\n  rel=\"stylesheet\"\n/>\n```\n\n使用组件时，在 `name` 属性中传入图标名称，并以图标变体名称为后缀（Filled 变体无需添加后缀），下面是 `delete` 图标的 5 种变体的使用方式：\n\n```html\n<!-- Filled -->\n<mdui-icon name=\"delete\"></mdui-icon>\n\n<!-- Outlined -->\n<mdui-icon name=\"delete--outlined\"></mdui-icon>\n\n<!-- Rounded -->\n<mdui-icon name=\"delete--rounded\"></mdui-icon>\n\n<!-- Sharp -->\n<mdui-icon name=\"delete--sharp\"></mdui-icon>\n\n<!-- Two Tone -->\n<mdui-icon name=\"delete--two-tone\"></mdui-icon>\n```\n\n你可以直接在页面下方的 [Material Icons 图标搜索](/zh-cn/docs/2/components/icon#search) 工具中搜索图标，然后点击需要使用的图标，就会自动将图标代码复制到剪贴板。\n\n另外，mdui 还提供了一个独立的包 [`@mdui/icons`](/zh-cn/docs/2/libraries/icons)，这个包里每一个图标组件都是一个独立的文件，使你可以按需导入需要的图标组件，而无需导入整个图标库。\n\n### 使用 SVG 图标 {#usage-svg}\n\n该组件也支持使用 SVG 图标作为图标内容。可通过组件的 `src` 属性传入 SVG 图标的链接。例如：\n\n```html\n<mdui-icon src=\"https://fonts.gstatic.com/s/i/materialicons/search/v17/24px.svg\"></mdui-icon>\n```\n\n也可以在组件的 default slot 中传入 SVG 的内容。例如：\n\n```html\n<mdui-icon>\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path d=\"M0 0h24v24H0z\" fill=\"none\"/>\n    <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/>\n  </svg>\n</mdui-icon>\n```\n\n## 示例 {#examples}\n\n### 设置颜色 {#example-color}\n\n设置 `<mdui-icon>` 元素或父元素的 `color` CSS 样式修改图标颜色。\n\n```html\n<mdui-icon name=\"delete\" style=\"color: red\"></mdui-icon>\n<mdui-icon src=\"https://fonts.gstatic.com/s/i/materialicons/search/v17/24px.svg\" style=\"color: red\"></mdui-icon>\n```\n\n### 设置大小 {#example-size}\n\n设置 `<mdui-icon>` 元素或父元素的 `font-size` CSS 样式修改图标大小。\n\n```html\n<mdui-icon name=\"delete\" style=\"font-size: 32px\"></mdui-icon>\n<mdui-icon src=\"https://fonts.gstatic.com/s/i/materialicons/search/v17/24px.svg\" style=\"font-size: 32px\"></mdui-icon>\n```\n\n",
+        "tagNames": [
+            "mdui-icon"
+        ]
+    },
+    "components--layout": {
+        "key": "components--layout",
+        "title": "布局组件 Layout",
+        "description": "布局组件提供了一个灵活的布局系统，用于创建复杂的页面布局。",
+        "content": "# 布局组件 Layout\n\n布局组件提供了一个灵活的布局系统，用于创建复杂的页面布局。\n\n<style>\n.example-top-app-bar {\n  background-color: rgb(var(--mdui-color-surface-container));\n}\n\n.example-navigation-drawer::part(panel) {\n  background-color: rgb(var(--mdui-color-surface-container-low));\n}\n\n.example-layout-item {\n  background-color: rgb(var(--mdui-color-surface-container-low));\n}\n\n.example-layout-main {\n  background-color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n@media (min-width: 840px) {\n  .example-md-visible {\n    display: none;\n  }\n}\n</style>\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/layout.js';\nimport 'mdui/components/layout-item.js';\nimport 'mdui/components/layout-main.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Layout } from 'mdui/components/layout.js';\nimport type { LayoutItem } from 'mdui/components/layout-item.js';\nimport type { LayoutMain } from 'mdui/components/layout-main.js';\n```\n\n**介绍：**\n\n布局系统遵循从外向内的原则构建，每个布局组件（`<mdui-layout-item>` 组件）都会在四个方向（上、下、左、右）之一的位置占据空间，随后的布局组件会在剩余空间中继续占据空间。\n\n以下组件直接继承自 `<mdui-layout-item>` 组件，因此也可以作为布局组件使用：\n\n- [`<mdui-navigation-bar>`](/zh-cn/docs/2/components/navigation-bar)\n- [`<mdui-navigation-drawer>`](/zh-cn/docs/2/components/navigation-drawer)\n- [`<mdui-navigation-rail>`](/zh-cn/docs/2/components/navigation-rail)\n- [`<mdui-bottom-app-bar>`](/zh-cn/docs/2/components/bottom-app-bar)\n- [`<mdui-top-app-bar>`](/zh-cn/docs/2/components/top-app-bar)\n\n布局系统的最后一部分是 `<mdui-layout-main>` 组件，它会占据剩余空间，你可以在该组件内放置页面内容。\n\n## 示例 {#examples}\n\n### 布局组件顺序 {#layout-default-order}\n\n默认情况下，布局组件会按照在代码中出现的顺序来占据空间。你可以从下面两个示例来理解这个概念，这两个示例中，[`<mdui-top-app-bar>`](/zh-cn/docs/2/components/top-app-bar) 和 [`<mdui-navigation-drawer>`](/zh-cn/docs/2/components/navigation-drawer) 在代码中出现的顺序不同。\n\n<p class=\"example-md-visible\">请在大屏显示器上查看该示例。</p>\n\n```html\n<mdui-layout>\n  <mdui-top-app-bar class=\"example-top-app-bar\">\n    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>\n  </mdui-top-app-bar>\n\n  <mdui-navigation-drawer open class=\"example-navigation-drawer\">\n    <mdui-list>\n      <mdui-list-item>Navigation drawer</mdui-list-item>\n    </mdui-list>\n  </mdui-navigation-drawer>\n\n  <mdui-layout-main class=\"example-layout-main\" style=\"min-height: 300px\">Main</mdui-layout-main>\n</mdui-layout>\n```\n\n```html\n<mdui-layout>\n  <mdui-navigation-drawer open class=\"example-navigation-drawer\">\n    <mdui-list>\n      <mdui-list-item>Navigation drawer</mdui-list-item>\n    </mdui-list>\n  </mdui-navigation-drawer>\n\n  <mdui-top-app-bar class=\"example-top-app-bar\">\n    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>\n  </mdui-top-app-bar>\n\n  <mdui-layout-main class=\"example-layout-main\" style=\"min-height: 300px\">Main</mdui-layout-main>\n</mdui-layout>\n```\n\n可以发现，将 [`<mdui-top-app-bar>`](/zh-cn/docs/2/components/top-app-bar) 放在 [`<mdui-navigation-drawer>`](/zh-cn/docs/2/components/navigation-drawer) 之前时，[`<mdui-top-app-bar>`](/zh-cn/docs/2/components/top-app-bar) 会率先占满屏幕的宽度，而 [`<mdui-navigation-drawer>`](/zh-cn/docs/2/components/navigation-drawer) 只能在剩余的空间内占满高度。调换二者顺序后，[`<mdui-navigation-drawer>`](/zh-cn/docs/2/components/navigation-drawer) 会率先占满屏幕的高度，而 [`<mdui-top-app-bar>`](/zh-cn/docs/2/components/top-app-bar) 只能在剩余的空间内占满宽度。\n\n### 布局组件位置 {#example-placement}\n\n对于 `<mdui-layout-item>` 组件，你可以使用 `placement` 属性来指定其在布局中的上、下、左、右位置。 对于 [`<mdui-navigation-drawer>`](/zh-cn/docs/2/components/navigation-drawer) 和 [`<mdui-navigation-rail>`](/zh-cn/docs/2/components/navigation-rail) 组件，你也可以使用 `placement` 属性来指定其在布局中的左、右位置。\n\n下面的示例中，我们将两个 `<mdui-layout-item>` 组件放在了应用的两侧。\n\n```html\n<mdui-layout>\n  <mdui-top-app-bar class=\"example-top-app-bar\">\n    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>\n  </mdui-top-app-bar>\n\n  <mdui-layout-item\n    placement=\"left\"\n    class=\"example-layout-item\"\n    style=\"width: 100px\"\n  >Layout Item</mdui-layout-item>\n\n  <mdui-layout-item\n    placement=\"right\"\n    class=\"example-layout-item\"\n    style=\"width: 100px\"\n  >Layout Item</mdui-layout-item>\n\n  <mdui-layout-main class=\"example-layout-main\" style=\"min-height: 300px\">Main</mdui-layout-main>\n</mdui-layout>\n```\n\n### 自定义布局组件顺序 {#example-order}\n\n在大多数情况下，只要按顺序放置布局组件就能实现你想要的布局。\n\n你也可以使用 `order` 属性来指定布局顺序，系统将按 `order` 的值从小到大排列组件，`order` 相同时则按代码顺序排列。所有布局组件的默认 `order` 都为 `0`。\n\n```html\n<mdui-layout class=\"example-order\">\n  <mdui-layout-item\n    placement=\"left\"\n    class=\"example-layout-item\"\n    style=\"width: 100px\"\n  >Layout Item</mdui-layout-item>\n\n  <mdui-top-app-bar class=\"example-top-app-bar\">\n    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>\n    <div style=\"flex-grow: 1\"></div>\n    <mdui-checkbox>order=\"-1\"</mdui-checkbox>\n  </mdui-top-app-bar>\n\n  <mdui-layout-main class=\"example-layout-main\" style=\"min-height: 300px\">Main</mdui-layout-main>\n</mdui-layout>\n\n<script>\n  const topAppBar = document.querySelector(\".example-order mdui-top-app-bar\");\n  const checkbox = document.querySelector(\".example-order mdui-checkbox\");\n\n  checkbox.addEventListener(\"change\", (event) => {\n    topAppBar.order = event.target.checked ? -1 : 0;\n  });\n</script>\n```\n\n",
+        "tagNames": [
+            "mdui-layout",
+            "mdui-layout-item",
+            "mdui-layout-main"
+        ]
+    },
+    "components--linear-progress": {
+        "key": "components--linear-progress",
+        "title": "线性进度指示器组件 LinearProgress",
+        "description": "线性进度指示器是一种横向的指示器，用于向用户展示任务的执行进度，如数据加载或表单提交等。",
+        "content": "# 线性进度指示器组件 LinearProgress\n\n线性进度指示器是一种横向的指示器，用于向用户展示任务的执行进度，如数据加载或表单提交等。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/linear-progress.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { LinearProgress } from 'mdui/components/linear-progress.js';\n```\n\n使用示例：\n\n```html\n<mdui-linear-progress></mdui-linear-progress>\n```\n\n## 示例 {#examples}\n\n### 设定进度 {#example-value}\n\n线性进度指示器默认为不确定的进度，你可以通过 `value` 属性来设定当前的进度，默认的进度最大值为 `1`。\n\n```html\n<mdui-linear-progress value=\"0.5\"></mdui-linear-progress>\n```\n\n你也可以通过 `max` 属性来设定进度的最大值。\n\n```html\n<mdui-linear-progress value=\"30\" max=\"100\"></mdui-linear-progress>\n```\n\n",
+        "tagNames": [
+            "mdui-linear-progress"
+        ]
+    },
+    "components--list": {
+        "key": "components--list",
+        "title": "列表组件 List",
+        "description": "列表是一种垂直排列的索引，用于展示文本或图片，便于用户快速浏览和访问相关信息。",
+        "content": "# 列表组件 List\n\n列表是一种垂直排列的索引，用于展示文本或图片，便于用户快速浏览和访问相关信息。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/list.js';\nimport 'mdui/components/list-item.js';\nimport 'mdui/components/list-subheader.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { List } from 'mdui/components/list.js';\nimport type { ListItem } from 'mdui/components/list-item.js';\nimport type { ListSubheader } from 'mdui/components/list-subheader.js';\n```\n\n使用示例：\n\n```html\n<mdui-list>\n  <mdui-list-subheader>Subheader</mdui-list-subheader>\n  <mdui-list-item>Item 1</mdui-list-item>\n  <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```\n\n## 示例 {#examples}\n\n### 文本内容 {#example-text}\n\n在 `<mdui-list-item>` 组件上设置 `headline` 属性，可以设定列表项的主文本，设置 `description` 属性，可以设定副文本。\n\n```html\n<mdui-list>\n  <mdui-list-item headline=\"Headline\"></mdui-list-item>\n  <mdui-list-item headline=\"Headline\" description=\"Supporting text\"></mdui-list-item>\n</mdui-list>\n```\n\n也可以通过 default slot 设定主文本，通过 `description` slot 设定副文本。\n\n```html\n<mdui-list>\n  <mdui-list-item>Headline</mdui-list-item>\n  <mdui-list-item>\n    Headline\n    <span slot=\"description\">Supporting text</span>\n  </mdui-list-item>\n</mdui-list>\n```\n\n默认情况下，主文本和副文本无论长度如何，都会完全显示。你可以通过设置 `headline-line` 和 `description-line` 属性为主文本和副文本添加行数限制，最多可以限制为 3 行。\n\n```html\n<mdui-list>\n  <mdui-list-item headline-line=\"1\" description-line=\"2\">\n    Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline\n    <span slot=\"description\">Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text</span>\n  </mdui-list-item>\n</mdui-list>\n```\n\n### 两侧内容 {#example-side}\n\n在 `<mdui-list-item>` 组件上设置 `icon` 和 `end-icon` 属性，可以在列表项的左侧和右侧添加 Material Icons 图标。\n\n```html\n<mdui-list>\n  <mdui-list-item icon=\"people\" end-icon=\"arrow_right\">Headline</mdui-list-item>\n</mdui-list>\n```\n\n也可以通过 `icon` 和 `end-icon` slot 在列表项的左侧和右侧添加元素。\n\n```html\n<mdui-list>\n  <mdui-list-item>\n    Headline\n    <mdui-avatar slot=\"icon\" src=\"https://avatars.githubusercontent.com/u/3030330?s=40&v=4\"></mdui-avatar>\n    <mdui-checkbox slot=\"end-icon\"></mdui-checkbox>\n  </mdui-list-item>\n</mdui-list>\n```\n\n### 链接 {#example-link}\n\n通过设置 `href` 属性，可以将列表项转换为链接。此时，你还可以使用与链接相关的属性，如：`download`、`target` 和 `rel`。\n\n```html\n<mdui-list>\n  <mdui-list-item href=\"https://www.mdui.org\" target=\"_blank\">Headline</mdui-list-item>\n</mdui-list>\n```\n\n### 禁用状态 {#example-disabled}\n\n在 `<mdui-list-item>` 组件上添加 `disabled` 属性，可以禁用该列表项。此时，列表项中的 checkbox、radio、switch 等组件也会被禁用。\n\n```html\n<mdui-list>\n  <mdui-list-item disabled>Headline</mdui-list-item>\n  <mdui-list-item>Headline</mdui-list-item>\n</mdui-list>\n```\n\n### 激活状态 {#example-active}\n\n在 `<mdui-list-item>` 组件上添加 `active` 属性，可以激活该列表项。\n\n```html\n<mdui-list>\n  <mdui-list-item active>Headline</mdui-list-item>\n  <mdui-list-item>Headline</mdui-list-item>\n</mdui-list>\n```\n\n### 不可点击状态 {#example-nonclickable}\n\n在 `<mdui-list-item>` 组件上添加 `nonclickable` 属性，可以移除列表项上的鼠标悬浮和点击涟漪效果。\n\n```html\n<mdui-list>\n  <mdui-list-item nonclickable>Headline</mdui-list-item>\n  <mdui-list-item>Headline</mdui-list-item>\n</mdui-list>\n```\n\n### 圆角形状 {#example-rounded}\n\n在 `<mdui-list-item>` 组件上添加 `rounded` 属性，可以使该列表项呈现圆角形状。\n\n```html\n<mdui-list>\n  <mdui-list-item rounded>Headline</mdui-list-item>\n  <mdui-list-item rounded>Headline</mdui-list-item>\n</mdui-list>\n```\n\n### 垂直对齐方式 {#example-alignment}\n\n在 `<mdui-list-item>` 组件上设置 `alignment` 属性，可以调整列表项左右两侧元素与列表项的对齐方式。其值可以为：\n\n- `start`：顶部对齐\n- `center`：居中对齐\n- `end`：底部对齐\n\n```html\n<mdui-list>\n  <mdui-list-item alignment=\"start\" description=\"Supporting text\">\n    Headline\n    <mdui-icon slot=\"icon\" name=\"people\"></mdui-icon>\n  </mdui-list-item>\n  <mdui-list-item alignment=\"center\" description=\"Supporting text\">\n    Headline\n    <mdui-icon slot=\"icon\" name=\"people\"></mdui-icon>\n  </mdui-list-item>\n  <mdui-list-item alignment=\"end\" description=\"Supporting text\">\n    Headline\n    <mdui-icon slot=\"icon\" name=\"people\"></mdui-icon>\n  </mdui-list-item>\n</mdui-list>\n```\n\n### 自定义内容 {#example-custom}\n\n在 `<mdui-list-item>` 组件中使用 `custom` slot，可以完全自定义列表项的内容。\n\n```html\n<mdui-list>\n  <mdui-list-item>\n    <div slot=\"custom\" style=\"display: flex;\">\n      <mdui-icon name=\"people\"></mdui-icon>\n      <div>test</div>\n    </div>\n  </mdui-list-item>\n</mdui-list>\n```\n\n",
+        "tagNames": [
+            "mdui-list",
+            "mdui-list-item",
+            "mdui-list-subheader"
+        ]
+    },
+    "components--menu": {
+        "key": "components--menu",
+        "title": "菜单组件 Menu",
+        "description": "菜单组件提供了一系列垂直排列的选项。当用户与按钮、或其他控件交互时，将显示菜单。",
+        "content": "# 菜单组件 Menu\n\n菜单组件提供了一系列垂直排列的选项。当用户与按钮、或其他控件交互时，将显示菜单。\n\n如果你需要实现下拉菜单，可以配合 [`<mdui-dropdown>`](/zh-cn/docs/2/components/dropdown) 组件。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/menu.js';\nimport 'mdui/components/menu-item.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Menu } from 'mdui/components/menu.js';\nimport type { MenuItem } from 'mdui/components/menu-item.js';\n```\n\n使用示例：\n\n```html\n<mdui-menu>\n  <mdui-menu-item>Item 1</mdui-menu-item>\n  <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```\n\n## 示例 {#examples}\n\n### 下拉菜单 {#example-dropdown}\n\n配合 [`<mdui-dropdown>`](/zh-cn/docs/2/components/dropdown) 组件实现下拉菜单。\n\n```html\n<mdui-dropdown>\n  <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n  <mdui-menu>\n    <mdui-menu-item>Item 1</mdui-menu-item>\n    <mdui-menu-item>Item 2</mdui-menu-item>\n  </mdui-menu>\n</mdui-dropdown>\n```\n\n### 紧凑布局 {#example-dense}\n\n在 `<mdui-menu>` 组件上添加 `dense` 属性，可以实现紧凑布局。\n\n```html\n<mdui-menu dense>\n  <mdui-menu-item>Item 1</mdui-menu-item>\n  <mdui-menu-item>Item 2</mdui-menu-item>\n  <mdui-menu-item>Item 3</mdui-menu-item>\n</mdui-menu>\n```\n\n### 禁用菜单项 {#example-disabled}\n\n在 `<mdui-menu-item>` 组件上添加 `disabled` 属性，可以禁用菜单项。\n\n```html\n<mdui-menu>\n  <mdui-menu-item disabled>Item 1</mdui-menu-item>\n  <mdui-menu-item>Item 2</mdui-menu-item>\n  <mdui-menu-item>Item 3</mdui-menu-item>\n</mdui-menu>\n```\n\n### 支持单选 {#example-selects-single}\n\n在 `<mdui-menu>` 组件上指定 `selects` 属性为 `single`，可以实现单选功能。此时 `<mdui-menu>` 的 `value` 值即为当前选中的 `<mdui-menu-item>` 的 `value` 值。\n\n```html\n<mdui-menu selects=\"single\" value=\"item-2\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-menu>\n```\n\n### 支持多选 {#example-selects-multiple}\n\n在 `<mdui-menu>` 组件上指定 `selects` 属性为 `multiple`，可以实现多选功能。此时 `<mdui-menu>` 的 `value` 值即为当前选中的 `<mdui-menu-item>` 的 `value` 值组成的数组。\n\n注意：在多选模式下，`<mdui-menu>` 的 `value` 值为数组，只能通过 JavaScript 属性来读取和设置该值。\n\n```html\n<mdui-menu selects=\"multiple\" class=\"example-multiple\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n  <mdui-menu-item value=\"item-3\">Item 3</mdui-menu-item>\n</mdui-menu>\n\n<script>\n  // 设置默认选中 item-1 和 item-2\n  const menu = document.querySelector(\".example-multiple\");\n  menu.value = [\"item-1\", \"item-2\"];\n</script>\n```\n\n### 图标 {#example-icon}\n\n在 `<mdui-menu-item>` 组件上，通过设置 `icon` 和 `end-icon` 属性，可以分别在菜单项的左侧和右侧添加 Material Icons 图标。通过设置 `end-text` 属性，可以在右侧添加文本。此外，也可以通过 `icon`、`end-icon` 和 `end-text` slot 在菜单项的左侧和右侧添加图标和文本。\n\n如果需要在菜单项左侧空出一个图标的位置以保持与其他菜单项的对齐，可以将 `icon` 属性设置为空字符串。\n\n```html\n<mdui-menu>\n  <mdui-menu-item icon=\"visibility\" end-icon=\"add_circle\" end-text=\"Ctrl+X\">Item 1</mdui-menu-item>\n  <mdui-menu-item>\n    Item 2\n    <mdui-icon slot=\"icon\" name=\"visibility\"></mdui-icon>\n    <mdui-icon slot=\"end-icon\" name=\"add_circle\"></mdui-icon>\n    <span slot=\"end-text\">Ctrl+X</span>\n  </mdui-menu-item>\n  <mdui-menu-item icon=\"\">Item 3</mdui-menu-item>\n</mdui-menu>\n```\n\n在单选或多选模式下，可以通过 `selected-icon` 属性或 `selected-icon` slot 设置选中状态的图标。\n\n```html\n<mdui-menu selects=\"multiple\">\n  <mdui-menu-item value=\"item-1\" selected-icon=\"cloud_done\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">\n    <mdui-icon slot=\"selected-icon\" name=\"done_outline\"></mdui-icon>\n    Item 2\n  </mdui-menu-item>\n</mdui-menu>\n```\n\n### 链接 {#example-link}\n\n在 `<mdui-menu-item>` 组件上设置 `href` 属性，可以将菜单项转换为链接。此时，还可以使用与链接相关的属性，如：`download`、`target` 和 `rel`。\n\n```html\n<mdui-menu>\n  <mdui-menu-item href=\"https://www.mdui.org\" target=\"_blank\">Item 1</mdui-menu-item>\n  <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```\n\n### 子菜单 {#example-submenu}\n\n在 `<mdui-menu-item>` 组件中，可以使用 `submenu` slot 来指定子菜单项的元素。\n\n```html\n<mdui-menu>\n  <mdui-menu-item>\n    Line spacing\n    <mdui-menu-item slot=\"submenu\">Single</mdui-menu-item>\n    <mdui-menu-item slot=\"submenu\">1.5</mdui-menu-item>\n    <mdui-menu-item slot=\"submenu\">Double</mdui-menu-item>\n    <mdui-menu-item slot=\"submenu\">Custom: 1.2</mdui-menu-item>\n  </mdui-menu-item>\n  <mdui-menu-item>Paragraph style</mdui-menu-item>\n</mdui-menu>\n```\n\n在 `<mdui-menu>` 组件上，可以通过 `submenu-trigger` 属性设置子菜单的触发方式。\n\n```html\n<mdui-menu submenu-trigger=\"click\">\n  <mdui-menu-item>\n    Line spacing\n    <mdui-menu-item slot=\"submenu\">Single</mdui-menu-item>\n    <mdui-menu-item slot=\"submenu\">1.5</mdui-menu-item>\n    <mdui-menu-item slot=\"submenu\">Double</mdui-menu-item>\n    <mdui-menu-item slot=\"submenu\">Custom: 1.2</mdui-menu-item>\n  </mdui-menu-item>\n  <mdui-menu-item>Paragraph style</mdui-menu-item>\n</mdui-menu>\n```\n\n当 `submenu-trigger` 属性设置为 `hover` 时，可以在 `<mdui-menu>` 组件上通过 `submenu-open-delay` 和 `submenu-close-delay` 属性设置子菜单的打开延时和关闭延时。\n\n```html\n<mdui-menu submenu-trigger=\"hover\" submenu-open-delay=\"1000\" submenu-close-delay=\"1000\">\n  <mdui-menu-item>\n    Line spacing\n    <mdui-menu-item slot=\"submenu\">Single</mdui-menu-item>\n    <mdui-menu-item slot=\"submenu\">1.5</mdui-menu-item>\n    <mdui-menu-item slot=\"submenu\">Double</mdui-menu-item>\n    <mdui-menu-item slot=\"submenu\">Custom: 1.2</mdui-menu-item>\n  </mdui-menu-item>\n  <mdui-menu-item>Paragraph style</mdui-menu-item>\n</mdui-menu>\n```\n\n### 自定义内容 {#example-custom}\n\n在 `<mdui-menu-item>` 组件中，你可以使用 `custom` slot 来完全自定义菜单项的内容。\n\n```html\n<style>\n  .custom-item {\n    padding: 4px 12px;\n  }\n\n  .custom-item .secondary {\n    display: none;\n    color: #888;\n    font-size: 13px;\n  }\n\n  .custom-item:hover .secondary {\n    display: block\n  }\n</style>\n\n<mdui-menu>\n  <mdui-menu-item>\n    <div slot=\"custom\" class=\"custom-item\">\n      <div>ABS</div>\n      <div class=\"secondary\">取数值的绝对值</div>\n    </div>\n  </mdui-menu-item>\n  <mdui-menu-item>\n    <div slot=\"custom\" class=\"custom-item\">\n      <div>ACOS</div>\n      <div class=\"secondary\">数值的反余弦值，以弧度表示</div>\n    </div>\n  </mdui-menu-item>\n  <mdui-menu-item>\n    <div slot=\"custom\" class=\"custom-item\">\n      <div>ACOSH</div>\n      <div class=\"secondary\">数值的反双曲余弦值</div>\n    </div>\n  </mdui-menu-item>\n</mdui-menu>\n```\n\n",
+        "tagNames": [
+            "mdui-menu",
+            "mdui-menu-item"
+        ]
+    },
+    "components--navigation-bar": {
+        "key": "components--navigation-bar",
+        "title": "底部导航栏组件 NavigationBar",
+        "description": "导航栏用于在移动端页面中方便地在几个主要页面之间进行切换。",
+        "content": "# 底部导航栏组件 NavigationBar\n\n导航栏用于在移动端页面中方便地在几个主要页面之间进行切换。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/navigation-bar.js';\nimport 'mdui/components/navigation-bar-item.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { NavigationBar } from 'mdui/components/navigation-bar.js';\nimport type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';\n```\n\n使用示例：（示例中的 `style=\"position: relative\"` 仅用于演示，实际使用时请移除该样式。）\n\n```html\n<mdui-navigation-bar value=\"item-1\" style=\"position: relative\">\n  <mdui-navigation-bar-item icon=\"place\" value=\"item-1\">Item 1</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"commute\" value=\"item-2\">Item 2</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"people\" value=\"item-3\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```\n\n**注意事项：**\n\n该组件默认使用 `position: fixed` 定位，并会自动在 `body` 上添加 `padding-bottom` 样式，以防止页面内容被组件遮挡。但在以下两种情况下，会默认使用 `position: absolute` 定位：\n\n1. 当指定了 `scroll-target` 属性时。此时会在 `scroll-target` 的元素上添加 `padding-bottom` 样式。\n2. 当组件位于 [`<mdui-layout></mdui-layout>`](/zh-cn/docs/2/components/layout) 中时。此时不会添加 `padding-bottom` 样式。\n\n## 示例 {#examples}\n\n### 文本标签显示状态 {#example-label-visibility}\n\n导航栏中的文本标签默认在导航项小于等于 3 个时始终显示；当导航项大于 3 个时，仅显示选中状态的文本。\n\n```html\n<mdui-navigation-bar value=\"item-1\" style=\"position: relative\">\n  <mdui-navigation-bar-item icon=\"place\" value=\"item-1\">Item 1</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"commute\" value=\"item-2\">Item 2</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"people\" value=\"item-3\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n\n<br/>\n\n<mdui-navigation-bar value=\"item-1\" style=\"position: relative\">\n  <mdui-navigation-bar-item icon=\"place\" value=\"item-1\">Item 1</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"commute\" value=\"item-2\">Item 2</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"directions_railway\" value=\"item-3\">Item 3</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"people\" value=\"item-4\">Item 4</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```\n\n你可以通过在 `<mdui-navigation-bar>` 组件上设置 `label-visibility` 属性来调整文本标签的显示状态。可选值有：\n\n- `selected`：仅显示选中状态的文本\n- `labeled`：始终显示文本\n- `unlabeled`：始终不显示文本\n\n```html\n<mdui-navigation-bar value=\"item-1\" label-visibility=\"selected\" style=\"position: relative\" class=\"example-label\">\n  <mdui-navigation-bar-item icon=\"place\" value=\"item-1\">Item 1</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"commute\" value=\"item-2\">Item 2</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"people\" value=\"item-3\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n\n<mdui-segmented-button-group value=\"selected\" selects=\"single\" style=\"margin-top: 16px\">\n  <mdui-segmented-button value=\"selected\">selected</mdui-segmented-button>\n  <mdui-segmented-button value=\"labeled\">labeled</mdui-segmented-button>\n  <mdui-segmented-button value=\"unlabeled\">unlabeled</mdui-segmented-button>\n</mdui-segmented-button-group>\n\n<script>\n  const navigationBar = document.querySelector(\".example-label\");\n  const segmentedButtonGroup = navigationBar.nextElementSibling;\n\n  segmentedButtonGroup.addEventListener(\"change\", (event) => {\n    navigationBar.labelVisibility = event.target.value;\n  });\n</script>\n```\n\n### 位于指定容器内 {#example-scroll-target}\n\n默认情况下，导航栏会相对于当前窗口，在页面底部显示。\n\n如果你希望将导航栏放在指定的容器内，可以在 `<mdui-navigation-bar>` 组件上指定 `scroll-target` 属性。该属性的值应为可滚动内容的容器的 CSS 选择器或 DOM 元素。此时，导航栏会相对于父元素显示（你需要自行在父元素上添加 `position: relative; overflow: hidden` 样式）。\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-navigation-bar scroll-target=\".example-scroll-target\" value=\"item-1\">\n    <mdui-navigation-bar-item icon=\"place\" value=\"item-1\">Item 1</mdui-navigation-bar-item>\n    <mdui-navigation-bar-item icon=\"commute\" value=\"item-2\">Item 2</mdui-navigation-bar-item>\n    <mdui-navigation-bar-item icon=\"people\" value=\"item-3\">Item 3</mdui-navigation-bar-item>\n  </mdui-navigation-bar>\n\n  <div class=\"example-scroll-target\" style=\"height: 160px;overflow: auto;\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n### 滚动时隐藏 {#example-scroll-behavior}\n\n通过在 `<mdui-navigation-bar>` 组件上设置 `scroll-behavior` 属性为 `hide`，可以实现页面向下滚动时隐藏导航栏，向上滚动时显示导航栏的效果。\n\n使用 `scroll-threshold` 属性，可以设置滚动多少像素后开始隐藏导航栏。\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-navigation-bar\n    scroll-behavior=\"hide\"\n    scroll-threshold=\"30\"\n    scroll-target=\".example-scroll-behavior\"\n    value=\"item-1\"\n  >\n    <mdui-navigation-bar-item icon=\"place\" value=\"item-1\">Item 1</mdui-navigation-bar-item>\n    <mdui-navigation-bar-item icon=\"commute\" value=\"item-2\">Item 2</mdui-navigation-bar-item>\n    <mdui-navigation-bar-item icon=\"people\" value=\"item-3\">Item 3</mdui-navigation-bar-item>\n  </mdui-navigation-bar>\n\n  <div class=\"example-scroll-behavior\" style=\"height: 160px;overflow: auto;\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n### 图标 {#example-icon}\n\n在 `<mdui-navigation-bar-item>` 组件上，`icon` 属性用于设置未激活状态的导航项图标，`active-icon` 属性用于设置激活状态的导航项图标。也可以通过 `icon` 和 `active-icon` slot 来设置未激活和激活状态的图标元素。\n\n```html\n<mdui-navigation-bar value=\"item-1\" style=\"position: relative\">\n  <mdui-navigation-bar-item\n    icon=\"place--outlined\"\n    active-icon=\"place\"\n    value=\"item-1\"\n  >Item 1</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item value=\"item-2\">\n    Item 2\n    <mdui-icon slot=\"icon\" name=\"people--outlined\"></mdui-icon>\n    <mdui-icon slot=\"active-icon\" name=\"people\"></mdui-icon>\n  </mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```\n\n### 链接 {#example-link}\n\n在 `<mdui-navigation-bar-item>` 组件上设置 `href` 属性，可以将导航项变为链接。此时，还可以使用与链接相关的属性：`download`、`target`、`rel`。\n\n```html\n<mdui-navigation-bar value=\"item-1\" style=\"position: relative\">\n  <mdui-navigation-bar-item icon=\"place\" href=\"https://www.mdui.org\" target=\"_blank\" value=\"item-1\">Item 1</mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"commute\" value=\"item-2\">Item 2</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```\n\n### 徽标 {#example-badge}\n\n在 `<mdui-navigation-bar-item>` 组件中，可以通过 `badge` slot 添加徽章。\n\n```html\n<mdui-navigation-bar value=\"item-1\" style=\"position: relative\">\n  <mdui-navigation-bar-item icon=\"place\" value=\"item-1\">\n    Item 1\n    <mdui-badge slot=\"badge\">99+</mdui-badge>\n  </mdui-navigation-bar-item>\n  <mdui-navigation-bar-item icon=\"commute\" value=\"item-2\">Item 2</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```\n\n",
+        "tagNames": [
+            "mdui-navigation-bar",
+            "mdui-navigation-bar-item"
+        ]
+    },
+    "components--navigation-drawer": {
+        "key": "components--navigation-drawer",
+        "title": "侧边抽屉栏组件 NavigationDrawer",
+        "description": "侧边抽屉栏用于在页面侧边提供导航功能，使用户能够快速访问不同的页面或内容。",
+        "content": "# 侧边抽屉栏组件 NavigationDrawer\n\n侧边抽屉栏用于在页面侧边提供导航功能，使用户能够快速访问不同的页面或内容。\n\n通常，可以在侧边抽屉栏中使用 [`<mdui-list>`](/zh-cn/docs/2/components/list) 组件来添加导航项。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/navigation-drawer.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';\n```\n\n使用示例：\n\n```html\n<mdui-navigation-drawer close-on-overlay-click class=\"example-drawer\">\n  <mdui-button>关闭侧边抽屉栏</mdui-button>\n</mdui-navigation-drawer>\n\n<mdui-button>打开侧边抽屉栏</mdui-button>\n\n<script>\n  const navigationDrawer = document.querySelector(\".example-drawer\");\n  const openButton = navigationDrawer.nextElementSibling;\n  const closeButton = navigationDrawer.querySelector(\"mdui-button\");\n\n  openButton.addEventListener(\"click\", () => navigationDrawer.open = true);\n  closeButton.addEventListener(\"click\", () => navigationDrawer.open = false);\n</script>\n```\n\n**注意事项：**\n\n该组件默认使用 `position: fixed` 定位。\n\n当 `modal` 属性为 `false`，且断点大于等于 [`--mdui-breakpoint-md`](/zh-cn/docs/2/styles/design-tokens#breakpoint) 时，会自动在 `body` 上添加 `padding-left` 或 `padding-right` 样式，以避免页面内容被该组件遮挡。\n\n但在以下两种情况下，会默认使用 `position: absolute` 定位：\n\n1. `contained` 属性为 `true` 时。\n2. 当组件位于 [`<mdui-layout></mdui-layout>`](/zh-cn/docs/2/components/layout) 中时。此时不会添加 `padding-left` 或 `padding-right` 样式。\n\n## 示例 {#examples}\n\n### 位于指定容器内 {#example-contained}\n\n默认情况下，侧边抽屉栏会相对于当前窗口，在页面左侧或右侧显示。如果你希望把侧边抽屉栏放在指定容器内，可以添加 `contained` 属性，此时侧边抽屉栏会相对于父元素显示（你需要自行在父元素上添加样式 `position: relative; overflow: hidden;`）。\n\n```html\n<div class=\"example-contained\" style=\"position: relative; overflow: hidden\">\n  <mdui-navigation-drawer contained>\n    <mdui-button class=\"close\">关闭侧边抽屉栏</mdui-button>\n  </mdui-navigation-drawer>\n\n  <div style=\"height: 160px;\">\n    <mdui-button class=\"open\">打开侧边抽屉栏</mdui-button>\n  </div>\n</div>\n\n<script>\n  const example = document.querySelector(\".example-contained\");\n  const navigationDrawer = example.querySelector(\"mdui-navigation-drawer\");\n  const openButton = example.querySelector(\".open\");\n  const closeButton = example.querySelector(\".close\");\n\n  openButton.addEventListener(\"click\", () => navigationDrawer.open = true);\n  closeButton.addEventListener(\"click\", () => navigationDrawer.open = false);\n</script>\n```\n\n### 模态化 {#example-modal}\n\n添加 `modal` 属性可以在打开侧边抽屉栏时显示遮罩层。注意在窗口或父元素宽度小于 [`--mdui-breakpoint-md`](/zh-cn/docs/2/styles/design-tokens#breakpoint) 时，会无视该参数，始终会显示遮罩层。\n\n添加 `close-on-esc` 属性，可以在按下 ESC 键时关闭侧边抽屉栏。\n\n添加 `close-on-overlay-click` 属性，可以在点击遮罩层时关闭侧边抽屉栏。\n\n```html\n<div class=\"example-modal\" style=\"position: relative; overflow: hidden\">\n  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>\n    <mdui-button class=\"close\">关闭侧边抽屉栏</mdui-button>\n  </mdui-navigation-drawer>\n\n  <div style=\"height: 160px;\">\n    <mdui-button class=\"open\">打开侧边抽屉栏</mdui-button>\n  </div>\n</div>\n\n<script>\n  const example = document.querySelector(\".example-modal\");\n  const navigationDrawer = example.querySelector(\"mdui-navigation-drawer\");\n  const openButton = example.querySelector(\".open\");\n  const closeButton = example.querySelector(\".close\");\n\n  openButton.addEventListener(\"click\", () => navigationDrawer.open = true);\n  closeButton.addEventListener(\"click\", () => navigationDrawer.open = false);\n</script>\n```\n\n### 位于右侧 {#example-placement}\n\n通过将 `placement` 属性设置为 `right`，可以将侧边抽屉栏显示在页面右侧。\n\n```html\n<div class=\"example-placement\" style=\"position: relative; overflow: hidden\">\n  <mdui-navigation-drawer placement=\"right\" modal close-on-esc close-on-overlay-click contained>\n    <mdui-button class=\"close\">关闭侧边抽屉栏</mdui-button>\n  </mdui-navigation-drawer>\n\n  <div style=\"height: 160px;\">\n    <mdui-button class=\"open\">打开侧边抽屉栏</mdui-button>\n  </div>\n</div>\n\n<script>\n  const example = document.querySelector(\".example-placement\");\n  const navigationDrawer = example.querySelector(\"mdui-navigation-drawer\");\n  const openButton = example.querySelector(\".open\");\n  const closeButton = example.querySelector(\".close\");\n\n  openButton.addEventListener(\"click\", () => navigationDrawer.open = true);\n  closeButton.addEventListener(\"click\", () => navigationDrawer.open = false);\n</script>\n```\n\n",
+        "tagNames": [
+            "mdui-navigation-drawer"
+        ]
+    },
+    "components--navigation-rail": {
+        "key": "components--navigation-rail",
+        "title": "侧边导航栏组件 NavigationRail",
+        "description": "侧边导航栏为平板电脑和桌面电脑提供了访问不同主页面的方式。",
+        "content": "# 侧边导航栏组件 NavigationRail\n\n侧边导航栏为平板电脑和桌面电脑提供了访问不同主页面的方式。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/navigation-rail.js';\nimport 'mdui/components/navigation-rail-item.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { NavigationRail } from 'mdui/components/navigation-rail.js';\nimport type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';\n```\n\n使用示例：（示例中的 `style=\"position: relative\"` 是为了演示需要，实际使用时请移除该样式。）\n\n```html\n<mdui-navigation-rail value=\"recent\" style=\"position: relative\">\n  <mdui-navigation-rail-item icon=\"watch_later--outlined\" value=\"recent\">Recent</mdui-navigation-rail-item>\n  <mdui-navigation-rail-item icon=\"image--outlined\" value=\"images\">Images</mdui-navigation-rail-item>\n  <mdui-navigation-rail-item icon=\"library_music--outlined\" value=\"library\">Library</mdui-navigation-rail-item>\n</mdui-navigation-rail>\n```\n\n**注意事项：**\n\n该组件默认使用 `position: fixed` 定位，并会自动在 `body` 上添加 `padding-left` 或 `padding-right` 样式，以防止页面内容被该组件遮挡。\n\n但在以下两种情况下，会默认使用 `position: absolute` 定位：\n\n1. `<mdui-navigation-rail>` 组件的 `contained` 属性为 `true` 时。此时会在父元素上添加 `padding-left` 或 `padding-right` 样式。\n2. 当位于 [`<mdui-layout></mdui-layout>`](/zh-cn/docs/2/components/layout) 组件中时。此时不会添加 `padding-left` 或 `padding-right` 样式。\n\n## 样式 {#examples}\n\n### 位于指定容器内 {#example-contained}\n\n默认情况下，侧边导航栏会相对于当前窗口，在页面左侧或右侧显示。如果你希望将侧边导航栏放在指定的容器内，可以在 `<mdui-navigation-rail>` 组件上添加 `contained` 属性，此时侧边导航栏会相对于其父元素显示（你需要自行在父元素上添加 `position: relative` 样式）。\n\n```html\n<div style=\"position: relative\">\n  <mdui-navigation-rail contained>\n    <mdui-navigation-rail-item icon=\"watch_later--outlined\">Recent</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"image--outlined\">Images</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"library_music--outlined\">Library</mdui-navigation-rail-item>\n  </mdui-navigation-rail>\n\n  <div style=\"height: 260px;overflow: auto\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n### 位于右侧 {#example-placement}\n\n在 `<mdui-navigation-rail>` 组件上设置 `placement` 属性为 `right`，可以将侧边导航栏显示在右侧。\n\n```html\n<div style=\"position: relative\">\n  <mdui-navigation-rail placement=\"right\" contained>\n    <mdui-navigation-rail-item icon=\"watch_later--outlined\">Recent</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"image--outlined\">Images</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"library_music--outlined\">Library</mdui-navigation-rail-item>\n  </mdui-navigation-rail>\n\n  <div style=\"height: 260px;overflow: auto\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n### 显示分割线 {#example-divider}\n\n在 `<mdui-navigation-rail>` 组件上添加 `divider` 属性，可以在侧边导航栏上添加一条分割线，以便和页面内容区分开。\n\n```html\n<div style=\"position: relative\">\n  <mdui-navigation-rail divider contained>\n    <mdui-navigation-rail-item icon=\"watch_later--outlined\">Recent</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"image--outlined\">Images</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"library_music--outlined\">Library</mdui-navigation-rail-item>\n  </mdui-navigation-rail>\n\n  <div style=\"height: 260px;overflow: auto\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n### 在顶部/底部添加元素 {#example-top-bottom}\n\n可以在 `<mdui-navigation-rail>` 组件内通过 `top`、`bottom` slot 在顶部和底部添加元素。\n\n```html\n<div style=\"position: relative\">\n  <mdui-navigation-rail contained>\n    <mdui-button-icon icon=\"menu\" slot=\"top\"></mdui-button-icon>\n    <mdui-fab lowered icon=\"edit--outlined\" slot=\"top\"></mdui-fab>\n    <mdui-button-icon icon=\"settings\" slot=\"bottom\"></mdui-button-icon>\n\n    <mdui-navigation-rail-item icon=\"watch_later--outlined\">Recent</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"image--outlined\">Images</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"library_music--outlined\">Library</mdui-navigation-rail-item>\n  </mdui-navigation-rail>\n\n  <div style=\"height: 600px;overflow: auto\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n### 导航项垂直对齐方式 {#example-alignment}\n\n通过设置 `<mdui-navigation-rail>` 组件的 `alignment` 属性，可以修改导航项的垂直对齐方式。\n\n```html\n<div class=\"example-alignment\" style=\"position: relative\">\n  <mdui-navigation-rail alignment=\"start\" contained>\n    <mdui-navigation-rail-item icon=\"watch_later--outlined\">Recent</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"image--outlined\">Images</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"library_music--outlined\">Library</mdui-navigation-rail-item>\n  </mdui-navigation-rail>\n\n  <div style=\"height: 360px;overflow: auto\">\n    <mdui-segmented-button-group value=\"start\" selects=\"single\">\n      <mdui-segmented-button value=\"start\">start</mdui-segmented-button>\n      <mdui-segmented-button value=\"center\">center</mdui-segmented-button>\n      <mdui-segmented-button value=\"end\">end</mdui-segmented-button>\n    </mdui-segmented-button-group>\n  </div>\n</div>\n\n<script>\n  const example = document.querySelector(\".example-alignment\");\n  const navigationRail = example.querySelector(\"mdui-navigation-rail\");\n  const segmentedButtonGroup = example.querySelector(\"mdui-segmented-button-group\");\n\n  segmentedButtonGroup.addEventListener(\"change\", (event) => {\n    navigationRail.alignment = event.target.value;\n  });\n</script>\n```\n\n### 图标 {#example-icon}\n\n在 `<mdui-navigation-rail-item>` 组件上，可以使用 `icon` 属性设置未激活状态的导航项图标，使用 `active-icon` 属性设置激活状态的导航项图标。也可以用 `icon` 和 `active-icon` slot 设置未激活和激活状态的图标元素。\n\n```html\n<div style=\"position: relative\">\n  <mdui-navigation-rail contained>\n    <mdui-navigation-rail-item icon=\"watch_later--outlined\">Recent</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"image--outlined\" active-icon=\"image--filled\">Images</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item>\n      Library\n      <mdui-icon slot=\"icon\" name=\"library_music--outlined\"></mdui-icon>\n      <mdui-icon slot=\"active-icon\" name=\"library_music--filled\"></mdui-icon>\n    </mdui-navigation-rail-item>\n  </mdui-navigation-rail>\n\n  <div style=\"height: 260px;overflow: auto\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n### 仅使用图标 {#example-no-label}\n\n`<mdui-navigation-rail-item>` 组件可以仅使用图标，不添加文本。\n\n```html\n<div style=\"position: relative\">\n  <mdui-navigation-rail contained>\n    <mdui-navigation-rail-item icon=\"watch_later--outlined\"></mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"image--outlined\"></mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"library_music--outlined\"></mdui-navigation-rail-item>\n  </mdui-navigation-rail>\n\n  <div style=\"height: 260px;overflow: auto\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n### 链接 {#example-link}\n\n在 `<mdui-navigation-rail-item>` 组件上设置 `href` 属性，可以使导航项变为链接。此时，您还可以使用这些和链接相关的属性：`download`、`target`、`rel`。\n\n```html\n<div style=\"position: relative\">\n  <mdui-navigation-rail divider contained>\n    <mdui-navigation-rail-item\n      href=\"https://www.mdui.org\"\n      target=\"_blank\"\n      icon=\"watch_later--outlined\"\n    >Recent</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"image--outlined\">Images</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"library_music--outlined\">Library</mdui-navigation-rail-item>\n  </mdui-navigation-rail>\n\n  <div style=\"height: 260px;overflow: auto\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n### 徽标 {#example-badge}\n\n在 `<mdui-navigation-rail-item>` 组件中，可以通过 `badge` slot 添加徽标。\n\n```html\n<div style=\"position: relative\">\n  <mdui-navigation-rail contained>\n    <mdui-navigation-rail-item icon=\"watch_later--outlined\">\n      Recent\n      <mdui-badge slot=\"badge\">99+</mdui-badge>\n    </mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"image--outlined\">Images</mdui-navigation-rail-item>\n    <mdui-navigation-rail-item icon=\"library_music--outlined\">Library</mdui-navigation-rail-item>\n  </mdui-navigation-rail>\n\n  <div style=\"height: 260px;overflow: auto\">\n    <div style=\"height: 1000px\">页面内容</div>\n  </div>\n</div>\n```\n\n",
+        "tagNames": [
+            "mdui-navigation-rail",
+            "mdui-navigation-rail-item"
+        ]
+    },
+    "components--radio": {
+        "key": "components--radio",
+        "title": "单选框组件 Radio",
+        "description": "单选框用于让用户在一组选项中选择其中一个，确保每次只能选中一个选项。",
+        "content": "# 单选框组件 Radio\n\n单选框用于让用户在一组选项中选择其中一个，确保每次只能选中一个选项。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/radio-group.js';\nimport 'mdui/components/radio.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { RadioGroup } from 'mdui/components/radio-group.js';\nimport type { Radio } from 'mdui/components/radio.js';\n```\n\n使用示例：\n\n```html\n<mdui-radio-group value=\"chinese\">\n  <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n  <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```\n\n## 示例 {#examples}\n\n### 选中状态 {#example-checked}\n\n`<mdui-radio-group>` 组件的 `value` 属性值即当前选中的 `<mdui-radio>` 组件的 `value` 属性值。您也可以通过更新 `<mdui-radio-group>` 组件的 `value` 属性值，来切换当前选中的单选框。\n\n```html\n<mdui-radio-group value=\"chinese\">\n  <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n  <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```\n\n可以单独使用 `<mdui-radio>` 组件，此时可以通过 `checked` 属性来读取和修改选中状态。\n\n```html\n<mdui-radio checked>Radio</mdui-radio>\n```\n\n### 禁用状态 {#example-disabled}\n\n通过在 `<mdui-radio-group>` 组件上添加 `disabled` 属性，可以禁用整个单选框组。\n\n```html\n<mdui-radio-group disabled>\n  <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n  <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```\n\n如果需要禁用特定的单选框，可以在 `<mdui-radio>` 组件上添加 `disabled` 属性。\n\n```html\n<mdui-radio-group>\n  <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n  <mdui-radio value=\"english\" disabled>English</mdui-radio>\n</mdui-radio-group>\n```\n\n### 图标 {#example-icon}\n\n可以通过设置 `unchecked-icon` 和 `checked-icon` 属性，分别定义未选中和选中状态下的单选框的 Material Icons 图标。也可以通过 `unchecked-icon` 和 `checked-icon` slot 来设置。\n\n```html\n<mdui-radio-group value=\"chinese\">\n  <mdui-radio\n    unchecked-icon=\"check_box_outline_blank\"\n    checked-icon=\"lock\"\n    value=\"chinese\"\n  >Chinese</mdui-radio>\n  <mdui-radio value=\"english\">\n    <mdui-icon slot=\"unchecked-icon\" name=\"check_box_outline_blank\"></mdui-icon>\n    <mdui-icon slot=\"checked-icon\" name=\"lock\"></mdui-icon>\n    English\n  </mdui-radio>\n</mdui-radio-group>\n```\n\n",
+        "tagNames": [
+            "mdui-radio-group",
+            "mdui-radio"
+        ]
+    },
+    "components--range-slider": {
+        "key": "components--range-slider",
+        "title": "范围滑块组件 RangeSlider",
+        "description": "范围滑块组件用于让用户在一系列值中选择一个范围。",
+        "content": "# 范围滑块组件 RangeSlider\n\n范围滑块组件用于让用户在一系列值中选择一个范围。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/range-slider.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { RangeSlider } from 'mdui/components/range-slider.js';\n```\n\n使用示例：\n\n```html\n<mdui-range-slider></mdui-range-slider>\n```\n\n## 示例 {#examples}\n\n### 默认值 {#example-value}\n\n通过 `value` 属性，可以读取或设置范围滑块的当前值。该属性值是一个数组，只能通过 JavaScript 属性进行读取和设置。\n\n```html\n<mdui-range-slider class=\"example-value\"></mdui-range-slider>\n\n<script>\n  const slider = document.querySelector(\".example-value\");\n  slider.value = [30, 70];\n</script>\n```\n\n### 禁用状态 {#example-disabled}\n\n添加 `disabled` 属性可以禁用范围滑块。\n\n```html\n<mdui-range-slider disabled></mdui-range-slider>\n```\n\n### 范围 {#example-min-max}\n\n使用 `min` 和 `max` 属性设置范围滑块的最小值和最大值。\n\n```html\n<mdui-range-slider min=\"10\" max=\"20\"></mdui-range-slider>\n```\n\n### 步进间隔 {#example-step}\n\n使用 `step` 属性设置范围滑块的步进间隔。\n\n```html\n<mdui-range-slider step=\"10\"></mdui-range-slider>\n```\n\n### 刻度标记 {#example-tickmarks}\n\n添加 `tickmarks` 属性可以在范围滑块上添加刻度标记。\n\n```html\n<mdui-range-slider tickmarks step=\"10\"></mdui-range-slider>\n```\n\n### 隐藏文本提示 {#example-nolabel}\n\n添加 `nolabel` 属性可以隐藏范围滑块上的文本提示。\n\n```html\n<mdui-range-slider nolabel></mdui-range-slider>\n```\n\n### 修改文本提示 {#example-labelFormatter}\n\n通过 `labelFormatter` JavaScript 属性，可以修改文本提示的显示格式。该属性值是一个函数，函数参数为当前范围滑块的值，返回值为你期望显示的文本。\n\n```html\n<mdui-range-slider class=\"example-label-formatter\"></mdui-range-slider>\n\n<script>\n  const slider = document.querySelector(\".example-label-formatter\");\n  slider.labelFormatter = (value) => `${value} 小时`;\n</script>\n```\n\n",
+        "tagNames": [
+            "mdui-range-slider"
+        ]
+    },
+    "components--segmented-button": {
+        "key": "components--segmented-button",
+        "title": "分段按钮组件 SegmentedButton",
+        "description": "分段按钮组件封装了一组按钮，用于提供选项、切换视图或对元素进行排序等。",
+        "content": "# 分段按钮组件 SegmentedButton\n\n分段按钮组件封装了一组按钮，用于提供选项、切换视图或对元素进行排序等。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/segmented-button-group.js';\nimport 'mdui/components/segmented-button.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js';\nimport type { SegmentedButton } from 'mdui/components/segmented-button.js';\n```\n\n使用示例：\n\n```html\n<mdui-segmented-button-group>\n  <mdui-segmented-button>Day</mdui-segmented-button>\n  <mdui-segmented-button>Week</mdui-segmented-button>\n  <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```\n\n## 示例 {#examples}\n\n### 全宽显示 {#example-full-width}\n\n在 `<mdui-segmented-button-group>` 元素上添加 `full-width` 属性，可使组件占据全部宽度。\n\n```html\n<mdui-segmented-button-group full-width>\n  <mdui-segmented-button>Day</mdui-segmented-button>\n  <mdui-segmented-button>Week</mdui-segmented-button>\n  <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```\n\n### 单选模式 {#example-selects-single}\n\n在 `<mdui-segmented-button-group>` 元素上指定 `selects` 属性为 `single`，可以实现单选模式。此时 `<mdui-segmented-button-group>` 的 `value` 属性值即为当前选中的 `<mdui-segmented-button>` 的 `value` 属性的值。\n\n```html\n<mdui-segmented-button-group selects=\"single\">\n  <mdui-segmented-button value=\"day\">Day</mdui-segmented-button>\n  <mdui-segmented-button value=\"week\">Week</mdui-segmented-button>\n  <mdui-segmented-button value=\"month\">Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n\n<mdui-segmented-button-group selects=\"single\" value=\"week\">\n  <mdui-segmented-button value=\"day\">Day</mdui-segmented-button>\n  <mdui-segmented-button value=\"week\">Week</mdui-segmented-button>\n  <mdui-segmented-button value=\"month\">Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```\n\n### 多选模式 {#example-selects-multiple}\n\n在 `<mdui-segmented-button-group>` 元素上指定 `selects` 属性为 `multiple`，可以实现多选模式。此时 `<mdui-segmented-button-group>` 的 `value` 属性值为当前选中的 `<mdui-segmented-button>` 的 `value` 属性的值组成的数组。\n\n注意：在多选模式下，`<mdui-segmented-button-group>` 的 `value` 属性值为数组，只能通过 JavaScript 属性来读取和设置该值。\n\n```html\n<mdui-segmented-button-group selects=\"multiple\">\n  <mdui-segmented-button value=\"day\">Day</mdui-segmented-button>\n  <mdui-segmented-button value=\"week\">Week</mdui-segmented-button>\n  <mdui-segmented-button value=\"month\">Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n\n<mdui-segmented-button-group selects=\"multiple\" class=\"demo-multiple\">\n  <mdui-segmented-button value=\"day\">Day</mdui-segmented-button>\n  <mdui-segmented-button value=\"week\">Week</mdui-segmented-button>\n  <mdui-segmented-button value=\"month\">Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n\n<script>\n  // 设置默认选中 week 和 month\n  const group = document.querySelector(\".demo-multiple\");\n  group.value = [\"week\", \"month\"];\n</script>\n```\n\n### 图标 {#example-icon}\n\n在 `<mdui-segmented-button>` 元素上，通过设置 `icon` 和 `end-icon` 属性，可以在按钮的左侧和右侧添加 Material Icons 图标。另外，也可以通过 `icon` 和 `end-icon` slot 在按钮的左侧和右侧添加元素。\n\n```html\n<mdui-segmented-button-group>\n  <mdui-segmented-button icon=\"search\">Day</mdui-segmented-button>\n  <mdui-segmented-button end-icon=\"arrow_forward\">Week</mdui-segmented-button>\n  <mdui-segmented-button>\n    Month\n    <mdui-icon slot=\"icon\" name=\"downloading\"></mdui-icon>\n    <mdui-icon slot=\"end-icon\" name=\"attach_file\"></mdui-icon>\n  </mdui-segmented-button>\n</mdui-segmented-button-group>\n```\n\n在 `<mdui-segmented-button>` 元素上，通过添加 `selected-icon` 属性，可以设置选中状态的 Material Icons 图标。也可以通过 `selected-icon` slot 进行设置。\n\n```html\n<mdui-segmented-button-group selects=\"multiple\">\n  <mdui-segmented-button value=\"day\" selected-icon=\"cloud_done\">Day</mdui-segmented-button>\n  <mdui-segmented-button value=\"week\">\n    <mdui-icon slot=\"selected-icon\" name=\"cloud_done\"></mdui-icon>\n    Week\n  </mdui-segmented-button>\n</mdui-segmented-button-group>\n```\n\n### 链接 {#example-link}\n\n在 `<mdui-segmented-button>` 元素上，通过设置 `href` 属性，可以将按钮转换为链接。此时，还可以使用与链接相关的属性，如：`download`、`target`、`rel`。\n\n```html\n<mdui-segmented-button-group>\n  <mdui-segmented-button href=\"https://www.mdui.org\" target=\"_blank\">Link</mdui-segmented-button>\n  <mdui-segmented-button>Week</mdui-segmented-button>\n  <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```\n\n### 禁用及加载中状态 {#example-disabled}\n\n在 `<mdui-segmented-button-group>` 元素上，通过添加 `disabled` 属性，可以禁用整个分段按钮组。\n\n```html\n<mdui-segmented-button-group disabled>\n  <mdui-segmented-button>Day</mdui-segmented-button>\n  <mdui-segmented-button>Week</mdui-segmented-button>\n  <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```\n\n在 `<mdui-segmented-button>` 元素上，通过添加 `disabled` 属性，可以禁用特定按钮；通过添加 `loading` 属性，可以为特定按钮添加加载中状态。\n\n```html\n<mdui-segmented-button-group>\n  <mdui-segmented-button>Day</mdui-segmented-button>\n  <mdui-segmented-button disabled>Week</mdui-segmented-button>\n  <mdui-segmented-button loading>Month</mdui-segmented-button>\n  <mdui-segmented-button disabled loading>Year</mdui-segmented-button>\n</mdui-segmented-button-group>\n```\n\n",
+        "tagNames": [
+            "mdui-segmented-button-group",
+            "mdui-segmented-button"
+        ]
+    },
+    "components--select": {
+        "key": "components--select",
+        "title": "选择框组件 Select",
+        "description": "下拉选择组件在一个下拉菜单中提供多种选项，方便用户快速选择所需内容。",
+        "content": "# 选择框组件 Select\n\n下拉选择组件在一个下拉菜单中提供多种选项，方便用户快速选择所需内容。\n\n本页面主要介绍 `<mdui-select>` 组件的使用方法，关于下拉菜单项的用法，请参见 [`<mdui-menu-item>`](/zh-cn/docs/2/components/menu#menu-item-api)。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/select.js';\nimport 'mdui/components/menu-item.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Select } from 'mdui/components/select.js';\nimport type { MenuItem } from 'mdui/components/menu-item.js';\n```\n\n使用示例：\n\n```html\n<mdui-select value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```\n\n## 示例 {#examples}\n\n### 形状 {#example-variant}\n\n通过 `variant` 属性设置下拉选择的形状。\n\n```html\n<mdui-select variant=\"filled\" value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n\n<mdui-select variant=\"outlined\" value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```\n\n### 多选支持 {#example-multiple}\n\n下拉选择默认为单选，`<mdui-select>` 组件的 `value` 值即为当前选中的 [`<mdui-menu-item>`](/zh-cn/docs/2/components/menu#menu-item-api) 的 `value` 值。\n\n添加 `multiple` 属性可以使下拉选择支持多选。此时 `<mdui-select>` 的 `value` 值为当前选中的 [`<mdui-menu-item>`](/zh-cn/docs/2/components/menu#menu-item-api) 的 `value` 的值组成的数组。\n\n注意：在支持多选时，`<mdui-select>` 的 `value` 值为数组，只能通过 JavaScript 属性来读取和设置该值。\n\n```html\n<mdui-select multiple class=\"example-multiple\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n  <mdui-menu-item value=\"item-3\">Item 3</mdui-menu-item>\n</mdui-select>\n\n<script>\n  // 默认选中 item-1 和 item-2\n  const select = document.querySelector(\".example-multiple\");\n  select.value = [\"item-1\", \"item-2\"];\n</script>\n```\n\n### 辅助文本 {#example-helper-text}\n\n使用 `label` 属性设置下拉选择上方的标签文本。\n\n```html\n<mdui-select label=\"Text Field\" value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```\n\n使用 `placeholder` 属性设置未选中值时的占位文本。\n\n```html\n<mdui-select placeholder=\"Placeholder\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```\n\n使用 `helper` 属性设置下拉选择底部的帮助文本。也可以使用 `helper` slot 来设置帮助文本。\n\n```html\n<mdui-select helper=\"Supporting text\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n\n<mdui-select>\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n  <span slot=\"helper\" style=\"color: blue\">Supporting text</span>\n</mdui-select>\n```\n\n### 只读模式 {#example-readonly}\n\n通过添加 `readonly` 属性，可以将下拉选择设置为只读模式。\n\n```html\n<mdui-select readonly value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```\n\n### 禁用模式 {#example-disabled}\n\n通过添加 `disabled` 属性，可以禁用下拉选择。\n\n```html\n<mdui-select disabled value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```\n\n### 可清空 {#example-clearable}\n\n添加 `clearable` 属性后，当下拉选择有值时，右侧会出现一个清空按钮。\n\n```html\n<mdui-select clearable value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```\n\n也可以通过 `clear` slot 自定义清空按钮。\n\n```html\n<mdui-select clearable value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n  <mdui-icon slot=\"clear\" name=\"delete\"></mdui-icon>\n</mdui-select>\n```\n\n### 下拉菜单位置 {#example-placement}\n\n通过 `placement` 属性，你可以设置下拉菜单的位置。\n\n```html\n<mdui-select placement=\"top\" value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```\n\n### 文本右对齐 {#example-end-aligned}\n\n添加 `end-aligned` 属性，可以使文本右对齐。\n\n```html\n<mdui-select end-aligned value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```\n\n### 前后文本及图标 {#example-prefix-suffix}\n\n通过设置 `icon` 和 `end-icon` 属性，可以在下拉选择的左侧和右侧添加 Material Icons 图标。你也可以通过 `icon` 和 `end-icon` slot 在下拉选择的左侧和右侧添加元素。\n\n```html\n<mdui-select value=\"item-1\" icon=\"search\" end-icon=\"mic\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n\n<br/><br/>\n\n<mdui-select value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n  <mdui-button-icon slot=\"icon\" icon=\"search\"></mdui-button-icon>\n  <mdui-button-icon slot=\"end-icon\" icon=\"mic\"></mdui-button-icon>\n</mdui-select>\n```\n\n通过设置 `prefix` 和 `suffix` 属性，可以在下拉选择的左侧和右侧添加文本。也可以通过 `prefix` 和 `suffix` slot 在下拉选择的左侧和右侧添加文本元素。这些文本只有在下拉选择聚焦或有值时才会显示。\n\n```html\n<mdui-select value=\"item-1\" prefix=\"$\" suffix=\"/100\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n\n<br/><br/>\n\n<mdui-select value=\"item-1\">\n  <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n  <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n  <span slot=\"prefix\" style=\"color: blue\">$</span>\n  <span slot=\"suffix\" style=\"color: blue\">/100</span>\n</mdui-select>\n```\n\n",
+        "tagNames": [
+            "mdui-select"
+        ]
+    },
+    "components--slider": {
+        "key": "components--slider",
+        "title": "滑块组件 Slider",
+        "description": "滑块组件允许用户通过滑动滑块从一系列值中进行选择。",
+        "content": "# 滑块组件 Slider\n\n滑块组件允许用户通过滑动滑块从一系列值中进行选择。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/slider.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Slider } from 'mdui/components/slider.js';\n```\n\n使用示例：\n\n```html\n<mdui-slider></mdui-slider>\n```\n\n## 示例 {#examples}\n\n### 默认值 {#example-value}\n\n通过 `value` 属性，可以读取或设置滑块的当前值。\n\n```html\n<mdui-slider value=\"50\"></mdui-slider>\n```\n\n### 禁用状态 {#example-disabled}\n\n添加 `disabled` 属性可以禁用滑块。\n\n```html\n<mdui-slider disabled></mdui-slider>\n```\n\n### 范围 {#example-min-max}\n\n使用 `min` 和 `max` 属性来设置滑块的最小值和最大值。\n\n```html\n<mdui-slider min=\"10\" max=\"20\"></mdui-slider>\n```\n\n### 步进间隔 {#example-step}\n\n通过 `step` 属性，你可以设置滑块的步进间隔。\n\n```html\n<mdui-slider step=\"10\"></mdui-slider>\n```\n\n### 刻度标记 {#example-tickmarks}\n\n添加 `tickmarks` 属性，可以在滑块上显示刻度标记。\n\n```html\n<mdui-slider tickmarks step=\"10\"></mdui-slider>\n```\n\n### 隐藏文本提示 {#example-nolabel}\n\n如果你想隐藏滑块上的文本提示，可以添加 `nolabel` 属性。\n\n```html\n<mdui-slider nolabel></mdui-slider>\n```\n\n### 修改文本提示 {#example-labelFormatter}\n\n可以通过 `labelFormatter` JavaScript 属性来修改文本提示的显示格式。这个属性的值应该是一个函数，该函数接收当前滑块的值作为参数，返回你希望显示的文本。\n\n```html\n<mdui-slider class=\"example-label-formatter\"></mdui-slider>\n\n<script>\n  const slider = document.querySelector(\".example-label-formatter\");\n  slider.labelFormatter = (value) => `${value} 小时`;\n</script>\n```\n\n",
+        "tagNames": [
+            "mdui-slider"
+        ]
+    },
+    "components--snackbar": {
+        "key": "components--snackbar",
+        "title": "消息条组件 Snackbar",
+        "description": "消息条组件用于在页面中展示简短的应用程序进程信息。",
+        "content": "# 消息条组件 Snackbar\n\n消息条组件用于在页面中展示简短的应用程序进程信息。\n\n除了直接使用该组件外，mdui 还提供了一个 [`mdui.snackbar`](/zh-cn/docs/2/functions/snackbar) 函数，以简化 Snackbar 组件的使用。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/snackbar.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Snackbar } from 'mdui/components/snackbar.js';\n```\n\n使用示例：\n\n```html\n<mdui-snackbar class=\"example-snackbar\">Photo archived</mdui-snackbar>\n\n<mdui-button>打开 Snackbar</mdui-button>\n\n<script>\n  const snackbar = document.querySelector(\".example-snackbar\");\n  const openButton = snackbar.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => snackbar.open = true);\n</script>\n```\n\n## 示例 {#examples}\n\n### 位置 {#example-placement}\n\n通过 `placement` 属性，你可以设置 Snackbar 的显示位置。\n\n```html\n<div class=\"example-placement\">\n  <div class=\"row\">\n    <mdui-snackbar placement=\"top-start\">Photo archived</mdui-snackbar>\n    <mdui-button variant=\"outlined\">top-start</mdui-button>\n\n    <mdui-snackbar placement=\"top\">Photo archived</mdui-snackbar>\n    <mdui-button variant=\"outlined\">top</mdui-button>\n\n    <mdui-snackbar placement=\"top-end\">Photo archived</mdui-snackbar>\n    <mdui-button variant=\"outlined\">top-end</mdui-button>\n  </div>\n  <div class=\"row\">\n    <mdui-snackbar placement=\"bottom-start\">Photo archived</mdui-snackbar>\n    <mdui-button variant=\"outlined\">bottom-start</mdui-button>\n\n    <mdui-snackbar placement=\"bottom\">Photo archived</mdui-snackbar>\n    <mdui-button variant=\"outlined\">bottom</mdui-button>\n\n    <mdui-snackbar placement=\"bottom-end\">Photo archived</mdui-snackbar>\n    <mdui-button variant=\"outlined\">bottom-end</mdui-button>\n  </div>\n</div>\n\n<script>\n  const snackbars = document.querySelectorAll(\".example-placement mdui-snackbar\");\n\n  snackbars.forEach((snackbar) => {\n    const button = snackbar.nextElementSibling;\n    button.addEventListener(\"click\", () => snackbar.open = true);\n  });\n</script>\n\n<style>\n.example-placement mdui-button {\n  margin: 0.25rem;\n  width: 7.5rem;\n}\n</style>\n```\n\n### 操作按钮 {#example-action}\n\n可以使用 `action` 属性在 Snackbar 的右侧添加一个操作按钮，并通过该属性指定按钮的文本。点击操作按钮会触发 `action-click` 事件。如果你想让操作按钮显示为加载中状态，可以添加 `action-loading` 属性。\n\n```html\n<mdui-snackbar action=\"Undo\" class=\"example-action\">Photo archived</mdui-snackbar>\n\n<mdui-button>打开 Snackbar</mdui-button>\n\n<script>\n  const snackbar = document.querySelector(\".example-action\");\n  const openButton = snackbar.nextElementSibling;\n\n  snackbar.addEventListener(\"action-click\", () => {\n    snackbar.actionLoading = true;\n    setTimeout(() => snackbar.actionLoading = false, 2000);\n  });\n\n  openButton.addEventListener(\"click\", () => snackbar.open = true);\n</script>\n```\n\n也可以通过 `action` slot 在 Snackbar 的右侧添加自定义元素。\n\n```html\n<mdui-snackbar class=\"example-action-slot\">\n  Photo archived\n  <mdui-button slot=\"action\" variant=\"text\">Undo</mdui-button>\n</mdui-snackbar>\n\n<mdui-button>打开 Snackbar</mdui-button>\n\n<script>\n  const snackbar = document.querySelector(\".example-action-slot\");\n  const openButton = snackbar.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => snackbar.open = true);\n</script>\n```\n\n### 可关闭 {#example-closeable}\n\n添加 `closeable` 属性后，Snackbar 的右侧会出现一个关闭按钮。点击该按钮会关闭 Snackbar，并触发 `close` 事件。\n\n```html\n<mdui-snackbar closeable class=\"example-closeable\">Photo archived</mdui-snackbar>\n\n<mdui-button>打开 Snackbar</mdui-button>\n\n<script>\n  const snackbar = document.querySelector(\".example-closeable\");\n  const openButton = snackbar.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => snackbar.open = true);\n</script>\n```\n\n可以通过 `close-button` slot 来自定义关闭按钮的元素。\n\n```html\n<mdui-snackbar closeable class=\"example-close-button-slot\">\n  Photo archived\n  <mdui-avatar slot=\"close-button\" icon=\"people_alt\"></mdui-avatar>\n</mdui-snackbar>\n\n<mdui-button>打开 Snackbar</mdui-button>\n\n<script>\n  const snackbar = document.querySelector(\".example-close-button-slot\");\n  const openButton = snackbar.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => snackbar.open = true);\n</script>\n```\n\n通过设置 `close-icon` 属性，你可以修改默认关闭按钮中的 Material Icons 图标。也可以通过 `close-icon` slot 来自定义关闭按钮中的图标元素。\n\n```html\n<mdui-snackbar\n  closeable\n  close-icon=\"delete\"\n  class=\"example-close-icon\"\n>Photo archived</mdui-snackbar>\n\n<mdui-button>打开 Snackbar</mdui-button>\n\n<script>\n  const snackbar = document.querySelector(\".example-close-icon\");\n  const openButton = snackbar.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => snackbar.open = true);\n</script>\n```\n\n### 文本行数 {#example-message-line}\n\n默认情况下，消息文本没有行数限制。你可以通过 `message-line` 属性来限制文本行数，最多可以设置为 2 行。\n\n```html\n<mdui-snackbar message-line=\"1\" class=\"example-line\">The item already has the label \"travel\". You can add a new label. You can add a new label.</mdui-snackbar>\n\n<mdui-button>打开 Snackbar</mdui-button>\n\n<script>\n  const snackbar = document.querySelector(\".example-line\");\n  const openButton = snackbar.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => snackbar.open = true);\n</script>\n```\n\n### 自动关闭延时 {#example-auto-close-delay}\n\n可以使用 `auto-close-delay` 属性来设置自动关闭的延时，单位为毫秒。默认值为 5000 毫秒。\n\n```html\n<mdui-snackbar auto-close-delay=\"2000\" class=\"example-close-delay\">Photo archived</mdui-snackbar>\n\n<mdui-button>打开 Snackbar</mdui-button>\n\n<script>\n  const snackbar = document.querySelector(\".example-close-delay\");\n  const openButton = snackbar.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => snackbar.open = true);\n</script>\n```\n\n### 点击外部区域关闭 {#example-close-on-outside-click}\n\n通过添加 `close-on-outside-click` 属性，你可以设置在点击 Snackbar 外部区域时关闭 Snackbar。\n\n```html\n<mdui-snackbar close-on-outside-click class=\"example-outside\">Photo archived</mdui-snackbar>\n\n<mdui-button>打开 Snackbar</mdui-button>\n\n<script>\n  const snackbar = document.querySelector(\".example-outside\");\n  const openButton = snackbar.nextElementSibling;\n\n  openButton.addEventListener(\"click\", () => snackbar.open = true);\n</script>\n```\n\n",
+        "tagNames": [
+            "mdui-snackbar"
+        ]
+    },
+    "components--switch": {
+        "key": "components--switch",
+        "title": "开关切换组件 Switch",
+        "description": "开关组件用于切换单个选项的开启或关闭状态，通过直观的交互设计，让用户能轻松调整设置。",
+        "content": "# 开关切换组件 Switch\n\n开关组件用于切换单个选项的开启或关闭状态，通过直观的交互设计，让用户能轻松调整设置。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/switch.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Switch } from 'mdui/components/switch.js';\n```\n\n使用示例：\n\n```html\n<mdui-switch></mdui-switch>\n```\n\n## 示例 {#examples}\n\n### 选中状态 {#example-checked}\n\n当开关被选中时，`checked` 属性的值为 `true`。你也可以通过添加 `checked` 属性，使开关默认处于选中状态。\n\n```html\n<mdui-switch checked></mdui-switch>\n```\n\n### 禁用状态 {#example-disabled}\n\n通过添加 `disabled` 属性，可以禁用开关组件。\n\n```html\n<mdui-switch disabled></mdui-switch>\n<mdui-switch disabled checked></mdui-switch>\n```\n\n### 图标 {#example-icon}\n\n可以通过 `unchecked-icon` 属性来设置未选中状态的 Material Icons 图标，通过 `checked-icon` 属性来设置选中状态的 Material Icons 图标。也可以通过 `unchecked-icon` 和 `checked-icon` slot 来自定义未选中和选中状态的图标元素。\n\n```html\n<mdui-switch unchecked-icon=\"remove_moderator\" checked-icon=\"verified_user\"></mdui-switch>\n<mdui-switch>\n  <mdui-icon slot=\"unchecked-icon\" name=\"remove_moderator\"></mdui-icon>\n  <mdui-icon slot=\"checked-icon\" name=\"verified_user\"></mdui-icon>\n</mdui-switch>\n```\n\n",
+        "tagNames": [
+            "mdui-switch"
+        ]
+    },
+    "components--tabs": {
+        "key": "components--tabs",
+        "title": "选项卡组件 Tabs",
+        "description": "选项卡组件用于将内容或数据集分组并展示，方便用户在不同类别之间快速切换。",
+        "content": "# 选项卡组件 Tabs\n\n选项卡组件用于将内容或数据集分组并展示，方便用户在不同类别之间快速切换。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/tabs.js';\nimport 'mdui/components/tab.js';\nimport 'mdui/components/tab-panel.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Tabs } from 'mdui/components/tabs.js';\nimport type { Tab } from 'mdui/components/tab.js';\nimport type { TabPanel } from 'mdui/components/tab-panel.js';\n```\n\n使用示例：\n\n```html\n<mdui-tabs value=\"tab-1\">\n  <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```\n\n## 示例 {#examples}\n\n### 选项卡样式 {#example-variant}\n\n通过在 `<mdui-tabs>` 组件上使用 `variant` 属性，可以设置选项卡的样式。\n\n```html\n<mdui-tabs value=\"tab-1\" variant=\"primary\">\n  <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n\n<mdui-tabs value=\"tab-1\" variant=\"secondary\">\n  <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```\n\n### 选项卡位置 {#example-placement}\n\n在 `<mdui-tabs>` 组件上使用 `placement` 属性，可以设置选项卡的位置。\n\n```html\n<mdui-select class=\"example-change-placement\" placeholder=\"选择 placement 值\" style=\"width: 180px\">\n  <mdui-menu-item value=\"top-start\">top-start</mdui-menu-item>\n  <mdui-menu-item value=\"top\">top</mdui-menu-item>\n  <mdui-menu-item value=\"top-end\">top-end</mdui-menu-item>\n  <mdui-menu-item value=\"bottom-start\">bottom-start</mdui-menu-item>\n  <mdui-menu-item value=\"bottom\">bottom</mdui-menu-item>\n  <mdui-menu-item value=\"bottom-end\">bottom-end</mdui-menu-item>\n  <mdui-menu-item value=\"left-start\">left-start</mdui-menu-item>\n  <mdui-menu-item value=\"left\">left</mdui-menu-item>\n  <mdui-menu-item value=\"left-end\">left-end</mdui-menu-item>\n  <mdui-menu-item value=\"right-start\">right-start</mdui-menu-item>\n  <mdui-menu-item value=\"right\">right</mdui-menu-item>\n  <mdui-menu-item value=\"right-end\">right-end</mdui-menu-item>\n</mdui-select>\n\n<mdui-tabs value=\"tab-1\" placement=\"top-start\" class=\"example-placement\">\n  <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\" style=\"height: 260px\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\" style=\"height: 260px\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\" style=\"height: 260px\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n\n<script>\n  const select = document.querySelector(\".example-change-placement\");\n  const tabs = document.querySelector(\".example-placement\");\n\n  select.addEventListener(\"change\", (event) => {\n    tabs.placement = event.target.value;\n  });\n</script>\n```\n\n### 全宽显示 {#example-full-width}\n\n在 `<mdui-tabs>` 组件上添加 `full-width` 属性，可以使选项卡占据全部宽度，各个选项卡将平均分配宽度。\n\n```html\n<mdui-tabs value=\"tab-1\" full-width>\n  <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```\n\n### 图标 {#example-icon}\n\n在 `<mdui-tab>` 组件上设置 `icon` 属性，可以在选项卡上添加 Material Icons 图标。也可以通过 `icon` slot 添加图标元素。\n\n添加 `inline` 属性可以将图标和文本水平排列。\n\n```html\n<mdui-tabs value=\"tab-1\">\n  <mdui-tab value=\"tab-1\" icon=\"library_music\">Tab 1</mdui-tab>\n  <mdui-tab value=\"tab-2\">\n    Tab 2\n    <mdui-icon slot=\"icon\" name=\"movie\"></mdui-icon>\n  </mdui-tab>\n  <mdui-tab value=\"tab-3\" icon=\"menu_book\" inline>Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```\n\n### 徽标 {#example-badge}\n\n在 `<mdui-tab>` 组件中，可以通过 `badge` slot 添加徽标。\n\n```html\n<mdui-tabs value=\"tab-1\">\n  <mdui-tab value=\"tab-1\">\n    Tab 1\n    <mdui-badge slot=\"badge\">99+</mdui-badge>\n  </mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```\n\n### 自定义内容 {#example-custom}\n\n在 `<mdui-tab>` 组件中使用 `custom` slot，可以完全自定义选项卡的内容。\n\n```html\n<mdui-tabs value=\"tab-1\">\n  <mdui-tab value=\"tab-1\">\n    Tab 1\n    <mdui-chip slot=\"custom\" icon=\"search\">Icon</mdui-chip>\n  </mdui-tab>\n  <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n  <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n  <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n  <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```\n\n",
+        "tagNames": [
+            "mdui-tabs",
+            "mdui-tab",
+            "mdui-tab-panel"
+        ]
+    },
+    "components--text-field": {
+        "key": "components--text-field",
+        "title": "文本框组件 TextField",
+        "description": "文本框组件允许用户在页面中输入文本，通常用于表单和对话框。",
+        "content": "# 文本框组件 TextField\n\n文本框组件允许用户在页面中输入文本，通常用于表单和对话框。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/text-field.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { TextField } from 'mdui/components/text-field.js';\n```\n\n使用示例：\n\n```html\n<mdui-text-field label=\"Text Field\"></mdui-text-field>\n```\n\n## 示例 {#examples}\n\n### 形状 {#example-variant}\n\n通过 `variant` 属性设置文本框的形状。\n\n```html\n<mdui-text-field variant=\"filled\" label=\"Text Field\"></mdui-text-field>\n\n<br/><br/>\n\n<mdui-text-field variant=\"outlined\" label=\"Text Field\"></mdui-text-field>\n```\n\n### 辅助文本 {#example-helper-text}\n\n通过 `label` 属性设置文本框上方的标签文本。\n\n```html\n<mdui-text-field label=\"Text Field\"></mdui-text-field>\n```\n\n通过 `placeholder` 属性设置无值时的占位文本。\n\n```html\n<mdui-text-field label=\"Text Field\" placeholder=\"Placeholder\"></mdui-text-field>\n```\n\n通过 `helper` 属性设置文本框底部的帮助文本。也可以使用 `helper` slot 来设置帮助文本。添加 `helper-on-focus` 属性则仅在输入框聚焦时显示帮助文本。\n\n```html\n<mdui-text-field label=\"Text Field\" helper=\"Supporting text\"></mdui-text-field>\n\n<mdui-text-field label=\"Text Field\">\n  <span slot=\"helper\" style=\"color: blue\">Supporting text</span>\n</mdui-text-field>\n\n<mdui-text-field label=\"Text Field\" helper=\"Supporting text\" helper-on-focus></mdui-text-field>\n```\n\n### 可清空 {#example-clearable}\n\n添加 `clearable` 属性后，当文本框有值时，会在右侧添加清空按钮。\n\n```html\n<mdui-text-field clearable label=\"Text Field\" value=\"Input Text\"></mdui-text-field>\n```\n\n### 文本右对齐 {#example-end-aligned}\n\n添加 `end-aligned` 属性可以使文本右对齐。\n\n```html\n<mdui-text-field end-aligned label=\"Text Field\" value=\"Input Text\"></mdui-text-field>\n```\n\n### 前后文本及图标 {#example-prefix-suffix}\n\n通过设置 `icon` 和 `end-icon` 属性，可以在文本框的左侧和右侧添加 Material Icons 图标。也可以通过 `icon` 和 `end-icon` slot 在文本框的左侧和右侧添加元素。\n\n```html\n<mdui-text-field icon=\"search\" end-icon=\"mic\" label=\"Text Field\"></mdui-text-field>\n\n<br/><br/>\n\n<mdui-text-field label=\"Text Field\">\n  <mdui-button-icon slot=\"icon\" icon=\"search\"></mdui-button-icon>\n  <mdui-button-icon slot=\"end-icon\" icon=\"mic\"></mdui-button-icon>\n</mdui-text-field>\n```\n\n通过设置 `prefix` 和 `suffix` 属性，可以在文本框的左侧和右侧添加文本。也可以通过 `prefix` 和 `suffix` slot 在文本框的左侧和右侧添加文本元素。这些文本只有在文本框聚焦或有值时才会显示。\n\n```html\n<mdui-text-field prefix=\"$\" suffix=\"/100\" label=\"Text Field\"></mdui-text-field>\n\n<br/><br/>\n\n<mdui-text-field label=\"Text Field\">\n  <span slot=\"prefix\" style=\"color: blue\">$</span>\n  <span slot=\"suffix\" style=\"color: blue\">/100</span>\n</mdui-text-field>\n```\n\n### 只读模式 {#example-readonly}\n\n通过添加 `readonly` 属性，可以将文本框设置为只读模式。\n\n```html\n<mdui-text-field readonly label=\"Text Field\" value=\"Input Text\"></mdui-text-field>\n```\n\n### 禁用状态 {#example-disabled}\n\n通过添加 `disabled` 属性，可以禁用文本框。\n\n```html\n<mdui-text-field disabled label=\"Text Field\" value=\"Input Text\"></mdui-text-field>\n```\n\n### 多行文本框 {#example-rows}\n\n通过 `rows` 属性，可以设置多行文本框的行数。\n\n```html\n<mdui-text-field rows=\"3\" label=\"Text Field\"></mdui-text-field>\n```\n\n也可以添加 `autosize` 属性，使文本框能根据输入内容的长度自动调整高度。通过 `min-rows` 和 `max-rows` 属性，可以指定自动调整高度时的最小行数和最大行数。\n\n```html\n<mdui-text-field autosize label=\"Text Field\"></mdui-text-field>\n\n<br/><br/>\n\n<mdui-text-field autosize min-rows=\"2\" max-rows=\"5\" label=\"Text Field\"></mdui-text-field>\n```\n\n### 字数统计 {#example-counter}\n\n当通过 `maxlength` 属性设置了最大字数时，可以添加 `counter` 属性在文本框下方显示字数统计。\n\n```html\n<mdui-text-field maxlength=\"20\" counter label=\"Text Field\"></mdui-text-field>\n```\n\n### 密码框 {#example-password}\n\n当 `type=\"password\"` 时，添加 `toggle-password` 属性可以在文本框右侧添加切换密码可见性的按钮。\n\n```html\n<mdui-text-field type=\"password\" toggle-password label=\"Text Field\"></mdui-text-field>\n```\n\n",
+        "tagNames": [
+            "mdui-text-field"
+        ]
+    },
+    "components--tooltip": {
+        "key": "components--tooltip",
+        "title": "工具提示组件 Tooltip",
+        "description": "工具提示用于对特定元素提供补充文本提示或上下文信息，以便用户更好地理解该元素的功能或用途。",
+        "content": "# 工具提示组件 Tooltip\n\n工具提示用于对特定元素提供补充文本提示或上下文信息，以便用户更好地理解该元素的功能或用途。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/tooltip.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { Tooltip } from 'mdui/components/tooltip.js';\n```\n\n使用示例：\n\n```html\n<mdui-tooltip content=\"Plain tooltip\">\n  <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```\n\n## 示例 {#examples}\n\n### 纯文本 tooltip {#example-plain}\n\n默认为纯文本 tooltip。可以通过 `content` 属性设置 tooltip 的内容。\n\n```html\n<mdui-tooltip content=\"Plain tooltip\">\n  <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```\n\n也可以通过 `content` slot 设置 tooltip 的内容。\n\n```html\n<mdui-tooltip>\n  <mdui-button>button</mdui-button>\n  <div slot=\"content\">\n    <div style=\"font-size: 1.4em\">title</div>\n    <div>content</div>\n  </div>\n</mdui-tooltip>\n```\n\n### 富文本 tooltip {#example-rich}\n\n设置 `variant` 属性为 `rich` 可以创建富文本 tooltip。可以通过 `headline` 属性设置 tooltip 的标题，`content` 属性设置 tooltip 的内容。\n\n```html\n<mdui-tooltip\n  variant=\"rich\"\n  headline=\"Rich tooltip\"\n  content=\"Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.\"\n>\n  <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```\n\n也可以通过 `headline`、`content` slot 设置 tooltip 的标题和内容。通过 `action` slot 设置 tooltip 的操作按钮。\n\n```html\n<mdui-tooltip variant=\"rich\">\n  <mdui-button>button</mdui-button>\n  <div slot=\"headline\">Rich tooltip</div>\n  <div slot=\"content\">Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.</div>\n  <mdui-button slot=\"action\" variant=\"text\">Action</mdui-button>\n</mdui-tooltip>\n```\n\n### 位置 {#example-placement}\n\n通过 `placement` 属性可以设置 tooltip 的位置。\n\n```html\n<div class=\"example-placement\">\n  <div class=\"row\">\n    <mdui-tooltip placement=\"top-left\" content=\"top-left\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"top-start\" content=\"top-start\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"top\" content=\"top\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"top-end\" content=\"top-end\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"top-right\" content=\"top-right\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n  </div>\n  <div class=\"row\">\n    <mdui-tooltip placement=\"left-start\" content=\"left-start\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"right-start\" content=\"right-start\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n  </div>\n  <div class=\"row\">\n    <mdui-tooltip placement=\"left\" content=\"left\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"right\" content=\"right\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n  </div>\n  <div class=\"row\">\n    <mdui-tooltip placement=\"left-end\" content=\"left-end\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"right-end\" content=\"right-end\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n  </div>\n  <div class=\"row\">\n    <mdui-tooltip placement=\"bottom-left\" content=\"bottom-left\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"bottom-start\" content=\"bottom-start\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"bottom\" content=\"bottom\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"bottom-end\" content=\"bottom-end\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n    <mdui-tooltip placement=\"bottom-right\" content=\"bottom-right\">\n      <mdui-card variant=\"outlined\"></mdui-card>\n    </mdui-tooltip>\n  </div>\n</div>\n\n<style>\n.example-placement mdui-card {\n  width: 2.5rem;\n  height: 2.5rem;\n  margin: 0.25rem;\n}\n\n.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,\n.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,\n.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {\n  margin-left: 10rem;\n}\n</style>\n```\n\n### 触发方式 {#example-trigger}\n\n通过 `trigger` 属性，可以设置 tooltip 的触发方式。\n\n```html\n<mdui-tooltip trigger=\"click\" content=\"tooltip\">\n  <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```\n\n### 打开/关闭延时 {#example-delay}\n\n当触发方式为 `hover` 时，可以通过 `open-delay` 和 `close-delay` 属性分别设置打开和关闭 tooltip 的延时，单位为毫秒。\n\n```html\n<mdui-tooltip open-delay=\"1000\" close-delay=\"1000\" content=\"tooltip\">\n  <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```\n\n### 禁用状态 {#example-disabled}\n\n通过添加 `disabled` 属性，可以禁用 tooltip。\n\n```html\n<mdui-tooltip disabled content=\"tooltip\">\n  <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```\n\n",
+        "tagNames": [
+            "mdui-tooltip"
+        ]
+    },
+    "components--top-app-bar": {
+        "key": "components--top-app-bar",
+        "title": "顶部应用栏组件 TopAppBar",
+        "description": "顶部应用栏用于在页面顶部展示关键信息和相关操作，为用户提供清晰的导航和方便的功能访问。",
+        "content": "# 顶部应用栏组件 TopAppBar\n\n顶部应用栏用于在页面顶部展示关键信息和相关操作，为用户提供清晰的导航和方便的功能访问。\n\n## 使用方法 {#usage}\n\n按需导入组件：\n\n```js\nimport 'mdui/components/top-app-bar.js';\nimport 'mdui/components/top-app-bar-title.js';\n```\n\n按需导入组件的 TypeScript 类型：\n\n```ts\nimport type { TopAppBar } from 'mdui/components/top-app-bar.js';\nimport type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js';\n```\n\n使用示例：（示例中的 `style=\"position: relative\"` 仅用于演示，实际使用时请移除该样式。）\n\n```html\n<mdui-top-app-bar style=\"position: relative;\">\n  <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n  <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n  <div style=\"flex-grow: 1\"></div>\n  <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n</mdui-top-app-bar>\n```\n\n**注意事项：**\n\n该组件默认使用 `position: fixed` 定位，并会自动在 `body` 上添加 `padding-top` 样式，以防止页面内容被该组件遮挡。\n\n但在以下两种情况下，会默认使用 `position: absolute` 定位：\n\n1. 当指定了 `scroll-target` 属性时。此时会在 `scroll-target` 的元素上添加 `padding-top` 样式。\n2. 当位于 [`<mdui-layout></mdui-layout>`](/zh-cn/docs/2/components/layout) 组件中时。此时不会添加 `padding-top` 样式。\n\n## 示例 {#examples}\n\n### 位于指定容器内 {#example-scroll-target}\n\n默认情况下，顶部应用栏会相对于当前窗口，在页面顶部显示。\n\n如果你希望将顶部应用栏放在指定的容器内，可以在 `<mdui-top-app-bar>` 组件上指定 `scroll-target` 属性，其值为可滚动内容的容器的 CSS 选择器或 DOM 元素。此时，顶部应用栏会相对于父元素显示（你需要自行在父元素上添加样式 `position: relative; overflow: hidden`）。\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-top-app-bar scroll-target=\".example-scroll-target\">\n    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n  </mdui-top-app-bar>\n\n  <div class=\"example-scroll-target\" style=\"height: 160px;overflow: auto;\">\n    <div style=\"height: 1000px\"></div>\n  </div>\n</div>\n```\n\n### 形状 {#example-variant}\n\n可以通过在 `<mdui-top-app-bar>` 组件上使用 `variant` 属性来设置顶部应用栏的形状。\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-top-app-bar variant=\"small\" scroll-target=\".example-variant\" class=\"example-variant-bar\">\n    <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n    <div style=\"flex-grow: 1\"></div>\n    <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n  </mdui-top-app-bar>\n\n  <div class=\"example-variant\" style=\"height: 160px;overflow: auto;\">\n    <div style=\"height: 1000px\">\n      <mdui-segmented-button-group selects=\"single\" value=\"small\">\n        <mdui-segmented-button value=\"center-aligned\">center-aligned</mdui-segmented-button>\n        <mdui-segmented-button value=\"small\">small</mdui-segmented-button>\n        <mdui-segmented-button value=\"medium\">medium</mdui-segmented-button>\n        <mdui-segmented-button value=\"large\">large</mdui-segmented-button>\n      </mdui-segmented-button-group>\n    </div>\n  </div>\n</div>\n\n<script>\n  const topAppBar = document.querySelector(\".example-variant-bar\");\n  const segmentedButtonGroup = document.querySelector(\".example-variant\");\n\n  segmentedButtonGroup.addEventListener(\"change\", (event) => {\n    topAppBar.variant = event.target.value;\n  });\n</script>\n```\n\n### 页面滚动时的行为 {#example-scroll-behavior}\n\n通过在 `<mdui-top-app-bar>` 组件上设置 `scroll-behavior` 属性，可以定义页面滚动时顶部应用栏的行为。可以同时设置多个行为，用空格分隔即可。\n\n滚动行为包括：\n\n- `hide`：页面向下滚动时隐藏顶部应用栏，向上滚动时显示顶部应用栏。\n- `shrink`：仅在 `variant` 属性为 `medium` 或 `large` 时有效。页面向下滚动时展开顶部应用栏，向上滚动时收缩顶部应用栏。\n- `elevate`：页面向下滚动时，在顶部应用栏上添加阴影；页面滚回到顶部时，取消阴影。\n\n使用 `scroll-threshold` 属性，可以设置滚动多少像素后开始触发顶部应用栏的滚动行为。（注意，为了响应及时，在使用了 `elevate` 滚动行为时，请不要再设置 `scroll-threshold` 属性。）\n\n**示例：滚动时隐藏**\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-top-app-bar\n    scroll-behavior=\"hide\"\n    scroll-threshold=\"30\"\n    scroll-target=\".example-scroll-behavior-hide\"\n  >\n    <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n    <div style=\"flex-grow: 1\"></div>\n    <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n  </mdui-top-app-bar>\n\n  <div class=\"example-scroll-behavior-hide\" style=\"height: 160px;overflow: auto;\">\n    <div style=\"height: 1000px\"></div>\n  </div>\n</div>\n```\n\n**示例：滚动时添加阴影**\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-top-app-bar\n    scroll-behavior=\"elevate\"\n    scroll-target=\".example-scroll-behavior-elevate\"\n  >\n    <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n    <div style=\"flex-grow: 1\"></div>\n    <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n  </mdui-top-app-bar>\n\n  <div class=\"example-scroll-behavior-elevate\" style=\"height: 160px;overflow: auto;\">\n    <div style=\"height: 1000px\"></div>\n  </div>\n</div>\n```\n\n**示例：滚动时收缩**\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-top-app-bar\n    variant=\"medium\"\n    scroll-behavior=\"shrink\"\n    scroll-threshold=\"30\"\n    scroll-target=\".example-scroll-behavior-shrink\"\n  >\n    <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n    <div style=\"flex-grow: 1\"></div>\n    <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n  </mdui-top-app-bar>\n\n  <div class=\"example-scroll-behavior-shrink\" style=\"height: 160px;overflow: auto;\">\n    <div style=\"height: 1000px\"></div>\n  </div>\n</div>\n```\n\n**示例：滚动时收缩及添加阴影**\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-top-app-bar\n    variant=\"medium\"\n    scroll-behavior=\"shrink elevate\"\n    scroll-target=\".example-scroll-behavior-shrink-elevate\"\n  >\n    <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n    <div style=\"flex-grow: 1\"></div>\n    <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n  </mdui-top-app-bar>\n\n  <div class=\"example-scroll-behavior-shrink-elevate\" style=\"height: 160px;overflow: auto;\">\n    <div style=\"height: 1000px\"></div>\n  </div>\n</div>\n```\n\n### 展开状态的文本 {#label-large}\n\n对于 `variant` 属性为 `medium` 或 `large`，且 `scroll-behavior` 属性为 `shrink` 的顶部应用栏，你可以在 `<mdui-top-app-bar-title>` 组件中添加 `label-large` slot，以设置展开状态下的文本。\n\n```html\n<div style=\"position: relative;overflow: hidden\">\n  <mdui-top-app-bar\n    variant=\"medium\"\n    scroll-behavior=\"shrink elevate\"\n    scroll-target=\".example-label-large-slot\"\n  >\n    <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n    <mdui-top-app-bar-title>\n      这是收起状态的标题\n      <span slot=\"label-large\">这是展开状态的标题</span>\n    </mdui-top-app-bar-title>\n    <div style=\"flex-grow: 1\"></div>\n    <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n  </mdui-top-app-bar>\n\n  <div class=\"example-label-large-slot\" style=\"height: 160px;overflow: auto;\">\n    <div style=\"height: 1000px\"></div>\n  </div>\n</div>\n```\n\n",
+        "tagNames": [
+            "mdui-top-app-bar",
+            "mdui-top-app-bar-title"
+        ]
+    },
+    "frameworks--angular": {
+        "key": "frameworks--angular",
+        "title": "与 Angular 集成",
+        "description": "在 Angular 中使用 mdui 时，首先需要按照 [安装](/zh-cn/docs/2/getting-started/installation#npm) 页面的指引完成安装，然后进行一些必要的配置。",
+        "content": "# 与 Angular 集成\n\n在 Angular 中使用 mdui 时，首先需要按照 [安装](/zh-cn/docs/2/getting-started/installation#npm) 页面的指引完成安装，然后进行一些必要的配置。\n\n## 配置 {#configuration}\n\n首先，我们需要在 Angular 中启用 Web Components 的支持。示例如下：\n\n```js\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule],\n  providers: [],\n  bootstrap: [AppComponent],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class AppModule {}\n```\n\n配置完成后，我们就可以在 Angular 组件代码中引入并使用 mdui 组件了：\n\n```js\nimport { Dialog } from 'mdui/components/dialog.js';\n\n@Component({\n  selector: 'app-dialog-example',\n  template: `<div id=\"page\">\n    <button (click)=\"openDialog()\">Open Dialog</button>\n    <mdui-dialog #dialog primary=\"Dialog Title\">Dialog Content</mdui-dialog>\n  </div>`\n})\nexport class DialogExampleComponent implements OnInit {\n\n  // 使用 @ViewChild 获取 #dialog 元素的引用\n  @ViewChild('dialog')\n  dialog?: ElementRef<Dialog>;\n\n  ...\n\n  constructor(...) {\n  }\n\n  ngOnInit() {\n  }\n\n  ...\n\n  openDialog() {\n    // 使用 nativeElement 访问 mdui 组件\n    this.dialog?.nativeElement.open = true;\n  }\n}\n```\n\n"
+    },
+    "frameworks--others": {
+        "key": "frameworks--others",
+        "title": "与其他框架集成",
+        "description": "mdui 使用浏览器原生支持的 Web Components 开发，因此能在所有 Web 框架中使用。下面列举了在常用框架中使用 mdui 的方法。",
+        "content": "# 与其他框架集成\n\nmdui 使用浏览器原生支持的 Web Components 开发，因此能在所有 Web 框架中使用。下面列举了在常用框架中使用 mdui 的方法。\n\n## Aurelia {#Aurelia}\n\n在按照 [安装](/zh-cn/docs/2/getting-started/installation#npm) 页面的指引完成安装后，还需要安装和配置一个额外的包（仅适用于 Aurelia 2）：\n\n```bash\nnpm install aurelia-mdui --save\n```\n\n然后将其注册到应用中：\n\n```typescript\nimport { MduiWebTask } from 'aurelia-mdui';\n\nAurelia.register(MduiWebTask).app(MyApp).start();\n```\n\n**注意**\n\n请将错误报告发送到 [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui)\n\n## WebCell {#WebCell}\n\n在 [WebCell](https://web-cell.dev/) 中使用 mdui 时，只需要按照 [安装](/zh-cn/docs/2/getting-started/installation#npm) 页面的步骤完成安装即可，Web Components、TypeScript 和 JSX 支持是一级特性且开箱即用的。\n\n或者，您可用 [官方 GitHub 模板仓库](https://github.com/EasyWebApp/WebCell-mobile) 来 [一键创建新项目](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp)。\n\n"
+    },
+    "frameworks--react": {
+        "key": "frameworks--react",
+        "title": "与 React 集成",
+        "description": "在 React 中使用 mdui 时，只需要按照 [安装](/zh-cn/docs/2/getting-started/installation#npm) 页面的步骤完成安装即可。",
+        "content": "# 与 React 集成\n\n在 React 中使用 mdui 时，只需要按照 [安装](/zh-cn/docs/2/getting-started/installation#npm) 页面的步骤完成安装即可。\n\n## 注意事项 {#notes}\n\n在 React 中使用 mdui 时，存在一些限制。这些限制是在 React 中使用 Web Components 的通用限制，而非 mdui 组件库本身的限制。\n\n### 事件绑定 {#event-binding}\n\n由于 React 不支持自定义事件，因此在使用 mdui 组件提供的事件时，需要先使用 `ref` 属性获取组件的引用。\n\n以下是在 React 中使用 mdui 组件事件的示例：\n\n```js\nimport { useEffect, useRef } from 'react';\nimport 'mdui/mdui.css';\nimport 'mdui/components/switch.js';\n\nfunction App() {\n  const switchRef = useRef(null);\n\n  useEffect(() => {\n    const handleToggle = () => {\n      console.log('switch is toggled');\n    };\n\n    switchRef.current.addEventListener('change', handleToggle);\n\n    return () => {\n      switchRef.current.removeEventListener('change', handleToggle);\n    };\n  }, []);\n\n  return <mdui-switch ref={switchRef}></mdui-switch>;\n}\n\nexport default App;\n```\n\n### JSX TypeScript 类型声明 {#jsx-typescript}\n\n如果你在 TypeScript 文件（.tsx）中使用 mdui，需要添加 TypeScript 类型声明。你需要在项目的 .d.ts 文件中手动引入 mdui 的类型声明文件：\n\n```ts\n/// <reference types=\"mdui/jsx.zh-cn.d.ts\" />\n```\n\n"
+    },
+    "frameworks--vue": {
+        "key": "frameworks--vue",
+        "title": "与 Vue 集成",
+        "description": "在 Vue 中使用 mdui 时，首先需要按照 [安装](/zh-cn/docs/2/getting-started/installation#npm) 页面的指引完成安装，然后进行一些必要的配置。",
+        "content": "# 与 Vue 集成\n\n在 Vue 中使用 mdui 时，首先需要按照 [安装](/zh-cn/docs/2/getting-started/installation#npm) 页面的指引完成安装，然后进行一些必要的配置。\n\n## 配置 {#configuration}\n\n你需要配置 Vue，使其不将 mdui 组件解析为 Vue 组件。在 `vite.config` 文件中，设置 `compilerOptions.isCustomElement` 选项即可：\n\n```js\n// vite.config.js\nimport vue from '@vitejs/plugin-vue';\n\nexport default {\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          // 所有以 mdui- 开头的标签名都是 mdui 组件\n          isCustomElement: (tag) => tag.startsWith('mdui-'),\n        },\n      },\n    }),\n  ],\n};\n```\n\n关于这个配置的详细信息，你可以参考 [Vue 官方文档](https://cn.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue)。\n\n## 注意事项 {#notes}\n\n### 双向数据绑定 {#data-binding}\n\n在 mdui 组件上，你不能使用 `v-model` 进行双向数据绑定。你需要自行处理数据的绑定与更新。例如：\n\n```html\n<mdui-text-field\n  :value=\"name\"\n  @input=\"name = $event.target.value\"\n></mdui-text-field>\n```\n\n### eslint 配置 {#eslint}\n\n如果你使用了 [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue)，需要在 `.eslintrc.js` 中添加以下规则：\n\n```js\nrules: {\n  'vue/no-deprecated-slot-attribute': 'off'\n}\n```\n\n"
+    },
+    "functions--alert": {
+        "key": "functions--alert",
+        "title": "alert 函数",
+        "description": "`alert` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，该函数用于代替系统原生的 `window.alert` 函数。使用该函数，你无需编写组件的 HTML 代码，就能打开一个警告框。",
+        "content": "# alert 函数\n\n`alert` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，该函数用于代替系统原生的 `window.alert` 函数。使用该函数，你无需编写组件的 HTML 代码，就能打开一个警告框。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { alert } from 'mdui/functions/alert.js';\n```\n\n使用示例：\n\n```html\n<mdui-button class=\"example-button\">open</mdui-button>\n\n<script type=\"module\">\n  import { alert } from \"mdui/functions/alert.js\";\n\n  const button = document.querySelector(\".example-button\");\n\n  button.addEventListener(\"click\", () => {\n    alert({\n      headline: \"Alert Title\",\n      description: \"Alert description\",\n      confirmText: \"OK\",\n      onConfirm: () => console.log(\"confirmed\"),\n    });\n  });\n</script>\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">alert(options: <a href=\"#api-options\">Options</a>): Promise&lt;void&gt;</code></pre>\n\n`alert` 函数接收一个 [Options](#api-options) 对象作为参数；返回值为 Promise，如果警告框是通过点击确定按钮关闭的，则 Promise 会被 resolve，如果警告框是通过其他方式关闭的，则 Promise 会被 reject。\n\n### Options {#api-options}\n\n<table>\n  <thead>\n    <tr>\n      <th>属性名</th>\n      <th>类型</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr id=\"options-headline\">\n      <td><a href=\"#options-headline\"><code>headline</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">alert 的标题</td>\n    </tr>\n    <tr id=\"options-description\">\n      <td><a href=\"#options-description\"><code>description</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">alert 的描述文本</td>\n    </tr>\n    <tr id=\"options-icon\">\n      <td><a href=\"#options-icon\"><code>icon</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">alert 顶部的 Material Icons 图标名</td>\n    </tr>\n    <tr id=\"options-closeOnEsc\">\n      <td><a href=\"#options-closeOnEsc\"><code>closeOnEsc</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否在按下 ESC 键时，关闭 alert</td>\n    </tr>\n    <tr id=\"options-closeOnOverlayClick\">\n      <td><a href=\"#options-closeOnOverlayClick\"><code>closeOnOverlayClick</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否在点击遮罩层时，关闭 alert</td>\n    </tr>\n    <tr id=\"options-confirmText\">\n      <td><a href=\"#options-confirmText\"><code>confirmText</code></a></td>\n      <td><code>string</code></td>\n      <td><code>OK</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">确认按钮的文本</td>\n    </tr>\n    <tr id=\"options-queue\">\n      <td><a href=\"#options-queue\"><code>queue</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>队列名称。</p>\n        <p>默认不启用队列，在多次调用该函数时，将同时显示多个 alert。</p>\n        <p>可在该参数中传入一个队列名称，具有相同队列名称的 alert 函数，将在上一个 alert 关闭后才打开下一个 alert。</p>\n        <p><a href=\"/zh-cn/docs/2/functions/dialog\"><code>dialog()</code></a>、<code>alert()</code>、<a href=\"/zh-cn/docs/2/functions/confirm\"><code>confirm()</code></a>、<a href=\"/zh-cn/docs/2/functions/prompt\"><code>prompt()</code></a> 这四个函数的队列名称若相同，则也将互相共用同一个队列。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onConfirm\">\n      <td><a href=\"#options-onConfirm\"><code>onConfirm</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void | boolean | Promise&lt;void&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击确认按钮时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n        <p>默认点击确认按钮后会关闭 alert；若返回值为 <code>false</code>，则不关闭 alert；若返回值为 promise，则将在 promise 被 resolve 后，关闭 alert。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpen\">\n      <td><a href=\"#options-onOpen\"><code>onOpen</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>alert 开始打开时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpened\">\n      <td><a href=\"#options-onOpened\"><code>onOpened</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>alert 打开动画完成时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClose\">\n      <td><a href=\"#options-onClose\"><code>onClose</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>alert 开始关闭时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClosed\">\n      <td><a href=\"#options-onClosed\"><code>onClosed</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>alert 关闭动画完成时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOverlayClick\">\n      <td><a href=\"#options-onOverlayClick\"><code>onOverlayClick</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击遮罩层时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n"
+    },
+    "functions--breakpoint": {
+        "key": "functions--breakpoint",
+        "title": "breakpoint 函数",
+        "description": "`breakpoint` 函数用于判断页面的断点。",
+        "content": "# breakpoint 函数\n\n`breakpoint` 函数用于判断页面的断点。\n\nmdui 提供了 6 个断点，分别为：`xs`、`sm`、`md`、`lg`、`xl`、`xxl`。其默认值可在 [设计令牌](/zh-cn/docs/2/styles/design-tokens#breakpoint) 页面查看。你可以使用此函数来判断页面宽度是否大于、小于、等于、不等于指定的断点，或者是否在指定的断点范围内。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { breakpoint } from 'mdui/functions/breakpoint.js';\n```\n\n使用示例：\n\n```js\nconst breakpointCondition = breakpoint();\n\n// 判断当前页面断点是否大于 sm\nbreakpointCondition.up('sm');\n\n// 判断当前页面断点是否小于 lg\nbreakpointCondition.down('lg');\n\n// 判断当前页面断点是否等于 md\nbreakpointCondition.only('md');\n\n// 判断当前页面断点是否不等于 xl\nbreakpointCondition.not('xl');\n\n// 判断当前页面断点是否在 sm 和 lg 之间\nbreakpointCondition.between('sm', 'lg');\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">breakpoint(width?: number | string | HTMLElement | <a href=\"/zh-cn/docs/2/functions/jq\">JQ</a>&lt;HTMLElement&gt;): <a href=\"#api-breakpointCondition\">breakpointCondition</a></code></pre>\n\n该函数返回 [`breakpointCondition`](#api-breakpointCondition) 对象。函数的行为取决于传入的参数类型：\n\n- 如果不传入参数，将返回当前页面宽度的 `breakpointCondition` 对象。\n- 如果传入数值，将返回指定宽度的 `breakpointCondition` 对象。\n- 如果传入 CSS 选择器，将返回该选择器对应元素宽度的 `breakpointCondition` 对象。\n- 如果传入 HTML 元素，将返回该元素宽度的 `breakpointCondition` 对象。\n- 如果传入 [JQ 对象](/zh-cn/docs/2/functions/jq)，将返回该 JQ 对象中元素的宽度的 `breakpointCondition` 对象。\n\n### Breakpoint {#api-Breakpoint}\n\n```ts\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n```\n\n### breakpointCondition {#api-breakpointCondition}\n\n<pre><code class=\"nohighlight\">{\n  /**\n   * 当前宽度是否大于指定断点值\n   */\n  up(breakpoint: <a href=\"#api-Breakpoint\">Breakpoint</a>): boolean;\n\n  /**\n   * 当前宽度是否小于指定断点值\n   */\n  down(breakpoint: <a href=\"#api-Breakpoint\">Breakpoint</a>): boolean;\n\n  /**\n   * 当前宽度是否在指定断点值内\n   */\n  only(breakpoint: <a href=\"#api-Breakpoint\">Breakpoint</a>): boolean;\n\n  /**\n   * 当前宽度是否不在指定断点值内\n   */\n  not(breakpoint: <a href=\"#api-Breakpoint\">Breakpoint</a>): boolean;\n\n  /**\n   * 当前宽度是否在指定断点值之间\n   */\n  between(startBreakpoint: <a href=\"#api-Breakpoint\">Breakpoint</a>, endBreakpoint: <a href=\"#api-Breakpoint\">Breakpoint</a>): boolean;\n}</code></pre>\n\n"
+    },
+    "functions--confirm": {
+        "key": "functions--confirm",
+        "title": "confirm 函数",
+        "description": "`configm` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，该函数在功能上用于代替系统原生的 `window.confirm` 函数。使用该函数，你无需编写组件的 HTML 代码，就能打开一个确认框。",
+        "content": "# confirm 函数\n\n`configm` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，该函数在功能上用于代替系统原生的 `window.confirm` 函数。使用该函数，你无需编写组件的 HTML 代码，就能打开一个确认框。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { confirm } from 'mdui/functions/confirm.js';\n```\n\n使用示例：\n\n```html\n<mdui-button class=\"example-button\">open</mdui-button>\n\n<script type=\"module\">\n  import { confirm } from \"mdui/functions/confirm.js\";\n\n  const button = document.querySelector(\".example-button\");\n\n  button.addEventListener(\"click\", () => {\n    confirm({\n      headline: \"Confirm Title\",\n      description: \"Confirm description\",\n      confirmText: \"OK\",\n      cancelText: \"Cancel\",\n      onConfirm: () => console.log(\"confirmed\"),\n      onCancel: () => console.log(\"canceled\"),\n    });\n  });\n</script>\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">confirm(options: <a href=\"#api-options\">Options</a>): Promise&lt;void&gt;</code></pre>\n\n函数接收一个 [Options](#api-options) 对象作为参数；返回值为 Promise，如果通过点击确定按钮关闭，则 Promise 会被 resolve，如果通过其他方式关闭，则 Promise 会被 reject。\n\n### Options {#api-options}\n\n<table>\n  <thead>\n    <tr>\n      <th>属性名</th>\n      <th>类型</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr id=\"options-headline\">\n      <td><a href=\"#options-headline\"><code>headline</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">confirm 的标题</td>\n    </tr>\n    <tr id=\"options-description\">\n      <td><a href=\"#options-description\"><code>description</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">confirm 的描述文本</td>\n    </tr>\n    <tr id=\"options-icon\">\n      <td><a href=\"#options-icon\"><code>icon</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">confirm 顶部的 Material Icons 图标名</td>\n    </tr>\n    <tr id=\"options-closeOnEsc\">\n      <td><a href=\"#options-closeOnEsc\"><code>closeOnEsc</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否在按下 ESC 键时，关闭 confirm</td>\n    </tr>\n    <tr id=\"options-closeOnOverlayClick\">\n      <td><a href=\"#options-closeOnOverlayClick\"><code>closeOnOverlayClick</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否在点击遮罩层时，关闭 confirm</td>\n    </tr>\n    <tr id=\"options-confirmText\">\n      <td><a href=\"#options-confirmText\"><code>confirmText</code></a></td>\n      <td><code>string</code></td>\n      <td><code>OK</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">确认按钮的文本</td>\n    </tr>\n    <tr id=\"options-cancelText\">\n      <td><a href=\"#options-cancelText\"><code>cancelText</code></a></td>\n      <td><code>string</code></td>\n      <td><code>Cancel</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">取消按钮的文本</td>\n    </tr>\n    <tr id=\"options-stackedActions\">\n      <td><a href=\"#options-stackedActions\"><code>stackedActions</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否垂直排列底部操作按钮</td>\n    </tr>\n    <tr id=\"options-queue\">\n      <td><a href=\"#options-queue\"><code>queue</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>队列名称。</p>\n        <p>默认不启用队列，在多次调用该函数时，将同时显示多个 confirm。</p>\n        <p>可在该参数中传入一个队列名称，具有相同队列名称的 confirm 函数，将在上一个 confirm 关闭后才打开下一个 confirm。</p>\n        <p><a href=\"/zh-cn/docs/2/functions/dialog\"><code>dialog()</code></a>、<a href=\"/zh-cn/docs/2/functions/alert\"><code>alert()</code></a>、<code>confirm()</code>、<a href=\"/zh-cn/docs/2/functions/prompt\"><code>prompt()</code></a> 这四个函数的队列名称若相同，则也将互相共用同一个队列。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onConfirm\">\n      <td><a href=\"#options-onConfirm\"><code>onConfirm</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void | boolean | Promise&lt;void&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击确认按钮时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n        <p>默认点击确认按钮后会关闭 confirm；若返回值为 <code>false</code>，则不关闭 confirm；若返回值为 promise，则将在 promise 被 resolve 后，关闭 confirm。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onCancel\">\n      <td><a href=\"#options-onCancel\"><code>onCancel</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void | boolean | Promise&lt;void&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击取消按钮时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n        <p>默认点击取消按钮后会关闭 confirm；若返回值为 <code>false</code>，则不关闭 confirm；若返回值为 promise，则将在 promise 被 resolve 后，关闭 confirm。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpen\">\n      <td><a href=\"#options-onOpen\"><code>onOpen</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>confirm 开始打开时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpened\">\n      <td><a href=\"#options-onOpened\"><code>onOpened</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>confirm 打开动画完成时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClose\">\n      <td><a href=\"#options-onClose\"><code>onClose</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>confirm 开始关闭时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClosed\">\n      <td><a href=\"#options-onClosed\"><code>onClosed</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>confirm 关闭动画完成时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOverlayClick\">\n      <td><a href=\"#options-onOverlayClick\"><code>onOverlayClick</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击遮罩层时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n"
+    },
+    "functions--dialog": {
+        "key": "functions--dialog",
+        "title": "dialog 函数",
+        "description": "`dialog` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，使用该函数，你无需编写组件的 HTML 代码，就能打开一个对话框。",
+        "content": "# dialog 函数\n\n`dialog` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，使用该函数，你无需编写组件的 HTML 代码，就能打开一个对话框。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { dialog } from 'mdui/functions/dialog.js';\n```\n\n使用示例：\n\n```html\n<mdui-button class=\"example-button\">open</mdui-button>\n\n<script type=\"module\">\n  import { dialog } from \"mdui/functions/dialog.js\";\n\n  const button = document.querySelector(\".example-button\");\n\n  button.addEventListener(\"click\", () => {\n    dialog({\n      headline: \"Dialog Title\",\n      description: \"Dialog description\",\n      actions: [\n        {\n          text: \"Cancel\",\n        },\n        {\n          text: \"OK\",\n          onClick: () => {\n            console.log(\"confirmed\");\n            return false;\n          },\n        }\n      ]\n    });\n  });\n</script>\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">dialog(options: <a href=\"#api-options\">Options</a>): <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a></code></pre>\n\n函数接收一个 [Options](#api-options) 对象作为参数；返回值为 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件实例。\n\n### Options {#api-options}\n\n<table>\n  <thead>\n    <tr>\n      <th>属性名</th>\n      <th>类型</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr id=\"options-headline\">\n      <td><a href=\"#options-headline\"><code>headline</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">dialog 的标题</td>\n    </tr>\n    <tr id=\"options-description\">\n      <td><a href=\"#options-description\"><code>description</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">dialog 的描述文本</td>\n    </tr>\n    <tr id=\"options-body\">\n      <td><a href=\"#options-body\"><code>body</code></a></td>\n      <td><code>string</code> | <code>HTMLElement</code> | <code><a href=\"/zh-cn/docs/2/functions/jq\">JQ</a>&lt;HTMLElement&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">dialog 中的 body 内容，可以是 HTML 字符串、DOM 元素、或 <a href=\"/en/docs/2/functions/jq\">JQ 对象</a>。</td>\n    </tr>\n    <tr id=\"options-icon\">\n      <td><a href=\"#options-icon\"><code>icon</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">dialog 顶部的 Material Icons 图标名</td>\n    </tr>\n    <tr id=\"options-closeOnEsc\">\n      <td><a href=\"#options-closeOnEsc\"><code>closeOnEsc</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否在按下 ESC 键时，关闭 dialog</td>\n    </tr>\n    <tr id=\"options-closeOnOverlayClick\">\n      <td><a href=\"#options-closeOnOverlayClick\"><code>closeOnOverlayClick</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否在点击遮罩层时，关闭 dialog</td>\n    </tr>\n    <tr id=\"options-actions\">\n      <td><a href=\"#options-actions\"><code>actions</code></a></td>\n      <td><code><a href=\"#api-action\">Action</a>[]</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">底部操作按钮数组</td>\n    </tr>\n    <tr id=\"options-stackedActions\">\n      <td><a href=\"#options-stackedActions\"><code>stackedActions</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否垂直排列底部操作按钮</td>\n    </tr>\n    <tr id=\"options-queue\">\n      <td><a href=\"#options-queue\"><code>queue</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>队列名称。</p>\n        <p>默认不启用队列，在多次调用该函数时，将同时显示多个 dialog。</p>\n        <p>可在该参数中传入一个队列名称，具有相同队列名称的 dialog 函数，将在上一个 dialog 关闭后才打开下一个 dialog。</p>\n        <p><code>dialog()</code>、<a href=\"/zh-cn/docs/2/functions/alert\"><code>alert()</code></a>、<a href=\"/zh-cn/docs/2/functions/confirm\"><code>confirm()</code></a>、<a href=\"/zh-cn/docs/2/functions/prompt\"><code>prompt()</code></a> 这四个函数的队列名称若相同，则也将互相共用同一个队列。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpen\">\n      <td><a href=\"#options-onOpen\"><code>onOpen</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>dialog 开始打开时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpened\">\n      <td><a href=\"#options-onOpened\"><code>onOpened</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>dialog 打开动画完成时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClose\">\n      <td><a href=\"#options-onClose\"><code>onClose</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>dialog 开始关闭时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClosed\">\n      <td><a href=\"#options-onClosed\"><code>onClosed</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>dialog 关闭动画完成时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOverlayClick\">\n      <td><a href=\"#options-onOverlayClick\"><code>onOverlayClick</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击遮罩层时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n### Action {#api-action}\n\n<table>\n  <thead>\n    <tr>\n      <th>属性名</th>\n      <th>类型</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr id=\"action-text\">\n      <td><a href=\"#action-text\"><code>text</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">按钮文本</td>\n    </tr>\n    <tr id=\"action-onClick\">\n      <td><a href=\"#action-onClick\"><code>onClick</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void | boolean | Promise&lt;void&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击按钮时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n        <p>默认点击按钮后会关闭 dialog；若返回值为 <code>false</code>，则不关闭 dialog；若返回值为 promise，则将在 promise 被 resolve 后，关闭 dialog。</p>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n"
+    },
+    "functions--getColorFromImage": {
+        "key": "functions--getColorFromImage",
+        "title": "getColorFromImage 函数",
+        "description": "`getColorFromImage` 函数用于从指定图片中提取主色调。获取主色调后，你可以使用 [`setColorScheme`](/zh-cn/docs/2/functions/setColorScheme) 函数来设置配色方案，从而实现[动态配色](/zh-cn/docs/2/styles/dynamic-color)功能。",
+        "content": "# getColorFromImage 函数\n\n`getColorFromImage` 函数用于从指定图片中提取主色调。获取主色调后，你可以使用 [`setColorScheme`](/zh-cn/docs/2/functions/setColorScheme) 函数来设置配色方案，从而实现[动态配色](/zh-cn/docs/2/styles/dynamic-color)功能。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { getColorFromImage } from 'mdui/functions/getColorFromImage.js';\n```\n\n使用示例：\n\n```js\nconst image = new Image();\nimage.src = 'demo.png';\n\ngetColorFromImage(image).then((color) => {\n  console.log(color);\n});\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">getColorFromImage(image: string | HTMLImageElement | <a href=\"/zh-cn/docs/2/functions/jq\">JQ</a>&lt;HTMLImageElement&gt;): Promise&lt;string&gt;</code></pre>\n\n函数接收一个 `<img>` 元素的 CSS 选择器、或 `HTMLImageElement` 对象，或包含 `<img>` 元素的 [JQ 对象](/zh-cn/docs/2/functions/jq) 作为参数。\n\n返回值为 Promise，Promise 的值为图片主色调的十六进制颜色值（如 `#ff0000`）。\n\n"
+    },
+    "functions--getLocale": {
+        "key": "functions--getLocale",
+        "title": "getLocale 函数",
+        "description": "`getLocale` 函数用于获取当前的本地化语言代码。详见 [本地化](/zh-cn/docs/2/getting-started/localization)。",
+        "content": "# getLocale 函数\n\n`getLocale` 函数用于获取当前的本地化语言代码。详见 [本地化](/zh-cn/docs/2/getting-started/localization)。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { getLocale } from 'mdui/functions/getLocale.js';\n```\n\n使用示例：\n\n```js\n// 获取当前的本地化语言代码\ngetLocale();\n```\n\n## API {#api}\n\n```ts\ngetLocale(): LocaleCode\n```\n\n函数的返回值为语言代码，语言代码列表参见 [支持的语言](/zh-cn/docs/2/getting-started/localization#languages)。\n\n"
+    },
+    "functions--getTheme": {
+        "key": "functions--getTheme",
+        "title": "getTheme 函数",
+        "description": "`getTheme` 函数用于获取当前页面或指定元素的主题设置。",
+        "content": "# getTheme 函数\n\n`getTheme` 函数用于获取当前页面或指定元素的主题设置。\n\n主题类型包括 `light`、`dark`、`auto` 三种，详见 [暗色模式](/zh-cn/docs/2/styles/dark-mode)。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { getTheme } from 'mdui/functions/getTheme.js';\n```\n\n使用示例：\n\n```js\n// 获取 <html> 上的主题\ngetTheme();\n\n// 获取 class=\"element\" 元素上的主题\ngetTheme('.element');\n\n// 获取指定 DOM 元素上的主题\nconst element = document.querySelector('.element');\ngetTheme(element);\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">getTheme(target?: string | HTMLElement | <a href=\"/zh-cn/docs/2/functions/jq\">JQ</a>&lt;HTMLElement&gt;): 'light' | 'dark' | 'auto'</code></pre>\n\n函数的参数为要获取主题的元素，可以是 CSS 选择器、DOM 元素，或 [JQ 对象](/zh-cn/docs/2/functions/jq)。如果不传入参数，则默认获取 `<html>` 元素的主题。\n\n函数的返回值为 `light`、`dark`、`auto` 之一，如果元素上未设置主题，则默认返回 `light`。\n\n"
+    },
+    "functions--jq": {
+        "key": "functions--jq",
+        "title": "jq 工具库",
+        "description": "mdui 内置了一个轻量级的 JavaScript 工具库，它提供了类似于 jQuery 的 API 和链式调用方式，但其体积只有 jQuery 的六分之一。",
+        "content": "# jq 工具库\n\nmdui 内置了一个轻量级的 JavaScript 工具库，它提供了类似于 jQuery 的 API 和链式调用方式，但其体积只有 jQuery 的六分之一。\n\n你可以按需导入该工具函数：\n\n```js\nimport { $ } from 'mdui/jq.js';\n```\n\n## 核心 {#api-core}\n\n### `$()` {#dollar}\n\n该函数有多种用法：\n\n传入 CSS 选择器作为参数，返回包含匹配元素的 JQ 对象。\n\n```js\n$('.box');\n```\n\n传入 DOM 元素、任意数组、NodeList 或 JQ 对象，返回包含指定元素的 JQ 对象。\n\n```js\n$(document);\n```\n\n传入 HTML 字符串，返回包含根据 HTML 创建的 DOM 的 JQ 对象。\n\n```js\n$(`<div id=\"wrapper\">\n  <span id=\"inner\"></span>\n</div>`);\n```\n\n传入一个函数，当 DOM 加载完毕后会调用该函数。\n\n```js\n$(function () {\n  console.log('DOM Loaded');\n});\n```\n\n## 扩展 {#api-extend}\n\n### `$.extend()` {#d-extend}\n\n如果只传入一个对象，该对象中的属性将合并到 `$` 对象中，相当于在 `$` 的命名空间下添加新的功能。\n\n```js\n$.extend({\n  customFunc: function () {},\n});\n\n// 然后就可以这样调用自定义方法了\n$.customFunc();\n```\n\n如果传入了两个或更多个对象，所有对象的属性都添加到第一个对象，并返回合并后的对象。不过值为 `undefined` 的属性不会合并。\n\n```js\nconst object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 });\n\n// 此时第一个对象和返回值都是 { key1: val1, key2: val2, key3: val3 }\n```\n\n### `$.fn.extend()` {#fn-extend}\n\n在 `$` 的原型链上扩展方法。\n\n```js\n$.fn.extend({\n  customFunc: function () {},\n});\n\n// 然后就可以这样使用扩展的方法了\n$(document).customFunc();\n```\n\n## URL {#api-url}\n\n### `$.param()` {#d-param}\n\n将数组或对象序列化为 URL 查询字符串。\n\n```js\n$.param({ width: 1680, height: 1050 });\n// width=1680&height=1050\n\n$.param({ foo: { one: 1, two: 2 } });\n// foo[one]=1&foo[two]=2\n\n$.param({ ids: [1, 2, 3] });\n// ids[]=1&ids[]=2&ids[]=3\n```\n\n如果传入的参数是数组，那么该数组的格式必须与 [`.serializeArray()`](#serializeArray) 返回的格式一致。\n\n```js\n$.param([\n  { name: 'name', value: 'mdui' },\n  { name: 'password', value: '123456' },\n]);\n// name=mdui&password=123456\n```\n\n## 数组和对象操作 {#api-array}\n\n### `$.each()` {#d-each}\n\n遍历数组或对象。它返回的是第一个参数，即被遍历的数组或对象。\n\n回调函数的第一个参数是数组的索引或对象的键，第二个参数是数组或对象对应位置的值。\n\n在回调函数中，`this` 指向数组或对象对应位置的值。如果回调函数返回 `false`，则停止遍历。\n\n```js\n// 遍历数组\n$.each(['a', 'b', 'c'], function (index, value) {\n  console.log(index + ':' + value);\n});\n\n// 结果：\n// 0:a\n// 1:b\n// 2:c\n```\n\n```js\n// 遍历对象\n$.each({ name: 'mdui', lang: 'zh' }, function (key, value) {\n  console.log(key + ':' + value);\n});\n\n// 结果\n// name:mdui\n// lang:zh\n```\n\n### `$.merge()` {#d-merge}\n\n将第二个数组的元素追加到第一个数组中，并返回合并后的数组。\n\n```js\nconst first = ['a', 'b', 'c'];\nconst second = ['c', 'd', 'e'];\nconst result = $.merge(first, second);\n\nconsole.log(first); // ['a', 'b', 'c', 'c', 'd', 'e']\nconsole.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']\n```\n\n### `$.unique()` {#d-unique}\n\n移除数组中的重复元素。\n\n```js\nconst result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]);\nconsole.log(result); // [1, 2, 12, 3]\n```\n\n### `$.map()` {#d-map}\n\n遍历数组或对象，返回一个由回调函数的返回值组成的新数组。\n\n回调函数的第一个参数是数组或对象对应位置的值，第二个参数是数组的索引或对象的键。\n\n回调函数可以返回任何值。如果返回的是数组，那么这个数组会被展开。如果返回的是 `null` 或 `undefined`，那么这个值会被忽略。在回调函数内部，`this` 指向 `window` 对象。\n\n```js\n// 遍历数组\nconst result = $.map(['a', 'b', 'c'], function (value, index) {\n  return index + value;\n});\nconsole.log(result); // ['0a', '1b', '2c']\n```\n\n```js\n// 当回调函数返回数组时，数组会被展开\nconst result = $.map([1, 2, 3], function (value, index) {\n  return [value, value + 1];\n});\nconsole.log(result); // [1, 2, 2, 3, 3, 4]\n```\n\n```js\n// 遍历对象\nconst result = $.map(\n  { name: 'mdui', password: '123456' },\n  function (value, key) {\n    return key + ':' + value;\n  },\n);\nconsole.log(result); // ['name:mdui', 'password:123456']\n```\n\n### `$.contains()` {#d-contains}\n\n判断一个节点是否包含另一个节点。如果父节点包含子节点，返回 `true`；否则，返回 `false`。\n\n```js\n$.contains(document, document.body); // true\n$.contains(document.body, document); // false\n```\n\n## 数据类型判断 {#api-type}\n\n### `.is()` {#is}\n\n判断集合中是否至少有一个元素与参数匹配。如果匹配，返回 `true`；否则，返回 `false`。\n\n参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象，或者回调函数。\n\n如果参数是回调函数，那么函数的第一个参数是索引，第二个参数是当前元素。在函数内部，`this` 指向当前元素。如果函数返回 `true`，表示当前元素与参数匹配；如果返回 `false`，表示当前元素与参数不匹配。\n\n```js\n$('.box').is('.box'); // true\n$('.box').is('.boxss'); // false\n$('.box').is($('.box')[0]); // true\n```\n\n```js\n// 通过回调函数的返回值做判断\n$(document).is(function (index, element) {\n  return element === document;\n});\n// true\n```\n\n## 对象访问 {#api-object}\n\n### `.length` {#length}\n\n返回当前集合中元素的数量。\n\n```js\n$('body').length; // 1\n```\n\n### `.each()` {#each}\n\n遍历当前集合，为集合中的每个元素执行一个函数。如果函数返回 `false`，则停止遍历。\n\n函数的第一个参数是元素的索引位置，第二个参数是当前元素。在函数内部，`this` 指向当前元素。\n\n```js\n$('img').each(function (index, element) {\n  this.src = 'test' + index + '.jpg';\n});\n```\n\n### `.map()` {#map}\n\n遍历当前集合，为集合中的每个元素执行一个函数，返回由函数返回值组成的新集合。\n\n函数可以返回单个数据或数据数组。如果返回数组，那么会将数组中的元素依次添加到新集合中。如果函数返回 `null` 或 `undefined`，那么这个值不会被添加到新集合中。\n\n函数的第一个参数是元素的索引位置，第二个参数是当前元素。在函数内部，`this` 指向当前元素。\n\n```js\nconst result = $('input.checked').map(function (i, element) {\n  return element.value;\n});\n\n// result 是一个由匹配元素的值组成的 JQ 对象\n```\n\n### `.eq()` {#eq}\n\n返回一个新集合，该集合只包含指定索引位置的元素。\n\n```js\n$('div').eq(0); // 返回仅包含第一个元素的集合\n$('div').eq(-1); // 返回仅包含最后一个元素的集合\n$('div').eq(-2); // 返回仅包含倒数第二个元素的集合\n```\n\n### `.first()` {#first}\n\n返回一个新集合，该集合只包含当前集合中的第一个元素。\n\n```js\n$('div').first(); // 返回仅包含第一个 div 的集合\n```\n\n### `.last()` {#last}\n\n返回一个新集合，该集合只包含当前集合中的最后一个元素。\n\n```js\n$('div').last(); // 返回仅包含最后一个 div 的集合\n```\n\n### `.get()` {#get}\n\n返回指定索引位置的元素。如果没有传入参数，它将返回由集合中所有元素组成的数组。\n\n```js\n$('div').get(); // 返回所有 div 元素组成的数组\n$('div').get(0); // 返回第一个 div 元素\n$('div').get(-1); // 返回最后一个 div 元素\n```\n\n### `.index()` {#index}\n\n如果没有传入参数，它将返回当前集合中第一个元素相对于其同辈元素的索引值。\n\n如果传入一个 CSS 选择器，它将返回当前集合中第一个元素相对于 CSS 选择器匹配元素的索引值。\n\n如果传入一个 DOM 元素，它将返回该元素在当前集合中的索引值。\n\n如果传入一个 JQ 对象，它将返回对象中第一个元素在当前集合中的索引值。\n\n```html\n<div id=\"child\">\n  <div id=\"child1\"></div>\n  <div id=\"child2\"></div>\n  <div id=\"child3\"></div>\n  <div id=\"child4\"></div>\n</div>\n```\n\n```js\n$('#child3').index(); // 2\n$('#child3').index('#child div'); // 2\n$('#child div').index($('#child3').get(0)); // 2\n```\n\n### `.slice()` {#slice}\n\n返回当前集合的子集。\n\n你可以通过传入两个参数来指定子集的起始和结束位置（不包含结束位置的元素）。如果没有传入第二个参数，它将返回从起始位置到集合末尾的所有元素。\n\n```js\n// 返回集合中第三个（包含第三个）之后的所有元素\n$('div').slice(3);\n\n// 返回集合中第三个到第五个（包含第三个，不包含第五个）之间的元素\n$('div').slice(3, 5);\n```\n\n### `.filter()` {#filter}\n\n从当前集合中筛选出与指定表达式匹配的元素。参数可以是 CSS 选择器、DOM 元素、DOM 元素数组或回调函数。\n\n如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是当前元素。在函数内部，`this` 指向当前元素。如果函数返回 `true`，当前元素会被保留；如果返回 `false`，当前元素会被移除。\n\n```js\n// 筛选出所有含 .box 的 div 元素\n$('div').filter('.box');\n\n// 筛选出所有已选中选项\n$('#select option').filter(function (index, element) {\n  return element.selected;\n});\n```\n\n### `.not()` {#not}\n\n从当前集合中筛选出与指定表达式不匹配的元素。\n\n参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象，或返回 `boolean` 值的回调函数。\n\n如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是当前元素。在函数内部，`this` 指向当前元素。如果函数返回 `true`，当前元素会被移除；如果返回 `false`，当前元素会被保留。\n\n```js\n// 筛选出所有不含 .box 类的 div 元素\n$('div').not('.box');\n\n// 筛选出所有未选中选项\n$('#select option').not(function (index, element) {\n  return element.selected;\n});\n```\n\n## CSS 类 {#api-css}\n\n### `.hasClass()` {#hasClass}\n\n判断集合中的第一个元素是否含有指定的 CSS 类。\n\n```js\n// 判断第一个 div 元素是否含有 .item\n$('div').hasClass('item');\n```\n\n### `.addClass()` {#addClass}\n\n为集合中的每个元素添加 CSS 类，多个类名之间可以用空格分隔。\n\n参数可以是字符串，也可以是一个返回 CSS 类名的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是该元素上原有的 CSS 类名。在函数内部，`this` 指向当前元素。\n\n```js\n// 为所有 div 元素添加 .item\n$('div').addClass('item');\n\n// 为所有 div 元素添加 .item1 和 .item2\n$('div').addClass('item1 item2');\n\n// 为所有 div 元素添加由回调函数返回的 CSS 类\n$('div').addClass(function (index, currentClassName) {\n  return currentClassName + '-' + index;\n});\n```\n\n### `.removeClass()` {#removeClass}\n\n移除集合中每个元素上的指定 CSS 类，多个类名之间可以用空格分隔。\n\n参数可以是字符串，也可以是一个返回 CSS 类名的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是该元素上原有的 CSS 类名。在函数内部，`this` 指向当前元素。\n\n如果没有传入参数，该方法将直接移除元素上的 `class` 属性。\n\n```js\n// 移除所有 div 元素上的 .item\n$('div').removeClass('item');\n\n// 移除所有 div 元素上的 .item1 和 .item2\n$('div').removeClass('item1 item2');\n\n// 移除所有 div 元素上的由回调函数返回的 CSS 类\n$('div').removeClass(function (index, currentClassName) {\n  return 'item';\n});\n```\n\n### `.toggleClass()` {#toggleClass}\n\n如果元素上有指定的 CSS 类，则删除它；如果没有，则添加它。多个类名之间可以用空格分隔。\n\n参数可以是字符串，也可以是一个返回 CSS 类名的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是该元素上原有的 CSS 类名。在函数内部，`this` 指向当前元素。\n\n```js\n// 切换所有 div 元素上的 .item 类\n$('div').toggleClass('item');\n\n// 切换所有 div 元素上的 .item1 和 .item2 类\n$('div').toggleClass('item1 item2');\n\n// 切换所有 div 元素上的由回调函数返回的 CSS 类\n$('div').toggleClass(function (index, currentClassName) {\n  return 'item';\n});\n```\n\n## 节点属性 {#api-attr}\n\n### `.prop()` {#prop}\n\n获取集合中第一个元素的 JavaScript 属性值。\n\n```js\n// 获取第一个元素 checked 属性值\n$('input').prop('checked');\n```\n\n如果传入了两个参数，该方法将设置集合中所有元素的指定 JavaScript 属性值。\n\n属性值可以是任意类型的值，或回调函数的返回值。回调函数的第一个参数为元素的索引位置，第二个参数为该元素上原有的属性值，函数内的 `this` 指向当前元素。\n属性值可以是任意类型的值，也可以是一个返回属性值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是该元素上原有的属性值。在函数内部，`this` 指向当前元素。\n\n如果属性值或回调函数的返回值为 `undefined`，该方法将不会修改元素的原有属性。\n\n```js\n// 设置所有选中元素的 checked 属性值为 true\n$('input').prop('checked', true);\n\n// 通过回调函数的返回值设置属性值\n$('input').prop('checked', function (index, oldPropValue) {\n  return true;\n});\n```\n\n也可以通过传入一个对象来同时设置多个属性。\n\n```js\n// 同时设置元素的多个属性值\n$('input').prop({\n  checked: false,\n  disabled: function (index, oldPropValue) {\n    return true;\n  },\n});\n```\n\n### `.removeProp()` {#removeProp}\n\n删除集合中所有元素上指定的 JavaScript 属性值。\n\n```js\n$('input').removeProp('disabled');\n```\n\n### `.attr()` {#attr}\n\n获取集合中第一个元素的 HTML 属性值。\n\n```js\n// 获取第一个元素的属性值\n$('div').attr('username');\n```\n\n如果传入两个参数，该方法将设置集合中所有元素的指定 HTML 属性值。\n\n属性值可以是字符串或数值，也可以是一个返回属性值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是该元素上原有的属性值。在函数内部，`this` 指向当前元素。\n\n如果属性值或回调函数的返回值为 `null`，该方法将删除指定属性；如果为 `undefined`，则不会修改元素的原有属性。\n\n```js\n// 设置所有选中元素的属性值\n$('div').attr('username', 'mdui');\n\n// 通过回调函数的返回值设置属性值\n$('div').attr('username', function (index, oldAttrValue) {\n  return 'mdui';\n});\n```\n\n也可以通过传入一个对象来同时设置多个属性。\n\n```js\n// 同时设置元素的多个属性值\n$('div').attr({\n  username: 'mdui',\n  lastname: function (index, oldAttrValue) {\n    return 'test';\n  },\n});\n```\n\n### `.removeAttr()` {#removeAttr}\n\n删除集合中所有元素上指定的 HTML 属性，多个属性名之间可以用空格分隔。\n\n```js\n// 删除集合中所有元素上的一个属性\n$('div').removeAttr('username');\n\n// 删除集合中所有元素上的多个属性\n$('div').removeAttr('username lastname');\n```\n\n### `.val()` {#val}\n\n返回集合中第一个元素的值。\n\n如果元素是 `<select multiple=\"multiple\">`，则返回一个包含所有选中项的数组。\n\n```js\n// 获取选中的第一个元素的值\n$('#input').val();\n```\n\n如果传入参数，该方法将设置集合中所有元素的值。\n\n值可以是字符串、数值、字符串数组，或一个返回值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有值。在函数内部，`this` 指向当前元素。\n\n如果元素是 `<input type=\"checkbox\">`、`<input type=\"radio\">`、`<option>`，则值或回调函数的返回值可以是数组，此时将选中数组中的值，并取消不在数组中的值。\n\n如果值或回调函数的返回值为 `undefined`，则将元素值设为空。\n\n```js\n// 设置选中元素的值\n$('#input').val('mdui');\n\n// 通过回调函数的返回值设置元素值\n$('#input').val(function (index, oldValue) {\n  return 'mdui';\n});\n```\n\n### `.text()` {#text}\n\n返回集合中所有元素（包含它们的后代元素）的文本内容。\n\n```js\n// 获取所有 .box 元素的文本\n$('.box').text();\n```\n\n如果传入参数，该方法将设置集合中所有元素的文本内容。\n\n值可以是字符串、数值、布尔值，或一个返回文本内容的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有文本内容。在函数内部，`this` 指向当前元素。\n\n如果值或回调函数的返回值为 `undefined`，则不修改元素的文本内容。\n\n```js\n// 设置选中元素的文本内容\n$('.box').text('text content');\n\n// 通过回调函数的返回值设置元素的文本内容\n$('.box').text(function (index, oldTextContent) {\n  return 'new text content';\n});\n```\n\n### `.html()` {#html}\n\n返回集合中第一个元素的 HTML 内容。\n\n```js\n// 获取第一个 .box 元素的 HTML 内容\n$('.box').html();\n```\n\n如果传入参数，该方法将设置集合中所有元素的 HTML 内容。\n\n值可以是 HTML 字符串、DOM 元素，或一个返回 HTML 字符串或 DOM 元素的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有 HTML 内容。在函数内部，`this` 指向当前元素。\n\n如果值或回调函数的返回值为 `undefined`，则不修改元素的 HTML 内容。\n\n```js\n// 设置选中元素的 HTML\n$('.box').html('<div>new html content</div>');\n\n// 通过回调函数的返回值设置元素的 HTML 内容\n$('.box').html(function (index, oldHTMLContent) {\n  return '<div>new html content</div>';\n});\n```\n\n## 数据存储 {#api-data}\n\n### `$.data()` {#d-data}\n\n在指定元素上读取或存储数据。\n\n存储数据时，如果值为 `undefined`，则相当于读取元素上对应的数据。即 `$.data(element, 'key', undefined)` 和 `$.data(element, 'key')` 等效。\n\n注意：该方法不会检索元素上的 `data-*` 属性。\n\n```js\n// 在指定元素上存储数据，返回存储的值\n$.data(document.body, 'layout', 'dark'); // 返回 dark\n\n// 在指定元素上同时存储多个数据\n$.data(document.body, {\n  primary: 'indigo',\n  accent: 'pink',\n}); // 返回 { primary: 'indigo', accent: 'pink' }\n\n// 获取在指定元素上存储的数据\n$.data(document.body, 'layout'); // 返回 dark\n\n// 获取在指定元素上存储的所有数据\n$.data(document.body); // 返回 { layout: 'dark', primary: 'indigo', accent: 'pink' }\n```\n\n### `$.removeData()` {#d-removeData}\n\n移除指定元素上存储的数据。\n\n可以指定多个键名，用空格分隔，或者用数组表示。如果不指定键名，将移除元素上的所有数据。\n\n```js\n// 移除元素上键名为 name 的数据\n$.removeData(document.body, 'name');\n\n// 移除元素上键名为 name1 和 name2 的数据。下面两种方法等效：\n$.removeData(document.body, 'name1 name2');\n$.removeData(document.body, ['name1', 'name2']);\n\n// 移除元素上存储的所有数据\n$.removeData(document.body);\n```\n\n### `.data()` {#data}\n\n在当前集合的元素上读取或存储数据。\n\n如果存储的值为 `undefined`，则不进行存储。\n\n注意：该方法检索的数据会包含元素上的 `data-*` 属性。\n\n```js\n// 在当前集合中的元素上存储数据\n$('.box').data('layout', 'dark');\n\n// 在当前集合中的元素上同时存储多个数据\n$('.box').data({\n  primary: 'indigo',\n  accent: 'pink',\n});\n\n// 获取当前集合中第一个元素上存储的指定数据\n$('.box').data('layout'); // 返回 dark\n\n// 获取在当前集合中第一个元素上存储的所有数据\n$('.box').data(); // 返回 { layout: 'dark', primary: 'indigo', accent: 'pink' }\n```\n\n### `.removeData()` {#removeData}\n\n移除当前集合的元素上存储的数据。\n\n可以指定多个键名，用空格分隔，或者用数组表示。如果不指定键名，将移除元素上的所有数据。\n\n注意：该方法只会移除通过 `.data()` 方法设置的数据，不会移除 `data-*` 属性上的数据。\n\n```js\n// 移除键名为 name 的数据\n$('.box').removeData('name');\n\n// 移除键名为 name1 和 name2 的数据。下面两种方法等效：\n$('.box').removeData('name1 name2');\n$('.box').removeData(['name1', 'name2']);\n\n// 移除元素上存储的所有数据\n$('.box').removeData();\n```\n\n## 样式 {#api-style}\n\n### `.css()` {#css}\n\n获取集合中第一个元素的 CSS 属性值。\n\n```js\n$('.box').css('color');\n```\n\n如果传入参数，该方法将设置集合中所有元素的 CSS 属性值。\n\n属性值可以是字符串、数值，或一个返回字符串或数值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有 CSS 属性值。在函数内部，`this` 指向当前元素。\n\n如果值或回调函数的返回值为 `undefined`，则不修改元素的 CSS 属性值。如果值为 `null`，则移除元素的对应 CSS 属性。如果值为数值，将自动添加 `px` 作为单位，若该属性无法使用 `px` 作为单位，则会直接把值转为字符串。\n\n```js\n// 设置集合中所有元素的样式值\n$('.box').css('color', 'red');\n\n// 通过回调函数的返回值设置所有元素的样式值\n$('.box').css('color', function (index, oldCSSValue) {\n  return 'green';\n});\n\n// 通过传入一个对象同时设置多个样式\n$('.box').css({\n  'background-color': 'white',\n  color: function (index, oldCSSValue) {\n    return 'blue';\n  },\n});\n```\n\n### `.width()` {#width}\n\n获取集合中第一个元素的宽度（不包含 `padding`, `border`, `margin`）。\n\n```js\n$('.box').width();\n```\n\n如果传入参数，该方法将设置集合中所有元素的宽度。\n\n值可以是带单位的字符串、数值，或一个返回带单位的字符串或数值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有宽度。在函数内部，`this` 指向当前元素。\n\n如果值或回调函数的返回值为 `null` 或 `undefined`，则不修改元素的宽度。如果值为数值，将自动添加 `px` 作为单位。\n\n```js\n// 设置集合中所有元素的宽度\n$('.box').width('20%');\n\n// 值为数值时，默认单位为 px\n$('.box').width(10);\n\n// 通过回调函数的返回值设置宽度\n$('.box').width(function (index, oldWidth) {\n  return 10;\n});\n```\n\n### `.height()` {#height}\n\n获取集合中第一个元素的高度（不包含 `padding`, `border`, `margin`）。\n\n```js\n$('.box').height();\n```\n\n如果传入参数，该方法将设置集合中所有元素的高度。\n\n值可以是带单位的字符串、数值，或一个返回带单位的字符串或数值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有高度。在函数内部，`this` 指向当前元素。\n\n如果值或回调函数的返回值为 `null` 或 `undefined`，则不修改元素的高度。如果值为数值，将自动添加 `px` 作为单位。\n\n```js\n// 设置集合中所有元素的高度\n$('.box').height('20%');\n\n// 值为数值时，默认单位为 px\n$('.box').height(10);\n\n// 通过回调函数的返回值设置高度\n$('.box').height(function (index, oldWidth) {\n  return 10;\n});\n```\n\n### `.innerWidth()` {#innerWidth}\n\n获取集合中第一个元素的宽度（包含 `padding`，不包含 `border`, `margin`）。\n\n```js\n$('.box').innerWidth();\n```\n\n如果传入参数，该方法将设置集合中所有元素的宽度。\n\n值可以是带单位的字符串、数值，或一个返回带单位的字符串或数值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有宽度。在函数内部，`this` 指向当前元素。\n\n如果值或回调函数的返回值为 `null` 或 `undefined`，则不修改元素的宽度。如果值为数值，将自动添加 `px` 作为单位。\n\n```js\n// 设置集合中所有元素的宽度\n$('.box').innerWidth('20%');\n\n// 值为数值时，默认单位为 px\n$('.box').innerWidth(10);\n\n// 通过回调函数的返回值设置宽度\n$('.box').innerWidth(function (index, oldWidth) {\n  return 10;\n});\n```\n\n### `.innerHeight()` {#innerHeight}\n\n获取集合中第一个元素的高度（包含 `padding`，不包含 `border`, `margin`）。\n\n```js\n$('.box').innerHeight();\n```\n\n如果传入参数，该方法将设置集合中所有元素的高度。\n\n值可以是带单位的字符串、数值，或一个返回带单位的字符串或数值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有高度。在函数内部，`this` 指向当前元素。\n\n如果值或回调函数的返回值为 `null` 或 `undefined`，则不修改元素的高度。如果值为数值，将自动添加 `px` 作为单位。\n\n```js\n// 设置集合中所有元素的高度\n$('.box').innerHeight('20%');\n\n// 值为数值时，默认单位为 px\n$('.box').innerHeight(10);\n\n// 通过回调函数的返回值设置高度\n$('.box').innerHeight(function (index, oldHeight) {\n  return 10;\n});\n```\n\n### `.outerWidth()` {#outerWidth}\n\n获取集合中第一个元素的宽度（包含 `padding`、`border`，不包含 `margin`。可以传入参数 `true`，使宽度包含 `margin`）。\n\n```js\n// 包含 padding、border 的宽度\n$('.box').outerWidth();\n\n// 包含 padding、border、margin 的宽度\n$('.box').outerWidth(true);\n```\n\n也可以使用该方法设置集合中所有元素的宽度（包含 `padding`、`border`，不包含 `margin`。可以在第二个参数中传入 `true`，使宽度包含 `margin`）。\n\n第一个参数可以是带单位的字符串、数值、或一个返回带单位的字符串或数值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有宽度。在函数内部，`this` 指向当前元素。\n\n如果值或回调函数的返回值为 `null` 或 `undefined`，则不修改元素的宽度。如果值为数值，将自动添加 `px` 作为单位。\n\n```js\n// 设置集合中所有元素的宽度\n$('.box').outerWidth('20%');\n\n// 值为数值时，默认单位为 px\n$('.box').outerWidth(10);\n\n// 第二个参数为 true，则宽度将包含 margin\n$('.box').outerWidth(10, true);\n\n// 通过回调函数的返回值设置宽度\n$('.box').outerWidth(function (index, oldWidth) {\n  return 10;\n});\n```\n\n### `.outerHeight()` {#outerHeight}\n\n获取集合中第一个元素的高度（包含 `padding`、`border`，不包含 `margin`。可以传入参数 `true`，使高度包含 `margin`）。\n\n```js\n// 包含 padding、border 的高度\n$('.box').outerHeight();\n\n// 包含 padding、border、margin 的高度\n$('.box').outerHeight(true);\n```\n\n也可以用该方法设置集合中所有元素的高度（包含 `padding`、`border`，不包含 `margin`。可以在第二个参数中传入 `true`，使高度包含 `margin`）。\n\n第一个参数可以是带单位的字符串、数值、或一个返回带单位的字符串或数值的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有高度。在函数内部，`this` 指向当前元素。\n\n如果值或回调函数的返回值为 `null` 或 `undefined`，则不修改元素的高度。如果值为数值，将自动添加 `px` 作为单位。\n\n```js\n// 设置集合中所有元素的高度\n$('.box').outerHeight('20%');\n\n// 值为数值时，默认单位为 px\n$('.box').outerHeight(10);\n\n// 第二个参数为 true，则高度将包含 margin\n$('.box').outerHeight(10, true);\n\n// 通过回调函数的返回值设置高度\n$('.box').outerHeight(function (index, oldWidth) {\n  return 10;\n});\n```\n\n### `.hide()` {#hide}\n\n隐藏集合中的所有元素。\n\n```js\n$('.box').hide();\n```\n\n### `.show()` {#show}\n\n显示集合中的所有元素。\n\n```js\n$('.box').show();\n```\n\n### `.toggle()` {#toggle}\n\n切换集合中所有元素的显示状态。\n\n```js\n$('.box').toggle();\n```\n\n### `.offset()` {#offset}\n\n获取当前集合中第一个元素相对于 `document` 的坐标。\n\n```js\n$('.box').offset(); // { top: 20, left: 30 }\n```\n\n如果传入参数，该方法将设置集合中所有元素相对于 `document` 的坐标。\n\n参数可以是一个包含 `top` 和 `left` 属性的对象，或一个返回此格式对象的回调函数。如果参数是回调函数，该函数的第一个参数是元素的索引位置，第二个参数是元素的原有坐标。在函数内部，`this` 指向当前元素。\n\n如果参数中 `top` 或 `left` 的值为 `undefined`，则不修改对应的值。\n\n```js\n// 设置集合中所有元素的坐标\n$('.box').offset({ top: 20, left: 30 });\n\n// 通过回调函数的返回值设置元素的坐标\n$('.box').offset(function (index, oldOffset) {\n  return { top: 20, left: 30 };\n});\n```\n\n### `.offsetParent()` {#offsetParent}\n\n获取集合中第一个元素的定位父元素。即父元素中第一个 `position` 属性为 `relative` 或 `absolute` 的元素。\n\n```js\n$('.box').offsetParent();\n```\n\n### `.position()` {#position}\n\n获取集合中第一个元素相对于其定位父元素的偏移。\n\n```js\n$('.box').position(); // { top: 20, left: 30 }\n```\n\n## 查找节点 {#api-selector}\n\n### `.find()` {#find}\n\n在当前集合中，根据 CSS 选择器找到指定的后代节点集合。\n\n```js\n// 找到 #box 的后代节点中，包含 .box 的节点集合\n$('#box').find('.box');\n```\n\n### `.children()` {#children}\n\n在当前集合中，获取直接子元素组成的集合。可以传入一个 CSS 选择器作为参数，对子元素进行过滤。\n\n```js\n// 找到 #box 的所有直接子元素\n$('#box').children();\n\n// 找到 #box 的所有直接子元素中，包含 .box 的元素\n$('#box').children('.box');\n```\n\n### `.has()` {#has}\n\n在当前集合中，筛选出含有指定子元素的元素。参数可以是 CSS 选择器或 DOM 元素。\n\n```js\n// 给含有 ul 的 li 加上背景色\n$('li').has('ul').css('background-color', 'red');\n```\n\n### `.parent()` {#parent}\n\n获取当前集合中，所有元素的直接父元素的集合。可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的父元素的集合。\n\n```js\n// 返回 .box 元素的直接父元素\n$('.box').parent();\n\n// 返回 .box 元素的直接父元素中含有 .parent 类的元素\n$('.box').parent('.parent');\n```\n\n### `.parents()` {#parents}\n\n获取当前集合中，所有元素的祖先元素的集合。可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的祖先元素的集合。\n\n```js\n// 返回 span 元素的所有祖先元素\n$('span').parents();\n\n// 返回 span 元素的所有是 p 元素的祖先元素\n$('span').parents('p');\n```\n\n### `.parentsUntil()` {#parentsUntil}\n\n获取当前集合中，每个元素的所有父辈元素，直到遇到和第一个参数匹配的元素为止（不包含匹配元素）。\n\n第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。\n\n可以传入第二个参数，必须是 CSS 选择器，表示仅返回和该参数匹配的元素。\n\n若没有指定参数，则所有的祖先元素都将被匹配，即和 `.parents()` 效果一样。\n\n```js\n// 获取 .item 元素的所有祖先元素\n$('.item').parentsUntil();\n\n// 查找 .item 元素的所有父辈元素，直到遇到 .parent 元素为止\n$('.item').parentsUntil('.parent');\n\n// 获取 .item 元素的所有是 div 元素的祖先元素，直到遇到 .parent 元素为止\n$('.item').parentsUntil('.parent', 'div');\n```\n\n### `.prev()` {#prev}\n\n获取当前集合中，每个元素的前一个同级元素组成的集合。可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的同级元素的集合。\n\n```js\n// 获取 .box 元素的前一个同级元素的集合\n$('.box').prev();\n\n// 获取 .box 元素的前一个是 div 的同级元素的集合\n$('.box').prev('div');\n```\n\n### `.prevAll()` {#prevAll}\n\n获取当前集合中，每个元素前面的所有同级元素组成的集合。可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的同级元素的集合。\n\n```js\n// 获取 .box 元素前面的所有同级元素\n$('.box').prevAll();\n\n// 获取 .box 元素前面的所有含 .selected 的同级元素\n$('.box').prevAll('.selected');\n```\n\n### `.prevUntil()` {#prevUntil}\n\n获取当前集合中，每个元素前面的所有同级元素，直到遇到与第一个参数匹配的元素为止（不包含匹配元素）。\n\n第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。可以传入第二个参数，必须是 CSS 选择器，表示仅返回和该参数匹配的元素。\n\n若没有指定参数，则返回前面的所有同级元素，即与 `.prevAll()` 方法的效果相同。\n\n```js\n// 获取 .box 元素前面的所有同级元素\n$('.box').prevUntil();\n\n// 获取 .box 元素前面的所有同级元素，直到遇到 .until 元素为止\n$('.box').prevUntil('.until');\n\n// 获取 .box 元素前面的所有是 div 的同级元素，直到遇到 .until 元素为止\n$('.box').prevUntil('.until', 'div');\n```\n\n### `.next()` {#next}\n\n获取当前集合中，每个元素的后一个同级元素组成的集合。可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的同级元素的集合。\n\n```js\n// 获取 .box 元素的后一个同级元素的集合\n$('.box').next();\n\n// 获取 .box 元素的后一个是 div 的同级元素的集合\n$('.box').next('div');\n```\n\n### `.nextAll()` {#nextAll}\n\n获取当前集合中，每个元素后面的所有同级元素组成的集合。可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的同级元素的集合。\n\n```js\n// 获取 .box 元素后面的所有同级元素\n$('.box').nextAll();\n\n// 获取 .box 元素后面的所有含 .selected 的同级元素\n$('.box').nextAll('.selected');\n```\n\n### `.nextUntil()` {#nextUntil}\n\n获取当前集合中，每个元素后面的所有同级元素，直到遇到与第一个参数匹配的元素为止（不包含匹配元素）。\n\n第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。可以传入第二个参数，必须是 CSS 选择器，表示仅返回与该参数匹配的元素。\n\n若没有指定参数，则返回后面的所有同级元素，即与 `.nextAll()` 方法的效果相同。\n\n```js\n// 获取 .box 元素后面所有的同级元素\n$('.box').nextUntil();\n\n// 获取 .box 元素后所有的同级元素，直到遇到 .until 元素为止\n$('.box').nextUntil('.until');\n\n// 获取 .box 元素后面同级的 div 元素，直到遇到 .until 元素为止\n$('.box').nextUntil('.until', 'div');\n```\n\n### `.closest()` {#closest}\n\n从当前元素开始向上逐级查找，返回最先匹配到的元素。参数可以是 CSS 选择器、DOM 元素、JQ 对象。\n\n```js\n// 获取 .box 元素的父元素中最近的 .parent 元素\n$('.box').closest('.parent');\n```\n\n### `.siblings()` {#siblings}\n\n获取当前集合中，每个元素的所有同级元素。可以传入一个 CSS 选择器作为参数，仅返回与该参数匹配的同级元素的集合。\n\n```js\n// 获取 .box 元素的所有同级元素\n$('.box').siblings();\n\n// 获取 .box 元素的所有同级元素中含 .selected 的元素\n$('.box').siblings('.selected');\n```\n\n### `.add()` {#add}\n\n将元素添加到当前集合中。参数可以是 HTML 字符串、CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。\n\n```js\n// 把含 .selected 的元素添加到当前集合中\n$('.box').add('.selected');\n```\n\n## 节点操作 {#api-dom}\n\n### `.empty()` {#empty}\n\n移除当前元素中所有的子元素。\n\n```js\n$('.box').empty();\n```\n\n### `.remove()` {#remove}\n\n从 DOM 中移除当前集合中的元素。可以传入一个 CSS 选择器作为参数，仅移除与该参数匹配的元素。\n\n```js\n// 移除所有 p 元素\n$('p').remove();\n\n// 移除所有含 .box 的 p 元素\n$('p').remove('.box');\n```\n\n### `.prepend()` {#prepend}\n\n在当前集合中的元素内部的前面插入指定内容。参数可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。\n\n也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数。函数的第一个参数是当前元素的索引位置，第二个参数是元素的原始 HTML，函数中的 `this` 指向当前元素。\n\n该方法返回原始集合。\n\n```js\n// 插入一个元素\n$('<p>I would like to say: </p>').prepend('<b>Hello</b>');\n// 结果：<p><b>Hello</b>I would like to say: </p>\n\n// 插入多个元素\n$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');\n// 结果：<p><b>Hello</b><b>World</b>I would like to say: </p>\n\n// 通过回调函数插入一个元素\n$('<p>Hello</p>').append(function (index, oldHTML) {\n  return '<b>' + oldHTML + index + '</b>';\n});\n// 结果：<p><b>Hello0</b>Hello</p>\n```\n\n### `.prependTo()` {#prependTo}\n\n将当前集合中的元素追加到指定元素内部的前面。参数可以是 CSS 选择器、HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。\n\n该方法返回原始集合。\n\n```js\n$('<p>Hello</p>').prependTo('<p>I would like to say: </p>');\n// 结果：[ <p><p>Hello</p>I would like to say: </p> ]\n```\n\n### `.append()` {#append}\n\n在当前元素内部的后面插入指定内容。参数可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。\n\n也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数是当前元素的索引位置，第二个参数是元素的原始 HTML，函数中的 `this` 指向当前元素。\n\n该方法返回原始集合。\n\n```js\n// 插入一个元素\n$('<p>I would like to say: </p>').append('<b>Hello</b>');\n// 结果：<p>I would like to say: <b>Hello</b></p>\n\n// 插入多个元素\n$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');\n// 结果：<p>I would like to say: <b>Hello</b><b>World</b></p>\n\n// 通过回调函数插入一个元素\n$('<p>Hello</p>').append(function (index, oldHTML) {\n  return '<b>' + oldHTML + index + '</b>';\n});\n// 结果：<p>Hello<b>Hello0</b></p>\n```\n\n### `.appendTo()` {#appendTo}\n\n将当前集合中的元素追加到指定元素内部的后面。参数可以是 CSS 选择器、HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。\n\n该方法返回原始集合。\n\n```js\n$('<p>Hello</p>').appendTo('<p>I would like to say: </p>');\n// 结果：<p>I would like to say: <p>Hello</p></p>\n```\n\n### `.after()` {#after}\n\n在当前集合的元素后面插入指定内容，作为其同级元素。参数可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。\n\n也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数是当前元素的索引位置，第二个参数是元素的原始 HTML，函数中的 `this` 指向当前元素。\n\n该方法返回原始集合。\n\n```js\n// 插入一个元素\n$('<p>I would like to say: </p>').after('<b>Hello</b>');\n// 结果：<p>I would like to say: </p><b>Hello</b>\n\n// 插入多个元素\n$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>');\n// 结果：<p>I would like to say: </p><b>Hello</b><b>World</b>\n\n// 通过回调函数插入一个元素\n$('<p>Hello</p>').after(function (index, oldHTML) {\n  return '<b>' + oldHTML + index + '</b>';\n});\n// 结果：<p>Hello</p><b>Hello0</b>\n```\n\n### `.insertAfter()` {#insertAfter}\n\n将当前集合中的元素插入到目标元素的后面，作为其同级元素。\n\n如果当前集合中的元素是页面中已有的元素，则将移动该元素，而不是复制。如果有多个目标，则将克隆当前集合中的元素，并添加到每个目标元素的后面。\n\n可以传入一个 HTML 字符串、CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象作为参数，来指定目标元素。\n\n```js\n$('<b>Hello</b>').insertAfter('<p>I would like to say: </p>');\n// 结果：<p>I would like to say: </p><b>Hello</b>\n```\n\n### `.before()` {#before}\n\n在当前集合的元素前面插入指定内容，作为其同级元素。参数可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。\n\n也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数，函数的第一个参数是当前元素的索引位置，第二个参数是元素的原始 HTML，函数中的 `this` 指向当前元素。\n\n该方法返回原始集合。\n\n```js\n// 插入一个元素\n$('<p>I would like to say: </p>').before('<b>Hello</b>');\n// 结果：<b>Hello</b><p>I would like to say: </p>\n\n// 插入多个元素\n$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>');\n// 结果：<b>Hello</b><b>World</b><p>I would like to say: </p>\n\n// 通过回调函数插入一个元素\n$('<p>Hello</p>').before(function (index, oldHTML) {\n  return '<b>' + oldHTML + index + '</b>';\n});\n// 结果：<b>Hello0</b><p>Hello</p>\n```\n\n### `.insertBefore()` {#insertBefore}\n\n将当前集合中的元素插入到目标元素的前面，作为其同级元素。\n\n如果当前集合中的元素是页面中已有的元素，则将移动该元素，而不是复制。如果有多个目标，则将克隆当前集合中的元素，并添加到每个目标元素的前面。\n\n可以传入一个 HTML 字符串、CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象作为参数，来指定目标元素。\n\n```js\n$('<p>I would like to say: </p>').insertBefore('<b>Hello</b>');\n// 结果：<p>I would like to say: </p><b>Hello</b>\n```\n\n### `.replaceWith()` {#replaceWith}\n\n用指定元素来替换当前集合中的元素。\n\n参数可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。\n\n也可以传入一个返回 HTML 字符串、DOM 元素、DOM元素数组、JQ 对象的回调函数，函数的第一个参数是当前元素的索引位置，第二个参数是元素的原始 HTML，函数中的 `this` 指向当前元素。\n\n该方法返回被替换掉的原始集合。\n\n```js\n// 用 <p>Hello</p> 替换所有的 .box 元素\n$('.box').replaceWith('<p>Hello</p>');\n\n// 用回调函数的返回值替换所有 .box 元素\n$('.box').replaceWith(function (index, oldHTML) {\n  return oldHTML + index;\n});\n```\n\n### `.replaceAll()` {#replaceAll}\n\n用当前集合中的元素替换指定元素。\n\n参数为被替换的元素，可以是 CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象。\n\n该方法返回原始集合，即用于替换的元素的集合。\n\n```js\n// 用 .new 元素替换所有 .box 元素\n$('.new').replaceAll('.box');\n```\n\n### `.clone()` {#clone}\n\n通过深度克隆来复制集合中的所有元素。\n\n该方法使用原生 `cloneNode` 方法进行深度克隆，但不会复制数据和事件处理程序到新的元素。这点和 jQuery 中利用一个参数来确定是否复制数据和事件处理不相同。\n\n```js\n$('body').append($('#box').clone());\n```\n\n## 表单 {#api-form}\n\n### `.serializeArray()` {#serializeArray}\n\n将表单元素的值组合成由 `name` 和 `value` 的键值对组成的数组。\n\n该方法可以对单独的表单元素进行操作，也可以对整个 `<form>` 表单进行操作。\n\n```js\n$('form').serializeArray();\n// [\n//   { \"name\": \"golang\", \"value\":\"456\" },\n//   { \"name\": \"name\", \"value\": \"mdui\" },\n//   { \"name\": \"password\", \"value\": \"\" }\n// ]\n```\n\n### `.serializeObject()` {#serializeObject}\n\n将表单元素的值转换为对象。\n\n如果存在相同的键名，那么对应的值会被转换为数组。\n\n该方法可以对单独的表单元素进行操作，也可以对整个 `<form>` 表单进行操作。\n\n```js\n$('form').serializeObject();\n// { name: mdui, password: 123456 }\n```\n\n### `.serialize()` {#serialize}\n\n将表单元素的值编译为 URL 编码的字符串。\n\n```js\n$('form').serialize();\n// golang=456&name=mdui&password=\n```\n\n## 事件 {#api-event}\n\n### `.on()` {#on}\n\n为集合中每个元素的特定事件绑定事件处理函数。具体用法见下方示例：\n\n```js\n// 绑定点击事件\n$('.box').on('click', function (e) {\n  console.log('点击了 .box 元素');\n});\n\n// 绑定多个事件\n$('.box').on('click focus', function (e) {\n  console.log('click 和 focus 事件都会触发该函数');\n});\n\n// 事件委托\n$(document).on('click', '.box', function (e) {\n  console.log('点击 .box 时会触发该函数');\n});\n\n// 同时绑定多个事件和事件处理函数\n$('.box').on({\n  click: function (e) {\n    console.log('触发了 click 事件');\n  },\n  focus: function (e) {\n    console.log('触发了 focus 事件');\n  },\n});\n\n// 传入参数\n$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {\n  console.log('点击了 .box 元素，并为事件处理函数传入了参数');\n  // e._data 为 {key1: 'value1', key2: 'value2'}\n});\n\n// 同时绑定多个事件和事件处理函数，并传入参数\n$('.box').on(\n  {\n    click: function (e) {\n      console.log('触发了 click 事件');\n      // e._data 为 {key1: 'value1', key2: 'value2'}\n    },\n    focus: function (e) {\n      console.log('触发了 focus 事件');\n      // e._data 为 {key1: 'value1', key2: 'value2'}\n    },\n  },\n  { key1: 'value1', key2: 'value2' },\n);\n\n// 通过事件委托绑定事件，并传入参数\n$(document).on(\n  'click',\n  '.box',\n  { key1: 'value1', keys: 'value2' },\n  function (e) {\n    console.log('点击了 .box 元素，并为事件处理函数传入了参数');\n    // e._data 为 {key1: 'value1', key2: 'value2'}\n  },\n);\n\n// 通过事件委托同时绑定多个事件和事件处理函数\n$(document).on(\n  {\n    click: function (e) {\n      console.log('触发了 click 事件');\n    },\n    focus: function (e) {\n      console.log('触发了 focus 事件');\n    },\n  },\n  '.box',\n);\n\n// 通过事件委托同时绑定多个事件和事件处理函数，并传入参数\n$(document).on(\n  {\n    click: function (e) {\n      console.log('触发了 click 事件');\n      // e._data 为 {key1: 'value1', key2: 'value2'}\n    },\n    focus: function (e) {\n      console.log('触发了 focus 事件');\n      // e._data 为 {key1: 'value1', key2: 'value2'}\n    },\n  },\n  '.box',\n  { key1: 'value1', key2: 'value2' },\n);\n\n// 获取事件参数\n$('.box').on('click', function (e, data) {\n  // data 等于 e.detail\n});\n\n// 事件名支持使用命名空间\n$('.box').on('click.myPlugin', function () {\n  console.log('点击了 .box 元素');\n});\n```\n\n### `.one()` {#one}\n\n为每个匹配元素的特定事件绑定事件处理函数，但事件只会触发一次。\n\n该方法的用法和 `.on()` 相同，所以不再举例了。\n\n### `.off()` {#off}\n\n解除集合中的元素绑定的事件。具体用法见下方示例：\n\n```js\n// 解除所有绑定的事件处理函数\n$('.box').off();\n\n// 解除绑定的指定事件\n$('.box').off('click');\n\n// 同时解除多个绑定的事件\n$('.box').off('click focus');\n\n// 解除绑定的指定事件处理函数\n$('.box').off('click', callback);\n\n// 解除通过事件委托绑定的事件\n$(document).off('click', '.box');\n\n// 解除通过事件委托绑定的指定事件处理函数\n$(document).off('click', '.box', callback);\n\n// 同时解绑多个事件处理函数\n$('.box.').off({\n  click: callback1,\n  focus: callback2,\n});\n\n// 同时解绑多个通过事件委托绑定的事件处理函数\n$(document).off(\n  {\n    click: callback1,\n    focus: callback2,\n  },\n  '.box',\n);\n\n// 事件名支持使用命名空间，下面的用法将解绑所有以 .myPlugin 结尾的事件\n$(document).off('.myPlugin');\n```\n\n### `.trigger()` {#trigger}\n\n触发指定的事件。具体用法见下方示例：\n\n```js\n// 触发指定的事件\n$('.box').trigger('click');\n\n// 触发事件时传入参数\n$('.box').trigger('click', { key1: 'value1', key2: 'value2' });\n\n// 事件名支持命名空间\n$('.box').trigger('click.myPlugin');\n\n// 传入 CustomEvent 的参数\n$('.box').trigger('click', undefined, {\n  bubbles: true;\n  cancelable: true;\n  composed: true\n});\n```\n\n## ajax {#api-ajax}\n\n### `$.ajaxSetup()` {#d-ajaxSetup}\n\n设置全局的 AJAX 请求参数。\n\n```js\n$.ajaxSetup({\n  // 默认不触发全局 AJAX 事件\n  global: false,\n\n  // 默认使用 POST 方法发送请求\n  method: 'POST',\n});\n```\n\n详细参数列表参见下方的 [ajax 参数](#ajax-options)。\n\n### `$.ajax()` {#d-ajax}\n\n发送 AJAX 请求，并返回一个 Promise 对象。\n\n```js\nconst promise = $.ajax({\n  method: 'POST',\n  url: './test.php',\n  data: {\n    key1: 'val1',\n    key2: 'val2',\n  },\n  success: function (response) {\n    console.log(response);\n  },\n});\n\npromise\n  .then((response) => {\n    console.log(response);\n  })\n  .catch((error) => {\n    console.log(error);\n  });\n```\n\n详细参数列表请参见下方的 [AJAX 参数](#ajax-options)。\n\n还可以使用 `.on()` 方法来监听 AJAX 的全局事件。\n\n```js\n// 当 AJAX 请求开始时，会触发此事件\n$(document).on('ajaxStart', function (e, { xhr, options }) {\n  // xhr: XMLHttpRequest 对象\n  // options: $.ajax() 方法的参数\n});\n\n// 当 AJAX 请求成功时，会触发此事件\n$(document).on('ajaxSuccess', function (e, { xhr, options, response }) {\n  // xhr: XMLHttpRequest 对象\n  // options: $.ajax() 方法的参数\n  // response: 请求的响应\n});\n\n// 当 AJAX 请求失败时，会触发此事件\n$(document).on('ajaxError', function (e, { xhr, options }) {\n  // xhr: XMLHttpRequest 对象\n  // options: $.ajax() 方法的参数\n});\n\n// 当 AJAX 请求完成时（无论成功或失败），会触发此事件\n$(document).on('ajaxComplete', function (e, { xhr, options }) {\n  // xhr: XMLHttpRequest 对象\n  // options: $.ajax() 方法的参数\n});\n```\n\n### ajax 参数 {#ajax-options}\n\n<table>\n  <thead>\n    <tr>\n      <th>属性名</th>\n      <th>类型</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr id=\"ajax-options-url\">\n      <td><a href=\"#ajax-options-url\"><code>url</code></a></td>\n      <td><code>string</code></td>\n      <td>当前页面 URL</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">请求的 URL 地址。</td>\n    </tr>\n    <tr id=\"ajax-options-method\">\n      <td><a href=\"#ajax-options-method\"><code>method</code></a></td>\n      <td><code>string</code></td>\n      <td><code>GET</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>请求的 HTTP 方法。</p>\n        <p>可选值包括：<code>GET</code>、<code>POST</code>、<code>PUT</code>、<code>PATCH</code>、<code>HEAD</code>、<code>OPTIONS</code>、<code>DELETE</code>。</p>\n      </td>\n    </tr>\n    <tr id=\"ajax-options-data\">\n      <td><a href=\"#ajax-options-data\"><code>data</code></a></td>\n      <td><code>any</code></td>\n      <td><code>''</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">发送到服务器的数据。</td>\n    </tr>\n    <tr id=\"ajax-options-processData\">\n      <td><a href=\"#ajax-options-processData\"><code>processData</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>true</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否将传入的数据转换为查询字符串。</td>\n    </tr>\n    <tr id=\"ajax-options-async\">\n      <td><a href=\"#ajax-options-async\"><code>async</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>true</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否为异步请求。</td>\n    </tr>\n    <tr id=\"ajax-options-cache\">\n      <td><a href=\"#ajax-options-cache\"><code>cache</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>true</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否从缓存中读取数据。仅对 <code>GET</code>、<code>HEAD</code> 请求有效。</td>\n    </tr>\n    <tr id=\"ajax-options-username\">\n      <td><a href=\"#ajax-options-username\"><code>username</code></a></td>\n      <td><code>string</code></td>\n      <td><code>''</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">用于 HTTP 访问认证的用户名。</td>\n    </tr>\n    <tr id=\"ajax-options-password\">\n      <td><a href=\"#ajax-options-password\"><code>password</code></a></td>\n      <td><code>string</code></td>\n      <td><code>''</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">用于 HTTP 访问认证的密码。</td>\n    </tr>\n    <tr id=\"ajax-options-headers\">\n      <td><a href=\"#ajax-options-headers\"><code>headers</code></a></td>\n      <td><code>object</code></td>\n      <td><code>{}</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>添加到 HTTP 请求头的数据。可以在 <code>beforeSend</code> 回调函数中重写该值。</p>\n        <p>值为字符串或 <code>null</code> 的字段会被发送，值为 <code>undefined</code> 的字段会被忽略。</p>\n      </td>\n    </tr>\n    <tr id=\"ajax-options-xhrFields\">\n      <td><a href=\"#ajax-options-xhrFields\"><code>xhrFields</code></a></td>\n      <td><code>object</code></td>\n      <td><code>{}</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>设置在 <code>XMLHttpRequest</code> 对象上的数据。</p>\n<pre><code class=\"language-js\">$.ajax({\n  url: '一个跨域 URL',\n  xhrFields: {\n    withCredentials: true\n  }\n});</code></pre>\n      </td>\n    </tr>\n    <tr id=\"ajax-options-statusCode\">\n      <td><a href=\"#ajax-options-statusCode\"><code>statusCode</code></a></td>\n      <td><code>object</code></td>\n      <td><code>{}</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>HTTP 状态码与对应处理函数的映射。</p>\n<pre><code class=\"language-js\">$.ajax({\n  statusCode: {\n    404: function (xhr, textStatus) {\n      alert('返回状态码为 404 时被调用');\n    },\n    200: function (data, textStatus, xhr) {\n      alert('返回状态码为 200 时被调用');\n    }\n  }\n});</code></pre>\n        <p>状态码在 200 - 299 范围内或为 304 时，表示请求成功，函数参数和 <code>success</code> 回调的参数相同；否则表示请求失败，函数参数和 <code>error</code> 回调的参数相同。</p>\n      </td>\n    </tr>\n    <tr id=\"ajax-options-dataType\">\n      <td><a href=\"#ajax-options-dataType\"><code>dataType</code></a></td>\n      <td><code>string</code></td>\n      <td><code>text</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>预期服务器返回的数据类型。</p>\n        <p>包括：<code>text</code>、<code>json</code></p>\n      </td>\n    </tr>\n    <tr id=\"ajax-options-contentType\">\n      <td><a href=\"#ajax-options-contentType\"><code>contentType</code></a></td>\n      <td><code>string</code></td>\n      <td><code>application/x-www-form-urlencoded</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">请求内容的 MIME 类型。如果设置为 <code>false</code>，则不设置 <code>Content-Type</code>。</td>\n    </tr>\n    <tr id=\"ajax-options-timeout\">\n      <td><a href=\"#ajax-options-timeout\"><code>timeout</code></a></td>\n      <td><code>number</code></td>\n      <td><code>0</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">请求超时时间（毫秒）。如果设置为 <code>0</code>，表示无超时时间。</td>\n    </tr>\n    <tr id=\"ajax-options-global\">\n      <td><a href=\"#ajax-options-global\"><code>global</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>true</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否触发全局 AJAX 事件。</td>\n    </tr>\n    <tr id=\"ajax-options-beforeSend\">\n      <td><a href=\"#ajax-options-beforeSend\"><code>beforeSend</code></a></td>\n      <td><code>function</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>在发送请求前调用。如果返回 <code>false</code>，则取消 AJAX 请求。</p>\n<pre><code class=\"language-js\">$.ajax({\n  beforeSend: function (xhr) {\n    // xhr 为 XMLHttpRequest 对象\n  }\n});</code></pre>\n      </td>\n    </tr>\n    <tr id=\"ajax-options-success\">\n      <td><a href=\"#ajax-options-success\"><code>success</code></a></td>\n      <td><code>function</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>请求成功之后调用。</p>\n<pre><code class=\"language-js\">$.ajax({\n  success: function (data, textStatus, xhr) {\n    // data 为 AJAX 请求返回的数据\n    // textStatus 为包含成功代码的字符串\n    // xhr 为 XMLHttpRequest 对象\n  }\n});</code></pre>\n      </td>\n    </tr>\n    <tr id=\"ajax-options-error\">\n      <td><a href=\"#ajax-options-error\"><code>error</code></a></td>\n      <td><code>function</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>请求出错时调用。</p>\n<pre><code class=\"language-js\">$.ajax({\n  error: function (xhr, textStatus) {\n    // xhr 为 XMLHttpRequest 对象\n    // textStatus 为包含错误代码的字符串\n  }\n});</code></pre>\n      </td>\n    </tr>\n    <tr id=\"ajax-options-complete\">\n      <td><a href=\"#ajax-options-complete\"><code>complete</code></a></td>\n      <td><code>function</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>无论请求成功或失败，都会在完成时调用。</p>\n<pre><code class=\"language-js\">$.ajax({\n  complete: function (xhr, textStatus) {\n    // xhr 为 XMLHttpRequest 对象\n    // textStatus 为一个包含成功或错误代码的字符串\n  }\n});</code></pre>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n"
+    },
+    "functions--loadLocale": {
+        "key": "functions--loadLocale",
+        "title": "loadLocale 函数",
+        "description": "`loadLocale` 函数用于加载语言包。详见 [本地化](/zh-cn/docs/2/getting-started/localization)。",
+        "content": "# loadLocale 函数\n\n`loadLocale` 函数用于加载语言包。详见 [本地化](/zh-cn/docs/2/getting-started/localization)。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { loadLocale } from 'mdui/functions/loadLocale.js';\n```\n\n下面列举了几种常见的语言包加载方式，详细说明可参见 [本地化](/zh-cn/docs/2/getting-started/localization)。\n\n动态导入（懒加载）：\n\n```js\nloadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));\n```\n\n动态导入（预加载）：\n\n```js\nconst localizedTemplates = new Map([\n  ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)],\n  ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)],\n]);\n\nloadLocale(async (locale) => localizedTemplates.get(locale));\n```\n\n静态导入：\n\n```js\nimport * as locale_zh_cn from 'mdui/locales/zh-cn.js';\nimport * as locale_zh_tw from 'mdui/locales/zh-tw.js';\n\nconst localizedTemplates = new Map([\n  ['zh-cn', locale_zh_cn],\n  ['zh-tw', locale_zh_tw],\n]);\n\nloadLocale(async (locale) => localizedTemplates.get(locale));\n```\n\n## API {#api}\n\n```ts\nloadLocale((LocaleTargetCode) => Promise<LocaleModule>): void;\n```\n\n函数的参数为一个定义了如何加载语言包的函数。语言包加载函数的参数为语言代码，返回值为 Promise，resolve 的值为对应的语言包模块。\n\n语言代码列表参见 [支持的语言](/zh-cn/docs/2/getting-started/localization#languages)，其中 `en-us` 为内置语言，无需加载。\n\n"
+    },
+    "functions--observeResize": {
+        "key": "functions--observeResize",
+        "title": "observeResize 函数",
+        "description": "`observeResize` 函数用于监听元素尺寸的变化，当尺寸发生变化时，会执行指定的回调函数。",
+        "content": "# observeResize 函数\n\n`observeResize` 函数用于监听元素尺寸的变化，当尺寸发生变化时，会执行指定的回调函数。\n\n该函数使用 [`ResizeObserver`](https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver) 实现，但采用了单例模式，因此性能更优。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { observeResize } from 'mdui/functions/observeResize.js';\n```\n\n使用示例：\n\n```js\n// 监听 document.body 的尺寸变化\nconst observer = observeResize(document.body, function (entry, observer) {\n  // 此时 document.body 的尺寸发生了变化，可通过 entry 获取新的尺寸\n  console.log(entry);\n\n  // 可调用该方法取消监听\n  observer.unobserve();\n});\n\n// 也可以调用函数返回值的 unobserve 方法取消监听\nobserver.unobserve();\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">observeResize(target: string | HTMLElement | <a href=\"/zh-cn/docs/2/functions/jq\">JQ</a>&lt;HTMLElement&gt;, callback: <a href=\"#api-callback\">Callback</a>)): <a href=\"#api-ObserveResize\">ObserveResize</a></code></pre>\n\n`target` 参数可以是 CSS 选择器、DOM 元素、或 <a href=\"/zh-cn/docs/2/functions/jq\">JQ 对象</a>。\n\n### Callback {#api-Callback}\n\n<pre><code class=\"nohighlight\">(entry: <a href=\"https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserverEntry\" target=\"_blank\" rel=\"noopener nofollow\">ResizeObserverEntry</a>, observer: <a href=\"#api-ObserveResize\">ObserveResize</a>) => void</code></pre>\n\n在回调函数中，`this` 指向 [ObserveResize](#api-ObserveResize)。\n\n### ObserveResize {#api-ObserveResize}\n\n```ts\n{\n  unobserve: () => void;\n}\n```\n\n"
+    },
+    "functions--prompt": {
+        "key": "functions--prompt",
+        "title": "prompt 函数",
+        "description": "`prompt` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，该函数在功能上用于代替系统原生的 `window.prompt` 函数。使用该函数，你无需编写组件的 HTML 代码，就能打开一个可输入文本的对话框。",
+        "content": "# prompt 函数\n\n`prompt` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，该函数在功能上用于代替系统原生的 `window.prompt` 函数。使用该函数，你无需编写组件的 HTML 代码，就能打开一个可输入文本的对话框。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { prompt } from 'mdui/functions/prompt.js';\n```\n\n使用示例：\n\n```html\n<mdui-button class=\"example-button\">open</mdui-button>\n\n<script type=\"module\">\n  import { prompt } from \"mdui/functions/prompt.js\";\n\n  const button = document.querySelector(\".example-button\");\n\n  button.addEventListener(\"click\", () => {\n    prompt({\n      headline: \"Prompt Title\",\n      description: \"Prompt description\",\n      confirmText: \"OK\",\n      cancelText: \"Cancel\",\n      onConfirm: (value) => console.log(\"confirmed: \" + value),\n      onCancel: () => console.log(\"canceled\"),\n    });\n  });\n</script>\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">prompt(options: <a href=\"#api-options\">Options</a>): Promise&lt;string&gt;</code></pre>\n\n函数的参数为 [Options](#api-options) 对象；返回值为 Promise，如果是通过点击确定按钮关闭对话框，则 Promise 会被 resolve，resolve 的参数为输入框的值，如果是通过其他方式关闭对话框，则 Promise 会被 reject。\n\n### Options {#api-options}\n\n<table>\n  <thead>\n    <tr>\n      <th>属性名</th>\n      <th>类型</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr id=\"options-headline\">\n      <td><a href=\"#options-headline\"><code>headline</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">prompt 的标题</td>\n    </tr>\n    <tr id=\"options-description\">\n      <td><a href=\"#options-description\"><code>description</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">prompt 的描述文本</td>\n    </tr>\n    <tr id=\"options-icon\">\n      <td><a href=\"#options-icon\"><code>icon</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">prompt 顶部的 Material Icons 图标名</td>\n    </tr>\n    <tr id=\"options-closeOnEsc\">\n      <td><a href=\"#options-closeOnEsc\"><code>closeOnEsc</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否在按下 ESC 键时，关闭 prompt</td>\n    </tr>\n    <tr id=\"options-closeOnOverlayClick\">\n      <td><a href=\"#options-closeOnOverlayClick\"><code>closeOnOverlayClick</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否在点击遮罩层时，关闭 prompt</td>\n    </tr>\n    <tr id=\"options-confirmText\">\n      <td><a href=\"#options-confirmText\"><code>confirmText</code></a></td>\n      <td><code>string</code></td>\n      <td><code>OK</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">确认按钮的文本</td>\n    </tr>\n    <tr id=\"options-cancelText\">\n      <td><a href=\"#options-cancelText\"><code>cancelText</code></a></td>\n      <td><code>string</code></td>\n      <td><code>Cancel</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">取消按钮的文本</td>\n    </tr>\n    <tr id=\"options-stackedActions\">\n      <td><a href=\"#options-stackedActions\"><code>stackedActions</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否垂直排列底部操作按钮</td>\n    </tr>\n    <tr id=\"options-queue\">\n      <td><a href=\"#options-queue\"><code>queue</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>队列名称。</p>\n        <p>默认不启用队列，在多次调用该函数时，将同时显示多个 prompt。</p>\n        <p>可在该参数中传入一个队列名称，具有相同队列名称的 prompt 函数，将在上一个 prompt 关闭后才打开下一个 prompt。</p>\n        <p><a href=\"/zh-cn/docs/2/functions/dialog\"><code>dialog()</code></a>、<a href=\"/zh-cn/docs/2/functions/alert\"><code>alert()</code></a>、<a href=\"/zh-cn/docs/2/functions/confirm\"><code>confirm()</code></a>、<code>prompt()</code> 这四个函数的队列名称若相同，则也将互相共用同一个队列。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onConfirm\">\n      <td><a href=\"#options-onConfirm\"><code>onConfirm</code></a></td>\n      <td><code>(value: string, dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void | boolean | Promise&lt;void&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击确认按钮时的回调函数。</p>\n        <p>函数参数为输入框的值和 dialog 实例，<code>this</code> 指向 dialog 实例。</p>\n        <p>默认点击确认按钮后会关闭 prompt；若返回值为 <code>false</code>，则不关闭 prompt；若返回值为 promise，则将在 promise 被 resolve 后，关闭 prompt。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onCancel\">\n      <td><a href=\"#options-onCancel\"><code>onCancel</code></a></td>\n      <td><code>(value: string, dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void | boolean | Promise&lt;void&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击取消按钮时的回调函数。</p>\n        <p>函数参数为输入框的值和 dialog 实例，<code>this</code> 指向 dialog 实例。</p>\n        <p>默认点击取消按钮后会关闭 prompt；若返回值为 <code>false</code>，则不关闭 prompt；若返回值为 promise，则将在 promise 被 resolve 后，关闭 prompt。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpen\">\n      <td><a href=\"#options-onOpen\"><code>onOpen</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>prompt 开始打开时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpened\">\n      <td><a href=\"#options-onOpened\"><code>onOpened</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>prompt 打开动画完成时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClose\">\n      <td><a href=\"#options-onClose\"><code>onClose</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>prompt 开始关闭时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClosed\">\n      <td><a href=\"#options-onClosed\"><code>onClosed</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>prompt 关闭动画完成时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOverlayClick\">\n      <td><a href=\"#options-onOverlayClick\"><code>onOverlayClick</code></a></td>\n      <td><code>(dialog: <a href=\"/zh-cn/docs/2/components/dialog\">Dialog</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击遮罩层时的回调函数。</p>\n        <p>函数参数为 dialog 实例，<code>this</code> 也指向 dialog 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-validator\">\n      <td><a href=\"#options-validator\"><code>validator</code></a></td>\n      <td><code>(value: string) => boolean | string | Promise&lt;void&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>输入框的验证函数，参数为输入框的值。<code>this</code> 指向 TextField 实例。</p>\n        <p>将在浏览器原生验证 API 验证通过后，再使用该函数进行验证。</p>\n        <p>可以返回 <code>boolean</code> 值，为 <code>false</code> 时表示验证未通过，为 <code>true</code> 时表示验证通过。</p>\n        <p>也可以返回字符串，字符串不为空时表示验证未通过，同时返回的字符串将用作错误提示。</p>\n        <p>也可以返回 Promise，被 resolve 表示验证通过，被 reject 表示验证未通过，同时拒绝原因将用作错误提示。</p>\n      </td>\n    </tr>\n    <tr id=\"options-textFieldOptions\">\n      <td><a href=\"#options-textFieldOptions\"><code>textFieldOptions</code></a></td>\n      <td><code>Partial&lt;<a href=\"/zh-cn/docs/2/components/text-field#attributes\">TextField</a>&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">prompt 内部的输入框为 <a href=\"/zh-cn/docs/2/components/text-field\"><code>&lt;mdui-text-field&gt;</code></a> 组件。可在该参数中设置 <a href=\"/zh-cn/docs/2/components/text-field\"><code>&lt;mdui-text-field&gt;</code></a> 组件的参数。</td>\n    </tr>\n  </tbody>\n</table>\n\n"
+    },
+    "functions--removeColorScheme": {
+        "key": "functions--removeColorScheme",
+        "title": "removeColorScheme 函数",
+        "description": "`removeColorScheme` 函数用于移除当前页面或指定元素上的配色方案。详见 [动态配色](/zh-cn/docs/2/styles/dynamic-color)。",
+        "content": "# removeColorScheme 函数\n\n`removeColorScheme` 函数用于移除当前页面或指定元素上的配色方案。详见 [动态配色](/zh-cn/docs/2/styles/dynamic-color)。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { removeColorScheme } from 'mdui/functions/removeColorScheme.js';\n```\n\n使用示例：\n\n```js\n// 移除 <html> 上的配色方案\nremoveColorScheme();\n\n// 移除 class=\"element\" 元素上的配色方案\nremoveColorScheme('.element');\n\n// 移除指定 DOM 元素上的配色方案\nconst element = document.querySelector('.element');\nremoveColorScheme(element);\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">removeColorScheme(target?: string | HTMLElement | <a href=\"/zh-cn/docs/2/functions/jq\">JQ</a>&lt;HTMLElement&gt;): void</code></pre>\n\n函数的参数为要移除配色方案的元素，可以是 CSS 选择器、DOM 元素，或 [JQ 对象](/zh-cn/docs/2/functions/jq)。如果不传入参数，则默认移除 `<html>` 元素的配色方案。\n\n"
+    },
+    "functions--setColorScheme": {
+        "key": "functions--setColorScheme",
+        "title": "setColorScheme 函数",
+        "description": "`setColorScheme` 函数用于根据提供的十六进制颜色值，设置配色方案。",
+        "content": "# setColorScheme 函数\n\n`setColorScheme` 函数用于根据提供的十六进制颜色值，设置配色方案。\n\n配色方案的设置会影响到页面中的所有 mdui 组件。详见 [动态配色](/zh-cn/docs/2/styles/dynamic-color)。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { setColorScheme } from 'mdui/functions/setColorScheme.js';\n```\n\n使用示例：\n\n```js\nsetColorScheme('#ff0000');\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">setColorScheme(color: string, options: <a href=\"#api-options\">Options</a>): void;</code></pre>\n\n### Options {#api-options}\n\n<table>\n  <thead>\n    <tr>\n      <th>属性名</th>\n      <th>类型</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr id=\"options-target\">\n      <td><a href=\"#options-target\"><code>target</code></a></td>\n      <td><code>string | HTMLElement | <a href=\"/zh-cn/docs/2/functions/jq\">JQ</a>&lt;HTMLElement&gt;</code></td>\n      <td><code>document.documentElement</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>要设置配色方案的元素。值可以是 CSS 选择器、DOM 元素、或 <a href=\"/zh-cn/docs/2/functions/jq\">JQ 对象</a>。若设置了该参数，则配色方案仅在指定元素内生效。</p>\n        <p>默认为 <code>document.documentElement</code>，即 <code>&lt;html&gt;</code> 元素，在整个页面生效。</p>\n      </td>\n    </tr>\n    <tr id=\"options-customColors\">\n      <td><a href=\"#options-customColors\"><code>customColors</code></a></td>\n      <td><code><a href=\"#api-custom-color\">CustomColor</a>[]</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">自定义颜色数组。使用方法请参见 <a href=\"/zh-cn/docs/2/styles/dynamic-color#color-scheme\">动态配色</a> 章节。</td>\n    </tr>\n  </tbody>\n</table>\n\n### CustomColor {#api-custom-color}\n\n<table>\n  <thead>\n    <tr>\n      <th>属性名</th>\n      <th>类型</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr id=\"custom-color-name\">\n      <td><a href=\"#custom-color-name\"><code>name</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">自定义颜色名。</td>\n    </tr>\n    <tr id=\"custom-color-value\">\n      <td><a href=\"#custom-color-value\"><code>value</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">自定义十六进制颜色值，如 <code>#f82506</code>。</td>\n    </tr>\n  </tbody>\n</table>\n\n"
+    },
+    "functions--setLocale": {
+        "key": "functions--setLocale",
+        "title": "setLocale 函数",
+        "description": "`setLocale` 函数用于设置当前的本地化语言代码。详见 [本地化](/zh-cn/docs/2/getting-started/localization)。",
+        "content": "# setLocale 函数\n\n`setLocale` 函数用于设置当前的本地化语言代码。详见 [本地化](/zh-cn/docs/2/getting-started/localization)。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { setLocale } from 'mdui/functions/setLocale.js';\n```\n\n使用示例：\n\n```js\nsetLocale('zh-cn').then(() => {\n  // promise 被 resolve 时，语言切换完成\n});\n```\n\n## API {#api}\n\n```ts\nsetLocale(LocaleCode): Promise<void>\n```\n\n函数的参数为语言代码，返回值为 Promise，在 Promise resolve 时，语言切换完成。\n\n语言代码列表参见 [支持的语言](/zh-cn/docs/2/getting-started/localization#languages)。\n\n"
+    },
+    "functions--setTheme": {
+        "key": "functions--setTheme",
+        "title": "setTheme 函数",
+        "description": "`setTheme` 函数用于设置当前页面或指定元素的主题。",
+        "content": "# setTheme 函数\n\n`setTheme` 函数用于设置当前页面或指定元素的主题。\n\n可选的主题包括 `light`、`dark`和 `auto`。详见 [暗色模式](/zh-cn/docs/2/styles/dark-mode)。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { setTheme } from 'mdui/functions/setTheme.js';\n```\n\n使用示例：\n\n```js\n// 把整个页面设置成暗色模式\nsetTheme('dark');\n\n// 把 class=\"element\" 元素设置成暗色模式\nsetTheme('dark', '.element');\n\n// 把指定 DOM 元素设置成暗色模式\nconst element = document.querySelector('.element');\nsetTheme('dark', element);\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">setTheme(theme: 'light' | 'dark' | 'auto', target?: string | HTMLElement | <a href=\"/zh-cn/docs/2/functions/jq\">JQ</a>&lt;HTMLElement&gt;): void</code></pre>\n\n函数的第一个参数是要设置的主题，可选值为 `light`、`dark`、`auto`。\n\n第二个参数是要设置主题的元素，可以是 CSS 选择器、DOM 元素，或 [JQ 对象](/zh-cn/docs/2/functions/jq)。如果不传入第二个参数，那么默认设置 `<html>` 元素的主题。\n\n"
+    },
+    "functions--snackbar": {
+        "key": "functions--snackbar",
+        "title": "snackbar 函数",
+        "description": "`snackbar` 函数是对 [`<mdui-snackbar>`](/zh-cn/docs/2/components/snackbar) 组件的封装。使用该函数，你无需编写组件的 HTML 代码，就能打开一个 snackbar。",
+        "content": "# snackbar 函数\n\n`snackbar` 函数是对 [`<mdui-snackbar>`](/zh-cn/docs/2/components/snackbar) 组件的封装。使用该函数，你无需编写组件的 HTML 代码，就能打开一个 snackbar。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { snackbar } from 'mdui/functions/snackbar.js';\n```\n\n使用示例：\n\n```html\n<mdui-button class=\"example-button\">open</mdui-button>\n\n<script type=\"module\">\n  import { snackbar } from \"mdui/functions/snackbar.js\";\n\n  const button = document.querySelector(\".example-button\");\n\n  button.addEventListener(\"click\", () => {\n    snackbar({\n      message: \"Photo archived\",\n      action: \"Undo\",\n      onActionClick: () => console.log(\"click action button\")\n    });\n  });\n</script>\n```\n\n## API {#api}\n\n<pre><code class=\"nohighlight\">snackbar(options: <a href=\"#api-options\">Options</a>): <a href=\"/zh-cn/docs/2/components/snackbar\">Snackbar</a></code></pre>\n\n函数接收一个 [Options](#api-options) 对象作为参数；返回值为 [`<mdui-snackbar>`](/zh-cn/docs/2/components/snackbar) 组件实例。\n\n### Options {#api-options}\n\n<table>\n  <thead>\n    <tr>\n      <th>属性名</th>\n      <th>类型</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr id=\"options-message\">\n      <td><a href=\"#options-message\"><code>message</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">Snackbar 中的消息文本内容</td>\n    </tr>\n    <tr id=\"options-placement\">\n      <td><a href=\"#options-placement\"><code>placement</code></a></td>\n      <td><code>'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'</code></td>\n      <td><code>bottom</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>Snackbar 出现的位置。默认为 <code>bottom</code>。可选值为：</p>\n        <ul>\n          <li><code>top</code>：位于顶部，居中对齐</li>\n          <li><code>top-start</code>：位于顶部，左对齐</li>\n          <li><code>top-end</code>：位于顶部，右对齐</li>\n          <li><code>bottom</code>：位于底部，居中对齐</li>\n          <li><code>bottom-start</code>：位于底部，左对齐</li>\n          <li><code>bottom-end</code>：位于底部，右对齐</li>\n        </ul>\n      </td>\n    </tr>\n    <tr id=\"options-action\">\n      <td><a href=\"#options-action\"><code>action</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">操作按钮的文本</td>\n    </tr>\n    <tr id=\"options-closeable\">\n      <td><a href=\"#options-closeable\"><code>closeable</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">是否在右侧显示关闭按钮</td>\n    </tr>\n    <tr id=\"options-messageLine\">\n      <td><a href=\"#options-messageLine\"><code>messageLine</code></a></td>\n      <td><code>1 | 2</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>消息文本最多显示几行。默认不限制行数。可选值为</p>\n        <ul>\n          <li><code>1</code>：消息文本最多显示一行</li>\n          <li><code>2</code>：消息文本最多显示两行</li>\n        </ul>\n      </td>\n    </tr>\n    <tr id=\"options-autoCloseDelay\">\n      <td><a href=\"#options-autoCloseDelay\"><code>autoCloseDelay</code></a></td>\n      <td><code>number</code></td>\n      <td><code>5000</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">在多长时间后自动关闭（单位为毫秒）。设置为 0 时，不自动关闭。默认为 5 秒后自动关闭。</td>\n    </tr>\n    <tr id=\"options-closeOnOutsideClick\">\n      <td><a href=\"#options-closeOnOutsideClick\"><code>closeOnOutsideClick</code></a></td>\n      <td><code>boolean</code></td>\n      <td><code>false</code></td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar</td>\n    </tr>\n    <tr id=\"options-queue\">\n      <td><a href=\"#options-queue\"><code>queue</code></a></td>\n      <td><code>string</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>队列名称。</p>\n        <p>默认不启用队列，在多次调用该函数时，将同时显示多个 snackbar。</p>\n        <p>可在该参数中传入一个队列名称，具有相同队列名称的 snackbar 函数，将在上一个 snackbar 关闭后才打开下一个 snackbar。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClick\">\n      <td><a href=\"#options-onClick\"><code>onClick</code></a></td>\n      <td><code>(snackbar: <a href=\"/zh-cn/docs/2/components/snackbar\">Snackbar</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击 Snackbar 时的回调函数。</p>\n        <p>函数参数为 snackbar 实例，<code>this</code> 也指向 snackbar 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onActionClick\">\n      <td><a href=\"#options-onActionClick\"><code>onActionClick</code></a></td>\n      <td><code>(snackbar: <a href=\"/zh-cn/docs/2/components/snackbar\">Snackbar</a>) => void | boolean | Promise&lt;void&gt;</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>点击操作按钮时的回调函数。</p>\n        <p>函数参数为 snackbar 实例，<code>this</code> 也指向 snackbar 实例。</p>\n        <p>默认点击后会关闭 snackbar；若返回值为 <code>false</code>，则不关闭 snackbar；若返回值为 promise，则将在 promise 被 resolve 后，关闭 snackbar。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpen\">\n      <td><a href=\"#options-onOpen\"><code>onOpen</code></a></td>\n      <td><code>(snackbar: <a href=\"/zh-cn/docs/2/components/snackbar\">Snackbar</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>Snackbar 开始显示时的回调函数。</p>\n        <p>函数参数为 snackbar 实例，<code>this</code> 也指向 snackbar 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onOpened\">\n      <td><a href=\"#options-onOpened\"><code>onOpened</code></a></td>\n      <td><code>(snackbar: <a href=\"/zh-cn/docs/2/components/snackbar\">Snackbar</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>Snackbar 显示动画完成时的回调函数。</p>\n        <p>函数参数为 snackbar 实例，<code>this</code> 也指向 snackbar 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClose\">\n      <td><a href=\"options-onClose\"><code>onClose</code></a></td>\n      <td><code>(snackbar: <a href=\"/zh-cn/docs/2/components/snackbar\">Snackbar</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>Snackbar 开始隐藏时的回调函数。</p>\n        <p>函数参数为 snackbar 实例，<code>this</code> 也指向 snackbar 实例。</p>\n      </td>\n    </tr>\n    <tr id=\"options-onClosed\">\n      <td><a href=\"#options-onClosed\"><code>onClosed</code></a></td>\n      <td><code>(snackbar: <a href=\"/zh-cn/docs/2/components/snackbar\">Snackbar</a>) => void</code></td>\n      <td>-</td>\n    </tr>\n    <tr>\n      <td colspan=\"3\">\n        <p>Snackbar 隐藏动画完成时的回调函数。</p>\n        <p>函数参数为 snackbar 实例，<code>this</code> 也指向 snackbar 实例。</p>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n"
+    },
+    "functions--throttle": {
+        "key": "functions--throttle",
+        "title": "throttle 函数",
+        "description": "`throttle` 函数用于创建一个节流函数，该函数在指定的时间间隔内最多只执行一次。",
+        "content": "# throttle 函数\n\n`throttle` 函数用于创建一个节流函数，该函数在指定的时间间隔内最多只执行一次。\n\n## 使用方法 {#usage}\n\n按需导入函数：\n\n```js\nimport { throttle } from 'mdui/functions/throttle.js';\n```\n\n使用示例：\n\n```js\n// 这个函数在 100 毫秒内最多执行一次，可避免在滚动时过于频繁地调用该函数\nwindow.addEventListener(\n  'scroll',\n  throttle(() => {\n    console.log('update');\n  }, 100),\n);\n```\n\n## API {#api}\n\n```ts\nthrottle(func: Function, wait: number): Function\n```\n\n函数的第一个参数是需要进行节流操作的函数，第二个参数是指定的时间间隔（单位：毫秒）。函数的返回值是经过节流处理的函数。\n\n"
+    },
+    "getting-started--faq": {
+        "key": "getting-started--faq",
+        "title": "常见问题",
+        "description": "以下整理了一些 mdui 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。",
+        "content": "# 常见问题\n\n以下整理了一些 mdui 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。\n\n## 使用自闭合标签为何无法显示组件？ {#no-self-closing}\n\nmdui 是基于 Web Components 开发的组件库，Web Components 规范不支持自闭合标签，因此请确保为 mdui 组件添加结束标签。\n\n```html\n<!-- 错误用法 -->\n<mdui-text-field />\n\n<!-- 正确用法 -->\n<mdui-text-field></mdui-text-field>\n```\n\n## 如何在组件加载完成前隐藏组件？ {#waiting-load}\n\n由于 mdui 组件是通过 JavaScript 进行注册的，因此在 js 文件加载并注册组件之前，组件可能会暂时显示为无样式状态。以下两种方法可以解决这个问题：\n\n一种方法是使用 CSS 的 [`:defined`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:defined) 伪类来隐藏未注册的 mdui 组件。以下 CSS 代码将隐藏所有未注册的 mdui 组件，并在组件注册完成后立即显示：\n\n```css\n:not(:defined) {\n  visibility: hidden;\n}\n```\n\n另一种方法是使用 JavaScript 的 [`customElements.whenDefined()`](https://developer.mozilla.org/zh-CN/docs/Web/API/CustomElementRegistry/whenDefined) 方法。这个方法返回一个 promise，当指定的组件注册完成后，该 promise 将被 resolve。为了处理某些组件由于特殊原因无法加载的情况，你可以配合使用 [`Promise.allSettled()`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) 方法。\n\n以下示例首先通过 `opacity: 0` 将 `<body>` 隐藏，然后在组件注册完成后，使页面淡入显示。同时，示例使用了 `Promise.allSettled()` 来等待所有 promise 完成，确保即使某个组件无法加载，页面也能正常显示：\n\n```html\n<style>\n  body {\n    opacity: 0;\n  }\n\n  body.ready {\n    opacity: 1;\n    transition: 0.25s opacity;\n  }\n</style>\n\n<script type=\"module\">\n  await Promise.allSettled([\n    customElements.whenDefined('mdui-button'),\n    customElements.whenDefined('mdui-card'),\n    customElements.whenDefined('mdui-checkbox'),\n  ]);\n\n  // 现在 button, card, checkbox 组件已经注册完成，添加 ready class，使页面淡入显示\n  document.body.classList.add('ready');\n</script>\n```\n\n"
+    },
+    "getting-started--ide-support": {
+        "key": "getting-started--ide-support",
+        "title": "IDE 支持",
+        "description": "mdui 专门为 VS Code 和 WebStorm 进行了优化，在这些 IDE 中可以获得代码自动完成、悬停提示等功能。",
+        "content": "# IDE 支持\n\nmdui 专门为 VS Code 和 WebStorm 进行了优化，在这些 IDE 中可以获得代码自动完成、悬停提示等功能。\n\n<style>\n.ide-support-icon {\n  user-select: none;\n  font-size: 1rem;\n}\n</style>\n\n## VS Code {#vscode}\n\n### 通过 npm 安装的 mdui {#vscode-npm}\n\n如果你通过 npm 安装了 mdui，可以按照以下步骤在当前项目中启用 VS Code 的 IDE 支持：\n\n1. 在项目的根目录中创建 `.vscode` 目录。\n2. 在 `.vscode` 目录中创建 `settings.json` 文件。\n3. 将以下代码添加到 `settings.json` 文件中：\n   ```json\n   {\n     \"html.customData\": [\"./node_modules/mdui/html-data.zh-cn.json\"],\n     \"css.customData\": [\"./node_modules/mdui/css-data.zh-cn.json\"]\n   }\n   ```\n\n如果 `settings.json` 文件已经存在，只需将上述两行代码添加到 JSON 文档的根节点即可。修改完成后，重启 VS Code。\n\n### 通过 CDN 使用的 mdui {#vscode-cdn}\n\n如果你是通过 CDN 引入的 mdui，可以通过安装 mdui 的 VS Code 扩展来获得 IDE 支持。\n\n在 VS Code 的扩展商店中搜索 `mdui`，选择第一条搜索结果进行安装，或者[点击此处安装](vscode:extension/zdhxiong.mdui)。安装完成后，所有项目都将启用 mdui 的 IDE 支持。\n\n建议优先通过 npm 安装并设置 `settings.json` 文件，而非安装 VS Code 扩展，以确保 IDE 支持与当前使用的 mdui 版本保持一致。\n\n## WebStorm {#webstorm}\n\n### 通过 npm 安装的 mdui {#webstorm-npm}\n\n如果你通过 npm 安装了 mdui，可以按照以下步骤在当前项目中启用 WebStorm 的 IDE 支持：\n\n1. 在项目根目录的 `package.json` 文件的根节点中添加以下代码：\n   ```\n   web-types: [\"./node_modules/mdui/web-types.zh-cn.json\"]\n   ```\n\n如果 `package.json` 文件的根节点已存在 `web-types` 属性，只需将 `./node_modules/mdui/web-types.zh-cn.json` 添加到 `web-types` 数组中即可。修改完成后，重启 WebStorm。\n\n### 通过 CDN 使用的 mdui {#webstorm-cdn}\n\n如果你是通过 CDN 引入的 mdui，可以通过安装 mdui 的 WebStorm 插件来获得 IDE 支持。\n\n在 WebStorm 的插件市场中搜索 `mdui`，选择第一条搜索结果进行安装。安装完成后，所有项目都将启用 mdui 的 IDE 支持。\n\n建议优先通过 npm 安装来获取 IDE 支持，而非安装 WebStorm 插件，以确保 IDE 支持与当前使用的 mdui 版本保持一致。\n\n## 对 VS Code 和 WebStorm 支持的差异 {#difference}\n\nmdui 对 VS Code 和 WebStorm 的支持存在一些差异。以下表格列出了详细的差异：\n\n| 具有代码自动完成及悬浮提示的位置         | VS Code                                                                | WebStorm                                                                                                  |\n| ---------------------------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| HTML 标签名                              | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon> | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon>                                    |\n| HTML 标签中的属性名                      | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon> | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon>                                    |\n| HTML 标签中属性值的枚举值                | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon> | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon>（不支持显示枚举值的注释）          |\n| HTML 标签中的事件名                      |                                                                        | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon>                                    |\n| HTML 中 slot 的 `name` 属性值            |                                                                        |                                                                                                           |\n| CSS 中 `::part()` 选择器的 `part` 属性名 |                                                                        | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon>（需要 WebStorm 2023.2 及以上版本） |\n| CSS 中组件内的 CSS 自定义属性名          |                                                                        | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon>                                    |\n| CSS 中的全局 CSS 自定义属性名            | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon> | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon>                                    |\n| CSS 中的全局 class 名                    |                                                                        | <mdui-icon name=\"check--rounded\" class=\"ide-support-icon\"></mdui-icon>                                    |\n\n"
+    },
+    "getting-started--installation": {
+        "key": "getting-started--installation",
+        "title": "安装",
+        "description": "你可以选择通过 npm 安装 mdui，或者从 CDN 引入 mdui。推荐使用 npm 进行安装。",
+        "content": "# 安装\n\n你可以选择通过 npm 安装 mdui，或者从 CDN 引入 mdui。推荐使用 npm 进行安装。\n\n## npm 安装 {#npm}\n\n```bash\nnpm install mdui --save\n```\n\n### 全量导入 {#full-import}\n\n在项目的入口文件中导入下面两个文件，即可使用所有 mdui 组件：\n\n```js\nimport 'mdui/mdui.css';\nimport 'mdui';\n```\n\n也可以直接从 mdui 导入需要使用的函数。例如，要导入 [`snackbar`](/zh-cn/docs/2/functions/snackbar) 函数，可以这样做：\n\n```js\nimport { snackbar } from 'mdui';\n```\n\n<mdui-collapse>\n  <mdui-collapse-item>\n    <mdui-button slot=\"header\" variant=\"text\">显示所有支持从 mdui 导入的函数</mdui-button>\n    <pre class=\"language-js\"><code>import {\n  $,\n  dialog,\n  alert,\n  confirm,\n  prompt,\n  snackbar,\n  getTheme,\n  setTheme,\n  getColorFromImage,\n  setColorScheme,\n  removeColorScheme,\n  loadLocale,\n  setLocale,\n  getLocale,\n  throttle,\n  observeResize,\n  breakpoint\n} from 'mdui';</code></pre>\n  </mdui-collapse-item>\n</mdui-collapse>\n\n### 按需导入 {#cherry-picking}\n\n为了优化项目体积，可以仅导入需要的组件和函数。例如，如果你只需要使用 [`<mdui-button>`](/zh-cn/docs/2/components/button) 组件和 [`snackbar`](/zh-cn/docs/2/functions/snackbar) 函数，可以按照以下方式导入：\n\n```js\n// CSS 文件始终需要导入\nimport 'mdui/mdui.css';\n// 导入 <mdui-button> 组件\nimport 'mdui/components/button.js';\n// 导入 snackbar 函数\nimport { snackbar } from 'mdui/functions/snackbar.js';\n```\n\n每个组件或函数的文档页面都会详细说明如何进行按需导入。\n\n<mdui-collapse>\n  <mdui-collapse-item>\n    <mdui-button slot=\"header\" variant=\"text\">显示所有支持按需导入的组件和函数</mdui-button>\n    <pre class=\"language-js\"><code>import 'mdui/components/avatar.js';\nimport 'mdui/components/badge.js';\nimport 'mdui/components/bottom-app-bar.js';\nimport 'mdui/components/button.js';\nimport 'mdui/components/button-icon.js';\nimport 'mdui/components/card.js';\nimport 'mdui/components/checkbox.js';\nimport 'mdui/components/chip.js';\nimport 'mdui/components/circular-progress.js';\nimport 'mdui/components/collapse/collapse.js';\nimport 'mdui/components/collapse/collapse-item.js';\nimport 'mdui/components/dialog.js';\nimport 'mdui/components/divider.js';\nimport 'mdui/components/dropdown.js';\nimport 'mdui/components/fab.js';\nimport 'mdui/components/icon.js';\nimport 'mdui/components/layout.js';\nimport 'mdui/components/layout-item.js';\nimport 'mdui/components/layout-main.js';\nimport 'mdui/components/linear-progress.js';\nimport 'mdui/components/list-item.js';\nimport 'mdui/components/list-subheader.js';\nimport 'mdui/components/list.js';\nimport 'mdui/components/menu-item.js';\nimport 'mdui/components/menu.js';\nimport 'mdui/components/navigation-bar-item.js';\nimport 'mdui/components/navigation-bar.js';\nimport 'mdui/components/navigation-drawer.js';\nimport 'mdui/components/navigation-rail.js';\nimport 'mdui/components/navigation-rail-item.js';\nimport 'mdui/components/radio.js';\nimport 'mdui/components/radio-group.js';\nimport 'mdui/components/range-slider.js';\nimport 'mdui/components/ripple.js';\nimport 'mdui/components/segmented-button.js';\nimport 'mdui/components/segmented-button-group.js';\nimport 'mdui/components/select.js';\nimport 'mdui/components/slider.js';\nimport 'mdui/components/snackbar.js';\nimport 'mdui/components/switch.js';\nimport 'mdui/components/tab.js';\nimport 'mdui/components/tab-panel.js';\nimport 'mdui/components/tabs.js';\nimport 'mdui/components/text-field.js';\nimport 'mdui/components/tooltip.js';\nimport 'mdui/components/top-app-bar-title.js';\nimport 'mdui/components/top-app-bar.js';\nimport { $ } from 'mdui/jq.js';\nimport { alert } from 'mdui/functions/alert.js';\nimport { breakpoint } from 'mdui/functions/breakpoint.js';\nimport { confirm } from 'mdui/functions/confirm.js';\nimport { dialog } from 'mdui/functions/dialog.js';\nimport { getColorFromImage } from 'mdui/functions/getColorFromImage.js';\nimport { getLocale } from 'mdui/functions/getLocale.js';\nimport { getTheme } from 'mdui/functions/getTheme.js';\nimport { loadLocale } from 'mdui/functions/loadLocale.js';\nimport { observeResize } from 'mdui/functions/observeResize.js';\nimport { prompt } from 'mdui/functions/prompt.js';\nimport { removeColorScheme } from 'mdui/functions/removeColorScheme.js';\nimport { setColorScheme } from 'mdui/functions/setColorScheme.js';\nimport { setLocale } from 'mdui/functions/setLocale.js';\nimport { setTheme } from 'mdui/functions/setTheme.js';\nimport { snackbar } from 'mdui/functions/snackbar.js';\nimport { throttle } from 'mdui/functions/throttle.js';</code></pre>\n  </mdui-collapse-item>\n</mdui-collapse>\n\n## CDN {#cdn}\n\n你可以使用 `<link>` 和 `<script>` 标签直接通过 CDN 来使用 mdui。也可以下载 CSS 和 JavaScript 文件并部署在你自己的服务器上。引入 CSS 和 JavaScript 文件后，就能使用所有 mdui 组件了。\n\n### 使用全局构建版本 {#global-build}\n\n下面的例子展示了如何使用全局构建版本的 mdui。在这个版本中，所有的函数都作为属性暴露在全局对象 `mdui` 上：\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/mdui@2/mdui.css\">\n<script src=\"https://unpkg.com/mdui@2/mdui.global.js\"></script>\n\n<mdui-button class=\"btn\">点我</mdui-button>\n\n<script>\n  document.querySelector('.btn').addEventListener('click', () => {\n    mdui.snackbar({ message: '点击了按钮' });\n  });\n</script>\n```\n\n### 使用 ES 模块构建版本 {#es-module}\n\n下面的例子展示了如何使用 ES 模块构建版本的 mdui。在这个版本中，你可以使用 ES 模块语法从 CDN 导入 mdui：\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/mdui@2/mdui.css\">\n\n<mdui-button class=\"btn\">点我</mdui-button>\n\n<script type=\"module\">\n  import { snackbar } from 'https://unpkg.com/mdui@2/mdui.esm.js';\n\n  document.querySelector('.btn').addEventListener('click', () => {\n    snackbar({ message: '点击了按钮' });\n  });\n</script>\n```\n\n"
+    },
+    "getting-started--localization": {
+        "key": "getting-started--localization",
+        "title": "本地化",
+        "description": "mdui 内部默认使用英文，如果需要使用其他语言，则需要进行多语言配置。",
+        "content": "# 本地化\n\nmdui 内部默认使用英文，如果需要使用其他语言，则需要进行多语言配置。\n\n## 使用方法 {#usage}\n\nmdui 提供了三个函数来实现多语言功能：\n\n- [`loadLocale`](/zh-cn/docs/2/functions/loadLocale)：加载语言包。参数为一个函数，接收一个语言代码作为参数，返回 Promise，当语言包加载完成时，Promise 被 resolve 为对应的语言包。请确保在项目的入口文件中调用该函数。\n- [`setLocale`](/zh-cn/docs/2/functions/setLocale)：切换到指定的语言。参数为新的语言代码，返回 Promise，在新的语言包加载完成后 resolve。\n- [`getLocale`](/zh-cn/docs/2/functions/getLocale)：获取当前的语言代码。\n\n使用示例如下：\n\n```js\nimport { loadLocale } from 'mdui/functions/loadLocale.js';\nimport { setLocale } from 'mdui/functions/setLocale.js';\nimport { getLocale } from 'mdui/functions/getLocale.js';\n\n// 在项目入口处调用 loadLocale 加载语言包\nloadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));\n\n// 在需要切换语言时调用该函数。在 Promise resolve 后，语言切换成功\nsetLocale('zh-cn').then(() => {\n  // 调用 getLocale 可获取当前的语言代码\n  console.log(getLocale()); // zh-cn\n});\n```\n\n## 状态事件 {#event}\n\n在语言切换的开始、结束、失败时，会在 `window` 上触发 `mdui-localize-status` 事件，你可以监听该事件来执行自定义操作，例如在语言切换成功后将语言代码写入 Cookie。\n\n事件的 `detail.status` 属性描述了当前发生了何种状态的变更，可能的值包括：`loading`、`ready`、`error`：\n\n<table>\n  <thead>\n    <tr>\n      <th><code>detail.status</code></th>\n      <th>描述</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code>loading</code></td>\n      <td>\n        <p>开始加载新的语言包。</p>\n        <p><code>detail</code> 对象包含：</p>\n        <ul>\n          <li><code>loadingLocale</code>：新加载语言的语言代码。</li>\n        <ul>\n      </td>\n    </tr>\n    <tr>\n      <td><code>ready</code></td>\n      <td>\n        <p>新的语言包加载成功。</p>\n        <p><code>detail</code> 对象包含：</p>\n        <ul>\n          <li><code>readyLocale</code>：新加载语言的语言代码。</li>\n        </ul>\n      </td>\n    </tr>\n    <tr>\n      <td><code>error</code></td>\n      <td>\n        <p>新的语言包加载失败。</p>\n        <p><code>detail</code> 对象包含：</p>\n        <ul>\n          <li><code>errorLocale</code>：加载失败的语言的语言代码。</li>\n          <li><code>errorMessage</code>：加载失败的错误信息。</li>\n        </ul>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n使用示例如下：\n\n```js\nwindow.addEventListener('mdui-localize-status', (event) => {\n  if (event.detail.status === 'loading') {\n    console.log(`开始加载新的语言包：${event.detail.loadingLocale}`);\n  } else if (event.detail.status === 'ready') {\n    console.log(`新语言包 ${event.detail.readyLocale} 加载成功`);\n  } else if (event.detail.status === 'error') {\n    console.error(\n      `新语言包 ${event.detail.errorLocale} 加载失败：${event.detail.errorMessage}`,\n    );\n  }\n});\n```\n\n## 语言包加载方式 {#load-locale}\n\n### 懒加载 {#lazy-load}\n\n使用[动态导入](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import)可以在切换到对应语言时，才下载对应的语言包。这是最为推荐的方法。\n\n```js\nimport { loadLocale } from 'mdui/functions/loadLocale.js';\n\nloadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`));\n```\n\n### 预加载 {#pre-load}\n\n在页面加载时，先下载好所有需要的语言包。这使得在切换语言时，无需再进行下载，从而使切换语言更加快速。\n\n```js\nimport { loadLocale } from 'mdui/functions/loadLocale.js';\n\nconst localizedTemplates = new Map([\n  ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)],\n  ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)],\n]);\n\nloadLocale(async (locale) => localizedTemplates.get(locale));\n```\n\n### 静态导入 {#static-imports}\n\n使用该方法可以把所有需要的语言包和你的项目代码打包到同一个文件里，不再需要单独下载语言包。\n\n```js\nimport { loadLocale } from 'mdui/functions/loadLocale.js';\nimport * as locale_zh_cn from 'mdui/locales/zh-cn.js';\nimport * as locale_zh_tw from 'mdui/locales/zh-tw.js';\n\nconst localizedTemplates = new Map([\n  ['zh-cn', locale_zh_cn],\n  ['zh-tw', locale_zh_tw],\n]);\n\nloadLocale(async (locale) => localizedTemplates.get(locale));\n```\n\n## 通过 CDN 加载语言包 {#cdn}\n\n如果你是通过 CDN 来使用 mdui 的，可以直接从 CDN 加载语言包。使用示例如下：\n\n```html\n<script src=\"https://unpkg.com/mdui@2/mdui.global.js\"></script>\n\n<script>\n  mdui.loadLocale(\n    (locale) => import(`https://unpkg.com/mdui@2/locales/${locale}.js`),\n  );\n  mdui.setLocale('zh-cn');\n</script>\n```\n\n## 支持的语言 {#languages}\n\n目前，mdui 支持以下语言：\n\n| 语言                 | 语言代码 |\n| -------------------- | -------- |\n| 阿拉伯语             | ar-eg    |\n| 阿塞拜疆语           | az-az    |\n| 保加利亚语           | bg-bg    |\n| 孟加拉语（孟加拉国） | bn-bd    |\n| 白俄罗斯语           | be-by    |\n| 加泰罗尼亚语         | ca-es    |\n| 捷克语               | cs-cz    |\n| 丹麦语               | da-dk    |\n| 德语                 | de-de    |\n| 希腊语               | el-gr    |\n| 英语                 | en-gb    |\n| 英语（美式）         | en-us    |\n| 西班牙语             | es-es    |\n| 爱沙尼亚语           | et-ee    |\n| 波斯语               | fa-ir    |\n| 芬兰语               | fi-fi    |\n| 法语（比利时）       | fr-be    |\n| 法语（加拿大）       | fr-ca    |\n| 法语（法国）         | fr-fr    |\n| 爱尔兰语             | ga-ie    |\n| 加利西亚语（西班牙） | gl-es    |\n| 希伯来语             | he-il    |\n| 印地语               | hi-in    |\n| 克罗地亚语           | hr-hr    |\n| 匈牙利语             | hu-hu    |\n| 亚美尼亚             | hy-am    |\n| 印度尼西亚语         | id-id    |\n| 意大利语             | it-it    |\n| 冰岛语               | is-is    |\n| 日语                 | ja-jp    |\n| 格鲁吉亚语           | ka-ge    |\n| 高棉语               | km-kh    |\n| 北库尔德语           | kmr-iq   |\n| 卡纳达语             | kn-in    |\n| 哈萨克语             | kk-kz    |\n| 韩语/朝鲜语          | ko-kr    |\n| 立陶宛语             | lt-lt    |\n| 拉脱维亚语           | lv-lv    |\n| 马其顿语             | mk-mk    |\n| 马拉雅拉姆语         | ml-in    |\n| 蒙古语               | mn-mn    |\n| 马来语（马来西亚）   | ms-my    |\n| 挪威语               | nb-no    |\n| 尼泊尔语             | ne-np    |\n| 荷兰语（比利时）     | nl-be    |\n| 荷兰语               | nl-nl    |\n| 波兰语               | pl-pl    |\n| 葡萄牙语（巴西）     | pt-br    |\n| 葡萄牙语             | pt-pt    |\n| 罗马尼亚语           | ro-ro    |\n| 俄罗斯语             | ru-ru    |\n| 斯洛伐克语           | sk-sk    |\n| 塞尔维亚语           | sr-rs    |\n| 斯洛文尼亚语         | sl-si    |\n| 瑞典语               | sv-se    |\n| 泰米尔语             | ta-in    |\n| 泰语                 | th-th    |\n| 土耳其语             | tr-tr    |\n| 乌尔都语（巴基斯坦） | ur-pk    |\n| 乌克兰语             | uk-ua    |\n| 越南语               | vi-vn    |\n| 简体中文             | zh-cn    |\n| 繁体中文（中国香港） | zh-hk    |\n| 繁体中文（中国台湾） | zh-tw    |\n\n## 提交新的翻译 {#contribute}\n\n要贡献新的翻译、或对现有翻译进行改进，请在 Github 上发起一个 Pull Request。语言包位于 [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff)，你可以直接在 Github 上进行编辑。\n\n"
+    },
+    "getting-started--typescript-support": {
+        "key": "getting-started--typescript-support",
+        "title": "TypeScript 支持",
+        "description": "mdui 是用 TypeScript 开发的，因此对 TypeScript 提供了良好的支持。所有的 mdui 官方库都自带类型声明文件，可以直接使用。",
+        "content": "# TypeScript 支持\n\nmdui 是用 TypeScript 开发的，因此对 TypeScript 提供了良好的支持。所有的 mdui 官方库都自带类型声明文件，可以直接使用。\n\n## 组件的实例类型 {#instance}\n\n有时，你可能需要将一个 JavaScript 变量断言为 mdui 的组件实例，这时你可以直接从 mdui 中导入对应的组件类型。\n\n例如，从组件文件中导入 Tooltip 组件的类型：\n\n```ts\nimport type { Tooltip } from 'mdui/components/tooltip.js';\n```\n\n或者直接从 mdui 导入 Tooltip 组件的类型：\n\n```ts\nimport type { Tooltip } from 'mdui';\n```\n\n然后，你就可以将一个 JavaScript 变量断言成 Tooltip 类型：\n\n```ts\nconst tooltip = document.querySelector('mdui-tooltip') as Tooltip;\n```\n\n此时，你的 IDE 会自动提示 `tooltip` 变量的属性和方法。\n\n如果在 `tooltip` 变量上添加事件监听，也会自动提示事件名称，事件类型，以及回调函数中 `this` 的指向：\n\n```ts\ntooltip.addEventListener('open', function (event) {});\n```\n\n## 事件类型 {#event}\n\n每个组件都会导出一个接口，它映射了组件的事件名和它对应的事件对象类型，接口名为 `${组件名}EventMap`。\n\n例如，Tooltip 组件会导出一个名为 `TooltipEventMap` 的接口：\n\n```ts\nexport interface TooltipEventMap {\n  open: CustomEvent<void>;\n  opened: CustomEvent<void>;\n  close: CustomEvent<void>;\n  closed: CustomEvent<void>;\n}\n```\n\n你可以从组件文件中导入该接口：\n\n```ts\nimport type { TooltipEventMap } from 'mdui/components/tooltip.js';\n```\n\n或者直接从 mdui 导入该接口：\n\n```ts\nimport type { TooltipEventMap } from 'mdui';\n```\n\n请注意，该接口只包含组件特有的事件，但 mdui 组件都继承自 `HTMLElement`，所以也支持 `HTMLElement` 的事件，你可以使用交叉类型来获取组件的所有事件类型：\n\n```ts\ntype TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap;\n```\n\n"
+    },
+    "getting-started--usage": {
+        "key": "getting-started--usage",
+        "title": "快速入门",
+        "description": "mdui 的组件都是标准的 Web Components 组件，你可以像使用 `<div>` 标签一样使用 mdui 组件。每个组件的文档中都详细描述了其完整的 API，包括属性、方法、事件、slot、CSS Part、CSS 自定义属性等。",
+        "content": "# 快速入门\n\nmdui 的组件都是标准的 Web Components 组件，你可以像使用 `<div>` 标签一样使用 mdui 组件。每个组件的文档中都详细描述了其完整的 API，包括属性、方法、事件、slot、CSS Part、CSS 自定义属性等。\n\n本章文档将向你介绍 Web Components 的使用方法。\n\n## 属性 {#attribute}\n\n属性分为 HTML 属性和 JavaScript 属性，它们通常是一一对应的，并且会保持同步。也就是说，当你更新 HTML 属性值时，JavaScript 属性值也会随之更新；反之亦然。\n\nHTML 属性可以直接在组件的 HTML 字符串中设置，并通过 `getAttribute` 和 `setAttribute` 方法进行读取和修改：\n\n```html\n<mdui-button variant=\"text\">点我</mdui-button>\n\n<script>\n  const button = document.querySelector('mdui-button');\n\n  // 修改 HTML 属性\n  button.setAttribute('variant', 'outlined');\n\n  // 读取 HTML 属性\n  console.log(button.getAttribute('variant')); // outlined\n</script>\n```\n\nJavaScript 属性则可以直接读取或设置组件实例的属性值：\n\n```html\n<mdui-button variant=\"text\">点我</mdui-button>\n\n<script>\n  const button = document.querySelector('mdui-button');\n\n  // 设置 JavaScript 属性\n  button.variant = 'outlined';\n\n  // 读取 JavaScript 属性\n  console.log(button.variant); // outlined\n</script>\n```\n\n某些属性值是 boolean 类型，这些属性的 HTML 属性存在时，JavaScript 属性为 `true`，否则为 `false`。但是，为了兼容某些框架，mdui 会把字符串 `false` 值也判定为 boolean 值 `false`。\n\n```html\n<!-- 这个组件存在 disabled 属性，即默认 disabled 属性值为 true -->\n<mdui-button disabled></mdui-button>\n\n<script>\n  const button = document.querySelector('mdui-button');\n\n  button.removeAttribute('disabled'); // 等效于 button.disabled = false;\n  button.setAttribute('disabled', ''); // 等效于 button.disabled = true;\n\n  // 例外情况，设置为字符串 false 值，等效于设置成 boolean 值 false\n  button.setAttribute('disabled', 'false'); // 等效于 button.disabled = false;\n</script>\n```\n\n有时属性值是数组、对象或函数，这时只有 JavaScript 属性，没有对应的 HTML 属性，例如 [`<mdui-slider>`](/zh-cn/docs/2/components/slider) 组件的 [`labelFormatter`](/zh-cn/docs/2/components/slider#attributes-labelFormatter) 属性是一个函数，你只能通过 JavaScript 来设置该属性：\n\n```html\n<mdui-slider></mdui-slider>\n\n<script>\n  const slider = document.querySelector('mdui-slider');\n  slider.labelFormatter = (value) => `${value}%`;\n</script>\n```\n\n下面以 [`<mdui-slider>`](/zh-cn/docs/2/components/slider) 组件属性文档的一部分进行举例说明：\n\n| HTML 属性 | JavaScript 属性  | reflect                                                                                |\n| --------- | ---------------- | -------------------------------------------------------------------------------------- |\n| `name`    | `name`           | <mdui-icon name=\"check--rounded\" style=\"user-select:none;font-size:1rem;\"></mdui-icon> |\n| `value`   | `value`          |                                                                                        |\n|           | `labelFormatter` |                                                                                        |\n\n这个组件的 `name` 属性具有 HTML 属性和 JavaScript 属性，且 reflect 一栏表明更新 JavaScript 属性时会同步更新 HTML 属性。而 `value` 属性在更新 JavaScript 属性时不会更新 HTML 属性。`labelFormatter` 属性则只有 JavaScript 属性。\n\n## 方法 {#method}\n\n部分组件提供了公共方法，你可以通过调用这些方法来实现不同的功能。例如，[`<mdui-text-field>`](/zh-cn/docs/2/components/text-field) 组件的 [`focus()`](/zh-cn/docs/2/components/text-field#methods-focus) 方法可以使文本框获得焦点。\n\n```html\n<mdui-text-field></mdui-text-field>\n\n<script>\n  const textField = document.querySelector('mdui-text-field');\n  textField.focus();\n</script>\n```\n\n可以在各个组件的文档页面查看所有可用的方法及其参数。\n\n## 事件 {#event}\n\n部分组件在执行特定操作时会触发事件。例如，[`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件在打开时会触发 [`open`](/zh-cn/docs/2/components/dialog#events-open) 事件，你可以监听这个事件来执行自定义操作。\n\n```html\n<mdui-dialog>Dialog</mdui-dialog>\n\n<script>\n  const dialog = document.querySelector('mdui-dialog');\n\n  dialog.addEventListener('open', () => {\n    console.log('对话框开始打开时，会触发该事件');\n  });\n</script>\n```\n\n可以在各个组件的文档页面查看所有可用的事件及其参数。\n\n如果你在其他框架（如 Vue、React、Angular 等）中使用 mdui，你可以使用框架提供的语法来绑定事件。但是，一些框架（如 React）的事件绑定语法只能用于绑定标准事件（如 `click` 事件），而无法用于绑定自定义事件（如 `open` 事件）。因此，在 React 中绑定自定义事件时，你需要先获取元素的引用，然后使用 `addEventListener` 方法来绑定事件。\n\n关于在 React 中使用 mdui 的更多信息，参见 [与框架集成 - React](/zh-cn/docs/2/frameworks/react)。\n\n## Slot {#slot}\n\n许多组件都提供了 slot，用于将自定义的 HTML 内容插入到组件内部。\n\n最常见的是默认 slot，它是位于组件内部的一段普通 HTML 或纯文本。例如 [`<mdui-button>`](/zh-cn/docs/2/components/button) 组件的默认 slot 用于设置按钮的文本。示例中的“点我”就是默认 slot 的内容：\n\n```html\n<mdui-button>点我</mdui-button>\n```\n\n部分组件还提供了具名 slot，具名 slot 需要在 HTML 的 `slot` 属性中指定 slot 名称。下面的示例中，[`<mdui-icon>`](/zh-cn/docs/2/components/icon) 组件指定了 `slot=\"start\"`，表示这是名为 [`start`](/zh-cn/docs/2/components/button#slots-icon) 的具名 slot，即这个图标将被插入到组件内部的左侧：\n\n```html\n<mdui-button>\n  <mdui-icon slot=\"start\" name=\"settings\"></mdui-icon>\n  设置\n</mdui-button>\n```\n\n如果一个组件使用了多个具名 slot，那么各个具名 slot 之间的顺序并不重要，只要它们位于组件内部，浏览器就会自动将它们放置到正确的位置。\n\n可以在各个组件的文档页面查看所有支持的 Slot。\n\n## CSS 自定义属性 {#css-custom-properties}\n\nCSS 自定义属性是 CSS 中的变量。mdui 定义了一系列[全局 CSS 自定义属性](/zh-cn/docs/2/styles/design-tokens)，这些属性在各个组件内部被引用，因此你可以通过修改这些 CSS 自定义属性来全局修改 mdui 组件的样式。\n\n例如，下面的代码会缩小所有组件的圆角大小：\n\n```css\n:root {\n  --mdui-shape-corner-extra-small: 0.125rem;\n  --mdui-shape-corner-small: 0.25rem;\n  --mdui-shape-corner-medium: 0.375rem;\n  --mdui-shape-corner-large: 0.5rem;\n  --mdui-shape-corner-extra-large: 0.875rem;\n}\n```\n\n也可以在局部作用域上修改 CSS 自定义属性。例如，下面的代码只会在含 `class=\"sharp\"` 的元素及其子元素中缩小圆角大小：\n\n```css\n.sharp {\n  --mdui-shape-corner-extra-small: 0.125rem;\n  --mdui-shape-corner-small: 0.25rem;\n  --mdui-shape-corner-medium: 0.375rem;\n  --mdui-shape-corner-large: 0.5rem;\n  --mdui-shape-corner-extra-large: 0.875rem;\n}\n```\n\n一些组件还提供了该组件特有的 CSS 自定义属性，这些属性的作用域为特定组件，所以不包含 `--mdui` 前缀。例如，下面的代码通过修改 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的 `--z-index` 属性，实现了修改 `z-index` 样式：\n\n```css\nmdui-dialog {\n  --z-index: 3000;\n}\n```\n\n可以在各个组件的文档页面查看组件支持的 CSS 自定义属性。\n\n## CSS Part {#css-part}\n\nmdui 组件使用 shadow DOM 来封装样式和行为，但是常规 CSS 选择器无法选择到 shadow DOM 内部的元素。因此，一些组件为 Shadow DOM 元素添加了 `part` 属性，你可以使用 `::part` CSS 选择器来选择到对应的元素，并重写部分样式。\n\n例如，下面的代码使用 [`button`](/zh-cn/docs/2/components/button#cssParts-button) part 修改了按钮的内边距，且使用 [`label`](/zh-cn/docs/2/components/button#cssParts-label)、[`icon`](/zh-cn/docs/2/components/button#cssParts-icon)、[`end-icon`](/zh-cn/docs/2/components/button#cssParts-end-icon) part 分别修改了文本、左右图标的颜色：\n\n```html\n<mdui-button class=\"custom-button\" icon=\"explore\" end-icon=\"flight\">Button</mdui-button>\n\n<style>\n  .custom-button::part(button) {\n    padding: 0 2rem;\n  }\n\n  .custom-button::part(label) {\n    color: blue;\n  }\n\n  .custom-button::part(icon) {\n    color: red;\n  }\n\n  .custom-button::part(end-icon) {\n    color: yellow;\n  }\n</style>\n```\n\n关于组件 shadow DOM 元素的结构和默认样式，你可以打开浏览器的开发人员工具进行查看。\n\n在使用 CSS Part 之前，你应该先判断使用全局 CSS 自定义属性、及组件特有的 CSS 自定义属性能否满足你的需求，如果能满足需求，则应优先使用 CSS 自定义属性来定制样式。\n\n可以在各个组件的文档页面查看组件公开的所有 `part` 属性。\n\n## 组件更新机制 {#update-mechanism}\n\nmdui 组件是基于 [Lit](https://lit.dev/) 开发的。Lit 是一个轻量级的库，它使 Web Components 的开发更加简单。在使用 mdui 组件时，你可能需要了解其渲染和更新机制。\n\n当你修改 mdui 组件的属性时，组件会进行重新渲染。但是，这个重新渲染过程并不是同步进行的。当你同时修改了多个属性值时，Lit 会将这些变更缓存起来，直到下一个更新周期，以确保无论你修改了多少次属性值，每个组件只会重新渲染一次。并且，只有 shadow DOM 中发生变更的部分会被重新渲染。\n\n在下面的示例中，我们将按钮的 `disabled` JavaScript 属性值设置为 `true`，然后立即查询其 HTML 属性。但是，由于此时组件还没有进行重新渲染，因此查询到的 HTML 属性仍然是 `false`：\n\n```js\nconst button = document.querySelector('mdui-button');\nbutton.disabled = true;\n\nconsole.log(button.hasAttribute('disabled')); // false\n```\n\n如果要等待一个属性值变更后的重新渲染完成，可以使用组件的 `updateComplete` 属性。该属性返回一个 Promise，在 Promise 被 resolve 后，即表示组件已经完成了重新渲染：\n\n```js\nconst button = document.querySelector('mdui-button');\nbutton.disabled = true;\n\nbutton.updateComplete.then(() => {\n  console.log(button.hasAttribute('disabled')); // true\n});\n```\n\n"
+    },
+    "index": {
+        "key": "index",
+        "title": "概述",
+        "description": "让我们通过 mdui 的 CDN 和一个最简单的页面模板来开始使用 mdui。",
+        "content": "# 概述\n\n让我们通过 mdui 的 CDN 和一个最简单的页面模板来开始使用 mdui。\n\n> 你正在阅读的是 mdui 2 的文档！\n>\n> 若要阅读 mdui 1 的文档，请访问 [www.mdui.org/docs/](https://www.mdui.org/docs/)。\n\n## 快速入门 {#getting-started}\n\n使用 mdui 最简单的方式是直接从 CDN 引入 CSS 和 JS 文件。\n\n如果你想使用 npm 安装 mdui，请参考 [安装](/zh-cn/docs/2/getting-started/installation) 章节。\n\n**引入文件**\n\n将下面代码添加到页面的 `<head>` 标签中：\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/mdui@2/mdui.css\" />\n<script src=\"https://unpkg.com/mdui@2/mdui.global.js\"></script>\n```\n\n如果你需要使用组件的图标属性（例如 `<mdui-button icon=\"search\"></mdui-button>` 中的 `icon` 属性），则还需要引入图标的 CSS 文件，参见 [使用 Material Icons 图标](/zh-cn/docs/2/components/icon#usage-material-icons)。\n\nmdui 不依赖任何第三方库，引入上述文件后，就能正常工作了。\n\n## 最简单的页面模板 {#template}\n\n下面是一个最简单的页面模板，你可以在其中添加更多组件和内容，来构建一个网站。\n\n```html\n<!doctype html>\n<html lang=\"zh-CN\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no\"/>\n    <meta name=\"renderer\" content=\"webkit\"/>\n\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/mdui@2/mdui.css\">\n    <script src=\"https://unpkg.com/mdui@2/mdui.global.js\"></script>\n    <!-- 如果使用了组件的 icon 属性，还需要引入图标的 CSS 文件 -->\n\n    <title>Hello, world!</title>\n  </head>\n  <body>\n    <mdui-button>Hello, world!</mdui-button>\n  </body>\n</html>\n```\n\n"
+    },
+    "libraries--icons": {
+        "key": "libraries--icons",
+        "title": "图标组件库 @mdui/icons",
+        "description": "`@mdui/icons` 是一个独立的包，它包含了所有的 Material Icons 图标，每个图标都是一个独立的文件。",
+        "content": "# 图标组件库 @mdui/icons\n\n`@mdui/icons` 是一个独立的包，它包含了所有的 Material Icons 图标，每个图标都是一个独立的文件。\n\n你可以按需导入所需的图标，而不必导入整个图标库。因此，使用 `@mdui/icons` 相比于使用 [`<mdui-icon>`](/zh-cn/docs/2/components/icon) 组件，可以显著减少项目打包后的体积。\n\n## 安装 {#installation}\n\n你需要单独安装该包：\n\n```bash\nnpm install @mdui/icons --save\n```\n\n## 使用 {#usage}\n\n安装完成后，导入所需的图标文件：\n\n```js\nimport '@mdui/icons/search.js';\n```\n\n然后，就可以使用对应的图标组件了：\n\n```html\n<mdui-icon-search></mdui-icon-search>\n```\n\n"
+    },
+    "styles--dark-mode": {
+        "key": "styles--dark-mode",
+        "title": "暗色模式",
+        "description": "mdui 的所有组件都支持暗色模式，并且支持根据操作系统的设置自动切换主题。",
+        "content": "# 暗色模式\n\nmdui 的所有组件都支持暗色模式，并且支持根据操作系统的设置自动切换主题。\n\n<style>\n.dark-mode-light-visible,\n.dark-mode-dark-visible {\n  display: none;\n}\n\n.mdui-theme-light {\n  .dark-mode-light-visible {\n    display: inline-block;\n  }\n}\n.mdui-theme-dark {\n  .dark-mode-dark-visible {\n    display: inline-block;\n  }\n}\n\n@media (prefers-color-scheme: light) {\n  .mdui-theme-auto .dark-mode-light-visible {\n    display: inline-block;\n  }\n}\n@media (prefers-color-scheme: dark) {\n  .mdui-theme-auto .dark-mode-dark-visible {\n    display: inline-block;\n  }\n}\n</style>\n\n你可以随时点击文档页面右上角的 <mdui-icon class=\"dark-mode-light-visible\" name=\"light_mode--outlined\" style=\"vertical-align: middle\"></mdui-icon><mdui-icon class=\"dark-mode-dark-visible\" name=\"dark_mode--outlined\" style=\"vertical-align: middle\"></mdui-icon> 图标来切换主题，以查看各个组件在不同主题下的显示效果。\n\n如果要使用暗色模式，只需在 `<html>` 标签上添加 `mdui-theme-dark` 类即可：\n\n```html\n<html class=\"mdui-theme-dark\"></html>\n```\n\n如果要让主题根据操作系统设置自动切换，只需在 `<html>` 标签上添加 `mdui-theme-auto` 类即可：\n\n```html\n<html class=\"mdui-theme-auto\"></html>\n```\n\n也可以在页面的不同部分使用不同的主题。例如下面的示例，在 `<html>` 上设置暗色模式，但在页面中的一个 `<div>` 上添加了 `mdui-theme-light` 类，这样该 div 中的元素将显示为亮色模式，而页面其余部分则为暗色模式：\n\n```html\n<html class=\"mdui-theme-dark\">\n  <body>\n    <div class=\"mdui-theme-light\">\n      <!-- 这里是亮色模式 -->\n    </div>\n\n    <!-- 这里是暗色模式 -->\n  </body>\n</html>\n```\n\n除了直接添加 CSS 类外，mdui 还提供了两个函数，可以更便捷的操作主题：\n\n- [`getTheme`](/zh-cn/docs/2/functions/getTheme)：获取当前页面、或指定元素上的主题。\n- [`setTheme`](/zh-cn/docs/2/functions/setTheme)：设置当前页面、或指定元素上的主题。\n\n---\n\n需要注意的是，mdui 在 `:root` 及 `.mdui-theme-light`、`.mdui-theme-dark`、`.mdui-theme-auto` 选择器上设置了 `color` 和 `background-color` 样式，如果你不喜欢这些默认样式，可以自行进行覆盖。\n\n下面示例将亮色模式下的页面背景设为纯白，文字设为纯黑；且暗色模式下页面背景设为纯黑，文字设为纯白：\n\n```css\n:root,\n.mdui-theme-light {\n  color: #000;\n  background-color: #fff;\n}\n\n.mdui-theme-dark {\n  color: #fff;\n  background-color: #000;\n}\n\n@media (prefers-color-scheme: dark) {\n  .mdui-theme-auto {\n    color: #fff;\n    background-color: #000;\n  }\n}\n```\n\n"
+    },
+    "styles--design-tokens": {
+        "key": "styles--design-tokens",
+        "title": "设计令牌",
+        "description": "设计令牌（Design Tokens）是一种用于管理设计系统的策略。",
+        "content": "# 设计令牌\n\n设计令牌（Design Tokens）是一种用于管理设计系统的策略。\n\n它将设计系统中的所有可复用元素（例如颜色、字体、间距等）抽象为独立的变量，以便在整个设计系统中进行统一的管理和应用。\n\n<style>\n.design-tokens-color {\n  display: inline-block;\n  vertical-align: middle;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: var(--mdui-shape-corner-extra-small);\n}\n\n.design-tokens-shape-corner {\n  display: inline-block;\n  vertical-align: middle;\n  width: 5rem;\n  height: 5rem;\n  background-color: rgb(var(--mdui-color-primary));\n}\n\n.design-tokens-typescale-display-large {\n  line-height: var(--mdui-typescale-display-large-line-height);\n  font-size: var(--mdui-typescale-display-large-size);\n  letter-spacing: var(--mdui-typescale-display-large-tracking);\n  font-weight: var(--mdui-typescale-display-large-weight);\n}\n\n.design-tokens-typescale-display-medium {\n  line-height: var(--mdui-typescale-display-medium-line-height);\n  font-size: var(--mdui-typescale-display-medium-size);\n  letter-spacing: var(--mdui-typescale-display-medium-tracking);\n  font-weight: var(--mdui-typescale-display-medium-weight);\n}\n\n.design-tokens-typescale-display-small {\n  line-height: var(--mdui-typescale-display-small-line-height);\n  font-size: var(--mdui-typescale-display-small-size);\n  letter-spacing: var(--mdui-typescale-display-small-tracking);\n  font-weight: var(--mdui-typescale-display-small-weight);\n}\n\n.design-tokens-typescale-headline-large {\n  line-height: var(--mdui-typescale-headline-large-line-height);\n  font-size: var(--mdui-typescale-headline-large-size);\n  letter-spacing: var(--mdui-typescale-headline-large-tracking);\n  font-weight: var(--mdui-typescale-headline-large-weight);\n}\n\n.design-tokens-typescale-headline-medium {\n  line-height: var(--mdui-typescale-headline-medium-line-height);\n  font-size: var(--mdui-typescale-headline-medium-size);\n  letter-spacing: var(--mdui-typescale-headline-medium-tracking);\n  font-weight: var(--mdui-typescale-headline-medium-weight);\n}\n\n.design-tokens-typescale-headline-small {\n  line-height: var(--mdui-typescale-headline-small-line-height);\n  font-size: var(--mdui-typescale-headline-small-size);\n  letter-spacing: var(--mdui-typescale-headline-small-tracking);\n  font-weight: var(--mdui-typescale-headline-small-weight);\n}\n\n.design-tokens-typescale-title-large {\n  line-height: var(--mdui-typescale-title-large-line-height);\n  font-size: var(--mdui-typescale-title-large-size);\n  letter-spacing: var(--mdui-typescale-title-large-tracking);\n  font-weight: var(--mdui-typescale-title-large-weight);\n}\n\n.design-tokens-typescale-title-medium {\n  line-height: var(--mdui-typescale-title-medium-line-height);\n  font-size: var(--mdui-typescale-title-medium-size);\n  letter-spacing: var(--mdui-typescale-title-medium-tracking);\n  font-weight: var(--mdui-typescale-title-medium-weight);\n}\n\n.design-tokens-typescale-title-small {\n  line-height: var(--mdui-typescale-title-small-line-height);\n  font-size: var(--mdui-typescale-title-small-size);\n  letter-spacing: var(--mdui-typescale-title-small-tracking);\n  font-weight: var(--mdui-typescale-title-small-weight);\n}\n\n.design-tokens-typescale-label-large {\n  line-height: var(--mdui-typescale-label-large-line-height);\n  font-size: var(--mdui-typescale-label-large-size);\n  letter-spacing: var(--mdui-typescale-label-large-tracking);\n  font-weight: var(--mdui-typescale-label-large-weight);\n}\n\n.design-tokens-typescale-label-medium {\n  line-height: var(--mdui-typescale-label-medium-line-height);\n  font-size: var(--mdui-typescale-label-medium-size);\n  letter-spacing: var(--mdui-typescale-label-medium-tracking);\n  font-weight: var(--mdui-typescale-label-medium-weight);\n}\n\n.design-tokens-typescale-label-small {\n  line-height: var(--mdui-typescale-label-small-line-height);\n  font-size: var(--mdui-typescale-label-small-size);\n  letter-spacing: var(--mdui-typescale-label-small-tracking);\n  font-weight: var(--mdui-typescale-label-small-weight);\n}\n\n.design-tokens-typescale-body-large {\n  line-height: var(--mdui-typescale-body-large-line-height);\n  font-size: var(--mdui-typescale-body-large-size);\n  letter-spacing: var(--mdui-typescale-body-large-tracking);\n  font-weight: var(--mdui-typescale-body-large-weight);\n}\n\n.design-tokens-typescale-body-medium {\n  line-height: var(--mdui-typescale-body-medium-line-height);\n  font-size: var(--mdui-typescale-body-medium-size);\n  letter-spacing: var(--mdui-typescale-body-medium-tracking);\n  font-weight: var(--mdui-typescale-body-medium-weight);\n}\n\n.design-tokens-typescale-body-small {\n  line-height: var(--mdui-typescale-body-small-line-height);\n  font-size: var(--mdui-typescale-body-small-size);\n  letter-spacing: var(--mdui-typescale-body-small-tracking);\n  font-weight: var(--mdui-typescale-body-small-weight);\n}\n\n.design-tokens-state-layer {\n  display: inline-block;\n  vertical-align: middle;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: var(--mdui-shape-corner-extra-small);\n}\n\n.design-tokens-elevation {\n  display: inline-block;\n  vertical-align: middle;\n  width: 3rem;\n  height: 3rem;\n  border-radius: var(--mdui-shape-corner-extra-small);\n}\n</style>\n\nmdui 使用全局 CSS 自定义属性来实现设计令牌。这意味着，你只需修改 CSS 自定义属性，就能全局修改所有 mdui 组件的样式。同时，对于你自己开发的样式，也推荐优先引用 CSS 自定义属性，以确保你的样式与 mdui 组件的样式保持统一，此外，在修改动态配色时，你自己的样式也能同步更新配色。\n\n## 颜色 {#color}\n\nmdui 为亮色模式和暗色模式分别提供了一组 CSS 自定义属性。在亮色模式下，CSS 自定义属性名为 `--mdui-color-{name}-light`，其中 `{name}` 为颜色名称；在暗色模式下则为 `--mdui-color-{name}-dark`。\n\n此外，mdui 还提供了一组名为 `--mdui-color-{name}` 的 CSS 自定义属性，该属性在亮色模式下会引用 `--mdui-color-{name}-light`，在暗色模式下会引用 `--mdui-color-{name}-dark`，因此能根据当前亮、暗色模式自动切换颜色。\n\n如果你需要修改部分颜色的 CSS 自定义属性，需要同时修改 `--mdui-color-{name}-light` 和 `--mdui-color-{name}-dark` 两个属性。而在读取 CSS 自定义属性时，直接使用 `--mdui-color-{name}` 属性即可。\n\nCSS 自定义属性的属性值为 RGB 的三个颜色使用 `,` 分隔，下面的示例演示了颜色的 CSS 自定义属性的用法：\n\n```css\n/* 修改 primary 的颜色值 */\n:root {\n  --mdui-color-primary-light: 103, 80, 164;\n  --mdui-color-primary-dark: 208, 188, 255;\n}\n\n/* 把 foo 元素的背景色设置为 primary */\n.foo {\n  background-color: rgb(var(--mdui-color-primary));\n}\n\n/* 把 bar 元素的背景色设置为含 0.8 不透明度的 primary */\n.bar {\n  background-color: rgba(var(--mdui-color-primary), 0.8);\n}\n```\n\n如果你需要创建一套全新的配色，推荐使用 [`setColorScheme`](/zh-cn/docs/2/functions/setColorScheme) 函数，该函数能根据你给定的一个颜色值生成一整套配色方案。\n\n<table>\n  <thead>\n    <tr>\n      <th>颜色名</th>\n      <th>CSS 自定义属性</th>\n      <th>默认值</th>\n      <th>示例</th>\n    <tr>\n  <thead>\n  <tbody>\n    <tr>\n      <th rowspan=\"3\">Primary</th>\n      <td><code>--mdui-color-primary-light</code></td>\n      <td><code>103, 80, 164</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-primary-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-primary-dark</code></td>\n      <td><code>208, 188, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-primary-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-primary</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-primary))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Primary container</th>\n      <td><code>--mdui-color-primary-container-light</code></td>\n      <td><code>234, 221, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-primary-container-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-primary-container-dark</code></td>\n      <td><code>79, 55, 139</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-primary-container-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-primary-container</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-primary-container))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On primary</th>\n      <td><code>--mdui-color-on-primary-light</code></td>\n      <td><code>255, 255, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-primary-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-primary-dark</code></td>\n      <td><code>55, 30, 115</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-primary-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-primary</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-primary))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On primary container</th>\n      <td><code>--mdui-color-on-primary-container-light</code></td>\n      <td><code>33, 0, 94</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-primary-container-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-primary-container-dark</code></td>\n      <td><code>234, 221, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-primary-container-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-primary-container</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-primary-container))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Inverse primary</th>\n      <td><code>--mdui-color-inverse-primary-light</code></td>\n      <td><code>208, 188, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-inverse-primary-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-inverse-primary-dark</code></td>\n      <td><code>103, 80, 164</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-inverse-primary-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-inverse-primary</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-inverse-primary))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Secondary</th>\n      <td><code>--mdui-color-secondary-light</code></td>\n      <td><code>98, 91, 113</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-secondary-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-secondary-dark</code></td>\n      <td><code>204, 194, 220</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-secondary-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-secondary</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-secondary))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Secondary container</th>\n      <td><code>--mdui-color-secondary-container-light</code></td>\n      <td><code>232, 222, 248</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-secondary-container-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-secondary-container-dark</code></td>\n      <td><code>74, 68, 88</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-secondary-container-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-secondary-container</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-secondary-container))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On secondary</th>\n      <td><code>--mdui-color-on-secondary-light</code></td>\n      <td><code>255, 255, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-secondary-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-secondary-dark</code></td>\n      <td><code>51, 45, 65</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-secondary-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-secondary</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-secondary))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On secondary container</th>\n      <td><code>--mdui-color-on-secondary-container-light</code></td>\n      <td><code>30, 25, 43</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-secondary-container-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-secondary-container-dark</code></td>\n      <td><code>232, 222, 248</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-secondary-container-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-secondary-container</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-secondary-container))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Tertiary</th>\n      <td><code>--mdui-color-tertiary-light</code></td>\n      <td><code>125, 82, 96</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-tertiary-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-tertiary-dark</code></td>\n      <td><code>239, 184, 200</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-tertiary-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-tertiary</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-tertiary))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Tertiary container</th>\n      <td><code>--mdui-color-tertiary-container-light</code></td>\n      <td><code>255, 216, 228</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-tertiary-container-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-tertiary-container-dark</code></td>\n      <td><code>99, 59, 72</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-tertiary-container-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-tertiary-container</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-tertiary-container))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On tertiary</th>\n      <td><code>--mdui-color-on-tertiary-light</code></td>\n      <td><code>255, 255, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-tertiary-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-tertiary-dark</code></td>\n      <td><code>73, 37, 50</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-tertiary-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-tertiary</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-tertiary))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On tertiary container</th>\n      <td><code>--mdui-color-on-tertiary-container-light</code></td>\n      <td><code>55, 11, 30</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-tertiary-container-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-tertiary-container-dark</code></td>\n      <td><code>255, 216, 228</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-tertiary-container-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-tertiary-container</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-tertiary-container))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface</th>\n      <td><code>--mdui-color-surface-light</code></td>\n      <td><code>254, 247, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-dark</code></td>\n      <td><code>20, 18, 24</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface dim</th>\n      <td><code>--mdui-color-surface-dim-light</code></td>\n      <td><code>222, 216, 225</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-dim-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-dim-dark</code></td>\n      <td><code>20, 18, 24</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-dim-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-dim</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-dim))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface bright</th>\n      <td><code>--mdui-color-surface-bright-light</code></td>\n      <td><code>254, 247, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-bright-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-bright-dark</code></td>\n      <td><code>59, 56, 62</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-bright-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-bright</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-bright))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface container lowest</th>\n      <td><code>--mdui-color-surface-container-lowest-light</code></td>\n      <td><code>255, 255, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-lowest-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container-lowest-dark</code></td>\n      <td><code>15, 13, 19</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-lowest-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container-lowest</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-lowest))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface container low</th>\n      <td><code>--mdui-color-surface-container-low-light</code></td>\n      <td><code>247, 242, 250</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-low-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container-low-dark</code></td>\n      <td><code>29, 27, 32</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-low-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container-low</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-low))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface container</th>\n      <td><code>--mdui-color-surface-container-light</code></td>\n      <td><code>243, 237, 247</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container-dark</code></td>\n      <td><code>33, 31, 38</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface container high</th>\n      <td><code>--mdui-color-surface-container-high-light</code></td>\n      <td><code>236, 230, 240</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-high-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container-high-dark</code></td>\n      <td><code>43, 41, 48</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-high-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container-high</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-high))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface container highest</th>\n      <td><code>--mdui-color-surface-container-highest-light</code></td>\n      <td><code>230, 224, 233</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-highest-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container-highest-dark</code></td>\n      <td><code>54, 52, 59</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-highest-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-container-highest</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-container-highest))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface variant</th>\n      <td><code>--mdui-color-surface-variant-light</code></td>\n      <td><code>231, 224, 236</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-variant-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-variant-dark</code></td>\n      <td><code>73, 69, 79</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-variant-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-variant</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-variant))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On surface</th>\n      <td><code>--mdui-color-on-surface-light</code></td>\n      <td><code>28, 27, 31</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-surface-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-surface-dark</code></td>\n      <td><code>230, 225, 229</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-surface-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-surface</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-surface))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On surface variant</th>\n      <td><code>--mdui-color-on-surface-variant-light</code></td>\n      <td><code>73, 69, 78</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-surface-variant-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-surface-variant-dark</code></td>\n      <td><code>202, 196, 208</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-surface-variant-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-surface-variant</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-surface-variant))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Inverse surface</th>\n      <td><code>--mdui-color-inverse-surface-light</code></td>\n      <td><code>49, 48, 51</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-inverse-surface-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-inverse-surface-dark</code></td>\n      <td><code>230, 225, 229</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-inverse-surface-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-inverse-surface</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-inverse-surface))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Inverse on surface</th>\n      <td><code>--mdui-color-inverse-on-surface-light</code></td>\n      <td><code>244, 239, 244</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-inverse-on-surface-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-inverse-on-surface-dark</code></td>\n      <td><code>49, 48, 51</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-inverse-on-surface-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-inverse-on-surface</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-inverse-on-surface))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Background</th>\n      <td><code>--mdui-color-background-light</code></td>\n      <td><code>254, 247, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-background-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-background-dark</code></td>\n      <td><code>20, 18, 24</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-background-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-background</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-background))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On background</th>\n      <td><code>--mdui-color-on-background-light</code></td>\n      <td><code>28, 27, 31</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-background-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-background-dark</code></td>\n      <td><code>230, 225, 229</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-background-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-background</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-background))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Error</th>\n      <td><code>--mdui-color-error-light</code></td>\n      <td><code>179, 38, 30</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-error-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-error-dark</code></td>\n      <td><code>242, 184, 181</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-error-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-error</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-error))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Error container</th>\n      <td><code>--mdui-color-error-container-light</code></td>\n      <td><code>249, 222, 220</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-error-container-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-error-container-dark</code></td>\n      <td><code>140, 29, 24</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-error-container-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-error-container</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-error-container))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On error</th>\n      <td><code>--mdui-color-on-error-light</code></td>\n      <td><code>255, 255, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-error-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-error-dark</code></td>\n      <td><code>96, 20, 16</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-error-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-error</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-error))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">On error container</th>\n      <td><code>--mdui-color-on-error-container-light</code></td>\n      <td><code>65, 14, 11</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-error-container-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-error-container-dark</code></td>\n      <td><code>249, 222, 220</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-error-container-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-on-error-container</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-on-error-container))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Outline</th>\n      <td><code>--mdui-color-outline-light</code></td>\n      <td><code>121, 116, 126</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-outline-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-outline-dark</code></td>\n      <td><code>147, 143, 153</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-outline-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-outline</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-outline))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Outline variant</th>\n      <td><code>--mdui-color-outline-variant-light</code></td>\n      <td><code>196, 199, 197</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-outline-variant-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-outline-variant-dark</code></td>\n      <td><code>68, 71, 70</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-outline-variant-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-outline-variant</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-outline-variant))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Shadow</th>\n      <td><code>--mdui-color-shadow-light</code></td>\n      <td><code>0, 0, 0</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-shadow-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-shadow-dark</code></td>\n      <td><code>0, 0, 0</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-shadow-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-shadow</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-shadow))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Surface tint</th>\n      <td><code>--mdui-color-surface-tint-color-light</code></td>\n      <td><code>103, 80, 164</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-tint-color-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-tint-color-dark</code></td>\n      <td><code>208, 188, 255</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-tint-color-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-surface-tint-color</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-surface-tint-color))\"></div></td>\n    </tr>\n    <tr>\n      <th rowspan=\"3\">Scrim</th>\n      <td><code>--mdui-color-scrim-light</code></td>\n      <td><code>0, 0, 0</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-scrim-light))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-scrim-dark</code></td>\n      <td><code>0, 0, 0</code></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-scrim-dark))\"></div></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-color-scrim</code></td>\n      <td></td>\n      <td><div class=\"design-tokens-color\" style=\"background-color:rgb(var(--mdui-color-scrim))\"></div></td>\n    </tr>\n  </tbody>\n</table>\n\n## 圆角 {#shape-corner}\n\nmdui 提供了 7 种不同大小的圆角。以下是如何使用这些圆角的 CSS 自定义属性的示例：\n\n```css\n/* 修改 extra-small 的圆角大小 */\n:root {\n  --mdui-shape-corner-extra-small: 0.3rem;\n}\n\n/* 把 foo 元素的圆角设置为 extra-small */\n.foo {\n  border-radius: var(--mdui-shape-corner-extra-small);\n}\n```\n\n| CSS 自定义属性                    | 默认值    | 示例                                                                                                      |\n| --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------- |\n| `--mdui-shape-corner-none`        | `0`       | <div class=\"design-tokens-shape-corner\" style=\"border-radius:var(--mdui-shape-corner-none)\"></div>        |\n| `--mdui-shape-corner-extra-small` | `0.25rem` | <div class=\"design-tokens-shape-corner\" style=\"border-radius:var(--mdui-shape-corner-extra-small)\"></div> |\n| `--mdui-shape-corner-small`       | `0.5rem`  | <div class=\"design-tokens-shape-corner\" style=\"border-radius:var(--mdui-shape-corner-small)\"></div>       |\n| `--mdui-shape-corner-medium`      | `0.75rem` | <div class=\"design-tokens-shape-corner\" style=\"border-radius:var(--mdui-shape-corner-medium)\"></div>      |\n| `--mdui-shape-corner-large`       | `1rem`    | <div class=\"design-tokens-shape-corner\" style=\"border-radius:var(--mdui-shape-corner-large)\"></div>       |\n| `--mdui-shape-corner-extra-large` | `1.75rem` | <div class=\"design-tokens-shape-corner\" style=\"border-radius:var(--mdui-shape-corner-extra-large)\"></div> |\n| `--mdui-shape-corner-full`        | `1000rem` | <div class=\"design-tokens-shape-corner\" style=\"border-radius:var(--mdui-shape-corner-full)\"></div>        |\n\n## 排版 {#typescale}\n\nmdui 提供了 15 种不同的文字样式，包括 Display large、Display medium、Display small、Headline large、Headline medium、Headline small、Title large、Title medium、Title small、Label large、Label medium、Label small、Body large、Body medium、Body small。\n\n下面是使用示例：\n\n```css\n/* 修改 Body large 的文字样式 */\n:root {\n  --mdui-typescale-body-large-line-height: 1.6rem;\n  --mdui-typescale-body-large-size: 1.2rem;\n  --mdui-typescale-body-large-tracking: 0.01rem;\n  --mdui-typescale-body-large-weight: 400;\n}\n\n/* 把 foo 元素的文字样式设置为 Body large */\n.foo {\n  line-height: var(--mdui-typescale-body-large-line-height);\n  font-size: var(--mdui-typescale-body-large-size);\n  letter-spacing: var(--mdui-typescale-body-large-tracking);\n  font-weight: var(--mdui-typescale-body-large-weight);\n}\n```\n\n<table>\n  <thead>\n    <tr>\n      <th>CSS 自定义属性</th>\n      <th>默认值</th>\n      <th>示例</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td><code>--mdui-typescale-display-large-line-height</code></td>\n      <td><code>4rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-display-large\">Display large</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-large-size</code></td>\n      <td><code>3.5625rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-large-tracking</code></td>\n      <td><code>0</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-large-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-medium-line-height</code></td>\n      <td><code>3.25rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-display-medium\">Display medium</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-medium-size</code></td>\n      <td><code>2.8125rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-medium-tracking</code></td>\n      <td><code>0</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-medium-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-small-line-height</code></td>\n      <td><code>2.75rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-display-small\">Display small</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-small-size</code></td>\n      <td><code>2.25rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-small-tracking</code></td>\n      <td><code>0</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-display-small-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-large-line-height</code></td>\n      <td><code>2.5rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-headline-large\">Headline large</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-large-size</code></td>\n      <td><code>2rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-large-tracking</code></td>\n      <td><code>0</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-large-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-medium-line-height</code></td>\n      <td><code>2.25rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-headline-medium\">Headline medium</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-medium-size</code></td>\n      <td><code>1.75rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-medium-tracking</code></td>\n      <td><code>0</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-medium-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-small-line-height</code></td>\n      <td><code>2rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-headline-small\">Headline small</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-small-size</code></td>\n      <td><code>1.5rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-small-tracking</code></td>\n      <td><code>0</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-headline-small-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-large-line-height</code></td>\n      <td><code>1.75rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-title-large\">Title large</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-large-size</code></td>\n      <td><code>1.375rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-large-tracking</code></td>\n      <td><code>0</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-large-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-medium-line-height</code></td>\n      <td><code>1.5rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-title-medium\">Title medium</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-medium-size</code></td>\n      <td><code>1rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-medium-tracking</code></td>\n      <td><code>0.009375rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-medium-weight</code></td>\n      <td><code>500</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-small-line-height</code></td>\n      <td><code>1.25rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-title-small\">Title small</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-small-size</code></td>\n      <td><code>0.875rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-small-tracking</code></td>\n      <td><code>0.00625rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-title-small-weight</code></td>\n      <td><code>500</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-large-line-height</code></td>\n      <td><code>1.25rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-label-large\">Label large</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-large-size</code></td>\n      <td><code>0.875rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-large-tracking</code></td>\n      <td><code>0.00625rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-large-weight</code></td>\n      <td><code>500</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-medium-line-height</code></td>\n      <td><code>1rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-label-medium\">Label medium</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-medium-size</code></td>\n      <td><code>0.75rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-medium-tracking</code></td>\n      <td><code>0.03125rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-medium-weight</code></td>\n      <td><code>500</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-small-line-height</code></td>\n      <td><code>0.375rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-label-small\">Label small</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-small-size</code></td>\n      <td><code>0.6875rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-small-tracking</code></td>\n      <td><code>0.03125rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-label-small-weight</code></td>\n      <td><code>500</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-large-line-height</code></td>\n      <td><code>1.5rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-body-large\">Body large</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-large-size</code></td>\n      <td><code>1rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-large-tracking</code></td>\n      <td><code>0.009375rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-large-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-medium-line-height</code></td>\n      <td><code>1.25rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-body-medium\">Body medium</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-medium-size</code></td>\n      <td><code>0.875rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-medium-tracking</code></td>\n      <td><code>0.015625rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-medium-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-small-line-height</code></td>\n      <td><code>1rem</code></td>\n      <th rowspan=\"4\"><div class=\"design-tokens-typescale-body-small\">Body small</div></th>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-small-size</code></td>\n      <td><code>0.75rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-small-tracking</code></td>\n      <td><code>0.025rem</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-typescale-body-small-weight</code></td>\n      <td><code>400</code></td>\n    </tr>\n  </tbody>\n</table>\n\n## 状态层不透明度 {#state-layer}\n\n部分 mdui 组件在交互时会在其上添加一层半透明遮罩。例如 [`<mdui-button>`](/zh-cn/docs/2/components/button) 组件，在鼠标悬浮、聚焦、按下或拖动时，都会出现半透明遮罩。你可以通过修改 CSS 自定义属性来调整这些遮罩的不透明度。\n\n下面是使用示例：\n\n```css\n/* 修改状态层不透明度 */\n:root {\n  --mdui-state-layer-hover: 0.08;\n  --mdui-state-layer-focus: 0.12;\n  --mdui-state-layer-pressed: 0.12;\n  --mdui-state-layer-dragged: 0.16;\n}\n```\n\n| CSS 自定义属性               | 默认值 | 示例                                                                                                         |\n| ---------------------------- | ------ | ------------------------------------------------------------------------------------------------------------ |\n| `--mdui-state-layer-hover`   | `0.08` | <div class=\"design-tokens-state-layer\" style=\"background-color:rgba(var(--mdui-color-primary), 0.08)\"></div> |\n| `--mdui-state-layer-focus`   | `0.12` | <div class=\"design-tokens-state-layer\" style=\"background-color:rgba(var(--mdui-color-primary), 0.12)\"></div> |\n| `--mdui-state-layer-pressed` | `0.12` | <div class=\"design-tokens-state-layer\" style=\"background-color:rgba(var(--mdui-color-primary), 0.12)\"></div> |\n| `--mdui-state-layer-dragged` | `0.16` | <div class=\"design-tokens-state-layer\" style=\"background-color:rgba(var(--mdui-color-primary), 0.16)\"></div> |\n\n## 抬升高度（阴影） {#elevation}\n\n部分 mdui 组件具有阴影效果，以模拟组件在页面上的抬升感。你可以通过修改 CSS 自定义属性来调整组件的阴影效果。\n\n下面是使用示例：\n\n```css\n/* 修改 level1 级别的阴影 */\n:root {\n  --mdui-elevation-level1:\n    0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%),\n    0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);\n}\n\n/* 把 foo 元素的阴影设置为 level1 */\n.foo {\n  box-shadow: var(--mdui-elevation-level1);\n}\n```\n\n| CSS 自定义属性            | 默认值                                                                                                         | 示例                                                                                         |\n| ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |\n| `--mdui-elevation-level0` | `none`                                                                                                         | <div class=\"design-tokens-elevation\" style=\"box-shadow: var(--mdui-elevation-level0)\"></div> |\n| `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)`          | <div class=\"design-tokens-elevation\" style=\"box-shadow: var(--mdui-elevation-level1)\"></div> |\n| `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)`      | <div class=\"design-tokens-elevation\" style=\"box-shadow: var(--mdui-elevation-level2)\"></div> |\n| `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)`  | <div class=\"design-tokens-elevation\" style=\"box-shadow: var(--mdui-elevation-level3)\"></div> |\n| `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` | <div class=\"design-tokens-elevation\" style=\"box-shadow: var(--mdui-elevation-level4)\"></div> |\n| `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)`      | <div class=\"design-tokens-elevation\" style=\"box-shadow: var(--mdui-elevation-level5)\"></div> |\n\n## 动画 {#motion}\n\nmdui 组件中的动画缓动曲线和持续时间可以通过 CSS 自定义属性进行配置。\n\n下面是使用示例：\n\n```css\n/* 修改 standard 的缓动曲线、及 short1 的持续时间 */\n:root {\n  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n  --mdui-motion-duration-short1: 40ms;\n}\n\n/* 设置 foo 元素的过渡效果使用 standard 的缓动曲线、及 short1 的持续时间 */\n.foo {\n  transition: all var(--mdui-motion-duration-short1)\n    var(--mdui-motion-easing-standard);\n}\n```\n\n<table>\n  <thead>\n    <tr>\n      <th>类型</th>\n      <th>CSS 自定义属性</th>\n      <th>默认值</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th rowspan=\"7\">缓动曲线</th>\n      <td><code>--mdui-motion-easing-linear</code></td>\n      <td><code>cubic-bezier(0, 0, 1, 1)</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-easing-standard</code></td>\n      <td><code>cubic-bezier(0.2, 0, 0, 1)</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-easing-standard-accelerate</code></td>\n      <td><code>cubic-bezier(0.3, 0, 1, 1)</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-easing-standard-decelerate</code></td>\n      <td><code>cubic-bezier(0, 0, 0, 1)</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-easing-emphasized</code></td>\n      <td><code>var(--mdui-motion-easing-standard)</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-easing-emphasized-accelerate</code></td>\n      <td><code>cubic-bezier(0.3, 0, 0.8, 0.15)</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-easing-emphasized-decelerate</code></td>\n      <td><code>cubic-bezier(0.05, 0.7, 0.1, 1)</code></td>\n    </tr>\n    <tr>\n      <th rowspan=\"16\">持续时间</th>\n      <td><code>--mdui-motion-duration-short1</code></td>\n      <td><code>50ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-short2</code></td>\n      <td><code>100ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-short3</code></td>\n      <td><code>150ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-short4</code></td>\n      <td><code>200ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-medium1</code></td>\n      <td><code>250ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-medium2</code></td>\n      <td><code>300ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-medium3</code></td>\n      <td><code>350ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-medium4</code></td>\n      <td><code>400ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-long1</code></td>\n      <td><code>450ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-long2</code></td>\n      <td><code>500ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-long3</code></td>\n      <td><code>550ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-long4</code></td>\n      <td><code>600ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-extra-long1</code></td>\n      <td><code>700ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-extra-long2</code></td>\n      <td><code>800ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-extra-long3</code></td>\n      <td><code>900ms</code></td>\n    </tr>\n    <tr>\n      <td><code>--mdui-motion-duration-extra-long4</code></td>\n      <td><code>1000ms</code></td>\n    </tr>\n  </tbody>\n</table>\n\n## 响应式断点 {#breakpoint}\n\nmdui 提供了一系列的响应式断点，这些断点可以通过 CSS 自定义属性进行配置。下面是使用示例：\n\n```css\n/* 修改 sm 的断点值 */\n:root {\n  --mdui-breakpoint-sm: 560px;\n}\n```\n\n需要注意的是，这些 CSS 自定义属性不能在 CSS 媒体查询中使用。以下是一个错误的示例：\n\n```css\n/* 错误用法。媒体查询中无法使用 CSS 自定义属性 */\n@media (min-width: var(--mdui-breakpoint-sm)) {\n}\n```\n\n如果你需要在 JavaScript 中进行断点判断，可以使用 [`breakpoint`](/zh-cn/docs/2/functions/breakpoint) 函数。\n\n| CSS 自定义属性          | 默认值   |\n| ----------------------- | -------- |\n| `--mdui-breakpoint-xs`  | `0px`    |\n| `--mdui-breakpoint-sm`  | `600px`  |\n| `--mdui-breakpoint-md`  | `840px`  |\n| `--mdui-breakpoint-lg`  | `1080px` |\n| `--mdui-breakpoint-xl`  | `1440px` |\n| `--mdui-breakpoint-xxl` | `1920px` |\n\n"
+    },
+    "styles--dynamic-color": {
+        "key": "styles--dynamic-color",
+        "title": "动态配色",
+        "description": "mdui 提供了动态配色功能。只需提供一个颜色值，mdui 就能自动生成一套完整的配色方案。此外，mdui 还支持从指定的壁纸中提取主色调，并据此生成配色方案。",
+        "content": "# 动态配色\n\nmdui 提供了动态配色功能。只需提供一个颜色值，mdui 就能自动生成一套完整的配色方案。此外，mdui 还支持从指定的壁纸中提取主色调，并据此生成配色方案。\n\n你可以随时点击文档页面右上角的 <mdui-icon name=\"palette--outlined\" style=\"vertical-align: middle\"></mdui-icon> 图标，切换配色方案，查看各个组件在不同配色方案下的显示效果。\n\n一套配色方案实际上是一组 CSS 自定义属性。mdui 组件中的颜色值都引用了这一组 CSS 自定义属性，因此可以一次性更新所有组件的配色方案。完整的 CSS 自定义属性列表请参见 [设计令牌 - 颜色](/zh-cn/docs/2/styles/design-tokens#color)。\n\n## 生成配色方案 {#color-scheme}\n\n你可以使用 [`setColorScheme`](/zh-cn/docs/2/functions/setColorScheme) 函数来生成配色方案。该函数接受一个十六进制颜色值作为参数，生成一套配色方案，并将页面的 `<html>` 元素设置为该配色方案。例如：\n\n```js\nimport { setColorScheme } from 'mdui/functions/setColorScheme.js';\n\n// 根据 #0061a4 生成一套配色方案，并将 <html> 设置为该配色方案\nsetColorScheme('#0061a4');\n```\n\n你还可以在第二个参数中指定 `target` 属性，用于指明在哪个元素上设置配色方案。例如：\n\n```js\nimport { setColorScheme } from 'mdui/functions/setColorScheme.js';\n\n// 根据 #0061a4 生成一套配色方案，并将 .foo 元素设置为该配色方案\nsetColorScheme('#0061a4', {\n  target: document.querySelector('.foo'),\n});\n```\n\n默认情况下生成的配色方案仅包含 [设计令牌 - 颜色](/zh-cn/docs/2/styles/design-tokens#color) 中所列出的颜色。你可以在第二个参数中指定 `customColors` 属性，mdui 会根据你给出的自定义颜色名和颜色值生成一组自定义颜色组。例如：\n\n```js\nimport { setColorScheme } from 'mdui/functions/setColorScheme.js';\n\n// 根据 #0061a4 生成一套配色方案，并修改了原有的 error 颜色组的值，并添加了一组新的 music 颜色组\nsetColorScheme('#0061a4', {\n  customColors: [\n    {\n      name: 'error',\n      value: '#69F0AE',\n    },\n    {\n      name: 'music',\n      value: '#FFC107',\n    },\n  ],\n});\n```\n\n一组自定义颜色组包含四个 CSS 自定义属性：\n\n- `--mdui-color-{name}`\n- `--mdui-color-on-{name}`\n- `--mdui-color-{name}-container`\n- `--mdui-color-on-{name}-container`\n\n其中的 `{name}` 为你传入的 `customColors` 中的 `name` 字段名，即自定义颜色名。\n\n自定义颜色名可以是默认配色方案中的已有颜色名，如 `primary`、`secondary`、`tertiary`、`error` 这些都是默认配色方案中已包含的。如果你指定了这些值作为自定义颜色名，则生成的配色方案中对应的四个 CSS 自定义属性，将用你指定的颜色值来生成。例如上面示例中指定了名为 `error` 的自定义颜色名，因为 `error` 是默认配色方案中已有的颜色名，且其对应的 CSS 自定义属性被 mdui 组件用于表示错误状态，因为现在颜色值被设置为一个绿色的值，所以 mdui 组件中的错误状态也将变为绿色。\n\n自定义颜色名也可以是新增的，例如上面示例中的 `music`，是默认配色方案中不存在的，则生成的配色方案将额外包含四个 CSS 自定义属性。可以在你自己的样式中引用这些 CSS 自定义属性：\n\n```html\n<style>\n  .music {\n    background-color: rgb(var(--mdui-color-music));\n    color: rgb(var(--mdui-color-on-music));\n  }\n\n  .music-container {\n    background-color: rgb(var(--mdui-color-music-container));\n    color: rgb(var(--mdui-color-on-music-container));\n  }\n</style>\n\n<div class=\"music\">Music</div>\n<div class=\"music-container\">Music Container</div>\n```\n\n你还可以使用 [`removeColorScheme`](/zh-cn/docs/2/functions/removeColorScheme) 函数来移除通过上述方法生成的配色方案。你可以传入参数来指定移除哪个元素上的配色方案，默认情况下，它会移除 `<html>` 上的配色方案。\n\n## 从壁纸中提取颜色 {#from-wallpaper}\n\nmdui 提供了 [`getColorFromImage`](/zh-cn/docs/2/functions/getColorFromImage) 函数，用于从一个给定的 `Image` 实例中提取主色调。该函数返回一个 Promise，resolve 的值即为提取的十六进制颜色值。\n\n你可以使用从该函数获得的颜色值，然后调用上述文档中介绍的 [`setColorScheme`](/zh-cn/docs/2/functions/setColorScheme) 函数来设置配色方案。例如：\n\n```js\nimport { getColorFromImage } from 'mdui/functions/getColorFromImage.js';\nimport { setColorScheme } from 'mdui/functions/setColorScheme.js';\n\nconst image = new Image();\nimage.src = 'image1.png';\n\ngetColorFromImage(image).then((color) => setColorScheme(color));\n```\n\n"
+    },
+    "styles--prose": {
+        "key": "styles--prose",
+        "title": "文章排版",
+        "description": "mdui 提供了 `mdui-prose` 和 `mdui-table` CSS 类，专门用于优化文章和表格的样式。",
+        "content": "# 文章排版\n\nmdui 提供了 `mdui-prose` 和 `mdui-table` CSS 类，专门用于优化文章和表格的样式。\n\n## 文章排版 {#prose}\n\n可以在文章的父元素上添加 `mdui-prose` 类，这样可以优化整篇文章的显示样式，包括文章中的 `<table>` 表格样式。例如：\n\n```html\n<div class=\"mdui-prose\">\n  <h1>标题</h1>\n  <p>正文</p>\n  <table></table>\n</div>\n```\n\n## 表格样式 {#table}\n\n在 `<table>` 元素上添加 `mdui-table` 类，可以优化表格的显示样式。例如：\n\n```html\n<table class=\"mdui-table\"></table>\n```\n\n如果你希望表格能在其父元素内横向滚动，可以在 `<table>` 元素的父元素上添加 `mdui-table` 类。例如：\n\n```html\n<div class=\"mdui-table\">\n  <table></table>\n</div>\n```\n\n"
+    }
+};