mdui
Version:
实现 material you 设计规范的 Web Components 组件库
11,834 lines • 671 kB
JSON
{
"$schema": "http://json.schemastore.org/web-types",
"name": "mdui",
"version": "2.1.5",
"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/zh-CN/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/zh-CN/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>文章标题</h1>\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"
}
]
}
}
}