@mdui/mcp 2.1.0 → 2.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/components.js +38 -38
- package/data/cssClasses.js +6 -6
- package/data/cssVariables.js +111 -111
- package/data/documents.js +39 -39
- package/package.json +1 -1
package/data/documents.js
CHANGED
|
@@ -4,19 +4,19 @@ export const documents = {
|
|
|
4
4
|
"key": "ai--llms",
|
|
5
5
|
"title": "LLMs.txt",
|
|
6
6
|
"description": "mdui 提供了 `llms.txt` 与 `llms-full.txt`，用于为 LLM（大语言模型）提供准确、可引用的上下文，帮助 AI 更可靠地回答 mdui 相关问题。",
|
|
7
|
-
"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
|
|
7
|
+
"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"
|
|
8
8
|
},
|
|
9
9
|
"ai--mcp": {
|
|
10
10
|
"key": "ai--mcp",
|
|
11
|
-
"title": "MCP
|
|
12
|
-
"description": "mdui 提供专用的 [MCP（Model Context Protocol）](https://modelcontextprotocol.io/) 服务器 `@mdui/mcp`，用于在本地为 AI
|
|
13
|
-
"content": "# MCP
|
|
11
|
+
"title": "MCP 服务器",
|
|
12
|
+
"description": "mdui 提供专用的 [MCP（Model Context Protocol）](https://modelcontextprotocol.io/) 服务器 `@mdui/mcp`，用于在本地为 AI 智能体提供组件、图标、CSS 自定义属性和文档的查询能力。",
|
|
13
|
+
"content": "# MCP 服务器\n\nmdui 提供专用的 [MCP（Model Context Protocol）](https://modelcontextprotocol.io/) 服务器 `@mdui/mcp`，用于在本地为 AI 智能体提供组件、图标、CSS 自定义属性和文档的查询能力。\n\n它可与 Claude Code、Cursor、GitHub Copilot 等开发工具配合，辅助生成代码，并更好地使用 mdui 的组件与样式。\n\n## 工具 {#tools}\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## 使用方式 {#usage}\n\nMCP 服务器仅支持 [stdio 传输](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio)，可在 VS Code、Cursor、Claude Code、Windsurf、Zed 等客户端，以及支持 stdio 协议的 AI 智能体中直接使用。\n\n### VS Code {#vscode}\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 {#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 {#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 {#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 {#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 客户端 {#custom}\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"
|
|
14
14
|
},
|
|
15
15
|
"components--avatar": {
|
|
16
16
|
"key": "components--avatar",
|
|
17
17
|
"title": "头像组件 Avatar",
|
|
18
18
|
"description": "头像用于表示用户或事物，支持多种形式，包括图片、图标或字符等。",
|
|
19
|
-
"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/
|
|
19
|
+
"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/zh-CN/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",
|
|
20
20
|
"tagNames": [
|
|
21
21
|
"mdui-avatar"
|
|
22
22
|
]
|
|
@@ -77,18 +77,18 @@ export const documents = {
|
|
|
77
77
|
},
|
|
78
78
|
"components--chip": {
|
|
79
79
|
"key": "components--chip",
|
|
80
|
-
"title": "
|
|
81
|
-
"description": "
|
|
82
|
-
"content": "#
|
|
80
|
+
"title": "标签组件 Chip",
|
|
81
|
+
"description": "标签组件用于辅助用户输入信息、进行选择、筛选内容或执行相关操作。",
|
|
82
|
+
"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",
|
|
83
83
|
"tagNames": [
|
|
84
84
|
"mdui-chip"
|
|
85
85
|
]
|
|
86
86
|
},
|
|
87
87
|
"components--circular-progress": {
|
|
88
88
|
"key": "components--circular-progress",
|
|
89
|
-
"title": "
|
|
90
|
-
"description": "
|
|
91
|
-
"content": "#
|
|
89
|
+
"title": "环形进度条组件 CircularProgress",
|
|
90
|
+
"description": "环形进度条是一个用于显示任务进度的圆形组件，例如数据加载或表单提交等。",
|
|
91
|
+
"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",
|
|
92
92
|
"tagNames": [
|
|
93
93
|
"mdui-circular-progress"
|
|
94
94
|
]
|
|
@@ -107,16 +107,16 @@ export const documents = {
|
|
|
107
107
|
"key": "components--dialog",
|
|
108
108
|
"title": "对话框组件 Dialog",
|
|
109
109
|
"description": "对话框用于在用户的操作流程中提供重要提示。",
|
|
110
|
-
"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
|
|
110
|
+
"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 permanently removed from your 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 permanently removed from your 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",
|
|
111
111
|
"tagNames": [
|
|
112
112
|
"mdui-dialog"
|
|
113
113
|
]
|
|
114
114
|
},
|
|
115
115
|
"components--divider": {
|
|
116
116
|
"key": "components--divider",
|
|
117
|
-
"title": "
|
|
117
|
+
"title": "分隔线组件 Divider",
|
|
118
118
|
"description": "分隔线是一条细线，用于在列表和容器中对内容进行分组。",
|
|
119
|
-
"content": "#
|
|
119
|
+
"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",
|
|
120
120
|
"tagNames": [
|
|
121
121
|
"mdui-divider"
|
|
122
122
|
]
|
|
@@ -161,9 +161,9 @@ export const documents = {
|
|
|
161
161
|
},
|
|
162
162
|
"components--linear-progress": {
|
|
163
163
|
"key": "components--linear-progress",
|
|
164
|
-
"title": "
|
|
165
|
-
"description": "
|
|
166
|
-
"content": "#
|
|
164
|
+
"title": "线性进度条组件 LinearProgress",
|
|
165
|
+
"description": "线性进度条是一种横向的指示器，用于向用户展示任务的执行进度，如数据加载或表单提交等。",
|
|
166
|
+
"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",
|
|
167
167
|
"tagNames": [
|
|
168
168
|
"mdui-linear-progress"
|
|
169
169
|
]
|
|
@@ -201,9 +201,9 @@ export const documents = {
|
|
|
201
201
|
},
|
|
202
202
|
"components--navigation-drawer": {
|
|
203
203
|
"key": "components--navigation-drawer",
|
|
204
|
-
"title": "
|
|
205
|
-
"description": "
|
|
206
|
-
"content": "#
|
|
204
|
+
"title": "抽屉导航栏组件 NavigationDrawer",
|
|
205
|
+
"description": "抽屉导航栏用于在页面侧边提供导航功能，使用户能够快速访问不同的页面或内容。",
|
|
206
|
+
"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",
|
|
207
207
|
"tagNames": [
|
|
208
208
|
"mdui-navigation-drawer"
|
|
209
209
|
]
|
|
@@ -212,7 +212,7 @@ export const documents = {
|
|
|
212
212
|
"key": "components--navigation-rail",
|
|
213
213
|
"title": "侧边导航栏组件 NavigationRail",
|
|
214
214
|
"description": "侧边导航栏为平板电脑和桌面电脑提供了访问不同主页面的方式。",
|
|
215
|
-
"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##
|
|
215
|
+
"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",
|
|
216
216
|
"tagNames": [
|
|
217
217
|
"mdui-navigation-rail",
|
|
218
218
|
"mdui-navigation-rail-item"
|
|
@@ -326,13 +326,13 @@ export const documents = {
|
|
|
326
326
|
"key": "frameworks--angular",
|
|
327
327
|
"title": "与 Angular 集成",
|
|
328
328
|
"description": "在 Angular 中使用 mdui 时，首先需要按照 [安装](/zh-cn/docs/2/getting-started/installation#npm) 页面的指引完成安装，然后进行一些必要的配置。",
|
|
329
|
-
"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
|
|
329
|
+
"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 headline=\"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"
|
|
330
330
|
},
|
|
331
331
|
"frameworks--others": {
|
|
332
332
|
"key": "frameworks--others",
|
|
333
333
|
"title": "与其他框架集成",
|
|
334
334
|
"description": "mdui 使用浏览器原生支持的 Web Components 开发，因此能在所有 Web 框架中使用。下面列举了在常用框架中使用 mdui 的方法。",
|
|
335
|
-
"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
|
|
335
|
+
"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"
|
|
336
336
|
},
|
|
337
337
|
"frameworks--react": {
|
|
338
338
|
"key": "frameworks--react",
|
|
@@ -361,14 +361,14 @@ export const documents = {
|
|
|
361
361
|
"functions--confirm": {
|
|
362
362
|
"key": "functions--confirm",
|
|
363
363
|
"title": "confirm 函数",
|
|
364
|
-
"description": "`
|
|
365
|
-
"content": "# confirm 函数\n\n`
|
|
364
|
+
"description": "`confirm` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，该函数在功能上用于代替系统原生的 `window.confirm` 函数。使用该函数，你无需编写组件的 HTML 代码，就能打开一个确认框。",
|
|
365
|
+
"content": "# confirm 函数\n\n`confirm` 函数是对 [`<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<void></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<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 <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<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 <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"
|
|
366
366
|
},
|
|
367
367
|
"functions--dialog": {
|
|
368
368
|
"key": "functions--dialog",
|
|
369
369
|
"title": "dialog 函数",
|
|
370
370
|
"description": "`dialog` 函数是对 [`<mdui-dialog>`](/zh-cn/docs/2/components/dialog) 组件的封装，使用该函数，你无需编写组件的 HTML 代码，就能打开一个对话框。",
|
|
371
|
-
"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><HTMLElement></code></td>\n <td>-</td>\n </tr>\n <tr>\n <td colspan=\"3\">dialog 中的 body 内容，可以是 HTML 字符串、DOM 元素、或 <a href=\"/
|
|
371
|
+
"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><HTMLElement></code></td>\n <td>-</td>\n </tr>\n <tr>\n <td colspan=\"3\">dialog 中的 body 内容，可以是 HTML 字符串、DOM 元素、或 <a href=\"/zh-cn/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<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 <p>默认点击按钮后会关闭 dialog；若返回值为 <code>false</code>，则不关闭 dialog；若返回值为 promise，则将在 promise 被 resolve 后，关闭 dialog。</p>\n </td>\n </tr>\n </tbody>\n</table>\n\n"
|
|
372
372
|
},
|
|
373
373
|
"functions--getColorFromImage": {
|
|
374
374
|
"key": "functions--getColorFromImage",
|
|
@@ -386,13 +386,13 @@ export const documents = {
|
|
|
386
386
|
"key": "functions--getTheme",
|
|
387
387
|
"title": "getTheme 函数",
|
|
388
388
|
"description": "`getTheme` 函数用于获取当前页面或指定元素的主题设置。",
|
|
389
|
-
"content": "# getTheme 函数\n\n`getTheme` 函数用于获取当前页面或指定元素的主题设置。\n\n主题类型包括 `light`、`dark`、`auto` 三种，详见 [
|
|
389
|
+
"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><HTMLElement>): '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"
|
|
390
390
|
},
|
|
391
391
|
"functions--jq": {
|
|
392
392
|
"key": "functions--jq",
|
|
393
393
|
"title": "jq 工具库",
|
|
394
394
|
"description": "mdui 内置了一个轻量级的 JavaScript 工具库，它提供了类似于 jQuery 的 API 和链式调用方式，但其体积只有 jQuery 的六分之一。",
|
|
395
|
-
"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"
|
|
395
|
+
"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\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, oldHeight) {\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, oldHeight) {\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>').prepend(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"
|
|
396
396
|
},
|
|
397
397
|
"functions--loadLocale": {
|
|
398
398
|
"key": "functions--loadLocale",
|
|
@@ -404,7 +404,7 @@ export const documents = {
|
|
|
404
404
|
"key": "functions--observeResize",
|
|
405
405
|
"title": "observeResize 函数",
|
|
406
406
|
"description": "`observeResize` 函数用于监听元素尺寸的变化，当尺寸发生变化时，会执行指定的回调函数。",
|
|
407
|
-
"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><HTMLElement>, callback: <a href=\"#api-callback\">Callback</a>)
|
|
407
|
+
"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><HTMLElement>, 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"
|
|
408
408
|
},
|
|
409
409
|
"functions--prompt": {
|
|
410
410
|
"key": "functions--prompt",
|
|
@@ -434,13 +434,13 @@ export const documents = {
|
|
|
434
434
|
"key": "functions--setTheme",
|
|
435
435
|
"title": "setTheme 函数",
|
|
436
436
|
"description": "`setTheme` 函数用于设置当前页面或指定元素的主题。",
|
|
437
|
-
"content": "# setTheme 函数\n\n`setTheme` 函数用于设置当前页面或指定元素的主题。\n\n可选的主题包括 `light`、`dark`和 `auto`。详见 [
|
|
437
|
+
"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><HTMLElement>): void</code></pre>\n\n函数的第一个参数是要设置的主题，可选值为 `light`、`dark`、`auto`。\n\n第二个参数是要设置主题的元素，可以是 CSS 选择器、DOM 元素，或 [JQ 对象](/zh-cn/docs/2/functions/jq)。如果不传入第二个参数，那么默认设置 `<html>` 元素的主题。\n\n"
|
|
438
438
|
},
|
|
439
439
|
"functions--snackbar": {
|
|
440
440
|
"key": "functions--snackbar",
|
|
441
441
|
"title": "snackbar 函数",
|
|
442
442
|
"description": "`snackbar` 函数是对 [`<mdui-snackbar>`](/zh-cn/docs/2/components/snackbar) 组件的封装。使用该函数，你无需编写组件的 HTML 代码，就能打开一个 snackbar。",
|
|
443
|
-
"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<void></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"
|
|
443
|
+
"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<void></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"
|
|
444
444
|
},
|
|
445
445
|
"functions--throttle": {
|
|
446
446
|
"key": "functions--throttle",
|
|
@@ -452,25 +452,25 @@ export const documents = {
|
|
|
452
452
|
"key": "getting-started--faq",
|
|
453
453
|
"title": "常见问题",
|
|
454
454
|
"description": "以下整理了一些 mdui 社区常见的问题和官方答复，在提问之前建议找找有没有类似的问题。",
|
|
455
|
-
"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"
|
|
455
|
+
"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/Reference/Selectors/: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"
|
|
456
456
|
},
|
|
457
457
|
"getting-started--ide-support": {
|
|
458
458
|
"key": "getting-started--ide-support",
|
|
459
459
|
"title": "IDE 支持",
|
|
460
460
|
"description": "mdui 专门为 VS Code 和 WebStorm 进行了优化，在这些 IDE 中可以获得代码自动完成、悬停提示等功能。",
|
|
461
|
-
"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
|
|
461
|
+
"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 ```json\n {\n \"web-types\": [\"./node_modules/mdui/web-types.zh-cn.json\"]\n }\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> |\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"
|
|
462
462
|
},
|
|
463
463
|
"getting-started--installation": {
|
|
464
464
|
"key": "getting-started--installation",
|
|
465
465
|
"title": "安装",
|
|
466
466
|
"description": "你可以选择通过 npm 安装 mdui，或者从 CDN 引入 mdui。推荐使用 npm 进行安装。",
|
|
467
|
-
"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
|
|
467
|
+
"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.js';\nimport 'mdui/components/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.js';\nimport 'mdui/components/list-item.js';\nimport 'mdui/components/list-subheader.js';\nimport 'mdui/components/menu.js';\nimport 'mdui/components/menu-item.js';\nimport 'mdui/components/navigation-bar.js';\nimport 'mdui/components/navigation-bar-item.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.js';\nimport 'mdui/components/top-app-bar-title.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"
|
|
468
468
|
},
|
|
469
469
|
"getting-started--localization": {
|
|
470
470
|
"key": "getting-started--localization",
|
|
471
471
|
"title": "本地化",
|
|
472
472
|
"description": "mdui 内部默认使用英文，如果需要使用其他语言，则需要进行多语言配置。",
|
|
473
|
-
"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
|
|
473
|
+
"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/zh-CN/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"
|
|
474
474
|
},
|
|
475
475
|
"getting-started--typescript-support": {
|
|
476
476
|
"key": "getting-started--typescript-support",
|
|
@@ -498,15 +498,15 @@ export const documents = {
|
|
|
498
498
|
},
|
|
499
499
|
"styles--dark-mode": {
|
|
500
500
|
"key": "styles--dark-mode",
|
|
501
|
-
"title": "
|
|
502
|
-
"description": "mdui
|
|
503
|
-
"content": "#
|
|
501
|
+
"title": "深色模式",
|
|
502
|
+
"description": "mdui 的所有组件都支持深色模式，并且支持根据操作系统的设置自动切换主题。",
|
|
503
|
+
"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"
|
|
504
504
|
},
|
|
505
505
|
"styles--design-tokens": {
|
|
506
506
|
"key": "styles--design-tokens",
|
|
507
507
|
"title": "设计令牌",
|
|
508
508
|
"description": "设计令牌（Design Tokens）是一种用于管理设计系统的策略。",
|
|
509
|
-
"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"
|
|
509
|
+
"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"
|
|
510
510
|
},
|
|
511
511
|
"styles--dynamic-color": {
|
|
512
512
|
"key": "styles--dynamic-color",
|