CrescentLeaf/LingChair
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Files
bd49edb586823b185c3740ce0c4698b31ba59482
LingChair/mdui_patched/web-types.zh-cn.json
CrescentLeaf 1cb8ac3fff 移动目录
2025-11-23 13:27:15 +08:00

11834 lines
655 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"$schema": "http://json.schemastore.org/web-types",
"name": "mdui",
"version": "2.1.4",
"js-types-syntax": "typescript",
"description-markup": "markdown",
"framework-config": {
"enable-when": {
"node-packages": [
"mdui"
]
}
},
"contributions": {
"html": {
"elements": [
{
"name": "mdui-avatar",
"description": "头像组件\n\n```html\n<mdui-avatar src=\"https://avatars githubusercontent com/u/3030330?s=40&v=4\"></mdui-avatar>\n```",
"attributes": [
{
"name": "src",
"description": "头像图片的 URL 地址",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-src"
},
{
"name": "fit",
"description": "图片如何适应容器框，与原生的 [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 属性相同。可选值包括：\n\n* `contain`：保持图片原有尺寸比例，内容会被等比例缩放\n* `cover`：保持图片原有尺寸比例，但部分内容可能被剪切\n* `fill`：默认值，不保持图片原有尺寸比例，内容会被拉伸以填充整个容器\n* `none`：保留图片原有尺寸，内容不会被缩放或拉伸\n* `scale-down`：保持图片原有尺寸比例，内容尺寸与 `none` 或 `contain` 中较小的一个相同",
"value": {
"type": [
"'contain'",
"'cover'",
"'fill'",
"'none'",
"'scale-down'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-fit"
},
{
"name": "icon",
"description": "头像的 Material Icons 图标名",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-icon"
},
{
"name": "label",
"description": "头像的替代文本描述",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-label"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar",
"slots": [
{
"name": "",
"description": "自定义头像内容，可以为字母、汉字、`<img>` 元素、图标等",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#slots-default"
}
],
"js": {
"properties": [
{
"name": "src",
"description": "头像图片的 URL 地址",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-src"
},
{
"name": "fit",
"description": "图片如何适应容器框，与原生的 [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 属性相同。可选值包括：\n\n* `contain`：保持图片原有尺寸比例，内容会被等比例缩放\n* `cover`：保持图片原有尺寸比例，但部分内容可能被剪切\n* `fill`：默认值，不保持图片原有尺寸比例，内容会被拉伸以填充整个容器\n* `none`：保留图片原有尺寸，内容不会被缩放或拉伸\n* `scale-down`：保持图片原有尺寸比例，内容尺寸与 `none` 或 `contain` 中较小的一个相同",
"value": {
"type": [
"'contain'",
"'cover'",
"'fill'",
"'none'",
"'scale-down'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-fit"
},
{
"name": "icon",
"description": "头像的 Material Icons 图标名",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-icon"
},
{
"name": "label",
"description": "头像的替代文本描述",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-label"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "image",
"description": "使用图片作为头像时，组件内部的 `<img>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#cssParts-image"
},
{
"name": "icon",
"description": "使用图标作为头像时，组件内部的 `<mdui-icon>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#cssParts-icon"
}
]
}
},
{
"name": "mdui-badge",
"description": "徽标组件\n\n```html\n<mdui-badge>12</mdui-badge>\n```",
"attributes": [
{
"name": "variant",
"description": "徽标的形状。可选值包括：\n\n* `small`：小型徽标，不显示文本\n* `large`：大型徽标，会显示文本",
"value": {
"type": [
"'small'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge#attributes-variant"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge",
"slots": [
{
"name": "",
"description": "徽标中显示的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge#slots-default"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "徽标的形状。可选值包括：\n\n* `small`：小型徽标，不显示文本\n* `large`：大型徽标，会显示文本",
"value": {
"type": [
"'small'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge#attributes-variant"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge#cssProperties-shape-corner"
}
]
}
},
{
"name": "mdui-bottom-app-bar",
"description": "底部应用栏组件\n\n```html\n<mdui-bottom-app-bar>\n <mdui-button-icon icon=\"check_box--outlined\"></mdui-button-icon>\n <mdui-button-icon icon=\"edit--outlined\"></mdui-button-icon>\n <mdui-button-icon icon=\"mic_none--outlined\"></mdui-button-icon>\n <mdui-button-icon icon=\"image--outlined\"></mdui-button-icon>\n <div style=\"flex-grow: 1\"></div>\n <mdui-fab icon=\"add\"></mdui-fab>\n</mdui-bottom-app-bar>\n```",
"attributes": [
{
"name": "hide",
"description": "是否隐藏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-hide"
},
{
"name": "fab-detach",
"description": "是否让底部应用栏中的 [`<mdui-fab>`](https://www.mdui.org/zh-cn/docs/2/components/fab) 组件脱离应用栏。如果为 `true`，则当应用栏隐藏后，[`<mdui-fab>`](https://www.mdui.org/zh-cn/docs/2/components/fab) 仍会停留在页面上",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-fab-detach"
},
{
"name": "scroll-behavior",
"description": "滚动行为。可选值为：\n\n* `hide`：滚动时隐藏",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scroll-behavior"
},
{
"name": "scroll-target",
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scroll-target"
},
{
"name": "scroll-threshold",
"description": "在滚动多少距离之后触发滚动行为，单位为 `px`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scroll-threshold"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar",
"slots": [
{
"name": "",
"description": "底部应用栏内部的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#slots-default"
}
],
"js": {
"properties": [
{
"name": "hide",
"description": "是否隐藏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-hide"
},
{
"name": "fabDetach",
"description": "是否让底部应用栏中的 [`<mdui-fab>`](https://www.mdui.org/zh-cn/docs/2/components/fab) 组件脱离应用栏。如果为 `true`，则当应用栏隐藏后，[`<mdui-fab>`](https://www.mdui.org/zh-cn/docs/2/components/fab) 仍会停留在页面上",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-fabDetach"
},
{
"name": "scrollBehavior",
"description": "滚动行为。可选值为：\n\n* `hide`：滚动时隐藏",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scrollBehavior"
},
{
"name": "scrollTarget",
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scrollTarget"
},
{
"name": "scrollThreshold",
"description": "在滚动多少距离之后触发滚动行为，单位为 `px`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scrollThreshold"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-order"
}
],
"events": [
{
"name": "show",
"description": "开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#events-show"
},
{
"name": "shown",
"description": "显示动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#events-shown"
},
{
"name": "hide",
"description": "开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#events-hide"
},
{
"name": "hidden",
"description": "隐藏动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#events-hidden"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "组件的 CSS `z-index` 值",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#cssProperties-z-index"
}
]
}
},
{
"name": "mdui-button-icon",
"description": "图标按钮组件\n\n```html\n<mdui-button-icon icon=\"search\"></mdui-button-icon>\n```",
"attributes": [
{
"name": "variant",
"description": "图标按钮的形状。可选值包括：\n\n* `standard`：适用于最低优先级的操作\n* `filled`：视觉效果强烈，适用于高优先级的操作\n* `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作\n* `outlined`：适用于中等优先级的操作",
"value": {
"type": [
"'standard'",
"'filled'",
"'tonal'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-variant"
},
{
"name": "icon",
"description": "Material Icons 图标名。也可以通过 default slot 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-icon"
},
{
"name": "selected-icon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selected-icon"
},
{
"name": "selectable",
"description": "是否可选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selectable"
},
{
"name": "selected",
"description": "是否已被选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selected"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-tabindex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-form"
},
{
"name": "formaction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formaction"
},
{
"name": "formenctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formenctype"
},
{
"name": "formmethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon",
"slots": [
{
"name": "",
"description": "图标组件",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#slots-default"
},
{
"name": "selected-icon",
"description": "选中状态显示的图标元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#slots-selected-icon"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "图标按钮的形状。可选值包括：\n\n* `standard`：适用于最低优先级的操作\n* `filled`：视觉效果强烈，适用于高优先级的操作\n* `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作\n* `outlined`：适用于中等优先级的操作",
"value": {
"type": [
"'standard'",
"'filled'",
"'tonal'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-variant"
},
{
"name": "icon",
"description": "Material Icons 图标名。也可以通过 default slot 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-icon"
},
{
"name": "selectedIcon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selectedIcon"
},
{
"name": "selectable",
"description": "是否可选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selectable"
},
{
"name": "selected",
"description": "是否已被选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selected"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-tabIndex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-form"
},
{
"name": "formAction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formAction"
},
{
"name": "formEnctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formEnctype"
},
{
"name": "formMethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formTarget"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#events-blur"
},
{
"name": "change",
"description": "选中状态变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#events-change"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "button",
"description": "内部的 `<button>` 或 `<a>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssParts-button"
},
{
"name": "icon",
"description": "未选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssParts-icon"
},
{
"name": "selected-icon",
"description": "选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssParts-selected-icon"
},
{
"name": "loading",
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssParts-loading"
}
]
}
},
{
"name": "mdui-button",
"description": "按钮组件\n\n```html\n<mdui-button>Button</mdui-button>\n```",
"attributes": [
{
"name": "variant",
"description": "按钮的形状。可选值包括：\n\n* `elevated`：带阴影的按钮，适用于需要将按钮与背景视觉分离的场景\n* `filled`：视觉效果强烈，适用于重要流程的最终操作，如“保存”、“确认”等\n* `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作，如流程中的“下一步”\n* `outlined`：带边框的按钮，适用于中等优先级，且次要的操作，如“返回”\n* `text`：文本按钮，适用于最低优先级的操作",
"value": {
"type": [
"'elevated'",
"'filled'",
"'tonal'",
"'outlined'",
"'text'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-variant"
},
{
"name": "full-width",
"description": "是否填满父元素宽度",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-full-width"
},
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-icon"
},
{
"name": "end-icon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-end-icon"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-tabindex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-form"
},
{
"name": "formaction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formaction"
},
{
"name": "formenctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formenctype"
},
{
"name": "formmethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button",
"slots": [
{
"name": "",
"description": "按钮的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#slots-default"
},
{
"name": "icon",
"description": "按钮左侧的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#slots-icon"
},
{
"name": "end-icon",
"description": "按钮右侧的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#slots-end-icon"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "按钮的形状。可选值包括：\n\n* `elevated`：带阴影的按钮，适用于需要将按钮与背景视觉分离的场景\n* `filled`：视觉效果强烈，适用于重要流程的最终操作，如“保存”、“确认”等\n* `tonal`：视觉效果介于 `filled` 和 `outlined` 之间，适用于中高优先级的操作，如流程中的“下一步”\n* `outlined`：带边框的按钮，适用于中等优先级，且次要的操作，如“返回”\n* `text`：文本按钮，适用于最低优先级的操作",
"value": {
"type": [
"'elevated'",
"'filled'",
"'tonal'",
"'outlined'",
"'text'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-variant"
},
{
"name": "fullWidth",
"description": "是否填满父元素宽度",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-fullWidth"
},
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-icon"
},
{
"name": "endIcon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-endIcon"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-tabIndex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-form"
},
{
"name": "formAction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formAction"
},
{
"name": "formEnctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formEnctype"
},
{
"name": "formMethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formTarget"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#events-blur"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "button",
"description": "内部的 `<button>` 或 `<a>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-button"
},
{
"name": "label",
"description": "按钮的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-label"
},
{
"name": "icon",
"description": "按钮左侧的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-icon"
},
{
"name": "end-icon",
"description": "按钮右侧的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-end-icon"
},
{
"name": "loading",
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-loading"
}
]
}
},
{
"name": "mdui-card",
"description": "卡片组件\n\n```html\n<mdui-card>card content</mdui-card>\n```",
"attributes": [
{
"name": "variant",
"description": "卡片的形状。可选值包括：\n\n* `elevated`：带阴影的卡片，与背景的视觉分离度较高\n* `filled`：带填充色的卡片，与背景的视觉分离度较低\n* `outlined`：带边框的卡片，与背景的视觉分离度最高",
"value": {
"type": [
"'elevated'",
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-variant"
},
{
"name": "clickable",
"description": "是否可点击。为 `true` 时，卡片将具有鼠标悬浮效果和点击涟漪效果",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-clickable"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-disabled"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card",
"slots": [
{
"name": "",
"description": "卡片的内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#slots-default"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "卡片的形状。可选值包括：\n\n* `elevated`：带阴影的卡片，与背景的视觉分离度较高\n* `filled`：带填充色的卡片，与背景的视觉分离度较低\n* `outlined`：带边框的卡片，与背景的视觉分离度最高",
"value": {
"type": [
"'elevated'",
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-variant"
},
{
"name": "clickable",
"description": "是否可点击。为 `true` 时，卡片将具有鼠标悬浮效果和点击涟漪效果",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-clickable"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-disabled"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#events-blur"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#cssProperties-shape-corner"
}
]
}
},
{
"name": "mdui-checkbox",
"description": "复选框组件\n\n```html\n<mdui-checkbox>Checkbox</mdui-checkbox>\n```",
"attributes": [
{
"name": "disabled",
"description": "是否为禁用状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-disabled"
},
{
"name": "checked",
"description": "是否为选中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checked"
},
{
"name": "indeterminate",
"description": "是否处于不确定状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminate"
},
{
"name": "required",
"description": "提交表单时，是否必须选中此复选框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-required"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-form"
},
{
"name": "name",
"description": "复选框名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-name"
},
{
"name": "value",
"description": "复选框的值，将于表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-value"
},
{
"name": "unchecked-icon",
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-unchecked-icon"
},
{
"name": "checked-icon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checked-icon"
},
{
"name": "indeterminate-icon",
"description": "不确定状态的 Material Icons 图标名。也可以通过 `slot=\"indeterminate-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminate-icon"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox",
"slots": [
{
"name": "",
"description": "复选框文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#slots-default"
},
{
"name": "unchecked-icon",
"description": "未选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#slots-unchecked-icon"
},
{
"name": "checked-icon",
"description": "选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#slots-checked-icon"
},
{
"name": "indeterminate-icon",
"description": "不确定状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#slots-indeterminate-icon"
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "是否为禁用状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-disabled"
},
{
"name": "checked",
"description": "是否为选中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checked"
},
{
"name": "defaultChecked",
"description": "默认选中状态。在重置表单时，将恢复为此状态。此属性只能通过 JavaScript 属性设置",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-defaultChecked"
},
{
"name": "indeterminate",
"description": "是否处于不确定状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminate"
},
{
"name": "required",
"description": "提交表单时，是否必须选中此复选框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-required"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-form"
},
{
"name": "name",
"description": "复选框名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-name"
},
{
"name": "value",
"description": "复选框的值，将于表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-value"
},
{
"name": "uncheckedIcon",
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-uncheckedIcon"
},
{
"name": "checkedIcon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checkedIcon"
},
{
"name": "indeterminateIcon",
"description": "不确定状态的 Material Icons 图标名。也可以通过 `slot=\"indeterminate-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminateIcon"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-validationMessage"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-blur"
},
{
"name": "change",
"description": "选中状态变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-change"
},
{
"name": "input",
"description": "选中状态变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-input"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-invalid"
}
]
},
"css": {
"parts": [
{
"name": "control",
"description": "左侧图标容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-control"
},
{
"name": "unchecked-icon",
"description": "未选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-unchecked-icon"
},
{
"name": "checked-icon",
"description": "选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-checked-icon"
},
{
"name": "indeterminate-icon",
"description": "不确定状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-indeterminate-icon"
},
{
"name": "label",
"description": "复选框文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-label"
}
]
}
},
{
"name": "mdui-chip",
"description": "纸片组件\n\n```html\n<mdui-chip>Chip</mdui-chip>\n```",
"attributes": [
{
"name": "variant",
"description": "纸片的形状。可选值包括：\n\n* `assist`：用于显示与当前上下文相关的辅助操作，如在点餐页面提供分享、收藏等功能\n* `filter`：用于对内容进行筛选，如在搜索结果页过滤搜索结果\n* `input`：用于表示用户输入的信息片段，如在 Gmail 的“收件人”字段中的联系人\n* `suggestion`：用于提供动态生成的推荐信息，以简化用户操作，如在聊天应用中预测用户可能想发送的信息",
"value": {
"type": [
"'assist'",
"'filter'",
"'input'",
"'suggestion'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-variant"
},
{
"name": "elevated",
"description": "是否显示阴影",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-elevated"
},
{
"name": "selectable",
"description": "是否可选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selectable"
},
{
"name": "selected",
"description": "是否已选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selected"
},
{
"name": "deletable",
"description": "是否可删除。为 `true` 时，纸片右侧会显示删除图标",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-deletable"
},
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-icon"
},
{
"name": "selected-icon",
"description": "选中状态下左侧的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selected-icon"
},
{
"name": "end-icon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-end-icon"
},
{
"name": "delete-icon",
"description": "可删除时，右侧删除图标的 Material Icons 图标名。也可以通过 `slot=\"delete-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-delete-icon"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-tabindex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-form"
},
{
"name": "formaction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formaction"
},
{
"name": "formenctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formenctype"
},
{
"name": "formmethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip",
"slots": [
{
"name": "",
"description": "纸片文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-default"
},
{
"name": "icon",
"description": "左侧元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-icon"
},
{
"name": "end-icon",
"description": "右侧元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-end-icon"
},
{
"name": "selected-icon",
"description": "选中状态下的左侧元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-selected-icon"
},
{
"name": "delete-icon",
"description": "可删除时的右侧删除元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-delete-icon"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "纸片的形状。可选值包括：\n\n* `assist`：用于显示与当前上下文相关的辅助操作，如在点餐页面提供分享、收藏等功能\n* `filter`：用于对内容进行筛选，如在搜索结果页过滤搜索结果\n* `input`：用于表示用户输入的信息片段，如在 Gmail 的“收件人”字段中的联系人\n* `suggestion`：用于提供动态生成的推荐信息，以简化用户操作，如在聊天应用中预测用户可能想发送的信息",
"value": {
"type": [
"'assist'",
"'filter'",
"'input'",
"'suggestion'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-variant"
},
{
"name": "elevated",
"description": "是否显示阴影",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-elevated"
},
{
"name": "selectable",
"description": "是否可选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selectable"
},
{
"name": "selected",
"description": "是否已选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selected"
},
{
"name": "deletable",
"description": "是否可删除。为 `true` 时，纸片右侧会显示删除图标",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-deletable"
},
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-icon"
},
{
"name": "selectedIcon",
"description": "选中状态下左侧的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selectedIcon"
},
{
"name": "endIcon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-endIcon"
},
{
"name": "deleteIcon",
"description": "可删除时，右侧删除图标的 Material Icons 图标名。也可以通过 `slot=\"delete-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-deleteIcon"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-tabIndex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-form"
},
{
"name": "formAction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formAction"
},
{
"name": "formEnctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formEnctype"
},
{
"name": "formMethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formTarget"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-blur"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-invalid"
},
{
"name": "change",
"description": "选中状态变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-change"
},
{
"name": "delete",
"description": "点击删除图标时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-delete"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "button",
"description": "内部的 `<button>` 或 `<a>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-button"
},
{
"name": "label",
"description": "纸片文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-label"
},
{
"name": "icon",
"description": "左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-icon"
},
{
"name": "end-icon",
"description": "右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-end-icon"
},
{
"name": "selected-icon",
"description": "选中状态下的左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-selected-icon"
},
{
"name": "delete-icon",
"description": "可删除时的右侧删除图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-delete-icon"
},
{
"name": "loading",
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-loading"
}
]
}
},
{
"name": "mdui-circular-progress",
"description": "圆形进度指示器组件\n\n```html\n<mdui-circular-progress></mdui-circular-progress>\n```",
"attributes": [
{
"name": "max",
"description": "进度指示器的最大值。默认为 `1`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress#attributes-max"
},
{
"name": "value",
"description": "进度指示器的当前值。如果未指定该值，则显示为不确定状态",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress#attributes-value"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress",
"js": {
"properties": [
{
"name": "max",
"description": "进度指示器的最大值。默认为 `1`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress#attributes-max"
},
{
"name": "value",
"description": "进度指示器的当前值。如果未指定该值，则显示为不确定状态",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress#attributes-value"
}
]
}
},
{
"name": "mdui-collapse-item",
"description": "折叠面板项组件，需配合 `<mdui-collapse>` 组件使用\n\n```html\n<mdui-collapse>\n <mdui-collapse-item header=\"header-1\">content-1</mdui-collapse-item>\n <mdui-collapse-item header=\"header-2\">content-2</mdui-collapse-item>\n</mdui-collapse>\n```",
"attributes": [
{
"name": "value",
"description": "此折叠面板项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-value"
},
{
"name": "header",
"description": "此折叠面板项的头部文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-header"
},
{
"name": "disabled",
"description": "是否禁用此折叠面板项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-disabled"
},
{
"name": "trigger",
"description": "点击该元素时触发折叠，值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认为点击整个 header 区域触发",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-trigger"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse",
"slots": [
{
"name": "",
"description": "折叠面板项的正文内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-slots-default"
},
{
"name": "header",
"description": "折叠面板项的头部内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-slots-header"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "此折叠面板项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-value"
},
{
"name": "header",
"description": "此折叠面板项的头部文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-header"
},
{
"name": "disabled",
"description": "是否禁用此折叠面板项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-disabled"
},
{
"name": "trigger",
"description": "点击该元素时触发折叠，值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认为点击整个 header 区域触发",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-trigger"
}
],
"events": [
{
"name": "open",
"description": "开始打开时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-events-open"
},
{
"name": "opened",
"description": "打开动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-events-opened"
},
{
"name": "close",
"description": "开始关闭时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-events-close"
},
{
"name": "closed",
"description": "关闭动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-events-closed"
}
]
},
"css": {
"parts": [
{
"name": "header",
"description": "折叠面板的头部内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-cssParts-header"
},
{
"name": "body",
"description": "折叠面板的正文内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-cssParts-body"
}
]
}
},
{
"name": "mdui-collapse",
"description": "折叠面板组件，需配合 `<mdui-collapse-item>` 组件使用\n\n```html\n<mdui-collapse>\n <mdui-collapse-item header=\"header-1\">content-1</mdui-collapse-item>\n <mdui-collapse-item header=\"header-2\">content-2</mdui-collapse-item>\n</mdui-collapse>\n```",
"attributes": [
{
"name": "accordion",
"description": "是否启用手风琴模式",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-accordion"
},
{
"name": "value",
"description": "当前展开的 `<mdui-collapse-item>` 的值\n\n**Note**：该属性的 HTML 属性始终为字符串，只有在 `accordion` 为 `true` 时，才能设置初始值；该属性的 JavaScript 属性值在 `accordion` 为 `true` 时为字符串，在 `accordion` 为 `false` 时为字符串数组。因此，当 `accordion` 为 `false` 时，只能通过修改 JavaScript 属性值来改变此值。",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-value"
},
{
"name": "disabled",
"description": "是否禁用此折叠面板",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-disabled"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse",
"slots": [
{
"name": "",
"description": "`<mdui-collapse-item>` 组件",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-slots-default"
}
],
"js": {
"properties": [
{
"name": "accordion",
"description": "是否启用手风琴模式",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-accordion"
},
{
"name": "value",
"description": "当前展开的 `<mdui-collapse-item>` 的值\n\n**Note**：该属性的 HTML 属性始终为字符串，只有在 `accordion` 为 `true` 时，才能设置初始值；该属性的 JavaScript 属性值在 `accordion` 为 `true` 时为字符串，在 `accordion` 为 `false` 时为字符串数组。因此，当 `accordion` 为 `false` 时，只能通过修改 JavaScript 属性值来改变此值。",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-value"
},
{
"name": "disabled",
"description": "是否禁用此折叠面板",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-disabled"
}
],
"events": [
{
"name": "change",
"description": "当前展开的折叠面板项变化时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-events-change"
}
]
}
},
{
"name": "mdui-dialog",
"description": "对话框组件\n\n```html\n<mdui-dialog>content</mdui-dialog>\n```",
"attributes": [
{
"name": "icon",
"description": "顶部的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-icon"
},
{
"name": "headline",
"description": "标题。也可以通过 `slot=\"headline\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-headline"
},
{
"name": "description",
"description": "标题下方的文本。也可以通过 `slot=\"description\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-description"
},
{
"name": "open",
"description": "是否打开对话框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-open"
},
{
"name": "fullscreen",
"description": "是否全屏显示对话框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-fullscreen"
},
{
"name": "close-on-esc",
"description": "是否允许按下 ESC 键关闭对话框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-close-on-esc"
},
{
"name": "close-on-overlay-click",
"description": "是否允许点击遮罩层关闭对话框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-close-on-overlay-click"
},
{
"name": "stacked-actions",
"description": "是否垂直排列底部操作按钮",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-stacked-actions"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog",
"slots": [
{
"name": "header",
"description": "顶部元素，默认包含 `icon` slot 和 `headline` slot",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-header"
},
{
"name": "icon",
"description": "顶部图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-icon"
},
{
"name": "headline",
"description": "顶部标题",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-headline"
},
{
"name": "description",
"description": "标题下方的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-description"
},
{
"name": "",
"description": "对话框主体内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-default"
},
{
"name": "action",
"description": "底部操作栏中的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-action"
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "顶部的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-icon"
},
{
"name": "headline",
"description": "标题。也可以通过 `slot=\"headline\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-headline"
},
{
"name": "description",
"description": "标题下方的文本。也可以通过 `slot=\"description\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-description"
},
{
"name": "open",
"description": "是否打开对话框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-open"
},
{
"name": "fullscreen",
"description": "是否全屏显示对话框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-fullscreen"
},
{
"name": "closeOnEsc",
"description": "是否允许按下 ESC 键关闭对话框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-closeOnEsc"
},
{
"name": "closeOnOverlayClick",
"description": "是否允许点击遮罩层关闭对话框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-closeOnOverlayClick"
},
{
"name": "stackedActions",
"description": "是否垂直排列底部操作按钮",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-stackedActions"
}
],
"events": [
{
"name": "open",
"description": "对话框开始打开时触发。可以通过调用 `event.preventDefault()` 阻止对话框打开",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-open"
},
{
"name": "opened",
"description": "对话框打开动画完成后触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-opened"
},
{
"name": "close",
"description": "对话框开始关闭时触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-close"
},
{
"name": "closed",
"description": "对话框关闭动画完成后触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-closed"
},
{
"name": "overlay-click",
"description": "点击遮罩层时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-overlay-click"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "组件的 CSS `z-index` 值",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssProperties-z-index"
}
],
"parts": [
{
"name": "overlay",
"description": "遮罩层",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-overlay"
},
{
"name": "panel",
"description": "对话框容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-panel"
},
{
"name": "header",
"description": "对话框 header 部分，包含 icon 和 headline",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-header"
},
{
"name": "icon",
"description": "顶部图标，位于 header 中",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-icon"
},
{
"name": "headline",
"description": "顶部标题，位于 header 中",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-headline"
},
{
"name": "body",
"description": "对话框 body 部分",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-body"
},
{
"name": "description",
"description": "副文本部分，位于 body 中",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-description"
},
{
"name": "action",
"description": "底部操作按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-action"
}
]
}
},
{
"name": "mdui-divider",
"description": "分割线组件\n\n```html\n<mdui-divider></mdui-divider>\n```",
"attributes": [
{
"name": "vertical",
"description": "是否为垂直分割线",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-vertical"
},
{
"name": "inset",
"description": "是否进行左侧缩进",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-inset"
},
{
"name": "middle",
"description": "是否进行左右两侧缩进",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-middle"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider",
"js": {
"properties": [
{
"name": "vertical",
"description": "是否为垂直分割线",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-vertical"
},
{
"name": "inset",
"description": "是否进行左侧缩进",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-inset"
},
{
"name": "middle",
"description": "是否进行左右两侧缩进",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-middle"
}
]
}
},
{
"name": "mdui-dropdown",
"description": "下拉组件\n\n```html\n<mdui-dropdown>\n <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n <mdui-menu>\n <mdui-menu-item>Item 1</mdui-menu-item>\n <mdui-menu-item>Item 2</mdui-menu-item>\n </mdui-menu>\n</mdui-dropdown>\n```",
"attributes": [
{
"name": "open",
"description": "是否打开下拉组件",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-open"
},
{
"name": "disabled",
"description": "是否禁用下拉组件",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-disabled"
},
{
"name": "trigger",
"description": "下拉组件的触发方式，支持多个值，用空格分隔。可选值包括：\n\n* `click`：点击触发\n* `hover`：鼠标悬浮触发\n* `focus`：聚焦触发\n* `contextmenu`：鼠标右键点击、或触摸长按触发\n* `manual`：仅能通过编程方式打开和关闭下拉组件，不能再指定其他触发方式",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'contextmenu'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-trigger"
},
{
"name": "placement",
"description": "下拉组件内容的位置。可选值包括：\n\n* `auto`：自动判断位置\n* `top-start`：上方左对齐\n* `top`：上方居中\n* `top-end`：上方右对齐\n* `bottom-start`：下方左对齐\n* `bottom`：下方居中\n* `bottom-end`：下方右对齐\n* `left-start`：左侧顶部对齐\n* `left`：左侧居中\n* `left-end`：左侧底部对齐\n* `right-start`：右侧顶部对齐\n* `right`：右侧居中\n* `right-end`：右侧底部对齐",
"value": {
"type": [
"'auto'",
"'top-start'",
"'top'",
"'top-end'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-placement"
},
{
"name": "stay-open-on-click",
"description": "点击 [`<mdui-menu-item>`](https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-api) 后，下拉组件是否保持打开状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-stay-open-on-click"
},
{
"name": "open-delay",
"description": "鼠标悬浮触发下拉组件打开的延时，单位为毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-open-delay"
},
{
"name": "close-delay",
"description": "鼠标悬浮触发下拉组件关闭的延时，单位为毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-close-delay"
},
{
"name": "open-on-pointer",
"description": "是否在触发下拉组件的光标位置打开下拉组件，常用于打开鼠标右键菜单",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-open-on-pointer"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown",
"slots": [
{
"name": "",
"description": "下拉组件的内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#slots-default"
},
{
"name": "trigger",
"description": "触发下拉组件的元素，例如 [`<mdui-button>`](https://www.mdui.org/zh-cn/docs/2/components/button) 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#slots-trigger"
}
],
"js": {
"properties": [
{
"name": "open",
"description": "是否打开下拉组件",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-open"
},
{
"name": "disabled",
"description": "是否禁用下拉组件",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-disabled"
},
{
"name": "trigger",
"description": "下拉组件的触发方式，支持多个值，用空格分隔。可选值包括：\n\n* `click`：点击触发\n* `hover`：鼠标悬浮触发\n* `focus`：聚焦触发\n* `contextmenu`：鼠标右键点击、或触摸长按触发\n* `manual`：仅能通过编程方式打开和关闭下拉组件，不能再指定其他触发方式",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'contextmenu'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-trigger"
},
{
"name": "placement",
"description": "下拉组件内容的位置。可选值包括：\n\n* `auto`：自动判断位置\n* `top-start`：上方左对齐\n* `top`：上方居中\n* `top-end`：上方右对齐\n* `bottom-start`：下方左对齐\n* `bottom`：下方居中\n* `bottom-end`：下方右对齐\n* `left-start`：左侧顶部对齐\n* `left`：左侧居中\n* `left-end`：左侧底部对齐\n* `right-start`：右侧顶部对齐\n* `right`：右侧居中\n* `right-end`：右侧底部对齐",
"value": {
"type": [
"'auto'",
"'top-start'",
"'top'",
"'top-end'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-placement"
},
{
"name": "stayOpenOnClick",
"description": "点击 [`<mdui-menu-item>`](https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-api) 后，下拉组件是否保持打开状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-stayOpenOnClick"
},
{
"name": "openDelay",
"description": "鼠标悬浮触发下拉组件打开的延时，单位为毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-openDelay"
},
{
"name": "closeDelay",
"description": "鼠标悬浮触发下拉组件关闭的延时，单位为毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-closeDelay"
},
{
"name": "openOnPointer",
"description": "是否在触发下拉组件的光标位置打开下拉组件，常用于打开鼠标右键菜单",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-openOnPointer"
}
],
"events": [
{
"name": "open",
"description": "下拉组件开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件打开",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#events-open"
},
{
"name": "opened",
"description": "下拉组件打开动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#events-opened"
},
{
"name": "close",
"description": "下拉组件开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件关闭",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#events-close"
},
{
"name": "closed",
"description": "下拉组件关闭动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#events-closed"
}
]
},
"css": {
"properties": [
{
"name": "--z-index",
"description": "组件的 CSS `z-index` 值",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#cssProperties-z-index"
}
],
"parts": [
{
"name": "trigger",
"description": "触发下拉组件的元素的容器，即 `trigger` slot 的容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#cssParts-trigger"
},
{
"name": "panel",
"description": "下拉组件内容的容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#cssParts-panel"
}
]
}
},
{
"name": "mdui-fab",
"description": "浮动操作按钮组件\n\n```html\n<mdui-fab icon=\"edit\"></mdui-fab>\n```",
"attributes": [
{
"name": "variant",
"description": "FAB 的形状，此组件的不同形状之间只有颜色不一样。可选值包括：\n\n* `primary`：使用 Primary container 背景色\n* `surface`：使用 Surface container high 背景色\n* `secondary`：使用 Secondary container 背景色\n* `tertiary`：使用 Tertiary container 背景色",
"value": {
"type": [
"'primary'",
"'surface'",
"'secondary'",
"'tertiary'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-variant"
},
{
"name": "size",
"description": "FAB 的大小。可选值包括：\n* `normal`：普通大小 FAB\n* `small`：小型 FAB\n* `large`：大型 FAB",
"value": {
"type": [
"'normal'",
"'small'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-size"
},
{
"name": "icon",
"description": "Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-icon"
},
{
"name": "extended",
"description": "是否为展开状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-extended"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-tabindex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-form"
},
{
"name": "formaction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formaction"
},
{
"name": "formenctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formenctype"
},
{
"name": "formmethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab",
"slots": [
{
"name": "",
"description": "文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#slots-default"
},
{
"name": "icon",
"description": "图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#slots-icon"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "FAB 的形状，此组件的不同形状之间只有颜色不一样。可选值包括：\n\n* `primary`：使用 Primary container 背景色\n* `surface`：使用 Surface container high 背景色\n* `secondary`：使用 Secondary container 背景色\n* `tertiary`：使用 Tertiary container 背景色",
"value": {
"type": [
"'primary'",
"'surface'",
"'secondary'",
"'tertiary'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-variant"
},
{
"name": "size",
"description": "FAB 的大小。可选值包括：\n* `normal`：普通大小 FAB\n* `small`：小型 FAB\n* `large`：大型 FAB",
"value": {
"type": [
"'normal'",
"'small'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-size"
},
{
"name": "icon",
"description": "Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-icon"
},
{
"name": "extended",
"description": "是否为展开状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-extended"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-tabIndex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-form"
},
{
"name": "formAction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formAction"
},
{
"name": "formEnctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formEnctype"
},
{
"name": "formMethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formTarget"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#events-blur"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner-small",
"description": "`size=\"small\"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssProperties-shape-corner-small"
},
{
"name": "--shape-corner-normal",
"description": "`size=\"normal\"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssProperties-shape-corner-normal"
},
{
"name": "--shape-corner-large",
"description": "`size=\"large\"` 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssProperties-shape-corner-large"
}
],
"parts": [
{
"name": "button",
"description": "内部的 `<button>` 或 `<a>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssParts-button"
},
{
"name": "label",
"description": "右侧的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssParts-label"
},
{
"name": "icon",
"description": "左侧的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssParts-icon"
},
{
"name": "loading",
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssParts-loading"
}
]
}
},
{
"name": "mdui-icon",
"description": "图标组件\n\n```html\n<mdui-icon name=\"search\"></mdui-icon>\n```",
"attributes": [
{
"name": "name",
"description": "Material Icons 图标名",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#attributes-name"
},
{
"name": "src",
"description": "svg 图标的路径",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#attributes-src"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon",
"slots": [
{
"name": "",
"description": "`svg` 图标的内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#slots-default"
}
],
"js": {
"properties": [
{
"name": "name",
"description": "Material Icons 图标名",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#attributes-name"
},
{
"name": "src",
"description": "svg 图标的路径",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#attributes-src"
}
]
}
},
{
"name": "mdui-layout-item",
"description": "布局项组件\n\n```html\n<mdui-layout>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
"attributes": [
{
"name": "placement",
"description": "组件的位置。可选值包括：\n\n* `top`：上方\n* `bottom`：下方\n* `left`：左侧\n* `right`：右侧",
"value": {
"type": [
"'top'",
"'bottom'",
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-attributes-placement"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout",
"slots": [
{
"name": "",
"description": "可以包含任意内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-slots-default"
}
],
"js": {
"properties": [
{
"name": "placement",
"description": "组件的位置。可选值包括：\n\n* `top`：上方\n* `bottom`：下方\n* `left`：左侧\n* `right`：右侧",
"value": {
"type": [
"'top'",
"'bottom'",
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-attributes-placement"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-attributes-order"
}
]
}
},
{
"name": "mdui-layout-main",
"description": "布局主体内容组件\n\n```html\n<mdui-layout>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
"attributes": [],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout",
"slots": [
{
"name": "",
"description": "可以包含任意内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-main-slots-default"
}
],
"js": {
"properties": []
}
},
{
"name": "mdui-layout",
"description": "布局组件\n\n```html\n<mdui-layout>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
"attributes": [
{
"name": "full-height",
"description": "设置当前布局的高度为 100%",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-attributes-full-height"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout",
"slots": [
{
"name": "",
"description": "可以包含 [`<mdui-top-app-bar>`](https://www.mdui.org/zh-cn/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](https://www.mdui.org/zh-cn/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](https://www.mdui.org/zh-cn/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-slots-default"
}
],
"js": {
"properties": [
{
"name": "fullHeight",
"description": "设置当前布局的高度为 100%",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-attributes-fullHeight"
}
]
}
},
{
"name": "mdui-linear-progress",
"description": "线性进度指示器组件\n\n```html\n<mdui-linear-progress></mdui-linear-progress>\n```",
"attributes": [
{
"name": "max",
"description": "进度指示器的最大值。默认为 `1`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#attributes-max"
},
{
"name": "value",
"description": "进度指示器的当前值。如果未指定该值，则处于不确定状态",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#attributes-value"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress",
"js": {
"properties": [
{
"name": "max",
"description": "进度指示器的最大值。默认为 `1`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#attributes-max"
},
{
"name": "value",
"description": "进度指示器的当前值。如果未指定该值，则处于不确定状态",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#attributes-value"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#cssProperties-shape-corner"
}
],
"parts": [
{
"name": "indicator",
"description": "指示器部分",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#cssParts-indicator"
}
]
}
},
{
"name": "mdui-list-item",
"description": "列表项组件。需配合 `<mdui-list>` 组件使用\n\n```html\n<mdui-list>\n <mdui-list-subheader>Subheader</mdui-list-subheader>\n <mdui-list-item>Item 1</mdui-list-item>\n <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
"attributes": [
{
"name": "headline",
"description": "主文本。也可以通过 default slot 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-headline"
},
{
"name": "headline-line",
"description": "主文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：\n\n* `1`：显示单行，超出后截断\n* `2`：显示两行，超出后截断\n* `3`：显示三行，超出后截断",
"value": {
"type": [
"1",
"2",
"3"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-headline-line"
},
{
"name": "description",
"description": "副文本。也可以通过 `slot=\"description\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-description"
},
{
"name": "description-line",
"description": "副文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：\n\n* `1`：显示单行，超出后截断\n* `2`：显示两行，超出后截断\n* `3`：显示三行，超出后截断",
"value": {
"type": [
"1",
"2",
"3"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-description-line"
},
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-icon"
},
{
"name": "end-icon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-end-icon"
},
{
"name": "disabled",
"description": "是否禁用该列表项，禁用后，列表项将变为灰色，且其中的 [`<mdui-checkbox>`](https://www.mdui.org/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](https://www.mdui.org/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](https://www.mdui.org/zh-cn/docs/2/components/switch) 等也将禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-disabled"
},
{
"name": "active",
"description": "是否激活该列表项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-active"
},
{
"name": "nonclickable",
"description": "是否使列表项不可点击。设置后，列表项中的 [`<mdui-checkbox>`](https://www.mdui.org/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](https://www.mdui.org/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](https://www.mdui.org/zh-cn/docs/2/components/switch) 等仍可交互",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-nonclickable"
},
{
"name": "rounded",
"description": "是否使用圆角形状的列表项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-rounded"
},
{
"name": "alignment",
"description": "列表项的垂直对齐方式。可选值包括：\n\n* `start`：顶部对齐\n* `center`：居中对齐\n* `end`：底部对齐",
"value": {
"type": [
"'start'",
"'center'",
"'end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-alignment"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list",
"slots": [
{
"name": "",
"description": "主文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-default"
},
{
"name": "description",
"description": "副文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-description"
},
{
"name": "icon",
"description": "列表项左侧的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-icon"
},
{
"name": "end-icon",
"description": "列表项右侧的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-end-icon"
},
{
"name": "custom",
"description": "任意自定义内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-custom"
}
],
"js": {
"properties": [
{
"name": "headline",
"description": "主文本。也可以通过 default slot 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-headline"
},
{
"name": "headlineLine",
"description": "主文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：\n\n* `1`：显示单行，超出后截断\n* `2`：显示两行，超出后截断\n* `3`：显示三行，超出后截断",
"value": {
"type": [
"1",
"2",
"3"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-headlineLine"
},
{
"name": "description",
"description": "副文本。也可以通过 `slot=\"description\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-description"
},
{
"name": "descriptionLine",
"description": "副文本行数，超过限制后将截断显示。默认无行数限制。可选值包括：\n\n* `1`：显示单行，超出后截断\n* `2`：显示两行，超出后截断\n* `3`：显示三行，超出后截断",
"value": {
"type": [
"1",
"2",
"3"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-descriptionLine"
},
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-icon"
},
{
"name": "endIcon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-endIcon"
},
{
"name": "disabled",
"description": "是否禁用该列表项，禁用后，列表项将变为灰色，且其中的 [`<mdui-checkbox>`](https://www.mdui.org/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](https://www.mdui.org/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](https://www.mdui.org/zh-cn/docs/2/components/switch) 等也将禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-disabled"
},
{
"name": "active",
"description": "是否激活该列表项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-active"
},
{
"name": "nonclickable",
"description": "是否使列表项不可点击。设置后，列表项中的 [`<mdui-checkbox>`](https://www.mdui.org/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](https://www.mdui.org/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](https://www.mdui.org/zh-cn/docs/2/components/switch) 等仍可交互",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-nonclickable"
},
{
"name": "rounded",
"description": "是否使用圆角形状的列表项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-rounded"
},
{
"name": "alignment",
"description": "列表项的垂直对齐方式。可选值包括：\n\n* `start`：顶部对齐\n* `center`：居中对齐\n* `end`：底部对齐",
"value": {
"type": [
"'start'",
"'center'",
"'end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-alignment"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-events-blur"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssProperties-shape-corner"
},
{
"name": "--shape-corner-rounded",
"description": "指定了 `rounded` 属性时，列表项的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssProperties-shape-corner-rounded"
}
],
"parts": [
{
"name": "container",
"description": "列表项容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-container"
},
{
"name": "icon",
"description": "左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-icon"
},
{
"name": "end-icon",
"description": "右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-end-icon"
},
{
"name": "body",
"description": "中间部分",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-body"
},
{
"name": "headline",
"description": "主标题",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-headline"
},
{
"name": "description",
"description": "副标题",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-description"
}
]
}
},
{
"name": "mdui-list-subheader",
"description": "列表标题组件。需配合 `<mdui-list>` 组件使用\n\n```html\n<mdui-list>\n <mdui-list-subheader>Subheader</mdui-list-subheader>\n <mdui-list-item>Item 1</mdui-list-item>\n <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
"attributes": [],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list",
"slots": [
{
"name": "",
"description": "列表标题文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-subheader-slots-default"
}
],
"js": {
"properties": []
}
},
{
"name": "mdui-list",
"description": "列表组件。需配合 `<mdui-list-item>` 组件使用\n\n```html\n<mdui-list>\n <mdui-list-subheader>Subheader</mdui-list-subheader>\n <mdui-list-item>Item 1</mdui-list-item>\n <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
"attributes": [],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list",
"slots": [
{
"name": "",
"description": "`<mdui-list-item>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-slots-default"
}
],
"js": {
"properties": []
}
},
{
"name": "mdui-menu-item",
"description": "菜单项组件。需配合 `<mdui-menu>` 组件使用\n\n```html\n<mdui-menu>\n <mdui-menu-item>Item 1</mdui-menu-item>\n <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```",
"attributes": [
{
"name": "value",
"description": "菜单项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-value"
},
{
"name": "disabled",
"description": "是否禁用菜单项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-disabled"
},
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置\n\n如果左侧不需要显示图标，但需要预留一个图标的位置，可传入空字符串进行占位",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-icon"
},
{
"name": "end-icon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-end-icon"
},
{
"name": "end-text",
"description": "右侧的文本。也可以通过 `slot=\"end-text\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-end-text"
},
{
"name": "selected-icon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-selected-icon"
},
{
"name": "submenu-open",
"description": "是否打开子菜单",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-submenu-open"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu",
"slots": [
{
"name": "",
"description": "菜单项的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-default"
},
{
"name": "icon",
"description": "菜单项左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-icon"
},
{
"name": "end-icon",
"description": "菜单项右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-end-icon"
},
{
"name": "end-text",
"description": "菜单右侧的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-end-text"
},
{
"name": "selected-icon",
"description": "选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-selected-icon"
},
{
"name": "submenu",
"description": "子菜单",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-submenu"
},
{
"name": "custom",
"description": "任意自定义内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-custom"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "菜单项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-value"
},
{
"name": "disabled",
"description": "是否禁用菜单项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-disabled"
},
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置\n\n如果左侧不需要显示图标，但需要预留一个图标的位置，可传入空字符串进行占位",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-icon"
},
{
"name": "endIcon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-endIcon"
},
{
"name": "endText",
"description": "右侧的文本。也可以通过 `slot=\"end-text\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-endText"
},
{
"name": "selectedIcon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-selectedIcon"
},
{
"name": "submenuOpen",
"description": "是否打开子菜单",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-submenuOpen"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-blur"
},
{
"name": "submenu-open",
"description": "子菜单开始打开时，事件被触发。可以通过调用 `event.preventDefault()` 阻止子菜单打开",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-submenu-open"
},
{
"name": "submenu-opened",
"description": "子菜单打开动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-submenu-opened"
},
{
"name": "submenu-close",
"description": "子菜单开始关闭时，事件被触发。可以通过调用 `event.preventDefault()` 阻止子菜单关闭",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-submenu-close"
},
{
"name": "submenu-closed",
"description": "子菜单关闭动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-submenu-closed"
}
]
},
"css": {
"parts": [
{
"name": "container",
"description": "菜单项的容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-container"
},
{
"name": "icon",
"description": "左侧的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-icon"
},
{
"name": "label",
"description": "文本内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-label"
},
{
"name": "end-icon",
"description": "右侧的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-end-icon"
},
{
"name": "end-text",
"description": "右侧的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-end-text"
},
{
"name": "selected-icon",
"description": "选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-selected-icon"
},
{
"name": "submenu",
"description": "子菜单元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-submenu"
}
]
}
},
{
"name": "mdui-menu",
"description": "菜单组件。需配合 `<mdui-menu-item>` 组件使用\n\n```html\n<mdui-menu>\n <mdui-menu-item>Item 1</mdui-menu-item>\n <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```",
"attributes": [
{
"name": "selects",
"description": "菜单项的可选状态。默认不可选。可选值包括：\n\n* `single`：单选\n* `multiple`：多选",
"value": {
"type": [
"'single'",
"'multiple'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-selects"
},
{
"name": "value",
"description": "当前选中的 `<mdui-menu-item>` 的值。\n\n**Note**：该属性的 HTML 属性始终为字符串，仅在 `selects=\"single\"` 时可通过 HTML 属性设置初始值；该属性的 JavaScript 属性值在 `selects=\"single\"` 时为字符串，在 `selects=\"multiple\"` 时为字符串数组。因此，在 `selects=\"multiple\"` 时，若要修改该值，只能通过修改 JavaScript 属性值实现。",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-value"
},
{
"name": "dense",
"description": "菜单项是否使用紧凑布局",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-dense"
},
{
"name": "submenu-trigger",
"description": "子菜单的触发方式，支持多个值，用空格分隔。可选值包括：\n\n* `click`：点击菜单项时打开子菜单\n* `hover`：鼠标悬浮到菜单项上时打开子菜单\n* `focus`：聚焦到菜单项上时打开子菜单\n* `manual`：仅能通过编程方式打开和关闭子菜单，不能再指定其他触发方式",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenu-trigger"
},
{
"name": "submenu-open-delay",
"description": "鼠标悬浮触发子菜单打开的延时，单位毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenu-open-delay"
},
{
"name": "submenu-close-delay",
"description": "鼠标悬浮触发子菜单关闭的延时，单位毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenu-close-delay"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu",
"slots": [
{
"name": "",
"description": "子菜单项（`<mdui-menu-item>`）、分割线（[`<mdui-divider>`](https://www.mdui.org/zh-cn/docs/2/components/divider)）等元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-slots-default"
}
],
"js": {
"properties": [
{
"name": "selects",
"description": "菜单项的可选状态。默认不可选。可选值包括：\n\n* `single`：单选\n* `multiple`：多选",
"value": {
"type": [
"'single'",
"'multiple'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-selects"
},
{
"name": "value",
"description": "当前选中的 `<mdui-menu-item>` 的值。\n\n**Note**：该属性的 HTML 属性始终为字符串，仅在 `selects=\"single\"` 时可通过 HTML 属性设置初始值；该属性的 JavaScript 属性值在 `selects=\"single\"` 时为字符串，在 `selects=\"multiple\"` 时为字符串数组。因此，在 `selects=\"multiple\"` 时，若要修改该值，只能通过修改 JavaScript 属性值实现。",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-value"
},
{
"name": "dense",
"description": "菜单项是否使用紧凑布局",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-dense"
},
{
"name": "submenuTrigger",
"description": "子菜单的触发方式，支持多个值，用空格分隔。可选值包括：\n\n* `click`：点击菜单项时打开子菜单\n* `hover`：鼠标悬浮到菜单项上时打开子菜单\n* `focus`：聚焦到菜单项上时打开子菜单\n* `manual`：仅能通过编程方式打开和关闭子菜单，不能再指定其他触发方式",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenuTrigger"
},
{
"name": "submenuOpenDelay",
"description": "鼠标悬浮触发子菜单打开的延时，单位毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenuOpenDelay"
},
{
"name": "submenuCloseDelay",
"description": "鼠标悬浮触发子菜单关闭的延时，单位毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenuCloseDelay"
}
],
"events": [
{
"name": "change",
"description": "菜单项选中状态变化时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-events-change"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-cssProperties-shape-corner"
}
]
}
},
{
"name": "mdui-navigation-bar-item",
"description": "底部导航栏项组件。需配合 `<mdui-navigation-bar>` 组件使用\n\n```html\n<mdui-navigation-bar>\n <mdui-navigation-bar-item icon=\"place\">Item 1</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"commute\">Item 2</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"people\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```",
"attributes": [
{
"name": "icon",
"description": "未激活状态的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-icon"
},
{
"name": "active-icon",
"description": "激活状态的 Material Icons 图标名。也可以通过 `slot=\"active-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-active-icon"
},
{
"name": "value",
"description": "导航项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-value"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar",
"slots": [
{
"name": "",
"description": "导航项文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-slots-default"
},
{
"name": "icon",
"description": "图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-slots-icon"
},
{
"name": "active-icon",
"description": "激活状态的图标元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-slots-active-icon"
},
{
"name": "badge",
"description": "徽标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-slots-badge"
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "未激活状态的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-icon"
},
{
"name": "activeIcon",
"description": "激活状态的 Material Icons 图标名。也可以通过 `slot=\"active-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-activeIcon"
},
{
"name": "value",
"description": "导航项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-value"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-events-blur"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner-indicator",
"description": "指示器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssProperties-shape-corner-indicator"
}
],
"parts": [
{
"name": "container",
"description": "导航项容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-container"
},
{
"name": "indicator",
"description": "指示器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-indicator"
},
{
"name": "badge",
"description": "徽标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-badge"
},
{
"name": "icon",
"description": "图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-icon"
},
{
"name": "active-icon",
"description": "激活状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-active-icon"
},
{
"name": "label",
"description": "导航项文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-label"
}
]
}
},
{
"name": "mdui-navigation-bar",
"description": "底部导航栏组件。需配合 `<mdui-navigation-bar-item>` 组件使用\n\n```html\n<mdui-navigation-bar>\n <mdui-navigation-bar-item icon=\"place\">Item 1</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"commute\">Item 2</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"people\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```",
"attributes": [
{
"name": "hide",
"description": "是否隐藏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-hide"
},
{
"name": "label-visibility",
"description": "文本的可视状态。可选值包括：\n\n* `auto`：当选项小于等于3个时，始终显示文本；当选项大于3个时，仅显示选中状态的文本\n* `selected`：仅在选中状态显示文本\n* `labeled`：始终显示文本\n* `unlabeled`：始终不显示文本",
"value": {
"type": [
"'auto'",
"'selected'",
"'labeled'",
"'unlabeled'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-label-visibility"
},
{
"name": "value",
"description": "当前选中的 `<mdui-navigation-bar-item>` 的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-value"
},
{
"name": "scroll-behavior",
"description": "滚动行为。可选值包括：\n\n* `hide`：滚动时隐藏",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-behavior"
},
{
"name": "scroll-target",
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-target"
},
{
"name": "scroll-threshold",
"description": "在滚动多少距离之后触发滚动行为，单位为 `px`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-threshold"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar",
"slots": [
{
"name": "",
"description": "`<mdui-navigation-bar-item>` 组件",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-slots-default"
}
],
"js": {
"properties": [
{
"name": "hide",
"description": "是否隐藏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-hide"
},
{
"name": "labelVisibility",
"description": "文本的可视状态。可选值包括：\n\n* `auto`：当选项小于等于3个时，始终显示文本；当选项大于3个时，仅显示选中状态的文本\n* `selected`：仅在选中状态显示文本\n* `labeled`：始终显示文本\n* `unlabeled`：始终不显示文本",
"value": {
"type": [
"'auto'",
"'selected'",
"'labeled'",
"'unlabeled'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-labelVisibility"
},
{
"name": "value",
"description": "当前选中的 `<mdui-navigation-bar-item>` 的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-value"
},
{
"name": "scrollBehavior",
"description": "滚动行为。可选值包括：\n\n* `hide`：滚动时隐藏",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scrollBehavior"
},
{
"name": "scrollTarget",
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scrollTarget"
},
{
"name": "scrollThreshold",
"description": "在滚动多少距离之后触发滚动行为，单位为 `px`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scrollThreshold"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-order"
}
],
"events": [
{
"name": "change",
"description": "值变化时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-change"
},
{
"name": "show",
"description": "开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-show"
},
{
"name": "shown",
"description": "显示动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-shown"
},
{
"name": "hide",
"description": "开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-hide"
},
{
"name": "hidden",
"description": "隐藏动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-hidden"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "组件的 CSS `z-index` 值",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-cssProperties-z-index"
}
]
}
},
{
"name": "mdui-navigation-drawer",
"description": "侧边抽屉栏组件\n\n```html\n<mdui-navigation-drawer>content</mdui-navigation-drawer>\n```",
"attributes": [
{
"name": "open",
"description": "是否打开抽屉栏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-open"
},
{
"name": "modal",
"description": "抽屉栏打开时，是否显示遮罩层\n\n在窄屏设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint)），会始终显示遮罩层，无视该参数",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-modal"
},
{
"name": "close-on-esc",
"description": "在有遮罩层的情况下，按下 ESC 键是否关闭抽屉栏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-close-on-esc"
},
{
"name": "close-on-overlay-click",
"description": "点击遮罩层时，是否关闭抽屉栏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-close-on-overlay-click"
},
{
"name": "placement",
"description": "抽屉栏的位置。可选值包括：\n\n* `left`：左侧\n* `right`：右侧",
"value": {
"type": [
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-placement"
},
{
"name": "contained",
"description": "默认情况下，抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时，抽屉栏将相对于其父元素显示。\n\n**Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-contained"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer",
"slots": [
{
"name": "",
"description": "抽屉栏中的内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#slots-default"
}
],
"js": {
"properties": [
{
"name": "open",
"description": "是否打开抽屉栏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-open"
},
{
"name": "modal",
"description": "抽屉栏打开时，是否显示遮罩层\n\n在窄屏设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint)），会始终显示遮罩层，无视该参数",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-modal"
},
{
"name": "closeOnEsc",
"description": "在有遮罩层的情况下，按下 ESC 键是否关闭抽屉栏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-closeOnEsc"
},
{
"name": "closeOnOverlayClick",
"description": "点击遮罩层时，是否关闭抽屉栏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-closeOnOverlayClick"
},
{
"name": "placement",
"description": "抽屉栏的位置。可选值包括：\n\n* `left`：左侧\n* `right`：右侧",
"value": {
"type": [
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-placement"
},
{
"name": "contained",
"description": "默认情况下，抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时，抽屉栏将相对于其父元素显示。\n\n**Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-contained"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-order"
}
],
"events": [
{
"name": "open",
"description": "抽屉栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏打开",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-open"
},
{
"name": "opened",
"description": "抽屉栏打开动画完成之后触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-opened"
},
{
"name": "close",
"description": "抽屉栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏关闭",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-close"
},
{
"name": "closed",
"description": "抽屉栏关闭动画完成之后触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-closed"
},
{
"name": "overlay-click",
"description": "点击遮罩层时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-overlay-click"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "组件的 CSS `z-index` 值",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#cssProperties-z-index"
}
],
"parts": [
{
"name": "overlay",
"description": "遮罩层",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#cssParts-overlay"
},
{
"name": "panel",
"description": "抽屉栏容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#cssParts-panel"
}
]
}
},
{
"name": "mdui-navigation-rail-item",
"description": "侧边导航项组件。需配合 `<mdui-navigation-rail>` 组件使用\n\n```html\n<mdui-navigation-rail>\n <mdui-navigation-rail-item icon=\"watch_later\">Recent</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"image\">Images</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"library_music\">Library</mdui-navigation-rail-item>\n</mdui-navigation-rail>\n```",
"attributes": [
{
"name": "icon",
"description": "未激活状态下的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-icon"
},
{
"name": "active-icon",
"description": "激活状态下的 Material Icons 图标名。也可以通过 `slot=\"active-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-active-icon"
},
{
"name": "value",
"description": "导航项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-value"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail",
"slots": [
{
"name": "",
"description": "文本内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-slots-default"
},
{
"name": "icon",
"description": "图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-slots-icon"
},
{
"name": "active-icon",
"description": "激活状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-slots-active-icon"
},
{
"name": "badge",
"description": "徽标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-slots-badge"
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "未激活状态下的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-icon"
},
{
"name": "activeIcon",
"description": "激活状态下的 Material Icons 图标名。也可以通过 `slot=\"active-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-activeIcon"
},
{
"name": "value",
"description": "导航项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-value"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-events-blur"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner-indicator",
"description": "指示器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssProperties-shape-corner-indicator"
}
],
"parts": [
{
"name": "container",
"description": "导航项容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-container"
},
{
"name": "indicator",
"description": "指示器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-indicator"
},
{
"name": "badge",
"description": "徽标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-badge"
},
{
"name": "icon",
"description": "图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-icon"
},
{
"name": "active-icon",
"description": "激活状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-active-icon"
},
{
"name": "label",
"description": "文本内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-label"
}
]
}
},
{
"name": "mdui-navigation-rail",
"description": "侧边导航栏组件。需配合 `<mdui-navigation-rail-item>` 组件使用\n\n```html\n<mdui-navigation-rail>\n <mdui-navigation-rail-item icon=\"watch_later\">Recent</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"image\">Images</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"library_music\">Library</mdui-navigation-rail-item>\n</mdui-navigation-rail>\n```",
"attributes": [
{
"name": "value",
"description": "当前选中的 `<mdui-navigation-rail-item>` 的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-value"
},
{
"name": "placement",
"description": "导航栏的位置。可选值包括：\n\n* `left`：左侧\n* `right`：右侧",
"value": {
"type": [
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-placement"
},
{
"name": "alignment",
"description": "`<mdui-navigation-rail-item>` 元素的对齐方式。可选值包括：\n\n* `start`：顶部对齐\n* `center`：居中对齐\n* `end`：底部对齐",
"value": {
"type": [
"'start'",
"'center'",
"'end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-alignment"
},
{
"name": "contained",
"description": "默认情况下，导航栏相对于 `body` 元素显示。当该参数设置为 `true` 时，导航栏将相对于其父元素显示。\n\n**Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative;`。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-contained"
},
{
"name": "divider",
"description": "是否在导航栏和页面内容之间添加分割线",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-divider"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail",
"slots": [
{
"name": "",
"description": "`<mdui-navigation-rail-item>` 组件",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-slots-default"
},
{
"name": "top",
"description": "顶部的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-slots-top"
},
{
"name": "bottom",
"description": "底部的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-slots-bottom"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "当前选中的 `<mdui-navigation-rail-item>` 的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-value"
},
{
"name": "placement",
"description": "导航栏的位置。可选值包括：\n\n* `left`：左侧\n* `right`：右侧",
"value": {
"type": [
"'left'",
"'right'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-placement"
},
{
"name": "alignment",
"description": "`<mdui-navigation-rail-item>` 元素的对齐方式。可选值包括：\n\n* `start`：顶部对齐\n* `center`：居中对齐\n* `end`：底部对齐",
"value": {
"type": [
"'start'",
"'center'",
"'end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-alignment"
},
{
"name": "contained",
"description": "默认情况下，导航栏相对于 `body` 元素显示。当该参数设置为 `true` 时，导航栏将相对于其父元素显示。\n\n**Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative;`。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-contained"
},
{
"name": "divider",
"description": "是否在导航栏和页面内容之间添加分割线",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-divider"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-order"
}
],
"events": [
{
"name": "change",
"description": "值变化时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-events-change"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "组件的 CSS `z-index` 值",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssProperties-z-index"
}
],
"parts": [
{
"name": "top",
"description": "顶部元素的容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssParts-top"
},
{
"name": "bottom",
"description": "底部元素的容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssParts-bottom"
},
{
"name": "items",
"description": "`<mdui-navigation-rail-item>` 组件的容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssParts-items"
}
]
}
},
{
"name": "mdui-radio-group",
"description": "单选框组组件。需配合 `<mdui-radio>` 组件使用\n\n```html\n<mdui-radio-group value=\"chinese\">\n <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```",
"attributes": [
{
"name": "disabled",
"description": "是否禁用此组件",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-disabled"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-form"
},
{
"name": "name",
"description": "单选框组的名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-name"
},
{
"name": "value",
"description": "单选框组的名称，将于表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-value"
},
{
"name": "required",
"description": "提交表单时，是否必须选中其中一个单选框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-required"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio",
"slots": [
{
"name": "",
"description": "`<mdui-radio>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-slots-default"
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "是否禁用此组件",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-disabled"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-form"
},
{
"name": "name",
"description": "单选框组的名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-name"
},
{
"name": "value",
"description": "单选框组的名称，将于表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-value"
},
{
"name": "defaultValue",
"description": "默认选中的值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-defaultValue"
},
{
"name": "required",
"description": "提交表单时，是否必须选中其中一个单选框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-required"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-validationMessage"
}
],
"events": [
{
"name": "change",
"description": "选中值变化时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-events-change"
},
{
"name": "input",
"description": "选中值变化时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-events-input"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-events-invalid"
}
]
}
},
{
"name": "mdui-radio",
"description": "单选框组件。需配合 `<mdui-radio-group>` 组件使用\n\n```html\n<mdui-radio-group value=\"chinese\">\n <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```",
"attributes": [
{
"name": "value",
"description": "当前单选项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-value"
},
{
"name": "disabled",
"description": "是否禁用当前单选项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-disabled"
},
{
"name": "checked",
"description": "当前单选项是否已选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-checked"
},
{
"name": "unchecked-icon",
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-unchecked-icon"
},
{
"name": "checked-icon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-checked-icon"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio",
"slots": [
{
"name": "",
"description": "文本内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-slots-default"
},
{
"name": "unchecked-icon",
"description": "未选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-slots-unchecked-icon"
},
{
"name": "checked-icon",
"description": "选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-slots-checked-icon"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "当前单选项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-value"
},
{
"name": "disabled",
"description": "是否禁用当前单选项",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-disabled"
},
{
"name": "checked",
"description": "当前单选项是否已选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-checked"
},
{
"name": "uncheckedIcon",
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-uncheckedIcon"
},
{
"name": "checkedIcon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-checkedIcon"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-events-blur"
},
{
"name": "change",
"description": "选中该单选项时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-events-change"
}
]
},
"css": {
"parts": [
{
"name": "control",
"description": "左侧图标容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-cssParts-control"
},
{
"name": "unchecked-icon",
"description": "未选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-cssParts-unchecked-icon"
},
{
"name": "checked-icon",
"description": "选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-cssParts-checked-icon"
},
{
"name": "label",
"description": "文本内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-cssParts-label"
}
]
}
},
{
"name": "mdui-range-slider",
"description": "范围滑块组件\n\n```html\n<mdui-range-slider></mdui-range-slider>\n```",
"attributes": [
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-tabindex"
},
{
"name": "min",
"description": "滑块的最小值，默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-min"
},
{
"name": "max",
"description": "滑块的最大值，默认为 `100`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-max"
},
{
"name": "step",
"description": "步进间隔，默认为 `1`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-step"
},
{
"name": "tickmarks",
"description": "是否添加刻度标记",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-tickmarks"
},
{
"name": "nolabel",
"description": "是否隐藏文本提示",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-nolabel"
},
{
"name": "disabled",
"description": "是否被禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-disabled"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-form"
},
{
"name": "name",
"description": "滑块的名称，该名称将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-name"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider",
"js": {
"properties": [
{
"name": "defaultValue",
"description": "默认值。在重置表单时，将重置为该默认值。此属性只能通过 JavaScript 属性设置",
"value": {
"type": "number[]"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-defaultValue"
},
{
"name": "value",
"description": "滑块的值，为数组格式，将于表单数据一起提交。\n\n**NOTE**：该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。",
"value": {
"type": "number[]"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-value"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-tabIndex"
},
{
"name": "min",
"description": "滑块的最小值，默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-min"
},
{
"name": "max",
"description": "滑块的最大值，默认为 `100`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-max"
},
{
"name": "step",
"description": "步进间隔，默认为 `1`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-step"
},
{
"name": "tickmarks",
"description": "是否添加刻度标记",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-tickmarks"
},
{
"name": "nolabel",
"description": "是否隐藏文本提示",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-nolabel"
},
{
"name": "disabled",
"description": "是否被禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-disabled"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-form"
},
{
"name": "name",
"description": "滑块的名称，该名称将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-name"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-validationMessage"
},
{
"name": "labelFormatter",
"description": "用于自定义标签的显示格式的函数。函数参数为滑块的当前值，返回值为期望显示的文本。",
"value": {
"type": "(value: number) => string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-labelFormatter"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-blur"
},
{
"name": "change",
"description": "值发生变更，且失去焦点时，将触发该事件",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-change"
},
{
"name": "input",
"description": "值变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-input"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-invalid"
}
]
},
"css": {
"parts": [
{
"name": "track-inactive",
"description": "未激活状态的轨道",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-track-inactive"
},
{
"name": "track-active",
"description": "已激活状态的轨道",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-track-active"
},
{
"name": "handle",
"description": "操作杆",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-handle"
},
{
"name": "label",
"description": "提示文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-label"
},
{
"name": "tickmark",
"description": "刻度标记",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-tickmark"
}
]
}
},
{
"name": "mdui-segmented-button-group",
"description": "分段按钮组件。需配合 `<mdui-segmented-button>` 组件使用\n\n```html\n<mdui-segmented-button-group>\n <mdui-segmented-button>Day</mdui-segmented-button>\n <mdui-segmented-button>Week</mdui-segmented-button>\n <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```",
"attributes": [
{
"name": "full-width",
"description": "是否填满父元素宽度",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-full-width"
},
{
"name": "selects",
"description": "分段按钮的可选中状态，默认为不可选中。可选值包括：\n\n* `single`：单选\n* `multiple`：多选",
"value": {
"type": [
"'single'",
"'multiple'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-selects"
},
{
"name": "disabled",
"description": "是否为禁用状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-disabled"
},
{
"name": "required",
"description": "提交表单时，是否必须选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-required"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-form"
},
{
"name": "name",
"description": "提交表单时的名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-name"
},
{
"name": "value",
"description": "当前选中的 `<mdui-segmented-button>` 的值。\n\n**Note**：该属性的 HTML 属性始终为字符串，且仅在 `selects=\"single\"` 时可以通过 HTML 属性设置初始值。该属性的 JavaScript 属性值在 `selects=\"single\"` 时为字符串，在 `selects=\"multiple\"` 时为字符串数组。所以，在 `selects=\"multiple\"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-value"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button",
"slots": [
{
"name": "",
"description": "`<mdui-segmented-button>` 组件",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-slots-default"
}
],
"js": {
"properties": [
{
"name": "fullWidth",
"description": "是否填满父元素宽度",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-fullWidth"
},
{
"name": "selects",
"description": "分段按钮的可选中状态，默认为不可选中。可选值包括：\n\n* `single`：单选\n* `multiple`：多选",
"value": {
"type": [
"'single'",
"'multiple'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-selects"
},
{
"name": "disabled",
"description": "是否为禁用状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-disabled"
},
{
"name": "required",
"description": "提交表单时，是否必须选中",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-required"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-form"
},
{
"name": "name",
"description": "提交表单时的名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-name"
},
{
"name": "value",
"description": "当前选中的 `<mdui-segmented-button>` 的值。\n\n**Note**：该属性的 HTML 属性始终为字符串，且仅在 `selects=\"single\"` 时可以通过 HTML 属性设置初始值。该属性的 JavaScript 属性值在 `selects=\"single\"` 时为字符串，在 `selects=\"multiple\"` 时为字符串数组。所以，在 `selects=\"multiple\"` 时，如果要修改该值，只能通过修改 JavaScript 属性值实现。",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-value"
},
{
"name": "defaultValue",
"description": "默认选中的值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-defaultValue"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-validationMessage"
}
],
"events": [
{
"name": "change",
"description": "选中的值变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-events-change"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-cssProperties-shape-corner"
}
]
}
},
{
"name": "mdui-segmented-button",
"description": "分段按钮项组件。需配合 `<mdui-segmented-button-group>` 组件使用\n\n```html\n<mdui-segmented-button-group>\n <mdui-segmented-button>Day</mdui-segmented-button>\n <mdui-segmented-button>Week</mdui-segmented-button>\n <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```",
"attributes": [
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-icon"
},
{
"name": "end-icon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-end-icon"
},
{
"name": "selected-icon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-selected-icon"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-tabindex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-form"
},
{
"name": "formaction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formaction"
},
{
"name": "formenctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formenctype"
},
{
"name": "formmethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formmethod"
},
{
"name": "formnovalidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formnovalidate"
},
{
"name": "formtarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formtarget"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button",
"slots": [
{
"name": "",
"description": "分段按钮项的文本内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-slots-default"
},
{
"name": "icon",
"description": "分段按钮项的左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-slots-icon"
},
{
"name": "selected-icon",
"description": "选中状态的左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-slots-selected-icon"
},
{
"name": "end-icon",
"description": "分段按钮项的右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-slots-end-icon"
}
],
"js": {
"properties": [
{
"name": "icon",
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-icon"
},
{
"name": "endIcon",
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-endIcon"
},
{
"name": "selectedIcon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-selectedIcon"
},
{
"name": "href",
"description": "链接的目标 URL。\n\n如果设置了此属性，组件内部将渲染为 `<a>` 元素，并可以使用链接相关的属性。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-href"
},
{
"name": "download",
"description": "下载链接的目标。\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-download"
},
{
"name": "target",
"description": "链接的打开方式。可选值包括：\n\n* `_blank`：在新窗口中打开链接\n* `_parent`：在父框架中打开链接\n* `_self`：默认。在当前框架中打开链接\n* `_top`：在整个窗口中打开链接\n\n**Note**：仅在设置了 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'_blank'",
"'_parent'",
"'_self'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-target"
},
{
"name": "rel",
"description": "当前文档与被链接文档之间的关系。可选值包括：\n\n* `alternate`：当前文档的替代版本\n* `author`：当前文档或文章的作者\n* `bookmark`：永久链接到最近的祖先章节\n* `external`：引用的文档与当前文档不在同一站点\n* `help`：链接到相关的帮助文档\n* `license`：当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`：当前文档代表链接内容的所有者\n* `next`：当前文档是系列中的一部分，被引用的文档是系列的下一个文档\n* `nofollow`：当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`：不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`：如果超链接会创建一个顶级浏览上下文（即 `target` 属性值为 `_blank`），则创建一个辅助浏览上下文\n* `prev`：当前文档是系列的一部分，被引用的文档是系列的上一个文档\n* `search`：提供一个资源链接，可用于搜索当前文件及其相关页面\n* `tag`：提供一个适用于当前文档的标签（由给定地址识别）\n\n**Note**：仅在指定了 `href` 属性时可用。",
"value": {
"type": [
"'alternate'",
"'author'",
"'bookmark'",
"'external'",
"'help'",
"'license'",
"'me'",
"'next'",
"'nofollow'",
"'noreferrer'",
"'opener'",
"'prev'",
"'search'",
"'tag'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-rel"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-tabIndex"
},
{
"name": "disabled",
"description": "是否禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-disabled"
},
{
"name": "loading",
"description": "是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-loading"
},
{
"name": "name",
"description": "按钮的名称，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-name"
},
{
"name": "value",
"description": "按钮的初始值，将与表单数据一起提交。\n\n**Note**：仅在未设置 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-value"
},
{
"name": "type",
"description": "按钮的类型。默认类型为 `button`。可选类型包括：\n\n* `submit`：点击按钮会提交表单数据到服务器\n* `reset`：点击按钮会将表单中的所有字段重置为初始值\n* `button`：此类型的按钮没有默认行为\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": [
"'submit'",
"'reset'",
"'button'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-type"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。\n\n**Note**：仅在未指定 `href` 属性时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-form"
},
{
"name": "formAction",
"description": "指定提交表单的 URL。\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formAction"
},
{
"name": "formEnctype",
"description": "指定提交表单到服务器的内容类型。可选值包括：\n\n* `application/x-www-form-urlencoded`：未指定该属性时的默认值\n* `multipart/form-data`：当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`：HTML5 新增，用于调试\n\n如果指定了此属性，将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**：仅在未指定 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'application/x-www-form-urlencoded'",
"'multipart/form-data'",
"'text/plain'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formEnctype"
},
{
"name": "formMethod",
"description": "指定提交表单时使用的 HTTP 方法。可选值包括：\n\n* `post`：表单数据包含在表单内容中，发送到服务器\n* `get`：表单数据以 `?` 作为分隔符附加到表单的 URI 属性中，生成的 URI 发送到服务器。当表单没有副作用，并且仅包含 ASCII 字符时，使用此方法\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'post'",
"'get'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formMethod"
},
{
"name": "formNoValidate",
"description": "如果设置了此属性，表单提交时将不执行表单验证。\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formNoValidate"
},
{
"name": "formTarget",
"description": "提交表单后接收到的响应应显示在何处。可选值包括：\n\n* `_self`：默认选项，在当前框架中打开\n* `_blank`：在新窗口中打开\n* `_parent`：在父框架中打开\n* `_top`：在整个窗口中打开\n\n如果设置了此属性，将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**：仅在未设置 `href` 属性且 `type=\"submit\"` 时，此属性才有效。",
"value": {
"type": [
"'_self'",
"'_blank'",
"'_parent'",
"'_top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formTarget"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-validationMessage"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-events-blur"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-events-invalid"
}
]
},
"css": {
"parts": [
{
"name": "button",
"description": "内部的 `<button>` 或 `<a>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-button"
},
{
"name": "icon",
"description": "左侧的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-icon"
},
{
"name": "selected-icon",
"description": "选中状态的左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-selected-icon"
},
{
"name": "end-icon",
"description": "右侧的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-end-icon"
},
{
"name": "label",
"description": "文本内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-label"
},
{
"name": "loading",
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-loading"
}
]
}
},
{
"name": "mdui-select",
"description": "选择框组件。需配合 `<mdui-menu-item>` 组件使用\n\n```html\n<mdui-select>\n <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```",
"attributes": [
{
"name": "variant",
"description": "选择框的样式。可选值包括：\n\n* `filled`：带背景色的选择框，视觉效果较强\n* `outlined`：带边框的选择框，视觉效果较弱",
"value": {
"type": [
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-variant"
},
{
"name": "multiple",
"description": "是否支持多选",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-multiple"
},
{
"name": "name",
"description": "选择框的名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-name"
},
{
"name": "value",
"description": "选择框的值，将与表单数据一起提交。\n\n如果未指定 `multiple` 属性，该值为字符串；如果指定了 `multiple` 属性，该值为字符串数组。HTML 属性只能设置字符串值；如果需要设置数组值，请通过 JavaScript 属性设置。",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-value"
},
{
"name": "label",
"description": "标签文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-label"
},
{
"name": "placeholder",
"description": "占位符文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-placeholder"
},
{
"name": "helper",
"description": "选择框底部的帮助文本。也可以通过 `slot=\"helper\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-helper"
},
{
"name": "clearable",
"description": "是否可以清空选择框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-clearable"
},
{
"name": "clear-icon",
"description": "当选择框可清空时，显示在选择框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot=\"clear-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-clear-icon"
},
{
"name": "placement",
"description": "选择框的位置。可选值包括：\n\n* `auto`：自动判断位置\n* `bottom`：位于下方\n* `top`：位于上方",
"value": {
"type": [
"'auto'",
"'bottom'",
"'top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-placement"
},
{
"name": "end-aligned",
"description": "文本是否右对齐",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-end-aligned"
},
{
"name": "prefix",
"description": "选择框的前缀文本。仅在聚焦状态，或选择框有值时才会显示。也可以通过 `slot=\"prefix\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-prefix"
},
{
"name": "suffix",
"description": "选择框的后缀文本。仅在聚焦状态，或选择框有值时才会显示。也可以通过 `slot=\"suffix\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-suffix"
},
{
"name": "icon",
"description": "选择框的前缀图标的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-icon"
},
{
"name": "end-icon",
"description": "选择框的后缀图标的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-end-icon"
},
{
"name": "error-icon",
"description": "表单字段验证失败时，显示在选择框右侧的 Material Icons 图标名。也可以通过 `slot=\"error-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-error-icon"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-form"
},
{
"name": "readonly",
"description": "是否为只读状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-readonly"
},
{
"name": "disabled",
"description": "是否为禁用状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-disabled"
},
{
"name": "required",
"description": "提交表单时，是否必须填写该字段",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-required"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select",
"slots": [
{
"name": "",
"description": "`<mdui-menu-item>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-default"
},
{
"name": "icon",
"description": "左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-icon"
},
{
"name": "end-icon",
"description": "右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-end-icon"
},
{
"name": "error-icon",
"description": "验证失败状态的右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-error-icon"
},
{
"name": "prefix",
"description": "左侧文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-prefix"
},
{
"name": "suffix",
"description": "右侧文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-suffix"
},
{
"name": "clear-button",
"description": "清空按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-clear-button"
},
{
"name": "clear-icon",
"description": "清空按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-clear-icon"
},
{
"name": "helper",
"description": "底部的帮助文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-helper"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "选择框的样式。可选值包括：\n\n* `filled`：带背景色的选择框，视觉效果较强\n* `outlined`：带边框的选择框，视觉效果较弱",
"value": {
"type": [
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-variant"
},
{
"name": "multiple",
"description": "是否支持多选",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-multiple"
},
{
"name": "name",
"description": "选择框的名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-name"
},
{
"name": "value",
"description": "选择框的值，将与表单数据一起提交。\n\n如果未指定 `multiple` 属性，该值为字符串；如果指定了 `multiple` 属性，该值为字符串数组。HTML 属性只能设置字符串值；如果需要设置数组值，请通过 JavaScript 属性设置。",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-value"
},
{
"name": "defaultValue",
"description": "默认选中的值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置",
"value": {
"type": [
"string",
"string[]"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-defaultValue"
},
{
"name": "label",
"description": "标签文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-label"
},
{
"name": "placeholder",
"description": "占位符文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-placeholder"
},
{
"name": "helper",
"description": "选择框底部的帮助文本。也可以通过 `slot=\"helper\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-helper"
},
{
"name": "clearable",
"description": "是否可以清空选择框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-clearable"
},
{
"name": "clearIcon",
"description": "当选择框可清空时，显示在选择框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot=\"clear-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-clearIcon"
},
{
"name": "placement",
"description": "选择框的位置。可选值包括：\n\n* `auto`：自动判断位置\n* `bottom`：位于下方\n* `top`：位于上方",
"value": {
"type": [
"'auto'",
"'bottom'",
"'top'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-placement"
},
{
"name": "endAligned",
"description": "文本是否右对齐",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-endAligned"
},
{
"name": "prefix",
"description": "选择框的前缀文本。仅在聚焦状态，或选择框有值时才会显示。也可以通过 `slot=\"prefix\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-prefix"
},
{
"name": "suffix",
"description": "选择框的后缀文本。仅在聚焦状态，或选择框有值时才会显示。也可以通过 `slot=\"suffix\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-suffix"
},
{
"name": "icon",
"description": "选择框的前缀图标的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-icon"
},
{
"name": "endIcon",
"description": "选择框的后缀图标的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-endIcon"
},
{
"name": "errorIcon",
"description": "表单字段验证失败时，显示在选择框右侧的 Material Icons 图标名。也可以通过 `slot=\"error-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-errorIcon"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-form"
},
{
"name": "readonly",
"description": "是否为只读状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-readonly"
},
{
"name": "disabled",
"description": "是否为禁用状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-disabled"
},
{
"name": "required",
"description": "提交表单时，是否必须填写该字段",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-required"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-validationMessage"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-blur"
},
{
"name": "change",
"description": "选中的值变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-change"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-invalid"
},
{
"name": "clear",
"description": "在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()` 阻止清空选择框",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-clear"
}
]
},
"css": {
"parts": [
{
"name": "chips",
"description": "多选时，放置选中值对应的 chip 的容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chips"
},
{
"name": "chip",
"description": "多选时，每一个选中的值对应的 chip",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chip"
},
{
"name": "chip__button",
"description": "chip 内部的 `<button>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chip__button"
},
{
"name": "chip__label",
"description": "chip 内部的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chip__label"
},
{
"name": "chip__delete-icon",
"description": "chip 内部的删除图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chip__delete-icon"
},
{
"name": "text-field",
"description": "文本框，即 [`<mdui-text-field>`](https://www.mdui.org/zh-cn/docs/2/components/text-field) 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field"
},
{
"name": "text-field__container",
"description": "text-field 内部的文本框容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__container"
},
{
"name": "text-field__icon",
"description": "text-field 内部的左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__icon"
},
{
"name": "text-field__end-icon",
"description": "text-field 内部的右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__end-icon"
},
{
"name": "text-field__error-icon",
"description": "text-field 内部的验证失败状态的右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__error-icon"
},
{
"name": "text-field__prefix",
"description": "text-field 内部的左侧文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__prefix"
},
{
"name": "text-field__suffix",
"description": "text-field 内部的右侧文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__suffix"
},
{
"name": "text-field__label",
"description": "text-field 内部的标签文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__label"
},
{
"name": "text-field__input",
"description": "text-field 内部的 `<input>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__input"
},
{
"name": "text-field__clear-button",
"description": "text-field 内部的清空按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__clear-button"
},
{
"name": "text-field__clear-icon",
"description": "text-field 内部的清空按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__clear-icon"
},
{
"name": "text-field__supporting",
"description": "text-field 内部的底部辅助信息容器，包括 helper 和 error",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__supporting"
},
{
"name": "text-field__helper",
"description": "text-field 内部的底部帮助文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__helper"
},
{
"name": "text-field__error",
"description": "text-field 内部的底部错误描述文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__error"
},
{
"name": "menu",
"description": "下拉菜单，即 [`<mdui-menu>`](https://www.mdui.org/zh-cn/docs/2/components/menu) 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-menu"
}
]
}
},
{
"name": "mdui-slider",
"description": "滑块组件\n\n```html\n<mdui-slider></mdui-slider>\n```",
"attributes": [
{
"name": "value",
"description": "滑块的值，将于表单数据一起提交",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-value"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-tabindex"
},
{
"name": "min",
"description": "滑块的最小值，默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-min"
},
{
"name": "max",
"description": "滑块的最大值，默认为 `100`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-max"
},
{
"name": "step",
"description": "步进间隔，默认为 `1`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-step"
},
{
"name": "tickmarks",
"description": "是否添加刻度标记",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-tickmarks"
},
{
"name": "nolabel",
"description": "是否隐藏文本提示",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-nolabel"
},
{
"name": "disabled",
"description": "是否被禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-disabled"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-form"
},
{
"name": "name",
"description": "滑块的名称，该名称将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-name"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider",
"js": {
"properties": [
{
"name": "value",
"description": "滑块的值，将于表单数据一起提交",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-value"
},
{
"name": "defaultValue",
"description": "默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-defaultValue"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-tabIndex"
},
{
"name": "min",
"description": "滑块的最小值，默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-min"
},
{
"name": "max",
"description": "滑块的最大值，默认为 `100`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-max"
},
{
"name": "step",
"description": "步进间隔，默认为 `1`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-step"
},
{
"name": "tickmarks",
"description": "是否添加刻度标记",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-tickmarks"
},
{
"name": "nolabel",
"description": "是否隐藏文本提示",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-nolabel"
},
{
"name": "disabled",
"description": "是否被禁用",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-disabled"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-form"
},
{
"name": "name",
"description": "滑块的名称，该名称将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-name"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-validationMessage"
},
{
"name": "labelFormatter",
"description": "用于自定义标签的显示格式的函数。函数参数为滑块的当前值，返回值为期望显示的文本。",
"value": {
"type": "(value: number) => string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-labelFormatter"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-blur"
},
{
"name": "change",
"description": "在值发生变更，且失去焦点时，将触发该事件",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-change"
},
{
"name": "input",
"description": "值变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-input"
},
{
"name": "invalid",
"description": "表单字段验证未通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-invalid"
}
]
},
"css": {
"parts": [
{
"name": "track-inactive",
"description": "未激活状态的轨道",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-track-inactive"
},
{
"name": "track-active",
"description": "已激活状态的轨道",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-track-active"
},
{
"name": "handle",
"description": "操作杆",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-handle"
},
{
"name": "label",
"description": "提示文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-label"
},
{
"name": "tickmark",
"description": "刻度标记",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-tickmark"
}
]
}
},
{
"name": "mdui-snackbar",
"description": "消息条组件\n\n```html\n<mdui-snackbar>message</mdui-snackbar>\n```",
"attributes": [
{
"name": "open",
"description": "是否显示 Snackbar",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-open"
},
{
"name": "placement",
"description": "Snackbar 的显示位置。默认为 `bottom`。可选值包括：\n\n* `top`：顶部居中\n* `top-start`：顶部左对齐\n* `top-end`：顶部右对齐\n* `bottom`：底部居中\n* `bottom-start`：底部左对齐\n* `bottom-end`：底部右对齐",
"value": {
"type": [
"'top'",
"'top-start'",
"'top-end'",
"'bottom'",
"'bottom-start'",
"'bottom-end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-placement"
},
{
"name": "action",
"description": "操作按钮的文本。也可以通过 `slot=\"action\"` 设置操作按钮",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-action"
},
{
"name": "action-loading",
"description": "操作按钮是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-action-loading"
},
{
"name": "closeable",
"description": "是否在右侧显示关闭按钮",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-closeable"
},
{
"name": "close-icon",
"description": "关闭按钮的 Material Icons 图标名。也可以通过 `slot=\"close-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-close-icon"
},
{
"name": "message-line",
"description": "消息文本的最大显示行数。默认不限制。可选值包括：\n\n* `1`：最多显示一行\n* `2`：最多显示两行",
"value": {
"type": [
"1",
"2"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-message-line"
},
{
"name": "auto-close-delay",
"description": "自动关闭的延迟时间（单位：毫秒）。设置为 `0` 则不自动关闭。默认为 5000 毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-auto-close-delay"
},
{
"name": "close-on-outside-click",
"description": "点击或触摸 Snackbar 以外的区域时，是否关闭 Snackbar",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-close-on-outside-click"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar",
"slots": [
{
"name": "",
"description": "Snackbar 的消息文本内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#slots-default"
},
{
"name": "action",
"description": "右侧的操作按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#slots-action"
},
{
"name": "close-button",
"description": "右侧的关闭按钮。必须设置 `closeable` 属性为 `true` 才会显示",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#slots-close-button"
},
{
"name": "close-icon",
"description": "关闭按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#slots-close-icon"
}
],
"js": {
"properties": [
{
"name": "open",
"description": "是否显示 Snackbar",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-open"
},
{
"name": "placement",
"description": "Snackbar 的显示位置。默认为 `bottom`。可选值包括：\n\n* `top`：顶部居中\n* `top-start`：顶部左对齐\n* `top-end`：顶部右对齐\n* `bottom`：底部居中\n* `bottom-start`：底部左对齐\n* `bottom-end`：底部右对齐",
"value": {
"type": [
"'top'",
"'top-start'",
"'top-end'",
"'bottom'",
"'bottom-start'",
"'bottom-end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-placement"
},
{
"name": "action",
"description": "操作按钮的文本。也可以通过 `slot=\"action\"` 设置操作按钮",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-action"
},
{
"name": "actionLoading",
"description": "操作按钮是否处于加载中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-actionLoading"
},
{
"name": "closeable",
"description": "是否在右侧显示关闭按钮",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-closeable"
},
{
"name": "closeIcon",
"description": "关闭按钮的 Material Icons 图标名。也可以通过 `slot=\"close-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-closeIcon"
},
{
"name": "messageLine",
"description": "消息文本的最大显示行数。默认不限制。可选值包括：\n\n* `1`：最多显示一行\n* `2`：最多显示两行",
"value": {
"type": [
"1",
"2"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-messageLine"
},
{
"name": "autoCloseDelay",
"description": "自动关闭的延迟时间（单位：毫秒）。设置为 `0` 则不自动关闭。默认为 5000 毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-autoCloseDelay"
},
{
"name": "closeOnOutsideClick",
"description": "点击或触摸 Snackbar 以外的区域时，是否关闭 Snackbar",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-closeOnOutsideClick"
}
],
"events": [
{
"name": "open",
"description": "Snackbar 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 Snackbar 显示",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-open"
},
{
"name": "opened",
"description": "Snackbar 显示动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-opened"
},
{
"name": "close",
"description": "Snackbar 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 Snackbar 关闭",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-close"
},
{
"name": "closed",
"description": "Snackbar 隐藏动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-closed"
},
{
"name": "action-click",
"description": "点击操作按钮时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-action-click"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "组件的 CSS `z-index` 值",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssProperties-z-index"
}
],
"parts": [
{
"name": "message",
"description": "消息文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssParts-message"
},
{
"name": "action",
"description": "操作按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssParts-action"
},
{
"name": "close-button",
"description": "关闭按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssParts-close-button"
},
{
"name": "close-icon",
"description": "关闭按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssParts-close-icon"
}
]
}
},
{
"name": "mdui-switch",
"description": "开关切换组件\n\n```html\n<mdui-switch></mdui-switch>\n```",
"attributes": [
{
"name": "disabled",
"description": "是否为禁用状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-disabled"
},
{
"name": "checked",
"description": "是否为选中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-checked"
},
{
"name": "unchecked-icon",
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-unchecked-icon"
},
{
"name": "checked-icon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置\n\n默认为 `check` 图标，可传入空字符串移除默认图标",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-checked-icon"
},
{
"name": "required",
"description": "提交表单时，是否必须选中此开关",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-required"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-form"
},
{
"name": "name",
"description": "开关的名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-name"
},
{
"name": "value",
"description": "开关的值，将于表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-value"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch",
"slots": [
{
"name": "unchecked-icon",
"description": "未选中状态的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#slots-unchecked-icon"
},
{
"name": "checked-icon",
"description": "选中状态的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#slots-checked-icon"
}
],
"js": {
"properties": [
{
"name": "disabled",
"description": "是否为禁用状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-disabled"
},
{
"name": "checked",
"description": "是否为选中状态",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-checked"
},
{
"name": "defaultChecked",
"description": "默认选中状态。在重置表单时，将重置为此状态。此属性只能通过 JavaScript 属性设置",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-defaultChecked"
},
{
"name": "uncheckedIcon",
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-uncheckedIcon"
},
{
"name": "checkedIcon",
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置\n\n默认为 `check` 图标，可传入空字符串移除默认图标",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-checkedIcon"
},
{
"name": "required",
"description": "提交表单时，是否必须选中此开关",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-required"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-form"
},
{
"name": "name",
"description": "开关的名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-name"
},
{
"name": "value",
"description": "开关的值，将于表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-value"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-validationMessage"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-blur"
},
{
"name": "change",
"description": "选中状态变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-change"
},
{
"name": "input",
"description": "选中状态变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-input"
},
{
"name": "invalid",
"description": "表单字段验证不通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-invalid"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件轨道的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssProperties-shape-corner"
},
{
"name": "--shape-corner-thumb",
"description": "组件图标容器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssProperties-shape-corner-thumb"
}
],
"parts": [
{
"name": "track",
"description": "轨道",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssParts-track"
},
{
"name": "thumb",
"description": "图标容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssParts-thumb"
},
{
"name": "unchecked-icon",
"description": "未选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssParts-unchecked-icon"
},
{
"name": "checked-icon",
"description": "选中状态的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssParts-checked-icon"
}
]
}
},
{
"name": "mdui-tab-panel",
"description": "选项卡面板项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab>` 组件使用\n\n```html\n<mdui-tabs value=\"tab-1\">\n <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
"attributes": [
{
"name": "value",
"description": "选项卡面板项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-panel-attributes-value"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs",
"slots": [
{
"name": "",
"description": "选项卡面板项内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-panel-slots-default"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "选项卡面板项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-panel-attributes-value"
}
]
}
},
{
"name": "mdui-tab",
"description": "选项卡导航项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件使用\n\n```html\n<mdui-tabs value=\"tab-1\">\n <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
"attributes": [
{
"name": "value",
"description": "选项卡导航项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-value"
},
{
"name": "icon",
"description": "Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-icon"
},
{
"name": "inline",
"description": "是否把图标和文本水平排列",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-inline"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs",
"slots": [
{
"name": "",
"description": "选项卡导航项的文本内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-slots-default"
},
{
"name": "icon",
"description": "选项卡导航项中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-slots-icon"
},
{
"name": "badge",
"description": "徽标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-slots-badge"
},
{
"name": "custom",
"description": "自定义整个选项卡导航项中的内容",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-slots-custom"
}
],
"js": {
"properties": [
{
"name": "value",
"description": "选项卡导航项的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-value"
},
{
"name": "icon",
"description": "Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-icon"
},
{
"name": "inline",
"description": "是否把图标和文本水平排列",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-inline"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-events-blur"
}
]
},
"css": {
"parts": [
{
"name": "container",
"description": "选项卡导航项容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-cssParts-container"
},
{
"name": "icon",
"description": "选项卡导航项中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-cssParts-icon"
},
{
"name": "label",
"description": "选项卡导航项的文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-cssParts-label"
}
]
}
},
{
"name": "mdui-tabs",
"description": "选项卡组件。需配合 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件使用\n\n```html\n<mdui-tabs value=\"tab-1\">\n <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
"attributes": [
{
"name": "variant",
"description": "选项卡形状。可选值包括：\n\n* `primary`：适用于位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面的场景\n* `secondary`：适用于位于页面中，用于切换一组相关内容的场景",
"value": {
"type": [
"'primary'",
"'secondary'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-variant"
},
{
"name": "value",
"description": "当前激活的 `<mdui-tab>` 的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-value"
},
{
"name": "placement",
"description": "选项卡位置。默认为 `top-start`。可选值包括：\n\n* `top-start`：位于上方，左对齐\n* `top`：位于上方，居中对齐\n* `top-end`：位于上方，右对齐\n* `bottom-start`：位于下方，左对齐\n* `bottom`：位于下方，居中对齐\n* `bottom-end`：位于下方，右对齐\n* `left-start`：位于左侧，顶部对齐\n* `left`：位于左侧，居中对齐\n* `left-end`：位于左侧，底部对齐\n* `right-start`：位于右侧，顶部对齐\n* `right`：位于右侧，居中对齐\n* `right-end`：位于右侧，底部对齐",
"value": {
"type": [
"'top-start'",
"'top'",
"'top-end'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-placement"
},
{
"name": "full-width",
"description": "是否填满父元素宽度",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-full-width"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs",
"slots": [
{
"name": "",
"description": "`<mdui-tab>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-slots-default"
},
{
"name": "panel",
"description": "`<mdui-tab-panel>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-slots-panel"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "选项卡形状。可选值包括：\n\n* `primary`：适用于位于 `<mdui-top-app-bar>` 下方，用于切换应用的主页面的场景\n* `secondary`：适用于位于页面中，用于切换一组相关内容的场景",
"value": {
"type": [
"'primary'",
"'secondary'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-variant"
},
{
"name": "value",
"description": "当前激活的 `<mdui-tab>` 的值",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-value"
},
{
"name": "placement",
"description": "选项卡位置。默认为 `top-start`。可选值包括：\n\n* `top-start`：位于上方，左对齐\n* `top`：位于上方，居中对齐\n* `top-end`：位于上方，右对齐\n* `bottom-start`：位于下方，左对齐\n* `bottom`：位于下方，居中对齐\n* `bottom-end`：位于下方，右对齐\n* `left-start`：位于左侧，顶部对齐\n* `left`：位于左侧，居中对齐\n* `left-end`：位于左侧，底部对齐\n* `right-start`：位于右侧，顶部对齐\n* `right`：位于右侧，居中对齐\n* `right-end`：位于右侧，底部对齐",
"value": {
"type": [
"'top-start'",
"'top'",
"'top-end'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-placement"
},
{
"name": "fullWidth",
"description": "是否填满父元素宽度",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-fullWidth"
}
],
"events": [
{
"name": "change",
"description": "选中的值变化时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-events-change"
}
]
},
"css": {
"parts": [
{
"name": "container",
"description": "`<mdui-tab>` 元素的容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-cssParts-container"
},
{
"name": "indicator",
"description": "激活状态指示器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-cssParts-indicator"
}
]
}
},
{
"name": "mdui-text-field",
"description": "文本框组件\n\n```html\n<mdui-text-field label=\"Text Field\"></mdui-text-field>\n```",
"attributes": [
{
"name": "variant",
"description": "文本框的形状。默认为 `filled`。可选值包括：\n\n* `filled`：带背景色的文本框，视觉效果较强\n* `outlined`：带边框的文本框，视觉效果较弱",
"value": {
"type": [
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-variant"
},
{
"name": "type",
"description": "文本框输入类型。默认为 `text`。可选值包括：\n\n* `text`：默认值。文本字段\n* `number`：只能输入数字。拥有动态键盘的设备上会显示数字键盘\n* `password`：用于输入密码，其值会被遮盖\n* `url`：用于输入 URL，会验证 URL 格式。在支持动态键盘的设备上有相应的键盘\n* `email`：用于输入邮箱地址，会验证邮箱格式。在支持动态键盘的设备上有相应的键盘\n* `search`：用于搜索框。拥有动态键盘的设备上的回车图标会变成搜索图标\n* `tel`：用于输入电话号码。拥有动态键盘的设备上会显示电话数字键盘\n* `hidden`：隐藏该控件，但其值仍会提交到服务器\n* `date`：输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮\n* `datetime-local`：输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮\n* `month`：输入年和月的控件，没有时区\n* `time`：用于输入时间的控件，不包括时区\n* `week`：用于输入以年和周数组成的日期，不带时区",
"value": {
"type": [
"'text'",
"'number'",
"'password'",
"'url'",
"'email'",
"'search'",
"'tel'",
"'hidden'",
"'date'",
"'datetime-local'",
"'month'",
"'time'",
"'week'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-type"
},
{
"name": "name",
"description": "文本框名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-name"
},
{
"name": "value",
"description": "文本框的值，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-value"
},
{
"name": "label",
"description": "标签文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-label"
},
{
"name": "placeholder",
"description": "占位符文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-placeholder"
},
{
"name": "helper",
"description": "文本框底部的帮助文本。也可以通过 `slot=\"helper\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-helper"
},
{
"name": "helper-on-focus",
"description": "是否仅在获得焦点时，显示底部的帮助文本",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-helper-on-focus"
},
{
"name": "clearable",
"description": "是否可清空文本框内容",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-clearable"
},
{
"name": "clear-icon",
"description": "可清空文本框时，显示在文本框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot=\"clear-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-clear-icon"
},
{
"name": "end-aligned",
"description": "是否将文本右对齐",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-end-aligned"
},
{
"name": "prefix",
"description": "文本框的前缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot=\"prefix\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-prefix"
},
{
"name": "suffix",
"description": "文本框的后缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot=\"suffix\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-suffix"
},
{
"name": "icon",
"description": "文本框的前缀图标的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-icon"
},
{
"name": "end-icon",
"description": "文本框的后缀图标的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-end-icon"
},
{
"name": "error-icon",
"description": "表单字段验证失败时，显示在文本框右侧的 Material Icons 图标名。也可以通过 `slot=\"error-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-error-icon"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-form"
},
{
"name": "readonly",
"description": "是否为只读模式",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-readonly"
},
{
"name": "disabled",
"description": "是否禁用输入框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-disabled"
},
{
"name": "required",
"description": "提交表单时，是否必须填写该字段",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-required"
},
{
"name": "rows",
"description": "文本框的固定显示行数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-rows"
},
{
"name": "autosize",
"description": "是否根据输入内容自动调整文本框高度",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autosize"
},
{
"name": "min-rows",
"description": "`autosize` 为 `true` 时，文本框的最小行数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-min-rows"
},
{
"name": "max-rows",
"description": "`autosize` 为 `true` 时，文本框的最大行数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-max-rows"
},
{
"name": "minlength",
"description": "允许输入的最小字符数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-minlength"
},
{
"name": "maxlength",
"description": "允许输入的最大字符数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-maxlength"
},
{
"name": "counter",
"description": "是否显示字数统计，只在 `maxlength` 被指定时有效",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-counter"
},
{
"name": "min",
"description": "当 `type` 为 `number` 时，允许输入的最小数值",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-min"
},
{
"name": "max",
"description": "当 `type` 为 `number` 时，允许输入的最大数值",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-max"
},
{
"name": "step",
"description": "`type` 为 `number` 时，数值增减的步长",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-step"
},
{
"name": "pattern",
"description": "用于表单验证的正则表达式",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-pattern"
},
{
"name": "toggle-password",
"description": "`type` 为 `password` 时，设置此属性会添加一个切换按钮，用于在明文和密文之间切换",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-toggle-password"
},
{
"name": "show-password-icon",
"description": "密码切换按钮的 Material Icons 图标，当密码为明文时显示。也可以通过 `slot=\"show-password-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-show-password-icon"
},
{
"name": "hide-password-icon",
"description": "密码切换按钮的 Material Icons 图标，当密码为密文时显示。也可以通过 `slot=\"hide-password-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-hide-password-icon"
},
{
"name": "autocapitalize",
"description": "iOS 的非标准属性，用于控制文本首字母是否自动大写。在 iOS5 及以后的版本上有效。可选值包括：\n\n* `none`：禁用首字母大写\n* `sentences`：句子首字母大写\n* `words`：单词首字母大写\n* `characters`：所有字母大写",
"value": {
"type": [
"'none'",
"'sentences'",
"'words'",
"'characters'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocapitalize"
},
{
"name": "autocorrect",
"description": "`input` 元素的 `autocorrect` 属性",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocorrect"
},
{
"name": "autocomplete",
"description": "`input` 元素的 `autocomplete` 属性",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocomplete"
},
{
"name": "enterkeyhint",
"description": "`input` 元素的 `enterkeyhint` 属性，用于定制虚拟键盘上的 Enter 键的显示文本或图标。具体显示效果取决于用户使用的设备和语言。可选值包括：\n\n* `enter`：插入新行\n* `done`：完成输入，关闭虚拟键盘\n* `go`：导航到输入文本的目标\n* `next`：移动到下一个输入项\n* `previous`：移动到上一个输入项\n* `search`：导航到搜索结果\n* `send`：发送文本信息",
"value": {
"type": [
"'enter'",
"'done'",
"'go'",
"'next'",
"'previous'",
"'search'",
"'send'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-enterkeyhint"
},
{
"name": "spellcheck",
"description": "是否启用拼写检查",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-spellcheck"
},
{
"name": "inputmode",
"description": "`input` 元素的 `inputmode` 属性，用于定制虚拟键盘的类型。可选值包括：\n\n* `none`：无虚拟键盘。在需要实现自己的键盘输入控件时很有用\n* `text`：标准文本输入键盘\n* `decimal`：小数输入键盘，除了数字之外可能会有小数点 `.` 或者千分符逗号 `,`\n* `numeric`：显示 0-9 的数字键盘\n* `tel`：手机数字键盘，包含 0-9 数字、星号 `*` 或者井号 `#` 键\n* `search`：为搜索输入优化的虚拟键盘，提交按钮通常会显示 `search` 或者 “搜索”\n* `email`：为邮件地址输入优化的虚拟键盘，通常会有 `@ .` 等键\n* `url`：为 URL 输入优化的虚拟键盘，通常会有 `. / #` 等键",
"value": {
"type": [
"'none'",
"'text'",
"'decimal'",
"'numeric'",
"'tel'",
"'search'",
"'email'",
"'url'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-inputmode"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autofocus"
},
{
"name": "tabindex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-tabindex"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field",
"slots": [
{
"name": "icon",
"description": "左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-icon"
},
{
"name": "end-icon",
"description": "右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-end-icon"
},
{
"name": "error-icon",
"description": "验证失败状态的右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-error-icon"
},
{
"name": "prefix",
"description": "左侧文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-prefix"
},
{
"name": "suffix",
"description": "右侧文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-suffix"
},
{
"name": "clear-button",
"description": "清空按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-clear-button"
},
{
"name": "clear-icon",
"description": "清空按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-clear-icon"
},
{
"name": "toggle-password-button",
"description": "密码显示状态切换按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-toggle-password-button"
},
{
"name": "show-password-icon",
"description": "显示密码状态下，密码显示状态切换按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-show-password-icon"
},
{
"name": "hide-password-icon",
"description": "隐藏密码状态下，密码显示状态切换按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-hide-password-icon"
},
{
"name": "helper",
"description": "底部的帮助文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-helper"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "文本框的形状。默认为 `filled`。可选值包括：\n\n* `filled`：带背景色的文本框，视觉效果较强\n* `outlined`：带边框的文本框，视觉效果较弱",
"value": {
"type": [
"'filled'",
"'outlined'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-variant"
},
{
"name": "type",
"description": "文本框输入类型。默认为 `text`。可选值包括：\n\n* `text`：默认值。文本字段\n* `number`：只能输入数字。拥有动态键盘的设备上会显示数字键盘\n* `password`：用于输入密码，其值会被遮盖\n* `url`：用于输入 URL，会验证 URL 格式。在支持动态键盘的设备上有相应的键盘\n* `email`：用于输入邮箱地址，会验证邮箱格式。在支持动态键盘的设备上有相应的键盘\n* `search`：用于搜索框。拥有动态键盘的设备上的回车图标会变成搜索图标\n* `tel`：用于输入电话号码。拥有动态键盘的设备上会显示电话数字键盘\n* `hidden`：隐藏该控件，但其值仍会提交到服务器\n* `date`：输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮\n* `datetime-local`：输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮\n* `month`：输入年和月的控件，没有时区\n* `time`：用于输入时间的控件，不包括时区\n* `week`：用于输入以年和周数组成的日期，不带时区",
"value": {
"type": [
"'text'",
"'number'",
"'password'",
"'url'",
"'email'",
"'search'",
"'tel'",
"'hidden'",
"'date'",
"'datetime-local'",
"'month'",
"'time'",
"'week'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-type"
},
{
"name": "name",
"description": "文本框名称，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-name"
},
{
"name": "value",
"description": "文本框的值，将与表单数据一起提交",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-value"
},
{
"name": "defaultValue",
"description": "默认值。在重置表单时，将重置为该默认值。该属性只能通过 JavaScript 属性设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-defaultValue"
},
{
"name": "label",
"description": "标签文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-label"
},
{
"name": "placeholder",
"description": "占位符文本",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-placeholder"
},
{
"name": "helper",
"description": "文本框底部的帮助文本。也可以通过 `slot=\"helper\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-helper"
},
{
"name": "helperOnFocus",
"description": "是否仅在获得焦点时，显示底部的帮助文本",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-helperOnFocus"
},
{
"name": "clearable",
"description": "是否可清空文本框内容",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-clearable"
},
{
"name": "clearIcon",
"description": "可清空文本框时，显示在文本框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot=\"clear-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-clearIcon"
},
{
"name": "endAligned",
"description": "是否将文本右对齐",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-endAligned"
},
{
"name": "prefix",
"description": "文本框的前缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot=\"prefix\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-prefix"
},
{
"name": "suffix",
"description": "文本框的后缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot=\"suffix\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-suffix"
},
{
"name": "icon",
"description": "文本框的前缀图标的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-icon"
},
{
"name": "endIcon",
"description": "文本框的后缀图标的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-endIcon"
},
{
"name": "errorIcon",
"description": "表单字段验证失败时，显示在文本框右侧的 Material Icons 图标名。也可以通过 `slot=\"error-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-errorIcon"
},
{
"name": "form",
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性，则该元素必须是 `<form>` 元素的子元素。通过此属性，你可以将元素放置在页面的任何位置，而不仅仅是 `<form>` 元素的子元素。",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-form"
},
{
"name": "readonly",
"description": "是否为只读模式",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-readonly"
},
{
"name": "disabled",
"description": "是否禁用输入框",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-disabled"
},
{
"name": "required",
"description": "提交表单时，是否必须填写该字段",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-required"
},
{
"name": "rows",
"description": "文本框的固定显示行数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-rows"
},
{
"name": "autosize",
"description": "是否根据输入内容自动调整文本框高度",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autosize"
},
{
"name": "minRows",
"description": "`autosize` 为 `true` 时，文本框的最小行数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-minRows"
},
{
"name": "maxRows",
"description": "`autosize` 为 `true` 时，文本框的最大行数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-maxRows"
},
{
"name": "minlength",
"description": "允许输入的最小字符数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-minlength"
},
{
"name": "maxlength",
"description": "允许输入的最大字符数",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-maxlength"
},
{
"name": "counter",
"description": "是否显示字数统计，只在 `maxlength` 被指定时有效",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-counter"
},
{
"name": "min",
"description": "当 `type` 为 `number` 时，允许输入的最小数值",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-min"
},
{
"name": "max",
"description": "当 `type` 为 `number` 时，允许输入的最大数值",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-max"
},
{
"name": "step",
"description": "`type` 为 `number` 时，数值增减的步长",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-step"
},
{
"name": "pattern",
"description": "用于表单验证的正则表达式",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-pattern"
},
{
"name": "togglePassword",
"description": "`type` 为 `password` 时，设置此属性会添加一个切换按钮，用于在明文和密文之间切换",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-togglePassword"
},
{
"name": "showPasswordIcon",
"description": "密码切换按钮的 Material Icons 图标，当密码为明文时显示。也可以通过 `slot=\"show-password-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-showPasswordIcon"
},
{
"name": "hidePasswordIcon",
"description": "密码切换按钮的 Material Icons 图标，当密码为密文时显示。也可以通过 `slot=\"hide-password-icon\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-hidePasswordIcon"
},
{
"name": "autocapitalize",
"description": "iOS 的非标准属性，用于控制文本首字母是否自动大写。在 iOS5 及以后的版本上有效。可选值包括：\n\n* `none`：禁用首字母大写\n* `sentences`：句子首字母大写\n* `words`：单词首字母大写\n* `characters`：所有字母大写",
"value": {
"type": [
"'none'",
"'sentences'",
"'words'",
"'characters'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocapitalize"
},
{
"name": "autocorrect",
"description": "`input` 元素的 `autocorrect` 属性",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocorrect"
},
{
"name": "autocomplete",
"description": "`input` 元素的 `autocomplete` 属性",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocomplete"
},
{
"name": "enterkeyhint",
"description": "`input` 元素的 `enterkeyhint` 属性，用于定制虚拟键盘上的 Enter 键的显示文本或图标。具体显示效果取决于用户使用的设备和语言。可选值包括：\n\n* `enter`：插入新行\n* `done`：完成输入，关闭虚拟键盘\n* `go`：导航到输入文本的目标\n* `next`：移动到下一个输入项\n* `previous`：移动到上一个输入项\n* `search`：导航到搜索结果\n* `send`：发送文本信息",
"value": {
"type": [
"'enter'",
"'done'",
"'go'",
"'next'",
"'previous'",
"'search'",
"'send'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-enterkeyhint"
},
{
"name": "spellcheck",
"description": "是否启用拼写检查",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-spellcheck"
},
{
"name": "inputmode",
"description": "`input` 元素的 `inputmode` 属性，用于定制虚拟键盘的类型。可选值包括：\n\n* `none`：无虚拟键盘。在需要实现自己的键盘输入控件时很有用\n* `text`：标准文本输入键盘\n* `decimal`：小数输入键盘，除了数字之外可能会有小数点 `.` 或者千分符逗号 `,`\n* `numeric`：显示 0-9 的数字键盘\n* `tel`：手机数字键盘，包含 0-9 数字、星号 `*` 或者井号 `#` 键\n* `search`：为搜索输入优化的虚拟键盘，提交按钮通常会显示 `search` 或者 “搜索”\n* `email`：为邮件地址输入优化的虚拟键盘，通常会有 `@ .` 等键\n* `url`：为 URL 输入优化的虚拟键盘，通常会有 `. / #` 等键",
"value": {
"type": [
"'none'",
"'text'",
"'decimal'",
"'numeric'",
"'tel'",
"'search'",
"'email'",
"'url'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-inputmode"
},
{
"name": "validity",
"description": "表单验证状态对象，具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
"value": {
"type": "ValidityState"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-validity"
},
{
"name": "validationMessage",
"description": "如果表单验证未通过，此属性将包含提示信息。如果验证通过，此属性将为空字符串",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-validationMessage"
},
{
"name": "valueAsNumber",
"description": "获取当前值，并转换为 `number` 类型；或设置一个 `number` 类型的值。\n如果值无法被转换为 `number` 类型，则会返回 `NaN`。",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-valueAsNumber"
},
{
"name": "autofocus",
"description": "是否在页面加载完成后自动获取焦点",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autofocus"
},
{
"name": "tabIndex",
"description": "元素在使用 Tab 键切换焦点时的顺序",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-tabIndex"
}
],
"events": [
{
"name": "focus",
"description": "获得焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-focus"
},
{
"name": "blur",
"description": "失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-blur"
},
{
"name": "change",
"description": "在文本框的值变更，且失去焦点时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-change"
},
{
"name": "input",
"description": "在文本框的值变更时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-input"
},
{
"name": "invalid",
"description": "表单字段验证不通过时触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-invalid"
},
{
"name": "clear",
"description": "在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()` 阻止清空文本框",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-clear"
}
]
},
"css": {
"parts": [
{
"name": "container",
"description": "文本框容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-container"
},
{
"name": "icon",
"description": "左侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-icon"
},
{
"name": "end-icon",
"description": "右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-end-icon"
},
{
"name": "error-icon",
"description": "验证失败状态的右侧图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-error-icon"
},
{
"name": "prefix",
"description": "左侧文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-prefix"
},
{
"name": "suffix",
"description": "右侧文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-suffix"
},
{
"name": "label",
"description": "上方的标签文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-label"
},
{
"name": "input",
"description": "内部的 `<input>` 或 `<textarea>` 元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-input"
},
{
"name": "clear-button",
"description": "清空按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-clear-button"
},
{
"name": "clear-icon",
"description": "清空按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-clear-icon"
},
{
"name": "toggle-password-button",
"description": "密码显示状态切换按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-toggle-password-button"
},
{
"name": "show-password-icon",
"description": "显示密码状态下，密码显示状态切换按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-show-password-icon"
},
{
"name": "hide-password-icon",
"description": "隐藏密码状态下，密码显示状态切换按钮中的图标",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-hide-password-icon"
},
{
"name": "supporting",
"description": "底部辅助信息容器，包括 helper、error、counter",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-supporting"
},
{
"name": "helper",
"description": "底部的帮助文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-helper"
},
{
"name": "error",
"description": "底部的错误描述文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-error"
},
{
"name": "counter",
"description": "底部右侧的字数统计",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-counter"
}
]
}
},
{
"name": "mdui-tooltip",
"description": "工具提示组件\n\n```html\n<mdui-tooltip content=\"tooltip content\">\n <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```",
"attributes": [
{
"name": "variant",
"description": "tooltip 的形状。默认为 `plain`。可选值包括：\n\n* `plain`：纯文本，适用于简单的单行文本\n* `rich`：富文本，可以包含标题、正文和操作按钮",
"value": {
"type": [
"'plain'",
"'rich'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-variant"
},
{
"name": "placement",
"description": "tooltip 的位置。默认为 `auto`。可选值包括：\n\n* `auto`：自动判断位置。`variant=\"plain\"` 时，优先使用 `top`；`variant=\"rich\"` 时，优先使用 `bottom-right`\n* `top-left`：位于左上方\n* `top-start`：位于上方，左对齐\n* `top`：位于上方，居中对齐\n* `top-end`：位于上方，右对齐\n* `top-right`：位于右上方\n* `bottom-left`：位于左下方\n* `bottom-start`：位于下方，左对齐\n* `bottom`：位于下方，居中对齐\n* `bottom-end`：位于下方，右对齐\n* `bottom-right`：位于右下方\n* `left-start`：位于左侧，顶部对齐\n* `left`：位于左侧，居中对齐\n* `left-end`：位于左侧，底部对齐\n* `right-start`：位于右侧，顶部对齐\n* `right`：位于右侧，居中对齐\n* `right-end`：位于右侧，底部对齐",
"value": {
"type": [
"'auto'",
"'top-left'",
"'top-start'",
"'top'",
"'top-end'",
"'top-right'",
"'bottom-left'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'bottom-right'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-placement"
},
{
"name": "open-delay",
"description": "鼠标悬浮触发显示的延时，单位为毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-open-delay"
},
{
"name": "close-delay",
"description": "鼠标悬浮触发隐藏的延时，单位为毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-close-delay"
},
{
"name": "headline",
"description": "tooltip 的标题。仅 `variant=\"rich\"` 时可使用。也可以通过 `slot=\"headline\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-headline"
},
{
"name": "content",
"description": "tooltip 的内容。也可以通过 `slot=\"content\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-content"
},
{
"name": "trigger",
"description": "触发方式，支持多个值，用空格分隔。可选值包括：\n\n* `click`：点击时触发\n* `hover`：鼠标悬浮时触发\n* `focus`：聚焦时触发\n* `manual`：只能通过编程方式打开和关闭 tooltip，不能再指定其他触发方式",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-trigger"
},
{
"name": "disabled",
"description": "是否禁用 tooltip",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-disabled"
},
{
"name": "open",
"description": "是否显示 tooltip",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-open"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip",
"slots": [
{
"name": "",
"description": "tooltip 触发的目标元素，只有 `default` slot 中的第一个元素会作为目标元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#slots-default"
},
{
"name": "headline",
"description": "tooltip 的标题，只有当 `variant=\"rich\"` 时，此 slot 才有效",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#slots-headline"
},
{
"name": "content",
"description": "tooltip 的内容，可以包含 HTML。若只包含纯文本，可以使用 `content` 属性代替",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#slots-content"
},
{
"name": "action",
"description": "tooltip 底部的按钮，只有当 `variant=\"rich\"` 时，此 slot 才有效",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#slots-action"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "tooltip 的形状。默认为 `plain`。可选值包括：\n\n* `plain`：纯文本，适用于简单的单行文本\n* `rich`：富文本，可以包含标题、正文和操作按钮",
"value": {
"type": [
"'plain'",
"'rich'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-variant"
},
{
"name": "placement",
"description": "tooltip 的位置。默认为 `auto`。可选值包括：\n\n* `auto`：自动判断位置。`variant=\"plain\"` 时，优先使用 `top`；`variant=\"rich\"` 时，优先使用 `bottom-right`\n* `top-left`：位于左上方\n* `top-start`：位于上方，左对齐\n* `top`：位于上方，居中对齐\n* `top-end`：位于上方，右对齐\n* `top-right`：位于右上方\n* `bottom-left`：位于左下方\n* `bottom-start`：位于下方，左对齐\n* `bottom`：位于下方，居中对齐\n* `bottom-end`：位于下方，右对齐\n* `bottom-right`：位于右下方\n* `left-start`：位于左侧，顶部对齐\n* `left`：位于左侧，居中对齐\n* `left-end`：位于左侧，底部对齐\n* `right-start`：位于右侧，顶部对齐\n* `right`：位于右侧，居中对齐\n* `right-end`：位于右侧，底部对齐",
"value": {
"type": [
"'auto'",
"'top-left'",
"'top-start'",
"'top'",
"'top-end'",
"'top-right'",
"'bottom-left'",
"'bottom-start'",
"'bottom'",
"'bottom-end'",
"'bottom-right'",
"'left-start'",
"'left'",
"'left-end'",
"'right-start'",
"'right'",
"'right-end'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-placement"
},
{
"name": "openDelay",
"description": "鼠标悬浮触发显示的延时，单位为毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-openDelay"
},
{
"name": "closeDelay",
"description": "鼠标悬浮触发隐藏的延时，单位为毫秒",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-closeDelay"
},
{
"name": "headline",
"description": "tooltip 的标题。仅 `variant=\"rich\"` 时可使用。也可以通过 `slot=\"headline\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-headline"
},
{
"name": "content",
"description": "tooltip 的内容。也可以通过 `slot=\"content\"` 设置",
"value": {
"type": "string"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-content"
},
{
"name": "trigger",
"description": "触发方式，支持多个值，用空格分隔。可选值包括：\n\n* `click`：点击时触发\n* `hover`：鼠标悬浮时触发\n* `focus`：聚焦时触发\n* `manual`：只能通过编程方式打开和关闭 tooltip，不能再指定其他触发方式",
"value": {
"type": [
"'click'",
"'hover'",
"'focus'",
"'manual'",
"string"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-trigger"
},
{
"name": "disabled",
"description": "是否禁用 tooltip",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-disabled"
},
{
"name": "open",
"description": "是否显示 tooltip",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-open"
}
],
"events": [
{
"name": "open",
"description": "tooltip 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 打开",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#events-open"
},
{
"name": "opened",
"description": "tooltip 显示动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#events-opened"
},
{
"name": "close",
"description": "tooltip 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 关闭",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#events-close"
},
{
"name": "closed",
"description": "tooltip 隐藏动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#events-closed"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner-plain",
"description": "当 variant=\"plain\" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssProperties-shape-corner-plain"
},
{
"name": "--shape-corner-rich",
"description": "当 variant=\"rich\" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssProperties-shape-corner-rich"
},
{
"name": "--z-index",
"description": "组件的 CSS `z-index` 值",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssProperties-z-index"
}
],
"parts": [
{
"name": "popup",
"description": "tooltip 的容器",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssParts-popup"
},
{
"name": "headline",
"description": "标题",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssParts-headline"
},
{
"name": "content",
"description": "正文",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssParts-content"
},
{
"name": "action",
"description": "操作按钮",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssParts-action"
}
]
}
},
{
"name": "mdui-top-app-bar-title",
"description": "顶部应用栏标题组件。需配合 `<mdui-top-app-bar>` 组件使用\n\n```html\n<mdui-top-app-bar>\n <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n <div style=\"flex-grow: 1\"></div>\n <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n</mdui-top-app-bar>\n```",
"attributes": [],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar",
"slots": [
{
"name": "",
"description": "顶部应用栏的标题文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-title-slots-default"
},
{
"name": "label-large",
"description": "展开状态下的标题文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-title-slots-label-large"
}
],
"js": {
"properties": []
},
"css": {
"parts": [
{
"name": "label",
"description": "标题文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-title-cssParts-label"
},
{
"name": "label-large",
"description": "展开状态下的标题文本",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-title-cssParts-label-large"
}
]
}
},
{
"name": "mdui-top-app-bar",
"description": "顶部应用栏组件\n\n```html\n<mdui-top-app-bar>\n <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n <div style=\"flex-grow: 1\"></div>\n <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n</mdui-top-app-bar>\n```",
"attributes": [
{
"name": "variant",
"description": "顶部应用栏的形状。默认为 `small`。可选值包括：\n\n* `center-aligned`：小型应用栏，标题居中\n* `small`：小型应用栏\n* `medium`：中型应用栏\n* `large`：大型应用栏",
"value": {
"type": [
"'center-aligned'",
"'small'",
"'medium'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-variant"
},
{
"name": "hide",
"description": "是否隐藏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-hide"
},
{
"name": "shrink",
"description": "是否缩小为 `variant=\"small\"` 的样式，仅在 `variant=\"medium\"` 或 `variant=\"large\"` 时生效",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-shrink"
},
{
"name": "scroll-behavior",
"description": "滚动行为。可同时使用多个值，用空格分隔。可选值包括：\n\n* `hide`：滚动时隐藏\n* `shrink`：在中型、大型应用栏中可使用，滚动时缩小成小型应用栏的样式\n* `elevate`：滚动时添加阴影",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-behavior"
},
{
"name": "scroll-target",
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-target"
},
{
"name": "scroll-threshold",
"description": "在滚动多少距离之后触发滚动行为，单位为 `px`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-threshold"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-order"
}
],
"priority": "highest",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar",
"slots": [
{
"name": "",
"description": "顶部应用栏内部的元素",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-slots-default"
}
],
"js": {
"properties": [
{
"name": "variant",
"description": "顶部应用栏的形状。默认为 `small`。可选值包括：\n\n* `center-aligned`：小型应用栏，标题居中\n* `small`：小型应用栏\n* `medium`：中型应用栏\n* `large`：大型应用栏",
"value": {
"type": [
"'center-aligned'",
"'small'",
"'medium'",
"'large'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-variant"
},
{
"name": "hide",
"description": "是否隐藏",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-hide"
},
{
"name": "shrink",
"description": "是否缩小为 `variant=\"small\"` 的样式，仅在 `variant=\"medium\"` 或 `variant=\"large\"` 时生效",
"value": {
"type": "boolean"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-shrink"
},
{
"name": "scrollBehavior",
"description": "滚动行为。可同时使用多个值，用空格分隔。可选值包括：\n\n* `hide`：滚动时隐藏\n* `shrink`：在中型、大型应用栏中可使用，滚动时缩小成小型应用栏的样式\n* `elevate`：滚动时添加阴影",
"value": {
"type": [
"'hide'",
"'shrink'",
"'elevate'"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scrollBehavior"
},
{
"name": "scrollTarget",
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
"value": {
"type": [
"string",
"HTMLElement",
"JQ<HTMLElement>"
]
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scrollTarget"
},
{
"name": "scrollThreshold",
"description": "在滚动多少距离之后触发滚动行为，单位为 `px`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scrollThreshold"
},
{
"name": "order",
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序，按从小到大排序。默认为 `0`",
"value": {
"type": "number"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-order"
}
],
"events": [
{
"name": "show",
"description": "开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-events-show"
},
{
"name": "shown",
"description": "显示动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-events-shown"
},
{
"name": "hide",
"description": "开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-events-hide"
},
{
"name": "hidden",
"description": "隐藏动画完成时，事件被触发",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-events-hidden"
}
]
},
"css": {
"properties": [
{
"name": "--shape-corner",
"description": "组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-cssProperties-shape-corner"
},
{
"name": "--z-index",
"description": "组件的 CSS `z-index` 值",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-cssProperties-z-index"
}
]
}
}
]
},
"css": {
"properties": [
{
"name": "--mdui-breakpoint-xs",
"description": "断点值。默认为 `0px`\n\n**注意**：该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**：\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-xs: 0px;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-sm",
"description": "断点值。默认为 `600px`\n\n**注意**：该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**：\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-sm: 620px;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-md",
"description": "断点值。默认为 `840px`\n\n**注意**：该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**：\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-md: 860px;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-lg",
"description": "断点值。默认为 `1080px`\n\n**注意**：该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**：\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-lg: 1100px;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-xl",
"description": "断点值。默认为 `1440px`\n\n**注意**：该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**：\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-xl: 1460px;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-breakpoint-xxl",
"description": "断点值。默认为 `1920px`\n\n**注意**：该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**：\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-xxl: 1940px;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
},
{
"name": "--mdui-color-primary-light",
"description": "**Primary**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-primary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary-container-light",
"description": "**Primary Container**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-primary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-light",
"description": "**On Primary**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-primary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-container-light",
"description": "**On Primary Container**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-primary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-primary-light",
"description": "**Inverse Primary**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-inverse-primary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-light",
"description": "**Secondary**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-secondary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-container-light",
"description": "**Secondary Container**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-secondary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-light",
"description": "**On Secondary**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-secondary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-container-light",
"description": "**On Secondary Container**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-secondary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-light",
"description": "**Tertiary**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-tertiary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-container-light",
"description": "**Tertiary Container**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-tertiary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-light",
"description": "**On Tertiary**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-tertiary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-container-light",
"description": "**On Tertiary Container**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-tertiary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-light",
"description": "**Surface**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-dim-light",
"description": "**Surface Dim**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-dim-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-bright-light",
"description": "**Surface Bright**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-bright-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-lowest-light",
"description": "**Surface Container Lowest**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-lowest-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-low-light",
"description": "**Surface Container Low**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-low-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-light",
"description": "**Surface Container**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-high-light",
"description": "**Surface Container High**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-high-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-highest-light",
"description": "**Surface Container Highest**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-highest-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-variant-light",
"description": "**Surface Variant**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-variant-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-light",
"description": "**On Surface**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-surface-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-variant-light",
"description": "**On Surface Variant**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-surface-variant-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-surface-light",
"description": "**Inverse Surface**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-inverse-surface-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-on-surface-light",
"description": "**Inverse On Surface**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-inverse-on-surface-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-background-light",
"description": "**Background**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-background-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-background-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-background));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-background-light",
"description": "**On Background**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-background-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-light",
"description": "**Error**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-error-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-container-light",
"description": "**Error Container**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-error-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-light",
"description": "**On Error**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-error-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-container-light",
"description": "**On Error Container**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-error-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-light",
"description": "**Outline**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-outline-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-variant-light",
"description": "**Outline Variant**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-outline-variant-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-shadow-light",
"description": "**Shadow**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-shadow-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-tint-color-light",
"description": "**Surface Tint Color**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-tint-color-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-scrim-light",
"description": "**Scrim**\n\n亮色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-scrim-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary-dark",
"description": "**Primary**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-primary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary-container-dark",
"description": "**Primary Container**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-primary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-dark",
"description": "**On Primary**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-primary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-container-dark",
"description": "**On Primary Container**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-primary-dark",
"description": "**Inverse Primary**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-dark",
"description": "**Secondary**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-secondary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-container-dark",
"description": "**Secondary Container**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-dark",
"description": "**On Secondary**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-container-dark",
"description": "**On Secondary Container**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-dark",
"description": "**Tertiary**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-tertiary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-container-dark",
"description": "**Tertiary Container**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-dark",
"description": "**On Tertiary**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-container-dark",
"description": "**On Tertiary Container**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-dark",
"description": "**Surface**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-dim-dark",
"description": "**Surface Dim**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-bright-dark",
"description": "**Surface Bright**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-lowest-dark",
"description": "**Surface Container Lowest**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-low-dark",
"description": "**Surface Container Low**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-dark",
"description": "**Surface Container**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-high-dark",
"description": "**Surface Container High**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-highest-dark",
"description": "**Surface Container Highest**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-variant-dark",
"description": "**Surface Variant**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-dark",
"description": "**On Surface**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-surface-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-variant-dark",
"description": "**On Surface Variant**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-surface-dark",
"description": "**Inverse Surface**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-on-surface-dark",
"description": "**Inverse On Surface**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-background-dark",
"description": "**Background**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-background-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-background-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-background));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-background-dark",
"description": "**On Background**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-background-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-dark",
"description": "**Error**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-error-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-container-dark",
"description": "**Error Container**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-error-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-dark",
"description": "**On Error**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-error-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-container-dark",
"description": "**On Error Container**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-dark",
"description": "**Outline**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-outline-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-variant-dark",
"description": "**Outline Variant**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-shadow-dark",
"description": "**Shadow**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-shadow-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-tint-color-dark",
"description": "**Surface Tint Color**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-scrim-dark",
"description": "**Scrim**\n\n暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**：\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-scrim-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary",
"description": "**Primary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-primary-light` 和 `--mdui-color-primary-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-primary-light: 255, 0, 0;\n --mdui-color-primary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-primary-container",
"description": "**Primary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-primary-container-light` 和 `--mdui-color-primary-container-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-primary-container-light: 255, 0, 0;\n --mdui-color-primary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary",
"description": "**On Primary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-primary-light` 和 `--mdui-color-on-primary-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-primary-light: 255, 0, 0;\n --mdui-color-on-primary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-primary-container",
"description": "**On Primary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-primary-container-light` 和 `--mdui-color-on-primary-container-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-primary-container-light: 255, 0, 0;\n --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-primary",
"description": "**Inverse Primary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-inverse-primary-light` 和 `--mdui-color-inverse-primary-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-inverse-primary-light: 255, 0, 0;\n --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary",
"description": "**Secondary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-secondary-light` 和 `--mdui-color-secondary-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-secondary-light: 255, 0, 0;\n --mdui-color-secondary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-secondary-container",
"description": "**Secondary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-secondary-container-light` 和 `--mdui-color-secondary-container-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-secondary-container-light: 255, 0, 0;\n --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary",
"description": "**On Secondary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-secondary-light` 和 `--mdui-color-on-secondary-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-secondary-light: 255, 0, 0;\n --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-secondary-container",
"description": "**On Secondary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-secondary-container-light` 和 `--mdui-color-on-secondary-container-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-secondary-container-light: 255, 0, 0;\n --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary",
"description": "**Tertiary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-tertiary-light` 和 `--mdui-color-tertiary-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-tertiary-light: 255, 0, 0;\n --mdui-color-tertiary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-tertiary-container",
"description": "**Tertiary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-tertiary-container-light` 和 `--mdui-color-tertiary-container-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-tertiary-container-light: 255, 0, 0;\n --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary",
"description": "**On Tertiary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-tertiary-light` 和 `--mdui-color-on-tertiary-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-tertiary-light: 255, 0, 0;\n --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-tertiary-container",
"description": "**On Tertiary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-tertiary-container-light` 和 `--mdui-color-on-tertiary-container-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-tertiary-container-light: 255, 0, 0;\n --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface",
"description": "**Surface**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-light` 和 `--mdui-color-surface-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-light: 255, 0, 0;\n --mdui-color-surface-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-dim",
"description": "**Surface Dim**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-dim-light` 和 `--mdui-color-surface-dim-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-dim-light: 255, 0, 0;\n --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-bright",
"description": "**Surface Bright**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-bright-light` 和 `--mdui-color-surface-bright-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-bright-light: 255, 0, 0;\n --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-lowest",
"description": "**Surface Container Lowest**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-container-lowest-light` 和 `--mdui-color-surface-container-lowest-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-lowest-light: 255, 0, 0;\n --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-low",
"description": "**Surface Container Low**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-container-low-light` 和 `--mdui-color-surface-container-low-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-low-light: 255, 0, 0;\n --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container",
"description": "**Surface Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-container-light` 和 `--mdui-color-surface-container-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-light: 255, 0, 0;\n --mdui-color-surface-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-high",
"description": "**Surface Container High**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-container-high-light` 和 `--mdui-color-surface-container-high-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-high-light: 255, 0, 0;\n --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-container-highest",
"description": "**Surface Container Highest**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-container-highest-light` 和 `--mdui-color-surface-container-highest-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-highest-light: 255, 0, 0;\n --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-variant",
"description": "**Surface Variant**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-variant-light` 和 `--mdui-color-surface-variant-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-variant-light: 255, 0, 0;\n --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface",
"description": "**On Surface**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-surface-light` 和 `--mdui-color-on-surface-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-surface-light: 255, 0, 0;\n --mdui-color-on-surface-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-surface-variant",
"description": "**On Surface Variant**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-surface-variant-light` 和 `--mdui-color-on-surface-variant-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-surface-variant-light: 255, 0, 0;\n --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-surface",
"description": "**Inverse Surface**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-inverse-surface-light` 和 `--mdui-color-inverse-surface-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-inverse-surface-light: 255, 0, 0;\n --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-inverse-on-surface",
"description": "**Inverse On Surface**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-inverse-on-surface-light` 和 `--mdui-color-inverse-on-surface-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-inverse-on-surface-light: 255, 0, 0;\n --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-background",
"description": "**Background**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-background-light` 和 `--mdui-color-background-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-background));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-background), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-background-light: 255, 0, 0;\n --mdui-color-background-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-background",
"description": "**On Background**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-background-light` 和 `--mdui-color-on-background-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-background), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-background-light: 255, 0, 0;\n --mdui-color-on-background-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error",
"description": "**Error**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-error-light` 和 `--mdui-color-error-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-error-light: 255, 0, 0;\n --mdui-color-error-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-error-container",
"description": "**Error Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-error-container-light` 和 `--mdui-color-error-container-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-error-container-light: 255, 0, 0;\n --mdui-color-error-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error",
"description": "**On Error**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-error-light` 和 `--mdui-color-on-error-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-error-light: 255, 0, 0;\n --mdui-color-on-error-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-on-error-container",
"description": "**On Error Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-on-error-container-light` 和 `--mdui-color-on-error-container-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-error-container-light: 255, 0, 0;\n --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline",
"description": "**Outline**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-outline-light` 和 `--mdui-color-outline-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-outline-light: 255, 0, 0;\n --mdui-color-outline-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-outline-variant",
"description": "**Outline Variant**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-outline-variant-light` 和 `--mdui-color-outline-variant-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-outline-variant-light: 255, 0, 0;\n --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-shadow",
"description": "**Shadow**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-shadow-light` 和 `--mdui-color-shadow-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-shadow), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-shadow-light: 255, 0, 0;\n --mdui-color-shadow-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-surface-tint-color",
"description": "**Surface Tint Color**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-surface-tint-color-light` 和 `--mdui-color-surface-tint-color-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-tint-color-light: 255, 0, 0;\n --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-color-scrim",
"description": "**Scrim**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值，RGB 三色用 `,` 分隔。\n\n若要设置该颜色值，建议分别设置 `--mdui-color-scrim-light` 和 `--mdui-color-scrim-dark`。\n\n**示例**：\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim));\n}\n\n/* 读取自动适配的颜色值，并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-scrim), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-scrim-light: 255, 0, 0;\n --mdui-color-scrim-dark: 255, 0, 0;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
},
{
"name": "--mdui-elevation-level0",
"description": "Level 0 级别的高度对应的阴影值。\n\n**示例**：\n```css\n/* 设置 level0 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level0: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level0 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level0);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level1",
"description": "Level 1 级别的高度对应的阴影值。\n\n**示例**：\n```css\n/* 设置 level1 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level1 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level1);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level2",
"description": "Level 2 级别的高度对应的阴影值。\n\n**示例**：\n```css\n/* 设置 level2 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level2: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level2 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level2);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level3",
"description": "Level 3 级别的高度对应的阴影值。\n\n**示例**：\n```css\n/* 设置 level3 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level3: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level3 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level3);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level4",
"description": "Level 4 级别的高度对应的阴影值。\n\n**示例**：\n```css\n/* 设置 level4 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level4: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level4 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level4);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-elevation-level5",
"description": "Level 5 级别的高度对应的阴影值。\n\n**示例**：\n```css\n/* 设置 level5 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level5: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level5 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level5);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
},
{
"name": "--mdui-motion-easing-linear",
"description": "线性动画的缓动曲线。\n\n**示例**：\n```css\n/* 设置线性动画的缓动曲线 */\n:root {\n --mdui-motion-easing-linear: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取线性动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-linear);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-standard",
"description": "标准动画的缓动曲线。\n\n**示例**：\n```css\n/* 设置标准动画的缓动曲线 */\n:root {\n --mdui-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取标准动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-standard);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-standard-accelerate",
"description": "标准加速动画的缓动曲线。\n\n**示例**：\n```css\n/* 设置标准加速动画的缓动曲线 */\n:root {\n --mdui-motion-easing-standard-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取标准加速动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-standard-accelerate);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-standard-decelerate",
"description": "标准减速动画的缓动曲线。\n\n**示例**：\n```css\n/* 设置标准减速动画的缓动曲线 */\n:root {\n --mdui-motion-easing-standard-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取标准减速动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-standard-decelerate);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-emphasized",
"description": "强调动画的缓动曲线。\n\n**示例**：\n```css\n/* 设置强调动画的缓动曲线 */\n:root {\n --mdui-motion-easing-emphasized: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取强调动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-emphasized);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-emphasized-accelerate",
"description": "强调加速动画的缓动曲线。\n\n**示例**：\n```css\n/* 设置强调加速动画的缓动曲线 */\n:root {\n --mdui-motion-easing-emphasized-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取强调加速动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-emphasized-accelerate);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-easing-emphasized-decelerate",
"description": "强调减速动画的缓动曲线。\n\n**示例**：\n```css\n/* 设置强调减速动画的缓动曲线 */\n:root {\n --mdui-motion-easing-emphasized-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取强调减速动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-emphasized-decelerate);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-short1",
"description": "short1 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 short1 动画的持续时间 */\n:root {\n --mdui-motion-duration-short1: 0.3s;\n}\n\n/* 读取 short1 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-short1);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-short2",
"description": "short2 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 short2 动画的持续时间 */\n:root {\n --mdui-motion-duration-short2: 0.3s;\n}\n\n/* 读取 short2 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-short2);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-short3",
"description": "short3 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 short3 动画的持续时间 */\n:root {\n --mdui-motion-duration-short3: 0.3s;\n}\n\n/* 读取 short3 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-short3);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-short4",
"description": "short4 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 short4 动画的持续时间 */\n:root {\n --mdui-motion-duration-short4: 0.3s;\n}\n\n/* 读取 short4 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-short4);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-medium1",
"description": "medium1 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 medium1 动画的持续时间 */\n:root {\n --mdui-motion-duration-medium1: 0.3s;\n}\n\n/* 读取 medium1 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium1);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-medium2",
"description": "medium2 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 medium2 动画的持续时间 */\n:root {\n --mdui-motion-duration-medium2: 0.3s;\n}\n\n/* 读取 medium2 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium2);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-medium3",
"description": "medium3 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 medium3 动画的持续时间 */\n:root {\n --mdui-motion-duration-medium3: 0.3s;\n}\n\n/* 读取 medium3 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium3);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-medium4",
"description": "medium4 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 medium4 动画的持续时间 */\n:root {\n --mdui-motion-duration-medium4: 0.3s;\n}\n\n/* 读取 medium4 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium4);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-long1",
"description": "long1 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 long1 动画的持续时间 */\n:root {\n --mdui-motion-duration-long1: 0.3s;\n}\n\n/* 读取 long1 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-long1);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-long2",
"description": "long2 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 long2 动画的持续时间 */\n:root {\n --mdui-motion-duration-long2: 0.3s;\n}\n\n/* 读取 long2 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-long2);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-long3",
"description": "long3 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 long3 动画的持续时间 */\n:root {\n --mdui-motion-duration-long3: 0.3s;\n}\n\n/* 读取 long3 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-long3);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-long4",
"description": "long4 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 long4 动画的持续时间 */\n:root {\n --mdui-motion-duration-long4: 0.3s;\n}\n\n/* 读取 long4 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-long4);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-extra-long1",
"description": "extra-long1 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 extra-long1 动画的持续时间 */\n:root {\n --mdui-motion-duration-extra-long1: 0.3s;\n}\n\n/* 读取 extra-long1 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long1);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-extra-long2",
"description": "extra-long2 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 extra-long2 动画的持续时间 */\n:root {\n --mdui-motion-duration-extra-long2: 0.3s;\n}\n\n/* 读取 extra-long2 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long2);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-extra-long3",
"description": "extra-long3 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 extra-long3 动画的持续时间 */\n:root {\n --mdui-motion-duration-extra-long3: 0.3s;\n}\n\n/* 读取 extra-long3 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long3);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-motion-duration-extra-long4",
"description": "extra-long4 动画的持续时间。\n\n**示例**：\n```css\n/* 设置 extra-long4 动画的持续时间 */\n:root {\n --mdui-motion-duration-extra-long4: 0.3s;\n}\n\n/* 读取 extra-long4 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long4);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
},
{
"name": "--mdui-shape-corner-none",
"description": "none 级别的圆角值。\n\n**示例**：\n```css\n/* 设置 none 级别的圆角值 */\n:root {\n --mdui-shape-corner-none: 4px;\n}\n\n/* 读取 none 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-none);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-extra-small",
"description": "extra-small 级别的圆角值。\n\n**示例**：\n```css\n/* 设置 extra-small 级别的圆角值 */\n:root {\n --mdui-shape-corner-extra-small: 4px;\n}\n\n/* 读取 extra-small 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-extra-small);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-small",
"description": "small 级别的圆角值。\n\n**示例**：\n```css\n/* 设置 small 级别的圆角值 */\n:root {\n --mdui-shape-corner-small: 4px;\n}\n\n/* 读取 small 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-small);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-medium",
"description": "medium 级别的圆角值。\n\n**示例**：\n```css\n/* 设置 medium 级别的圆角值 */\n:root {\n --mdui-shape-corner-medium: 4px;\n}\n\n/* 读取 medium 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-medium);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-large",
"description": "large 级别的圆角值。\n\n**示例**：\n```css\n/* 设置 large 级别的圆角值 */\n:root {\n --mdui-shape-corner-large: 4px;\n}\n\n/* 读取 large 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-large);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-extra-large",
"description": "extra-large 级别的圆角值。\n\n**示例**：\n```css\n/* 设置 extra-large 级别的圆角值 */\n:root {\n --mdui-shape-corner-extra-large: 4px;\n}\n\n/* 读取 extra-large 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-extra-large);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-shape-corner-full",
"description": "full 级别的圆角值。\n\n**示例**：\n```css\n/* 设置 full 级别的圆角值 */\n:root {\n --mdui-shape-corner-full: 4px;\n}\n\n/* 读取 full 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-full);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
},
{
"name": "--mdui-state-layer-hover",
"description": "`hover` 状态的状态层不透明度。\n\n**示例**：\n```css\n/* 设置 hover 状态的状态层不透明度 */\n:root {\n --mdui-state-layer-hover: 0.1;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#state-layer"
},
{
"name": "--mdui-state-layer-focus",
"description": "`focus` 状态的状态层不透明度。\n\n**示例**：\n```css\n/* 设置 focus 状态的状态层不透明度 */\n:root {\n --mdui-state-layer-focus: 0.1;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#state-layer"
},
{
"name": "--mdui-state-layer-pressed",
"description": "`pressed` 状态的状态层不透明度。\n\n**示例**：\n```css\n/* 设置 pressed 状态的状态层不透明度 */\n:root {\n --mdui-state-layer-pressed: 0.1;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#state-layer"
},
{
"name": "--mdui-state-layer-dragged",
"description": "`dragged` 状态的状态层不透明度。\n\n**示例**：\n```css\n/* 设置 dragged 状态的状态层不透明度 */\n:root {\n --mdui-state-layer-dragged: 0.1;\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#state-layer"
},
{
"name": "--mdui-typescale-display-large-weight",
"description": "Display Large 字重。\n\n**示例**：\n```css\n/* 设置 Display Large 字重 */\n:root {\n --mdui-typescale-display-large-weight: 500;\n}\n\n/* 读取 Display Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-display-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-large-line-height",
"description": "Display Large 行高。\n\n**示例**：\n```css\n/* 设置 Display Large 行高 */\n:root {\n --mdui-typescale-display-large-line-height: 1.5;\n}\n\n/* 读取 Display Large 行高 */\n.element {\n line-height: var(--mdui-typescale-display-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-large-size",
"description": "Display Large 字体大小。\n\n**示例**：\n```css\n/* 设置 Display Large 字体大小 */\n:root {\n --mdui-typescale-display-large-size: 16px;\n}\n\n/* 读取 Display Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-display-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-large-tracking",
"description": "Display Large 字间距。\n\n**示例**：\n```css\n/* 设置 Display Large 字间距 */\n:root {\n --mdui-typescale-display-large-tracking: 0.1;\n}\n\n/* 读取 Display Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-display-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-medium-weight",
"description": "Display Medium 字重。\n\n**示例**：\n```css\n/* 设置 Display Medium 字重 */\n:root {\n --mdui-typescale-display-medium-weight: 500;\n}\n\n/* 读取 Display Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-display-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-medium-line-height",
"description": "Display Medium 行高。\n\n**示例**：\n```css\n/* 设置 Display Medium 行高 */\n:root {\n --mdui-typescale-display-medium-line-height: 1.5;\n}\n\n/* 读取 Display Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-display-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-medium-size",
"description": "Display Medium 字体大小。\n\n**示例**：\n```css\n/* 设置 Display Medium 字体大小 */\n:root {\n --mdui-typescale-display-medium-size: 16px;\n}\n\n/* 读取 Display Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-display-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-medium-tracking",
"description": "Display Medium 字间距。\n\n**示例**：\n```css\n/* 设置 Display Medium 字间距 */\n:root {\n --mdui-typescale-display-medium-tracking: 0.1;\n}\n\n/* 读取 Display Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-display-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-small-weight",
"description": "Display Small 字重。\n\n**示例**：\n```css\n/* 设置 Display Small 字重 */\n:root {\n --mdui-typescale-display-small-weight: 500;\n}\n\n/* 读取 Display Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-display-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-small-line-height",
"description": "Display Small 行高。\n\n**示例**：\n```css\n/* 设置 Display Small 行高 */\n:root {\n --mdui-typescale-display-small-line-height: 1.5;\n}\n\n/* 读取 Display Small 行高 */\n.element {\n line-height: var(--mdui-typescale-display-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-small-size",
"description": "Display Small 字体大小。\n\n**示例**：\n```css\n/* 设置 Display Small 字体大小 */\n:root {\n --mdui-typescale-display-small-size: 16px;\n}\n\n/* 读取 Display Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-display-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-display-small-tracking",
"description": "Display Small 字间距。\n\n**示例**：\n```css\n/* 设置 Display Small 字间距 */\n:root {\n --mdui-typescale-display-small-tracking: 0.1;\n}\n\n/* 读取 Display Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-display-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-large-weight",
"description": "Headline Large 字重。\n\n**示例**：\n```css\n/* 设置 Headline Large 字重 */\n:root {\n --mdui-typescale-headline-large-weight: 500;\n}\n\n/* 读取 Headline Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-headline-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-large-line-height",
"description": "Headline Large 行高。\n\n**示例**：\n```css\n/* 设置 Headline Large 行高 */\n:root {\n --mdui-typescale-headline-large-line-height: 1.5;\n}\n\n/* 读取 Headline Large 行高 */\n.element {\n line-height: var(--mdui-typescale-headline-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-large-size",
"description": "Headline Large 字体大小。\n\n**示例**：\n```css\n/* 设置 Headline Large 字体大小 */\n:root {\n --mdui-typescale-headline-large-size: 16px;\n}\n\n/* 读取 Headline Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-headline-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-large-tracking",
"description": "Headline Large 字间距。\n\n**示例**：\n```css\n/* 设置 Headline Large 字间距 */\n:root {\n --mdui-typescale-headline-large-tracking: 0.1;\n}\n\n/* 读取 Headline Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-headline-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-medium-weight",
"description": "Headline Medium 字重。\n\n**示例**：\n```css\n/* 设置 Headline Medium 字重 */\n:root {\n --mdui-typescale-headline-medium-weight: 500;\n}\n\n/* 读取 Headline Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-headline-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-medium-line-height",
"description": "Headline Medium 行高。\n\n**示例**：\n```css\n/* 设置 Headline Medium 行高 */\n:root {\n --mdui-typescale-headline-medium-line-height: 1.5;\n}\n\n/* 读取 Headline Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-headline-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-medium-size",
"description": "Headline Medium 字体大小。\n\n**示例**：\n```css\n/* 设置 Headline Medium 字体大小 */\n:root {\n --mdui-typescale-headline-medium-size: 16px;\n}\n\n/* 读取 Headline Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-headline-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-medium-tracking",
"description": "Headline Medium 字间距。\n\n**示例**：\n```css\n/* 设置 Headline Medium 字间距 */\n:root {\n --mdui-typescale-headline-medium-tracking: 0.1;\n}\n\n/* 读取 Headline Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-headline-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-small-weight",
"description": "Headline Small 字重。\n\n**示例**：\n```css\n/* 设置 Headline Small 字重 */\n:root {\n --mdui-typescale-headline-small-weight: 500;\n}\n\n/* 读取 Headline Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-headline-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-small-line-height",
"description": "Headline Small 行高。\n\n**示例**：\n```css\n/* 设置 Headline Small 行高 */\n:root {\n --mdui-typescale-headline-small-line-height: 1.5;\n}\n\n/* 读取 Headline Small 行高 */\n.element {\n line-height: var(--mdui-typescale-headline-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-small-size",
"description": "Headline Small 字体大小。\n\n**示例**：\n```css\n/* 设置 Headline Small 字体大小 */\n:root {\n --mdui-typescale-headline-small-size: 16px;\n}\n\n/* 读取 Headline Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-headline-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-headline-small-tracking",
"description": "Headline Small 字间距。\n\n**示例**：\n```css\n/* 设置 Headline Small 字间距 */\n:root {\n --mdui-typescale-headline-small-tracking: 0.1;\n}\n\n/* 读取 Headline Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-headline-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-large-weight",
"description": "Title Large 字重。\n\n**示例**：\n```css\n/* 设置 Title Large 字重 */\n:root {\n --mdui-typescale-title-large-weight: 500;\n}\n\n/* 读取 Title Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-title-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-large-line-height",
"description": "Title Large 行高。\n\n**示例**：\n```css\n/* 设置 Title Large 行高 */\n:root {\n --mdui-typescale-title-large-line-height: 1.5;\n}\n\n/* 读取 Title Large 行高 */\n.element {\n line-height: var(--mdui-typescale-title-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-large-size",
"description": "Title Large 字体大小。\n\n**示例**：\n```css\n/* 设置 Title Large 字体大小 */\n:root {\n --mdui-typescale-title-large-size: 16px;\n}\n\n/* 读取 Title Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-title-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-large-tracking",
"description": "Title Large 字间距。\n\n**示例**：\n```css\n/* 设置 Title Large 字间距 */\n:root {\n --mdui-typescale-title-large-tracking: 0.1;\n}\n\n/* 读取 Title Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-title-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-medium-weight",
"description": "Title Medium 字重。\n\n**示例**：\n```css\n/* 设置 Title Medium 字重 */\n:root {\n --mdui-typescale-title-medium-weight: 500;\n}\n\n/* 读取 Title Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-title-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-medium-line-height",
"description": "Title Medium 行高。\n\n**示例**：\n```css\n/* 设置 Title Medium 行高 */\n:root {\n --mdui-typescale-title-medium-line-height: 1.5;\n}\n\n/* 读取 Title Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-title-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-medium-size",
"description": "Title Medium 字体大小。\n\n**示例**：\n```css\n/* 设置 Title Medium 字体大小 */\n:root {\n --mdui-typescale-title-medium-size: 16px;\n}\n\n/* 读取 Title Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-title-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-medium-tracking",
"description": "Title Medium 字间距。\n\n**示例**：\n```css\n/* 设置 Title Medium 字间距 */\n:root {\n --mdui-typescale-title-medium-tracking: 0.1;\n}\n\n/* 读取 Title Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-title-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-small-weight",
"description": "Title Small 字重。\n\n**示例**：\n```css\n/* 设置 Title Small 字重 */\n:root {\n --mdui-typescale-title-small-weight: 500;\n}\n\n/* 读取 Title Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-title-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-small-line-height",
"description": "Title Small 行高。\n\n**示例**：\n```css\n/* 设置 Title Small 行高 */\n:root {\n --mdui-typescale-title-small-line-height: 1.5;\n}\n\n/* 读取 Title Small 行高 */\n.element {\n line-height: var(--mdui-typescale-title-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-small-size",
"description": "Title Small 字体大小。\n\n**示例**：\n```css\n/* 设置 Title Small 字体大小 */\n:root {\n --mdui-typescale-title-small-size: 16px;\n}\n\n/* 读取 Title Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-title-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-title-small-tracking",
"description": "Title Small 字间距。\n\n**示例**：\n```css\n/* 设置 Title Small 字间距 */\n:root {\n --mdui-typescale-title-small-tracking: 0.1;\n}\n\n/* 读取 Title Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-title-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-large-weight",
"description": "Label Large 字重。\n\n**示例**：\n```css\n/* 设置 Label Large 字重 */\n:root {\n --mdui-typescale-label-large-weight: 500;\n}\n\n/* 读取 Label Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-label-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-large-line-height",
"description": "Label Large 行高。\n\n**示例**：\n```css\n/* 设置 Label Large 行高 */\n:root {\n --mdui-typescale-label-large-line-height: 1.5;\n}\n\n/* 读取 Label Large 行高 */\n.element {\n line-height: var(--mdui-typescale-label-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-large-size",
"description": "Label Large 字体大小。\n\n**示例**：\n```css\n/* 设置 Label Large 字体大小 */\n:root {\n --mdui-typescale-label-large-size: 16px;\n}\n\n/* 读取 Label Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-label-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-large-tracking",
"description": "Label Large 字间距。\n\n**示例**：\n```css\n/* 设置 Label Large 字间距 */\n:root {\n --mdui-typescale-label-large-tracking: 0.1;\n}\n\n/* 读取 Label Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-label-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-medium-weight",
"description": "Label Medium 字重。\n\n**示例**：\n```css\n/* 设置 Label Medium 字重 */\n:root {\n --mdui-typescale-label-medium-weight: 500;\n}\n\n/* 读取 Label Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-label-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-medium-line-height",
"description": "Label Medium 行高。\n\n**示例**：\n```css\n/* 设置 Label Medium 行高 */\n:root {\n --mdui-typescale-label-medium-line-height: 1.5;\n}\n\n/* 读取 Label Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-label-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-medium-size",
"description": "Label Medium 字体大小。\n\n**示例**：\n```css\n/* 设置 Label Medium 字体大小 */\n:root {\n --mdui-typescale-label-medium-size: 16px;\n}\n\n/* 读取 Label Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-label-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-medium-tracking",
"description": "Label Medium 字间距。\n\n**示例**：\n```css\n/* 设置 Label Medium 字间距 */\n:root {\n --mdui-typescale-label-medium-tracking: 0.1;\n}\n\n/* 读取 Label Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-label-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-small-weight",
"description": "Label Small 字重。\n\n**示例**：\n```css\n/* 设置 Label Small 字重 */\n:root {\n --mdui-typescale-label-small-weight: 500;\n}\n\n/* 读取 Label Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-label-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-small-line-height",
"description": "Label Small 行高。\n\n**示例**：\n```css\n/* 设置 Label Small 行高 */\n:root {\n --mdui-typescale-label-small-line-height: 1.5;\n}\n\n/* 读取 Label Small 行高 */\n.element {\n line-height: var(--mdui-typescale-label-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-small-size",
"description": "Label Small 字体大小。\n\n**示例**：\n```css\n/* 设置 Label Small 字体大小 */\n:root {\n --mdui-typescale-label-small-size: 16px;\n}\n\n/* 读取 Label Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-label-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-label-small-tracking",
"description": "Label Small 字间距。\n\n**示例**：\n```css\n/* 设置 Label Small 字间距 */\n:root {\n --mdui-typescale-label-small-tracking: 0.1;\n}\n\n/* 读取 Label Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-label-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-large-weight",
"description": "Body Large 字重。\n\n**示例**：\n```css\n/* 设置 Body Large 字重 */\n:root {\n --mdui-typescale-body-large-weight: 500;\n}\n\n/* 读取 Body Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-body-large-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-large-line-height",
"description": "Body Large 行高。\n\n**示例**：\n```css\n/* 设置 Body Large 行高 */\n:root {\n --mdui-typescale-body-large-line-height: 1.5;\n}\n\n/* 读取 Body Large 行高 */\n.element {\n line-height: var(--mdui-typescale-body-large-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-large-size",
"description": "Body Large 字体大小。\n\n**示例**：\n```css\n/* 设置 Body Large 字体大小 */\n:root {\n --mdui-typescale-body-large-size: 16px;\n}\n\n/* 读取 Body Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-body-large-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-large-tracking",
"description": "Body Large 字间距。\n\n**示例**：\n```css\n/* 设置 Body Large 字间距 */\n:root {\n --mdui-typescale-body-large-tracking: 0.1;\n}\n\n/* 读取 Body Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-body-large-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-medium-weight",
"description": "Body Medium 字重。\n\n**示例**：\n```css\n/* 设置 Body Medium 字重 */\n:root {\n --mdui-typescale-body-medium-weight: 500;\n}\n\n/* 读取 Body Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-body-medium-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-medium-line-height",
"description": "Body Medium 行高。\n\n**示例**：\n```css\n/* 设置 Body Medium 行高 */\n:root {\n --mdui-typescale-body-medium-line-height: 1.5;\n}\n\n/* 读取 Body Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-body-medium-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-medium-size",
"description": "Body Medium 字体大小。\n\n**示例**：\n```css\n/* 设置 Body Medium 字体大小 */\n:root {\n --mdui-typescale-body-medium-size: 16px;\n}\n\n/* 读取 Body Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-body-medium-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-medium-tracking",
"description": "Body Medium 字间距。\n\n**示例**：\n```css\n/* 设置 Body Medium 字间距 */\n:root {\n --mdui-typescale-body-medium-tracking: 0.1;\n}\n\n/* 读取 Body Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-body-medium-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-small-weight",
"description": "Body Small 字重。\n\n**示例**：\n```css\n/* 设置 Body Small 字重 */\n:root {\n --mdui-typescale-body-small-weight: 500;\n}\n\n/* 读取 Body Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-body-small-weight);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-small-line-height",
"description": "Body Small 行高。\n\n**示例**：\n```css\n/* 设置 Body Small 行高 */\n:root {\n --mdui-typescale-body-small-line-height: 1.5;\n}\n\n/* 读取 Body Small 行高 */\n.element {\n line-height: var(--mdui-typescale-body-small-line-height);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-small-size",
"description": "Body Small 字体大小。\n\n**示例**：\n```css\n/* 设置 Body Small 字体大小 */\n:root {\n --mdui-typescale-body-small-size: 16px;\n}\n\n/* 读取 Body Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-body-small-size);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
},
{
"name": "--mdui-typescale-body-small-tracking",
"description": "Body Small 字间距。\n\n**示例**：\n```css\n/* 设置 Body Small 字间距 */\n:root {\n --mdui-typescale-body-small-tracking: 0.1;\n}\n\n/* 读取 Body Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-body-small-tracking);\n}\n```\n",
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
}
],
"classes": [
{
"name": "mdui-theme-light",
"description": "将此 class 添加到元素上，该元素及其子元素将使用亮色模式显示。",
"description-sections": {
"示例": "```html\n<div class=\"mdui-theme-light\"></div>\n```"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/dark-mode"
},
{
"name": "mdui-theme-dark",
"description": "将此 class 添加到 `<html>` 元素上，整个页面将使用暗色模式显示。也可以添加到其他元素上，使该元素及其子元素使用暗色模式显示。",
"description-sections": {
"示例": "```html\n<!-- 整个页面使用暗色模式显示 -->\n<html class=\"mdui-theme-dark\"></html>\n\n<!-- 该元素及其子元素使用暗色模式显示 -->\n<div class=\"mdui-theme-dark\"></div>\n```"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/dark-mode"
},
{
"name": "mdui-theme-auto",
"description": "将此 class 添加到 `<html>` 上，整个页面将根据操作系统设置自动切换亮色模式和暗色模式。也可添加到其他元素上，使该元素及其子元素自动切换亮色模式和暗色模式。",
"description-sections": {
"示例": "```html\n<!-- 整个页面自动切换亮色模式和暗色模式 -->\n<html class=\"mdui-theme-auto\"></html>\n\n<!-- 该元素及其子元素自动切换亮色模式和暗色模式 -->\n<div class=\"mdui-theme-auto\"></div>\n```"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/dark-mode"
},
{
"name": "mdui-prose",
"description": "添加此 class，将优化文章的排版样式。",
"description-sections": {
"示例": "```html\n<div class=\"mdui-prose\">\n <h1>文章标题</h2>\n <p>文章正文</p>\n</div>\n```"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/prose"
},
{
"name": "mdui-table",
"description": "在 `<table>` 元素上添加此 class，将优化表格的显示样式。\n\n也可以添加在 `<table>` 的父元素上，除了优化表格显示样式外，还支持表格横向滚动",
"description-sections": {
"示例": "```html\n<table class=\"mdui-table\"></table>\n\n<div class=\"mdui-table\">\n <table></table>\n</div>\n```"
},
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/prose"
}
]
}
}
}
Reference in New Issue View Git Blame Copy Permalink