11834 lines
655 KiB
JSON
11834 lines
655 KiB
JSON
{
|
||
"$schema": "http://json.schemastore.org/web-types",
|
||
"name": "mdui",
|
||
"version": "2.1.4",
|
||
"js-types-syntax": "typescript",
|
||
"description-markup": "markdown",
|
||
"framework-config": {
|
||
"enable-when": {
|
||
"node-packages": [
|
||
"mdui"
|
||
]
|
||
}
|
||
},
|
||
"contributions": {
|
||
"html": {
|
||
"elements": [
|
||
{
|
||
"name": "mdui-avatar",
|
||
"description": "头像组件\n\n```html\n<mdui-avatar src=\"https://avatars githubusercontent com/u/3030330?s=40&v=4\"></mdui-avatar>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "src",
|
||
"description": "头像图片的 URL 地址",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-src"
|
||
},
|
||
{
|
||
"name": "fit",
|
||
"description": "图片如何适应容器框,与原生的 [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 属性相同。可选值包括:\n\n* `contain`:保持图片原有尺寸比例,内容会被等比例缩放\n* `cover`:保持图片原有尺寸比例,但部分内容可能被剪切\n* `fill`:默认值,不保持图片原有尺寸比例,内容会被拉伸以填充整个容器\n* `none`:保留图片原有尺寸,内容不会被缩放或拉伸\n* `scale-down`:保持图片原有尺寸比例,内容尺寸与 `none` 或 `contain` 中较小的一个相同",
|
||
"value": {
|
||
"type": [
|
||
"'contain'",
|
||
"'cover'",
|
||
"'fill'",
|
||
"'none'",
|
||
"'scale-down'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-fit"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "头像的 Material Icons 图标名",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-icon"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "头像的替代文本描述",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-label"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "自定义头像内容,可以为字母、汉字、`<img>` 元素、图标等",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "src",
|
||
"description": "头像图片的 URL 地址",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-src"
|
||
},
|
||
{
|
||
"name": "fit",
|
||
"description": "图片如何适应容器框,与原生的 [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 属性相同。可选值包括:\n\n* `contain`:保持图片原有尺寸比例,内容会被等比例缩放\n* `cover`:保持图片原有尺寸比例,但部分内容可能被剪切\n* `fill`:默认值,不保持图片原有尺寸比例,内容会被拉伸以填充整个容器\n* `none`:保留图片原有尺寸,内容不会被缩放或拉伸\n* `scale-down`:保持图片原有尺寸比例,内容尺寸与 `none` 或 `contain` 中较小的一个相同",
|
||
"value": {
|
||
"type": [
|
||
"'contain'",
|
||
"'cover'",
|
||
"'fill'",
|
||
"'none'",
|
||
"'scale-down'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-fit"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "头像的 Material Icons 图标名",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-icon"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "头像的替代文本描述",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-label"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#cssProperties-shape-corner"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "image",
|
||
"description": "使用图片作为头像时,组件内部的 `<img>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#cssParts-image"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "使用图标作为头像时,组件内部的 `<mdui-icon>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#cssParts-icon"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-badge",
|
||
"description": "徽标组件\n\n```html\n<mdui-badge>12</mdui-badge>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "徽标的形状。可选值包括:\n\n* `small`:小型徽标,不显示文本\n* `large`:大型徽标,会显示文本",
|
||
"value": {
|
||
"type": [
|
||
"'small'",
|
||
"'large'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge#attributes-variant"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "徽标中显示的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge#slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "徽标的形状。可选值包括:\n\n* `small`:小型徽标,不显示文本\n* `large`:大型徽标,会显示文本",
|
||
"value": {
|
||
"type": [
|
||
"'small'",
|
||
"'large'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge#attributes-variant"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/badge#cssProperties-shape-corner"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-bottom-app-bar",
|
||
"description": "底部应用栏组件\n\n```html\n<mdui-bottom-app-bar>\n <mdui-button-icon icon=\"check_box--outlined\"></mdui-button-icon>\n <mdui-button-icon icon=\"edit--outlined\"></mdui-button-icon>\n <mdui-button-icon icon=\"mic_none--outlined\"></mdui-button-icon>\n <mdui-button-icon icon=\"image--outlined\"></mdui-button-icon>\n <div style=\"flex-grow: 1\"></div>\n <mdui-fab icon=\"add\"></mdui-fab>\n</mdui-bottom-app-bar>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "hide",
|
||
"description": "是否隐藏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-hide"
|
||
},
|
||
{
|
||
"name": "fab-detach",
|
||
"description": "是否让底部应用栏中的 [`<mdui-fab>`](https://www.mdui.org/zh-cn/docs/2/components/fab) 组件脱离应用栏。如果为 `true`,则当应用栏隐藏后,[`<mdui-fab>`](https://www.mdui.org/zh-cn/docs/2/components/fab) 仍会停留在页面上",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-fab-detach"
|
||
},
|
||
{
|
||
"name": "scroll-behavior",
|
||
"description": "滚动行为。可选值为:\n\n* `hide`:滚动时隐藏",
|
||
"value": {
|
||
"type": [
|
||
"'hide'",
|
||
"'shrink'",
|
||
"'elevate'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scroll-behavior"
|
||
},
|
||
{
|
||
"name": "scroll-target",
|
||
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"HTMLElement",
|
||
"JQ<HTMLElement>"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scroll-target"
|
||
},
|
||
{
|
||
"name": "scroll-threshold",
|
||
"description": "在滚动多少距离之后触发滚动行为,单位为 `px`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scroll-threshold"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-order"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "底部应用栏内部的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "hide",
|
||
"description": "是否隐藏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-hide"
|
||
},
|
||
{
|
||
"name": "fabDetach",
|
||
"description": "是否让底部应用栏中的 [`<mdui-fab>`](https://www.mdui.org/zh-cn/docs/2/components/fab) 组件脱离应用栏。如果为 `true`,则当应用栏隐藏后,[`<mdui-fab>`](https://www.mdui.org/zh-cn/docs/2/components/fab) 仍会停留在页面上",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-fabDetach"
|
||
},
|
||
{
|
||
"name": "scrollBehavior",
|
||
"description": "滚动行为。可选值为:\n\n* `hide`:滚动时隐藏",
|
||
"value": {
|
||
"type": [
|
||
"'hide'",
|
||
"'shrink'",
|
||
"'elevate'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scrollBehavior"
|
||
},
|
||
{
|
||
"name": "scrollTarget",
|
||
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"HTMLElement",
|
||
"JQ<HTMLElement>"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scrollTarget"
|
||
},
|
||
{
|
||
"name": "scrollThreshold",
|
||
"description": "在滚动多少距离之后触发滚动行为,单位为 `px`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scrollThreshold"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-order"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "show",
|
||
"description": "开始显示时,事件被触发。可以通过调用 `event.preventDefault()` 阻止显示",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#events-show"
|
||
},
|
||
{
|
||
"name": "shown",
|
||
"description": "显示动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#events-shown"
|
||
},
|
||
{
|
||
"name": "hide",
|
||
"description": "开始隐藏时,事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#events-hide"
|
||
},
|
||
{
|
||
"name": "hidden",
|
||
"description": "隐藏动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#events-hidden"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#cssProperties-shape-corner"
|
||
},
|
||
{
|
||
"name": "--z-index",
|
||
"description": "组件的 CSS `z-index` 值",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#cssProperties-z-index"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-button-icon",
|
||
"description": "图标按钮组件\n\n```html\n<mdui-button-icon icon=\"search\"></mdui-button-icon>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "图标按钮的形状。可选值包括:\n\n* `standard`:适用于最低优先级的操作\n* `filled`:视觉效果强烈,适用于高优先级的操作\n* `tonal`:视觉效果介于 `filled` 和 `outlined` 之间,适用于中高优先级的操作\n* `outlined`:适用于中等优先级的操作",
|
||
"value": {
|
||
"type": [
|
||
"'standard'",
|
||
"'filled'",
|
||
"'tonal'",
|
||
"'outlined'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-variant"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "Material Icons 图标名。也可以通过 default slot 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-icon"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selected-icon"
|
||
},
|
||
{
|
||
"name": "selectable",
|
||
"description": "是否可选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selectable"
|
||
},
|
||
{
|
||
"name": "selected",
|
||
"description": "是否已被选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selected"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-tabindex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-form"
|
||
},
|
||
{
|
||
"name": "formaction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formaction"
|
||
},
|
||
{
|
||
"name": "formenctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formenctype"
|
||
},
|
||
{
|
||
"name": "formmethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formmethod"
|
||
},
|
||
{
|
||
"name": "formnovalidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formnovalidate"
|
||
},
|
||
{
|
||
"name": "formtarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formtarget"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "图标组件",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#slots-default"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态显示的图标元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#slots-selected-icon"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "图标按钮的形状。可选值包括:\n\n* `standard`:适用于最低优先级的操作\n* `filled`:视觉效果强烈,适用于高优先级的操作\n* `tonal`:视觉效果介于 `filled` 和 `outlined` 之间,适用于中高优先级的操作\n* `outlined`:适用于中等优先级的操作",
|
||
"value": {
|
||
"type": [
|
||
"'standard'",
|
||
"'filled'",
|
||
"'tonal'",
|
||
"'outlined'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-variant"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "Material Icons 图标名。也可以通过 default slot 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-icon"
|
||
},
|
||
{
|
||
"name": "selectedIcon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selectedIcon"
|
||
},
|
||
{
|
||
"name": "selectable",
|
||
"description": "是否可选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selectable"
|
||
},
|
||
{
|
||
"name": "selected",
|
||
"description": "是否已被选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selected"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-tabIndex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-form"
|
||
},
|
||
{
|
||
"name": "formAction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formAction"
|
||
},
|
||
{
|
||
"name": "formEnctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formEnctype"
|
||
},
|
||
{
|
||
"name": "formMethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formMethod"
|
||
},
|
||
{
|
||
"name": "formNoValidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formNoValidate"
|
||
},
|
||
{
|
||
"name": "formTarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formTarget"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-validationMessage"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#events-blur"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"description": "选中状态变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#events-change"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#events-invalid"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssProperties-shape-corner"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "button",
|
||
"description": "内部的 `<button>` 或 `<a>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssParts-button"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "未选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssParts-icon"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssParts-selected-icon"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#cssParts-loading"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-button",
|
||
"description": "按钮组件\n\n```html\n<mdui-button>Button</mdui-button>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "按钮的形状。可选值包括:\n\n* `elevated`:带阴影的按钮,适用于需要将按钮与背景视觉分离的场景\n* `filled`:视觉效果强烈,适用于重要流程的最终操作,如“保存”、“确认”等\n* `tonal`:视觉效果介于 `filled` 和 `outlined` 之间,适用于中高优先级的操作,如流程中的“下一步”\n* `outlined`:带边框的按钮,适用于中等优先级,且次要的操作,如“返回”\n* `text`:文本按钮,适用于最低优先级的操作",
|
||
"value": {
|
||
"type": [
|
||
"'elevated'",
|
||
"'filled'",
|
||
"'tonal'",
|
||
"'outlined'",
|
||
"'text'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-variant"
|
||
},
|
||
{
|
||
"name": "full-width",
|
||
"description": "是否填满父元素宽度",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-full-width"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-end-icon"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-tabindex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-form"
|
||
},
|
||
{
|
||
"name": "formaction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formaction"
|
||
},
|
||
{
|
||
"name": "formenctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formenctype"
|
||
},
|
||
{
|
||
"name": "formmethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formmethod"
|
||
},
|
||
{
|
||
"name": "formnovalidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formnovalidate"
|
||
},
|
||
{
|
||
"name": "formtarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formtarget"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "按钮的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#slots-default"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "按钮左侧的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#slots-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "按钮右侧的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#slots-end-icon"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "按钮的形状。可选值包括:\n\n* `elevated`:带阴影的按钮,适用于需要将按钮与背景视觉分离的场景\n* `filled`:视觉效果强烈,适用于重要流程的最终操作,如“保存”、“确认”等\n* `tonal`:视觉效果介于 `filled` 和 `outlined` 之间,适用于中高优先级的操作,如流程中的“下一步”\n* `outlined`:带边框的按钮,适用于中等优先级,且次要的操作,如“返回”\n* `text`:文本按钮,适用于最低优先级的操作",
|
||
"value": {
|
||
"type": [
|
||
"'elevated'",
|
||
"'filled'",
|
||
"'tonal'",
|
||
"'outlined'",
|
||
"'text'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-variant"
|
||
},
|
||
{
|
||
"name": "fullWidth",
|
||
"description": "是否填满父元素宽度",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-fullWidth"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-icon"
|
||
},
|
||
{
|
||
"name": "endIcon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-endIcon"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-tabIndex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-form"
|
||
},
|
||
{
|
||
"name": "formAction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formAction"
|
||
},
|
||
{
|
||
"name": "formEnctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formEnctype"
|
||
},
|
||
{
|
||
"name": "formMethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formMethod"
|
||
},
|
||
{
|
||
"name": "formNoValidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formNoValidate"
|
||
},
|
||
{
|
||
"name": "formTarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formTarget"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-validationMessage"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#events-blur"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#events-invalid"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssProperties-shape-corner"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "button",
|
||
"description": "内部的 `<button>` 或 `<a>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-button"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "按钮的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-label"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "按钮左侧的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "按钮右侧的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-end-icon"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/button#cssParts-loading"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-card",
|
||
"description": "卡片组件\n\n```html\n<mdui-card>card content</mdui-card>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "卡片的形状。可选值包括:\n\n* `elevated`:带阴影的卡片,与背景的视觉分离度较高\n* `filled`:带填充色的卡片,与背景的视觉分离度较低\n* `outlined`:带边框的卡片,与背景的视觉分离度最高",
|
||
"value": {
|
||
"type": [
|
||
"'elevated'",
|
||
"'filled'",
|
||
"'outlined'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-variant"
|
||
},
|
||
{
|
||
"name": "clickable",
|
||
"description": "是否可点击。为 `true` 时,卡片将具有鼠标悬浮效果和点击涟漪效果",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-clickable"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "卡片的内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "卡片的形状。可选值包括:\n\n* `elevated`:带阴影的卡片,与背景的视觉分离度较高\n* `filled`:带填充色的卡片,与背景的视觉分离度较低\n* `outlined`:带边框的卡片,与背景的视觉分离度最高",
|
||
"value": {
|
||
"type": [
|
||
"'elevated'",
|
||
"'filled'",
|
||
"'outlined'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-variant"
|
||
},
|
||
{
|
||
"name": "clickable",
|
||
"description": "是否可点击。为 `true` 时,卡片将具有鼠标悬浮效果和点击涟漪效果",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-clickable"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#events-blur"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/card#cssProperties-shape-corner"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-checkbox",
|
||
"description": "复选框组件\n\n```html\n<mdui-checkbox>Checkbox</mdui-checkbox>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否为禁用状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "checked",
|
||
"description": "是否为选中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checked"
|
||
},
|
||
{
|
||
"name": "indeterminate",
|
||
"description": "是否处于不确定状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminate"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须选中此复选框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-required"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "复选框名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "复选框的值,将于表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-value"
|
||
},
|
||
{
|
||
"name": "unchecked-icon",
|
||
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-unchecked-icon"
|
||
},
|
||
{
|
||
"name": "checked-icon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checked-icon"
|
||
},
|
||
{
|
||
"name": "indeterminate-icon",
|
||
"description": "不确定状态的 Material Icons 图标名。也可以通过 `slot=\"indeterminate-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminate-icon"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "复选框文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#slots-default"
|
||
},
|
||
{
|
||
"name": "unchecked-icon",
|
||
"description": "未选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#slots-unchecked-icon"
|
||
},
|
||
{
|
||
"name": "checked-icon",
|
||
"description": "选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#slots-checked-icon"
|
||
},
|
||
{
|
||
"name": "indeterminate-icon",
|
||
"description": "不确定状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#slots-indeterminate-icon"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否为禁用状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "checked",
|
||
"description": "是否为选中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checked"
|
||
},
|
||
{
|
||
"name": "defaultChecked",
|
||
"description": "默认选中状态。在重置表单时,将恢复为此状态。此属性只能通过 JavaScript 属性设置",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-defaultChecked"
|
||
},
|
||
{
|
||
"name": "indeterminate",
|
||
"description": "是否处于不确定状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminate"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须选中此复选框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-required"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "复选框名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "复选框的值,将于表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-value"
|
||
},
|
||
{
|
||
"name": "uncheckedIcon",
|
||
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-uncheckedIcon"
|
||
},
|
||
{
|
||
"name": "checkedIcon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checkedIcon"
|
||
},
|
||
{
|
||
"name": "indeterminateIcon",
|
||
"description": "不确定状态的 Material Icons 图标名。也可以通过 `slot=\"indeterminate-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminateIcon"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-validationMessage"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-blur"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"description": "选中状态变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-change"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"description": "选中状态变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-input"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#events-invalid"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "control",
|
||
"description": "左侧图标容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-control"
|
||
},
|
||
{
|
||
"name": "unchecked-icon",
|
||
"description": "未选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-unchecked-icon"
|
||
},
|
||
{
|
||
"name": "checked-icon",
|
||
"description": "选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-checked-icon"
|
||
},
|
||
{
|
||
"name": "indeterminate-icon",
|
||
"description": "不确定状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-indeterminate-icon"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "复选框文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#cssParts-label"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-chip",
|
||
"description": "纸片组件\n\n```html\n<mdui-chip>Chip</mdui-chip>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "纸片的形状。可选值包括:\n\n* `assist`:用于显示与当前上下文相关的辅助操作,如在点餐页面提供分享、收藏等功能\n* `filter`:用于对内容进行筛选,如在搜索结果页过滤搜索结果\n* `input`:用于表示用户输入的信息片段,如在 Gmail 的“收件人”字段中的联系人\n* `suggestion`:用于提供动态生成的推荐信息,以简化用户操作,如在聊天应用中预测用户可能想发送的信息",
|
||
"value": {
|
||
"type": [
|
||
"'assist'",
|
||
"'filter'",
|
||
"'input'",
|
||
"'suggestion'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-variant"
|
||
},
|
||
{
|
||
"name": "elevated",
|
||
"description": "是否显示阴影",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-elevated"
|
||
},
|
||
{
|
||
"name": "selectable",
|
||
"description": "是否可选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selectable"
|
||
},
|
||
{
|
||
"name": "selected",
|
||
"description": "是否已选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selected"
|
||
},
|
||
{
|
||
"name": "deletable",
|
||
"description": "是否可删除。为 `true` 时,纸片右侧会显示删除图标",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-deletable"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-icon"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态下左侧的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selected-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-end-icon"
|
||
},
|
||
{
|
||
"name": "delete-icon",
|
||
"description": "可删除时,右侧删除图标的 Material Icons 图标名。也可以通过 `slot=\"delete-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-delete-icon"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-tabindex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-form"
|
||
},
|
||
{
|
||
"name": "formaction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formaction"
|
||
},
|
||
{
|
||
"name": "formenctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formenctype"
|
||
},
|
||
{
|
||
"name": "formmethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formmethod"
|
||
},
|
||
{
|
||
"name": "formnovalidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formnovalidate"
|
||
},
|
||
{
|
||
"name": "formtarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formtarget"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "纸片文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-default"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-end-icon"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态下的左侧元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-selected-icon"
|
||
},
|
||
{
|
||
"name": "delete-icon",
|
||
"description": "可删除时的右侧删除元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#slots-delete-icon"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "纸片的形状。可选值包括:\n\n* `assist`:用于显示与当前上下文相关的辅助操作,如在点餐页面提供分享、收藏等功能\n* `filter`:用于对内容进行筛选,如在搜索结果页过滤搜索结果\n* `input`:用于表示用户输入的信息片段,如在 Gmail 的“收件人”字段中的联系人\n* `suggestion`:用于提供动态生成的推荐信息,以简化用户操作,如在聊天应用中预测用户可能想发送的信息",
|
||
"value": {
|
||
"type": [
|
||
"'assist'",
|
||
"'filter'",
|
||
"'input'",
|
||
"'suggestion'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-variant"
|
||
},
|
||
{
|
||
"name": "elevated",
|
||
"description": "是否显示阴影",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-elevated"
|
||
},
|
||
{
|
||
"name": "selectable",
|
||
"description": "是否可选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selectable"
|
||
},
|
||
{
|
||
"name": "selected",
|
||
"description": "是否已选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selected"
|
||
},
|
||
{
|
||
"name": "deletable",
|
||
"description": "是否可删除。为 `true` 时,纸片右侧会显示删除图标",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-deletable"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-icon"
|
||
},
|
||
{
|
||
"name": "selectedIcon",
|
||
"description": "选中状态下左侧的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selectedIcon"
|
||
},
|
||
{
|
||
"name": "endIcon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-endIcon"
|
||
},
|
||
{
|
||
"name": "deleteIcon",
|
||
"description": "可删除时,右侧删除图标的 Material Icons 图标名。也可以通过 `slot=\"delete-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-deleteIcon"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-tabIndex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-form"
|
||
},
|
||
{
|
||
"name": "formAction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formAction"
|
||
},
|
||
{
|
||
"name": "formEnctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formEnctype"
|
||
},
|
||
{
|
||
"name": "formMethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formMethod"
|
||
},
|
||
{
|
||
"name": "formNoValidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formNoValidate"
|
||
},
|
||
{
|
||
"name": "formTarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-formTarget"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-validationMessage"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-blur"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-invalid"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"description": "选中状态变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-change"
|
||
},
|
||
{
|
||
"name": "delete",
|
||
"description": "点击删除图标时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#events-delete"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssProperties-shape-corner"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "button",
|
||
"description": "内部的 `<button>` 或 `<a>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-button"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "纸片文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-label"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-end-icon"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态下的左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-selected-icon"
|
||
},
|
||
{
|
||
"name": "delete-icon",
|
||
"description": "可删除时的右侧删除图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-delete-icon"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/chip#cssParts-loading"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-circular-progress",
|
||
"description": "圆形进度指示器组件\n\n```html\n<mdui-circular-progress></mdui-circular-progress>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "max",
|
||
"description": "进度指示器的最大值。默认为 `1`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress#attributes-max"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "进度指示器的当前值。如果未指定该值,则显示为不确定状态",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress#attributes-value"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress",
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "max",
|
||
"description": "进度指示器的最大值。默认为 `1`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress#attributes-max"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "进度指示器的当前值。如果未指定该值,则显示为不确定状态",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/circular-progress#attributes-value"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-collapse-item",
|
||
"description": "折叠面板项组件,需配合 `<mdui-collapse>` 组件使用\n\n```html\n<mdui-collapse>\n <mdui-collapse-item header=\"header-1\">content-1</mdui-collapse-item>\n <mdui-collapse-item header=\"header-2\">content-2</mdui-collapse-item>\n</mdui-collapse>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "value",
|
||
"description": "此折叠面板项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-value"
|
||
},
|
||
{
|
||
"name": "header",
|
||
"description": "此折叠面板项的头部文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-header"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用此折叠面板项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"description": "点击该元素时触发折叠,值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认为点击整个 header 区域触发",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"HTMLElement",
|
||
"JQ<HTMLElement>"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-trigger"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "折叠面板项的正文内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-slots-default"
|
||
},
|
||
{
|
||
"name": "header",
|
||
"description": "折叠面板项的头部内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-slots-header"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "value",
|
||
"description": "此折叠面板项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-value"
|
||
},
|
||
{
|
||
"name": "header",
|
||
"description": "此折叠面板项的头部文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-header"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用此折叠面板项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"description": "点击该元素时触发折叠,值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认为点击整个 header 区域触发",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"HTMLElement",
|
||
"JQ<HTMLElement>"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-attributes-trigger"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "open",
|
||
"description": "开始打开时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-events-open"
|
||
},
|
||
{
|
||
"name": "opened",
|
||
"description": "打开动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-events-opened"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"description": "开始关闭时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-events-close"
|
||
},
|
||
{
|
||
"name": "closed",
|
||
"description": "关闭动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-events-closed"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "header",
|
||
"description": "折叠面板的头部内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-cssParts-header"
|
||
},
|
||
{
|
||
"name": "body",
|
||
"description": "折叠面板的正文内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-item-cssParts-body"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-collapse",
|
||
"description": "折叠面板组件,需配合 `<mdui-collapse-item>` 组件使用\n\n```html\n<mdui-collapse>\n <mdui-collapse-item header=\"header-1\">content-1</mdui-collapse-item>\n <mdui-collapse-item header=\"header-2\">content-2</mdui-collapse-item>\n</mdui-collapse>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "accordion",
|
||
"description": "是否启用手风琴模式",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-accordion"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前展开的 `<mdui-collapse-item>` 的值\n\n**Note**:该属性的 HTML 属性始终为字符串,只有在 `accordion` 为 `true` 时,才能设置初始值;该属性的 JavaScript 属性值在 `accordion` 为 `true` 时为字符串,在 `accordion` 为 `false` 时为字符串数组。因此,当 `accordion` 为 `false` 时,只能通过修改 JavaScript 属性值来改变此值。",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-value"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用此折叠面板",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-disabled"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "`<mdui-collapse-item>` 组件",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "accordion",
|
||
"description": "是否启用手风琴模式",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-accordion"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前展开的 `<mdui-collapse-item>` 的值\n\n**Note**:该属性的 HTML 属性始终为字符串,只有在 `accordion` 为 `true` 时,才能设置初始值;该属性的 JavaScript 属性值在 `accordion` 为 `true` 时为字符串,在 `accordion` 为 `false` 时为字符串数组。因此,当 `accordion` 为 `false` 时,只能通过修改 JavaScript 属性值来改变此值。",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-value"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用此折叠面板",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-attributes-disabled"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "change",
|
||
"description": "当前展开的折叠面板项变化时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/collapse#collapse-events-change"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-dialog",
|
||
"description": "对话框组件\n\n```html\n<mdui-dialog>content</mdui-dialog>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "icon",
|
||
"description": "顶部的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-icon"
|
||
},
|
||
{
|
||
"name": "headline",
|
||
"description": "标题。也可以通过 `slot=\"headline\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-headline"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"description": "标题下方的文本。也可以通过 `slot=\"description\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-description"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"description": "是否打开对话框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-open"
|
||
},
|
||
{
|
||
"name": "fullscreen",
|
||
"description": "是否全屏显示对话框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-fullscreen"
|
||
},
|
||
{
|
||
"name": "close-on-esc",
|
||
"description": "是否允许按下 ESC 键关闭对话框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-close-on-esc"
|
||
},
|
||
{
|
||
"name": "close-on-overlay-click",
|
||
"description": "是否允许点击遮罩层关闭对话框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-close-on-overlay-click"
|
||
},
|
||
{
|
||
"name": "stacked-actions",
|
||
"description": "是否垂直排列底部操作按钮",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-stacked-actions"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog",
|
||
"slots": [
|
||
{
|
||
"name": "header",
|
||
"description": "顶部元素,默认包含 `icon` slot 和 `headline` slot",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-header"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "顶部图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-icon"
|
||
},
|
||
{
|
||
"name": "headline",
|
||
"description": "顶部标题",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-headline"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"description": "标题下方的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-description"
|
||
},
|
||
{
|
||
"name": "",
|
||
"description": "对话框主体内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-default"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"description": "底部操作栏中的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#slots-action"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "icon",
|
||
"description": "顶部的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-icon"
|
||
},
|
||
{
|
||
"name": "headline",
|
||
"description": "标题。也可以通过 `slot=\"headline\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-headline"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"description": "标题下方的文本。也可以通过 `slot=\"description\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-description"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"description": "是否打开对话框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-open"
|
||
},
|
||
{
|
||
"name": "fullscreen",
|
||
"description": "是否全屏显示对话框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-fullscreen"
|
||
},
|
||
{
|
||
"name": "closeOnEsc",
|
||
"description": "是否允许按下 ESC 键关闭对话框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-closeOnEsc"
|
||
},
|
||
{
|
||
"name": "closeOnOverlayClick",
|
||
"description": "是否允许点击遮罩层关闭对话框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-closeOnOverlayClick"
|
||
},
|
||
{
|
||
"name": "stackedActions",
|
||
"description": "是否垂直排列底部操作按钮",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#attributes-stackedActions"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "open",
|
||
"description": "对话框开始打开时触发。可以通过调用 `event.preventDefault()` 阻止对话框打开",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-open"
|
||
},
|
||
{
|
||
"name": "opened",
|
||
"description": "对话框打开动画完成后触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-opened"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"description": "对话框开始关闭时触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-close"
|
||
},
|
||
{
|
||
"name": "closed",
|
||
"description": "对话框关闭动画完成后触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-closed"
|
||
},
|
||
{
|
||
"name": "overlay-click",
|
||
"description": "点击遮罩层时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#events-overlay-click"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssProperties-shape-corner"
|
||
},
|
||
{
|
||
"name": "--z-index",
|
||
"description": "组件的 CSS `z-index` 值",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssProperties-z-index"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "overlay",
|
||
"description": "遮罩层",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-overlay"
|
||
},
|
||
{
|
||
"name": "panel",
|
||
"description": "对话框容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-panel"
|
||
},
|
||
{
|
||
"name": "header",
|
||
"description": "对话框 header 部分,包含 icon 和 headline",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-header"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "顶部图标,位于 header 中",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-icon"
|
||
},
|
||
{
|
||
"name": "headline",
|
||
"description": "顶部标题,位于 header 中",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-headline"
|
||
},
|
||
{
|
||
"name": "body",
|
||
"description": "对话框 body 部分",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-body"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"description": "副文本部分,位于 body 中",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-description"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"description": "底部操作按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dialog#cssParts-action"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-divider",
|
||
"description": "分割线组件\n\n```html\n<mdui-divider></mdui-divider>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "vertical",
|
||
"description": "是否为垂直分割线",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-vertical"
|
||
},
|
||
{
|
||
"name": "inset",
|
||
"description": "是否进行左侧缩进",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-inset"
|
||
},
|
||
{
|
||
"name": "middle",
|
||
"description": "是否进行左右两侧缩进",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-middle"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider",
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "vertical",
|
||
"description": "是否为垂直分割线",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-vertical"
|
||
},
|
||
{
|
||
"name": "inset",
|
||
"description": "是否进行左侧缩进",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-inset"
|
||
},
|
||
{
|
||
"name": "middle",
|
||
"description": "是否进行左右两侧缩进",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/divider#attributes-middle"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-dropdown",
|
||
"description": "下拉组件\n\n```html\n<mdui-dropdown>\n <mdui-button slot=\"trigger\">open dropdown</mdui-button>\n <mdui-menu>\n <mdui-menu-item>Item 1</mdui-menu-item>\n <mdui-menu-item>Item 2</mdui-menu-item>\n </mdui-menu>\n</mdui-dropdown>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "open",
|
||
"description": "是否打开下拉组件",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-open"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用下拉组件",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"description": "下拉组件的触发方式,支持多个值,用空格分隔。可选值包括:\n\n* `click`:点击触发\n* `hover`:鼠标悬浮触发\n* `focus`:聚焦触发\n* `contextmenu`:鼠标右键点击、或触摸长按触发\n* `manual`:仅能通过编程方式打开和关闭下拉组件,不能再指定其他触发方式",
|
||
"value": {
|
||
"type": [
|
||
"'click'",
|
||
"'hover'",
|
||
"'focus'",
|
||
"'contextmenu'",
|
||
"'manual'",
|
||
"string"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-trigger"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "下拉组件内容的位置。可选值包括:\n\n* `auto`:自动判断位置\n* `top-start`:上方左对齐\n* `top`:上方居中\n* `top-end`:上方右对齐\n* `bottom-start`:下方左对齐\n* `bottom`:下方居中\n* `bottom-end`:下方右对齐\n* `left-start`:左侧顶部对齐\n* `left`:左侧居中\n* `left-end`:左侧底部对齐\n* `right-start`:右侧顶部对齐\n* `right`:右侧居中\n* `right-end`:右侧底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'auto'",
|
||
"'top-start'",
|
||
"'top'",
|
||
"'top-end'",
|
||
"'bottom-start'",
|
||
"'bottom'",
|
||
"'bottom-end'",
|
||
"'left-start'",
|
||
"'left'",
|
||
"'left-end'",
|
||
"'right-start'",
|
||
"'right'",
|
||
"'right-end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-placement"
|
||
},
|
||
{
|
||
"name": "stay-open-on-click",
|
||
"description": "点击 [`<mdui-menu-item>`](https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-api) 后,下拉组件是否保持打开状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-stay-open-on-click"
|
||
},
|
||
{
|
||
"name": "open-delay",
|
||
"description": "鼠标悬浮触发下拉组件打开的延时,单位为毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-open-delay"
|
||
},
|
||
{
|
||
"name": "close-delay",
|
||
"description": "鼠标悬浮触发下拉组件关闭的延时,单位为毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-close-delay"
|
||
},
|
||
{
|
||
"name": "open-on-pointer",
|
||
"description": "是否在触发下拉组件的光标位置打开下拉组件,常用于打开鼠标右键菜单",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-open-on-pointer"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "下拉组件的内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#slots-default"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"description": "触发下拉组件的元素,例如 [`<mdui-button>`](https://www.mdui.org/zh-cn/docs/2/components/button) 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#slots-trigger"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "open",
|
||
"description": "是否打开下拉组件",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-open"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用下拉组件",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"description": "下拉组件的触发方式,支持多个值,用空格分隔。可选值包括:\n\n* `click`:点击触发\n* `hover`:鼠标悬浮触发\n* `focus`:聚焦触发\n* `contextmenu`:鼠标右键点击、或触摸长按触发\n* `manual`:仅能通过编程方式打开和关闭下拉组件,不能再指定其他触发方式",
|
||
"value": {
|
||
"type": [
|
||
"'click'",
|
||
"'hover'",
|
||
"'focus'",
|
||
"'contextmenu'",
|
||
"'manual'",
|
||
"string"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-trigger"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "下拉组件内容的位置。可选值包括:\n\n* `auto`:自动判断位置\n* `top-start`:上方左对齐\n* `top`:上方居中\n* `top-end`:上方右对齐\n* `bottom-start`:下方左对齐\n* `bottom`:下方居中\n* `bottom-end`:下方右对齐\n* `left-start`:左侧顶部对齐\n* `left`:左侧居中\n* `left-end`:左侧底部对齐\n* `right-start`:右侧顶部对齐\n* `right`:右侧居中\n* `right-end`:右侧底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'auto'",
|
||
"'top-start'",
|
||
"'top'",
|
||
"'top-end'",
|
||
"'bottom-start'",
|
||
"'bottom'",
|
||
"'bottom-end'",
|
||
"'left-start'",
|
||
"'left'",
|
||
"'left-end'",
|
||
"'right-start'",
|
||
"'right'",
|
||
"'right-end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-placement"
|
||
},
|
||
{
|
||
"name": "stayOpenOnClick",
|
||
"description": "点击 [`<mdui-menu-item>`](https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-api) 后,下拉组件是否保持打开状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-stayOpenOnClick"
|
||
},
|
||
{
|
||
"name": "openDelay",
|
||
"description": "鼠标悬浮触发下拉组件打开的延时,单位为毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-openDelay"
|
||
},
|
||
{
|
||
"name": "closeDelay",
|
||
"description": "鼠标悬浮触发下拉组件关闭的延时,单位为毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-closeDelay"
|
||
},
|
||
{
|
||
"name": "openOnPointer",
|
||
"description": "是否在触发下拉组件的光标位置打开下拉组件,常用于打开鼠标右键菜单",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#attributes-openOnPointer"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "open",
|
||
"description": "下拉组件开始打开时,事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件打开",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#events-open"
|
||
},
|
||
{
|
||
"name": "opened",
|
||
"description": "下拉组件打开动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#events-opened"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"description": "下拉组件开始关闭时,事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件关闭",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#events-close"
|
||
},
|
||
{
|
||
"name": "closed",
|
||
"description": "下拉组件关闭动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#events-closed"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--z-index",
|
||
"description": "组件的 CSS `z-index` 值",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#cssProperties-z-index"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "trigger",
|
||
"description": "触发下拉组件的元素的容器,即 `trigger` slot 的容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#cssParts-trigger"
|
||
},
|
||
{
|
||
"name": "panel",
|
||
"description": "下拉组件内容的容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/dropdown#cssParts-panel"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-fab",
|
||
"description": "浮动操作按钮组件\n\n```html\n<mdui-fab icon=\"edit\"></mdui-fab>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "FAB 的形状,此组件的不同形状之间只有颜色不一样。可选值包括:\n\n* `primary`:使用 Primary container 背景色\n* `surface`:使用 Surface container high 背景色\n* `secondary`:使用 Secondary container 背景色\n* `tertiary`:使用 Tertiary container 背景色",
|
||
"value": {
|
||
"type": [
|
||
"'primary'",
|
||
"'surface'",
|
||
"'secondary'",
|
||
"'tertiary'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-variant"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"description": "FAB 的大小。可选值包括:\n* `normal`:普通大小 FAB\n* `small`:小型 FAB\n* `large`:大型 FAB",
|
||
"value": {
|
||
"type": [
|
||
"'normal'",
|
||
"'small'",
|
||
"'large'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-size"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-icon"
|
||
},
|
||
{
|
||
"name": "extended",
|
||
"description": "是否为展开状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-extended"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-tabindex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-form"
|
||
},
|
||
{
|
||
"name": "formaction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formaction"
|
||
},
|
||
{
|
||
"name": "formenctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formenctype"
|
||
},
|
||
{
|
||
"name": "formmethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formmethod"
|
||
},
|
||
{
|
||
"name": "formnovalidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formnovalidate"
|
||
},
|
||
{
|
||
"name": "formtarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formtarget"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#slots-default"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#slots-icon"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "FAB 的形状,此组件的不同形状之间只有颜色不一样。可选值包括:\n\n* `primary`:使用 Primary container 背景色\n* `surface`:使用 Surface container high 背景色\n* `secondary`:使用 Secondary container 背景色\n* `tertiary`:使用 Tertiary container 背景色",
|
||
"value": {
|
||
"type": [
|
||
"'primary'",
|
||
"'surface'",
|
||
"'secondary'",
|
||
"'tertiary'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-variant"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"description": "FAB 的大小。可选值包括:\n* `normal`:普通大小 FAB\n* `small`:小型 FAB\n* `large`:大型 FAB",
|
||
"value": {
|
||
"type": [
|
||
"'normal'",
|
||
"'small'",
|
||
"'large'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-size"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-icon"
|
||
},
|
||
{
|
||
"name": "extended",
|
||
"description": "是否为展开状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-extended"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-tabIndex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-form"
|
||
},
|
||
{
|
||
"name": "formAction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formAction"
|
||
},
|
||
{
|
||
"name": "formEnctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formEnctype"
|
||
},
|
||
{
|
||
"name": "formMethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formMethod"
|
||
},
|
||
{
|
||
"name": "formNoValidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formNoValidate"
|
||
},
|
||
{
|
||
"name": "formTarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-formTarget"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#attributes-validationMessage"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#events-blur"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#events-invalid"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner-small",
|
||
"description": "`size=\"small\"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssProperties-shape-corner-small"
|
||
},
|
||
{
|
||
"name": "--shape-corner-normal",
|
||
"description": "`size=\"normal\"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssProperties-shape-corner-normal"
|
||
},
|
||
{
|
||
"name": "--shape-corner-large",
|
||
"description": "`size=\"large\"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssProperties-shape-corner-large"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "button",
|
||
"description": "内部的 `<button>` 或 `<a>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssParts-button"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "右侧的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssParts-label"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssParts-icon"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/fab#cssParts-loading"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-icon",
|
||
"description": "图标组件\n\n```html\n<mdui-icon name=\"search\"></mdui-icon>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "name",
|
||
"description": "Material Icons 图标名",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#attributes-name"
|
||
},
|
||
{
|
||
"name": "src",
|
||
"description": "svg 图标的路径",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#attributes-src"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "`svg` 图标的内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "name",
|
||
"description": "Material Icons 图标名",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#attributes-name"
|
||
},
|
||
{
|
||
"name": "src",
|
||
"description": "svg 图标的路径",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/icon#attributes-src"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-layout-item",
|
||
"description": "布局项组件\n\n```html\n<mdui-layout>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "placement",
|
||
"description": "组件的位置。可选值包括:\n\n* `top`:上方\n* `bottom`:下方\n* `left`:左侧\n* `right`:右侧",
|
||
"value": {
|
||
"type": [
|
||
"'top'",
|
||
"'bottom'",
|
||
"'left'",
|
||
"'right'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-attributes-placement"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-attributes-order"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "可以包含任意内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "placement",
|
||
"description": "组件的位置。可选值包括:\n\n* `top`:上方\n* `bottom`:下方\n* `left`:左侧\n* `right`:右侧",
|
||
"value": {
|
||
"type": [
|
||
"'top'",
|
||
"'bottom'",
|
||
"'left'",
|
||
"'right'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-attributes-placement"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-item-attributes-order"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-layout-main",
|
||
"description": "布局主体内容组件\n\n```html\n<mdui-layout>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
|
||
"attributes": [],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "可以包含任意内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-main-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": []
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-layout",
|
||
"description": "布局组件\n\n```html\n<mdui-layout>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-item></mdui-layout-item>\n <mdui-layout-main></mdui-layout-main>\n</mdui-layout>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "full-height",
|
||
"description": "设置当前布局的高度为 100%",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-attributes-full-height"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "可以包含 [`<mdui-top-app-bar>`](https://www.mdui.org/zh-cn/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](https://www.mdui.org/zh-cn/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](https://www.mdui.org/zh-cn/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "fullHeight",
|
||
"description": "设置当前布局的高度为 100%",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/layout#layout-attributes-fullHeight"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-linear-progress",
|
||
"description": "线性进度指示器组件\n\n```html\n<mdui-linear-progress></mdui-linear-progress>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "max",
|
||
"description": "进度指示器的最大值。默认为 `1`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#attributes-max"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "进度指示器的当前值。如果未指定该值,则处于不确定状态",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#attributes-value"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress",
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "max",
|
||
"description": "进度指示器的最大值。默认为 `1`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#attributes-max"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "进度指示器的当前值。如果未指定该值,则处于不确定状态",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#attributes-value"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#cssProperties-shape-corner"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "indicator",
|
||
"description": "指示器部分",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/linear-progress#cssParts-indicator"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-list-item",
|
||
"description": "列表项组件。需配合 `<mdui-list>` 组件使用\n\n```html\n<mdui-list>\n <mdui-list-subheader>Subheader</mdui-list-subheader>\n <mdui-list-item>Item 1</mdui-list-item>\n <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "headline",
|
||
"description": "主文本。也可以通过 default slot 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-headline"
|
||
},
|
||
{
|
||
"name": "headline-line",
|
||
"description": "主文本行数,超过限制后将截断显示。默认无行数限制。可选值包括:\n\n* `1`:显示单行,超出后截断\n* `2`:显示两行,超出后截断\n* `3`:显示三行,超出后截断",
|
||
"value": {
|
||
"type": [
|
||
"1",
|
||
"2",
|
||
"3"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-headline-line"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"description": "副文本。也可以通过 `slot=\"description\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-description"
|
||
},
|
||
{
|
||
"name": "description-line",
|
||
"description": "副文本行数,超过限制后将截断显示。默认无行数限制。可选值包括:\n\n* `1`:显示单行,超出后截断\n* `2`:显示两行,超出后截断\n* `3`:显示三行,超出后截断",
|
||
"value": {
|
||
"type": [
|
||
"1",
|
||
"2",
|
||
"3"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-description-line"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-end-icon"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用该列表项,禁用后,列表项将变为灰色,且其中的 [`<mdui-checkbox>`](https://www.mdui.org/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](https://www.mdui.org/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](https://www.mdui.org/zh-cn/docs/2/components/switch) 等也将禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "active",
|
||
"description": "是否激活该列表项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-active"
|
||
},
|
||
{
|
||
"name": "nonclickable",
|
||
"description": "是否使列表项不可点击。设置后,列表项中的 [`<mdui-checkbox>`](https://www.mdui.org/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](https://www.mdui.org/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](https://www.mdui.org/zh-cn/docs/2/components/switch) 等仍可交互",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-nonclickable"
|
||
},
|
||
{
|
||
"name": "rounded",
|
||
"description": "是否使用圆角形状的列表项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-rounded"
|
||
},
|
||
{
|
||
"name": "alignment",
|
||
"description": "列表项的垂直对齐方式。可选值包括:\n\n* `start`:顶部对齐\n* `center`:居中对齐\n* `end`:底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'start'",
|
||
"'center'",
|
||
"'end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-alignment"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "主文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-default"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"description": "副文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-description"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "列表项左侧的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "列表项右侧的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-end-icon"
|
||
},
|
||
{
|
||
"name": "custom",
|
||
"description": "任意自定义内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-slots-custom"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "headline",
|
||
"description": "主文本。也可以通过 default slot 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-headline"
|
||
},
|
||
{
|
||
"name": "headlineLine",
|
||
"description": "主文本行数,超过限制后将截断显示。默认无行数限制。可选值包括:\n\n* `1`:显示单行,超出后截断\n* `2`:显示两行,超出后截断\n* `3`:显示三行,超出后截断",
|
||
"value": {
|
||
"type": [
|
||
"1",
|
||
"2",
|
||
"3"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-headlineLine"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"description": "副文本。也可以通过 `slot=\"description\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-description"
|
||
},
|
||
{
|
||
"name": "descriptionLine",
|
||
"description": "副文本行数,超过限制后将截断显示。默认无行数限制。可选值包括:\n\n* `1`:显示单行,超出后截断\n* `2`:显示两行,超出后截断\n* `3`:显示三行,超出后截断",
|
||
"value": {
|
||
"type": [
|
||
"1",
|
||
"2",
|
||
"3"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-descriptionLine"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-icon"
|
||
},
|
||
{
|
||
"name": "endIcon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-endIcon"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用该列表项,禁用后,列表项将变为灰色,且其中的 [`<mdui-checkbox>`](https://www.mdui.org/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](https://www.mdui.org/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](https://www.mdui.org/zh-cn/docs/2/components/switch) 等也将禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "active",
|
||
"description": "是否激活该列表项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-active"
|
||
},
|
||
{
|
||
"name": "nonclickable",
|
||
"description": "是否使列表项不可点击。设置后,列表项中的 [`<mdui-checkbox>`](https://www.mdui.org/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](https://www.mdui.org/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](https://www.mdui.org/zh-cn/docs/2/components/switch) 等仍可交互",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-nonclickable"
|
||
},
|
||
{
|
||
"name": "rounded",
|
||
"description": "是否使用圆角形状的列表项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-rounded"
|
||
},
|
||
{
|
||
"name": "alignment",
|
||
"description": "列表项的垂直对齐方式。可选值包括:\n\n* `start`:顶部对齐\n* `center`:居中对齐\n* `end`:底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'start'",
|
||
"'center'",
|
||
"'end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-alignment"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-events-blur"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssProperties-shape-corner"
|
||
},
|
||
{
|
||
"name": "--shape-corner-rounded",
|
||
"description": "指定了 `rounded` 属性时,列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssProperties-shape-corner-rounded"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "container",
|
||
"description": "列表项容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-container"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-end-icon"
|
||
},
|
||
{
|
||
"name": "body",
|
||
"description": "中间部分",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-body"
|
||
},
|
||
{
|
||
"name": "headline",
|
||
"description": "主标题",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-headline"
|
||
},
|
||
{
|
||
"name": "description",
|
||
"description": "副标题",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-item-cssParts-description"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-list-subheader",
|
||
"description": "列表标题组件。需配合 `<mdui-list>` 组件使用\n\n```html\n<mdui-list>\n <mdui-list-subheader>Subheader</mdui-list-subheader>\n <mdui-list-item>Item 1</mdui-list-item>\n <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
|
||
"attributes": [],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "列表标题文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-subheader-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": []
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-list",
|
||
"description": "列表组件。需配合 `<mdui-list-item>` 组件使用\n\n```html\n<mdui-list>\n <mdui-list-subheader>Subheader</mdui-list-subheader>\n <mdui-list-item>Item 1</mdui-list-item>\n <mdui-list-item>Item 2</mdui-list-item>\n</mdui-list>\n```",
|
||
"attributes": [],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "`<mdui-list-item>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/list#list-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": []
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-menu-item",
|
||
"description": "菜单项组件。需配合 `<mdui-menu>` 组件使用\n\n```html\n<mdui-menu>\n <mdui-menu-item>Item 1</mdui-menu-item>\n <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "value",
|
||
"description": "菜单项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-value"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用菜单项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置\n\n如果左侧不需要显示图标,但需要预留一个图标的位置,可传入空字符串进行占位",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-end-icon"
|
||
},
|
||
{
|
||
"name": "end-text",
|
||
"description": "右侧的文本。也可以通过 `slot=\"end-text\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-end-text"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-selected-icon"
|
||
},
|
||
{
|
||
"name": "submenu-open",
|
||
"description": "是否打开子菜单",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-submenu-open"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "菜单项的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-default"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "菜单项左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "菜单项右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-end-icon"
|
||
},
|
||
{
|
||
"name": "end-text",
|
||
"description": "菜单右侧的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-end-text"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-selected-icon"
|
||
},
|
||
{
|
||
"name": "submenu",
|
||
"description": "子菜单",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-submenu"
|
||
},
|
||
{
|
||
"name": "custom",
|
||
"description": "任意自定义内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-slots-custom"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "value",
|
||
"description": "菜单项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-value"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用菜单项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置\n\n如果左侧不需要显示图标,但需要预留一个图标的位置,可传入空字符串进行占位",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-icon"
|
||
},
|
||
{
|
||
"name": "endIcon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-endIcon"
|
||
},
|
||
{
|
||
"name": "endText",
|
||
"description": "右侧的文本。也可以通过 `slot=\"end-text\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-endText"
|
||
},
|
||
{
|
||
"name": "selectedIcon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-selectedIcon"
|
||
},
|
||
{
|
||
"name": "submenuOpen",
|
||
"description": "是否打开子菜单",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-submenuOpen"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-blur"
|
||
},
|
||
{
|
||
"name": "submenu-open",
|
||
"description": "子菜单开始打开时,事件被触发。可以通过调用 `event.preventDefault()` 阻止子菜单打开",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-submenu-open"
|
||
},
|
||
{
|
||
"name": "submenu-opened",
|
||
"description": "子菜单打开动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-submenu-opened"
|
||
},
|
||
{
|
||
"name": "submenu-close",
|
||
"description": "子菜单开始关闭时,事件被触发。可以通过调用 `event.preventDefault()` 阻止子菜单关闭",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-submenu-close"
|
||
},
|
||
{
|
||
"name": "submenu-closed",
|
||
"description": "子菜单关闭动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-events-submenu-closed"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "container",
|
||
"description": "菜单项的容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-container"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-icon"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "文本内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-label"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-end-icon"
|
||
},
|
||
{
|
||
"name": "end-text",
|
||
"description": "右侧的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-end-text"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-selected-icon"
|
||
},
|
||
{
|
||
"name": "submenu",
|
||
"description": "子菜单元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-item-cssParts-submenu"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-menu",
|
||
"description": "菜单组件。需配合 `<mdui-menu-item>` 组件使用\n\n```html\n<mdui-menu>\n <mdui-menu-item>Item 1</mdui-menu-item>\n <mdui-menu-item>Item 2</mdui-menu-item>\n</mdui-menu>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "selects",
|
||
"description": "菜单项的可选状态。默认不可选。可选值包括:\n\n* `single`:单选\n* `multiple`:多选",
|
||
"value": {
|
||
"type": [
|
||
"'single'",
|
||
"'multiple'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-selects"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前选中的 `<mdui-menu-item>` 的值。\n\n**Note**:该属性的 HTML 属性始终为字符串,仅在 `selects=\"single\"` 时可通过 HTML 属性设置初始值;该属性的 JavaScript 属性值在 `selects=\"single\"` 时为字符串,在 `selects=\"multiple\"` 时为字符串数组。因此,在 `selects=\"multiple\"` 时,若要修改该值,只能通过修改 JavaScript 属性值实现。",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-value"
|
||
},
|
||
{
|
||
"name": "dense",
|
||
"description": "菜单项是否使用紧凑布局",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-dense"
|
||
},
|
||
{
|
||
"name": "submenu-trigger",
|
||
"description": "子菜单的触发方式,支持多个值,用空格分隔。可选值包括:\n\n* `click`:点击菜单项时打开子菜单\n* `hover`:鼠标悬浮到菜单项上时打开子菜单\n* `focus`:聚焦到菜单项上时打开子菜单\n* `manual`:仅能通过编程方式打开和关闭子菜单,不能再指定其他触发方式",
|
||
"value": {
|
||
"type": [
|
||
"'click'",
|
||
"'hover'",
|
||
"'focus'",
|
||
"'manual'",
|
||
"string"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenu-trigger"
|
||
},
|
||
{
|
||
"name": "submenu-open-delay",
|
||
"description": "鼠标悬浮触发子菜单打开的延时,单位毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenu-open-delay"
|
||
},
|
||
{
|
||
"name": "submenu-close-delay",
|
||
"description": "鼠标悬浮触发子菜单关闭的延时,单位毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenu-close-delay"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "子菜单项(`<mdui-menu-item>`)、分割线([`<mdui-divider>`](https://www.mdui.org/zh-cn/docs/2/components/divider))等元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "selects",
|
||
"description": "菜单项的可选状态。默认不可选。可选值包括:\n\n* `single`:单选\n* `multiple`:多选",
|
||
"value": {
|
||
"type": [
|
||
"'single'",
|
||
"'multiple'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-selects"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前选中的 `<mdui-menu-item>` 的值。\n\n**Note**:该属性的 HTML 属性始终为字符串,仅在 `selects=\"single\"` 时可通过 HTML 属性设置初始值;该属性的 JavaScript 属性值在 `selects=\"single\"` 时为字符串,在 `selects=\"multiple\"` 时为字符串数组。因此,在 `selects=\"multiple\"` 时,若要修改该值,只能通过修改 JavaScript 属性值实现。",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-value"
|
||
},
|
||
{
|
||
"name": "dense",
|
||
"description": "菜单项是否使用紧凑布局",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-dense"
|
||
},
|
||
{
|
||
"name": "submenuTrigger",
|
||
"description": "子菜单的触发方式,支持多个值,用空格分隔。可选值包括:\n\n* `click`:点击菜单项时打开子菜单\n* `hover`:鼠标悬浮到菜单项上时打开子菜单\n* `focus`:聚焦到菜单项上时打开子菜单\n* `manual`:仅能通过编程方式打开和关闭子菜单,不能再指定其他触发方式",
|
||
"value": {
|
||
"type": [
|
||
"'click'",
|
||
"'hover'",
|
||
"'focus'",
|
||
"'manual'",
|
||
"string"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenuTrigger"
|
||
},
|
||
{
|
||
"name": "submenuOpenDelay",
|
||
"description": "鼠标悬浮触发子菜单打开的延时,单位毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenuOpenDelay"
|
||
},
|
||
{
|
||
"name": "submenuCloseDelay",
|
||
"description": "鼠标悬浮触发子菜单关闭的延时,单位毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-attributes-submenuCloseDelay"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "change",
|
||
"description": "菜单项选中状态变化时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-events-change"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/menu#menu-cssProperties-shape-corner"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-navigation-bar-item",
|
||
"description": "底部导航栏项组件。需配合 `<mdui-navigation-bar>` 组件使用\n\n```html\n<mdui-navigation-bar>\n <mdui-navigation-bar-item icon=\"place\">Item 1</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"commute\">Item 2</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"people\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "icon",
|
||
"description": "未激活状态的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-icon"
|
||
},
|
||
{
|
||
"name": "active-icon",
|
||
"description": "激活状态的 Material Icons 图标名。也可以通过 `slot=\"active-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-active-icon"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "导航项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-value"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "导航项文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-slots-default"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-slots-icon"
|
||
},
|
||
{
|
||
"name": "active-icon",
|
||
"description": "激活状态的图标元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-slots-active-icon"
|
||
},
|
||
{
|
||
"name": "badge",
|
||
"description": "徽标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-slots-badge"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "icon",
|
||
"description": "未激活状态的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-icon"
|
||
},
|
||
{
|
||
"name": "activeIcon",
|
||
"description": "激活状态的 Material Icons 图标名。也可以通过 `slot=\"active-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-activeIcon"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "导航项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-value"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-events-blur"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner-indicator",
|
||
"description": "指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssProperties-shape-corner-indicator"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "container",
|
||
"description": "导航项容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-container"
|
||
},
|
||
{
|
||
"name": "indicator",
|
||
"description": "指示器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-indicator"
|
||
},
|
||
{
|
||
"name": "badge",
|
||
"description": "徽标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-badge"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-icon"
|
||
},
|
||
{
|
||
"name": "active-icon",
|
||
"description": "激活状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-active-icon"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "导航项文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-item-cssParts-label"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-navigation-bar",
|
||
"description": "底部导航栏组件。需配合 `<mdui-navigation-bar-item>` 组件使用\n\n```html\n<mdui-navigation-bar>\n <mdui-navigation-bar-item icon=\"place\">Item 1</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"commute\">Item 2</mdui-navigation-bar-item>\n <mdui-navigation-bar-item icon=\"people\">Item 3</mdui-navigation-bar-item>\n</mdui-navigation-bar>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "hide",
|
||
"description": "是否隐藏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-hide"
|
||
},
|
||
{
|
||
"name": "label-visibility",
|
||
"description": "文本的可视状态。可选值包括:\n\n* `auto`:当选项小于等于3个时,始终显示文本;当选项大于3个时,仅显示选中状态的文本\n* `selected`:仅在选中状态显示文本\n* `labeled`:始终显示文本\n* `unlabeled`:始终不显示文本",
|
||
"value": {
|
||
"type": [
|
||
"'auto'",
|
||
"'selected'",
|
||
"'labeled'",
|
||
"'unlabeled'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-label-visibility"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前选中的 `<mdui-navigation-bar-item>` 的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-value"
|
||
},
|
||
{
|
||
"name": "scroll-behavior",
|
||
"description": "滚动行为。可选值包括:\n\n* `hide`:滚动时隐藏",
|
||
"value": {
|
||
"type": [
|
||
"'hide'",
|
||
"'shrink'",
|
||
"'elevate'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-behavior"
|
||
},
|
||
{
|
||
"name": "scroll-target",
|
||
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"HTMLElement",
|
||
"JQ<HTMLElement>"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-target"
|
||
},
|
||
{
|
||
"name": "scroll-threshold",
|
||
"description": "在滚动多少距离之后触发滚动行为,单位为 `px`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scroll-threshold"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-order"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "`<mdui-navigation-bar-item>` 组件",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "hide",
|
||
"description": "是否隐藏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-hide"
|
||
},
|
||
{
|
||
"name": "labelVisibility",
|
||
"description": "文本的可视状态。可选值包括:\n\n* `auto`:当选项小于等于3个时,始终显示文本;当选项大于3个时,仅显示选中状态的文本\n* `selected`:仅在选中状态显示文本\n* `labeled`:始终显示文本\n* `unlabeled`:始终不显示文本",
|
||
"value": {
|
||
"type": [
|
||
"'auto'",
|
||
"'selected'",
|
||
"'labeled'",
|
||
"'unlabeled'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-labelVisibility"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前选中的 `<mdui-navigation-bar-item>` 的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-value"
|
||
},
|
||
{
|
||
"name": "scrollBehavior",
|
||
"description": "滚动行为。可选值包括:\n\n* `hide`:滚动时隐藏",
|
||
"value": {
|
||
"type": [
|
||
"'hide'",
|
||
"'shrink'",
|
||
"'elevate'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scrollBehavior"
|
||
},
|
||
{
|
||
"name": "scrollTarget",
|
||
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"HTMLElement",
|
||
"JQ<HTMLElement>"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scrollTarget"
|
||
},
|
||
{
|
||
"name": "scrollThreshold",
|
||
"description": "在滚动多少距离之后触发滚动行为,单位为 `px`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-scrollThreshold"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-attributes-order"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "change",
|
||
"description": "值变化时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-change"
|
||
},
|
||
{
|
||
"name": "show",
|
||
"description": "开始显示时,事件被触发。可以通过调用 `event.preventDefault()` 阻止显示",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-show"
|
||
},
|
||
{
|
||
"name": "shown",
|
||
"description": "显示动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-shown"
|
||
},
|
||
{
|
||
"name": "hide",
|
||
"description": "开始隐藏时,事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-hide"
|
||
},
|
||
{
|
||
"name": "hidden",
|
||
"description": "隐藏动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-events-hidden"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-cssProperties-shape-corner"
|
||
},
|
||
{
|
||
"name": "--z-index",
|
||
"description": "组件的 CSS `z-index` 值",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-bar#navigation-bar-cssProperties-z-index"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-navigation-drawer",
|
||
"description": "侧边抽屉栏组件\n\n```html\n<mdui-navigation-drawer>content</mdui-navigation-drawer>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "open",
|
||
"description": "是否打开抽屉栏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-open"
|
||
},
|
||
{
|
||
"name": "modal",
|
||
"description": "抽屉栏打开时,是否显示遮罩层\n\n在窄屏设备上(屏幕宽度小于 [`--mdui-breakpoint-md`](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint)),会始终显示遮罩层,无视该参数",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-modal"
|
||
},
|
||
{
|
||
"name": "close-on-esc",
|
||
"description": "在有遮罩层的情况下,按下 ESC 键是否关闭抽屉栏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-close-on-esc"
|
||
},
|
||
{
|
||
"name": "close-on-overlay-click",
|
||
"description": "点击遮罩层时,是否关闭抽屉栏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-close-on-overlay-click"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "抽屉栏的位置。可选值包括:\n\n* `left`:左侧\n* `right`:右侧",
|
||
"value": {
|
||
"type": [
|
||
"'left'",
|
||
"'right'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-placement"
|
||
},
|
||
{
|
||
"name": "contained",
|
||
"description": "默认情况下,抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时,抽屉栏将相对于其父元素显示。\n\n**Note**:设置该属性时,必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-contained"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-order"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "抽屉栏中的内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "open",
|
||
"description": "是否打开抽屉栏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-open"
|
||
},
|
||
{
|
||
"name": "modal",
|
||
"description": "抽屉栏打开时,是否显示遮罩层\n\n在窄屏设备上(屏幕宽度小于 [`--mdui-breakpoint-md`](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint)),会始终显示遮罩层,无视该参数",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-modal"
|
||
},
|
||
{
|
||
"name": "closeOnEsc",
|
||
"description": "在有遮罩层的情况下,按下 ESC 键是否关闭抽屉栏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-closeOnEsc"
|
||
},
|
||
{
|
||
"name": "closeOnOverlayClick",
|
||
"description": "点击遮罩层时,是否关闭抽屉栏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-closeOnOverlayClick"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "抽屉栏的位置。可选值包括:\n\n* `left`:左侧\n* `right`:右侧",
|
||
"value": {
|
||
"type": [
|
||
"'left'",
|
||
"'right'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-placement"
|
||
},
|
||
{
|
||
"name": "contained",
|
||
"description": "默认情况下,抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时,抽屉栏将相对于其父元素显示。\n\n**Note**:设置该属性时,必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-contained"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#attributes-order"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "open",
|
||
"description": "抽屉栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏打开",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-open"
|
||
},
|
||
{
|
||
"name": "opened",
|
||
"description": "抽屉栏打开动画完成之后触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-opened"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"description": "抽屉栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏关闭",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-close"
|
||
},
|
||
{
|
||
"name": "closed",
|
||
"description": "抽屉栏关闭动画完成之后触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-closed"
|
||
},
|
||
{
|
||
"name": "overlay-click",
|
||
"description": "点击遮罩层时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#events-overlay-click"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#cssProperties-shape-corner"
|
||
},
|
||
{
|
||
"name": "--z-index",
|
||
"description": "组件的 CSS `z-index` 值",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#cssProperties-z-index"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "overlay",
|
||
"description": "遮罩层",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#cssParts-overlay"
|
||
},
|
||
{
|
||
"name": "panel",
|
||
"description": "抽屉栏容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-drawer#cssParts-panel"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-navigation-rail-item",
|
||
"description": "侧边导航项组件。需配合 `<mdui-navigation-rail>` 组件使用\n\n```html\n<mdui-navigation-rail>\n <mdui-navigation-rail-item icon=\"watch_later\">Recent</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"image\">Images</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"library_music\">Library</mdui-navigation-rail-item>\n</mdui-navigation-rail>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "icon",
|
||
"description": "未激活状态下的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-icon"
|
||
},
|
||
{
|
||
"name": "active-icon",
|
||
"description": "激活状态下的 Material Icons 图标名。也可以通过 `slot=\"active-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-active-icon"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "导航项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-value"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "文本内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-slots-default"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-slots-icon"
|
||
},
|
||
{
|
||
"name": "active-icon",
|
||
"description": "激活状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-slots-active-icon"
|
||
},
|
||
{
|
||
"name": "badge",
|
||
"description": "徽标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-slots-badge"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "icon",
|
||
"description": "未激活状态下的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-icon"
|
||
},
|
||
{
|
||
"name": "activeIcon",
|
||
"description": "激活状态下的 Material Icons 图标名。也可以通过 `slot=\"active-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-activeIcon"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "导航项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-value"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-events-blur"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner-indicator",
|
||
"description": "指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssProperties-shape-corner-indicator"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "container",
|
||
"description": "导航项容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-container"
|
||
},
|
||
{
|
||
"name": "indicator",
|
||
"description": "指示器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-indicator"
|
||
},
|
||
{
|
||
"name": "badge",
|
||
"description": "徽标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-badge"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-icon"
|
||
},
|
||
{
|
||
"name": "active-icon",
|
||
"description": "激活状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-active-icon"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "文本内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-item-cssParts-label"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-navigation-rail",
|
||
"description": "侧边导航栏组件。需配合 `<mdui-navigation-rail-item>` 组件使用\n\n```html\n<mdui-navigation-rail>\n <mdui-navigation-rail-item icon=\"watch_later\">Recent</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"image\">Images</mdui-navigation-rail-item>\n <mdui-navigation-rail-item icon=\"library_music\">Library</mdui-navigation-rail-item>\n</mdui-navigation-rail>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "value",
|
||
"description": "当前选中的 `<mdui-navigation-rail-item>` 的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-value"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "导航栏的位置。可选值包括:\n\n* `left`:左侧\n* `right`:右侧",
|
||
"value": {
|
||
"type": [
|
||
"'left'",
|
||
"'right'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-placement"
|
||
},
|
||
{
|
||
"name": "alignment",
|
||
"description": "`<mdui-navigation-rail-item>` 元素的对齐方式。可选值包括:\n\n* `start`:顶部对齐\n* `center`:居中对齐\n* `end`:底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'start'",
|
||
"'center'",
|
||
"'end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-alignment"
|
||
},
|
||
{
|
||
"name": "contained",
|
||
"description": "默认情况下,导航栏相对于 `body` 元素显示。当该参数设置为 `true` 时,导航栏将相对于其父元素显示。\n\n**Note**:设置该属性时,必须在父元素上手动设置样式 `position: relative;`。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-contained"
|
||
},
|
||
{
|
||
"name": "divider",
|
||
"description": "是否在导航栏和页面内容之间添加分割线",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-divider"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-order"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "`<mdui-navigation-rail-item>` 组件",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-slots-default"
|
||
},
|
||
{
|
||
"name": "top",
|
||
"description": "顶部的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-slots-top"
|
||
},
|
||
{
|
||
"name": "bottom",
|
||
"description": "底部的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-slots-bottom"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "value",
|
||
"description": "当前选中的 `<mdui-navigation-rail-item>` 的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-value"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "导航栏的位置。可选值包括:\n\n* `left`:左侧\n* `right`:右侧",
|
||
"value": {
|
||
"type": [
|
||
"'left'",
|
||
"'right'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-placement"
|
||
},
|
||
{
|
||
"name": "alignment",
|
||
"description": "`<mdui-navigation-rail-item>` 元素的对齐方式。可选值包括:\n\n* `start`:顶部对齐\n* `center`:居中对齐\n* `end`:底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'start'",
|
||
"'center'",
|
||
"'end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-alignment"
|
||
},
|
||
{
|
||
"name": "contained",
|
||
"description": "默认情况下,导航栏相对于 `body` 元素显示。当该参数设置为 `true` 时,导航栏将相对于其父元素显示。\n\n**Note**:设置该属性时,必须在父元素上手动设置样式 `position: relative;`。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-contained"
|
||
},
|
||
{
|
||
"name": "divider",
|
||
"description": "是否在导航栏和页面内容之间添加分割线",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-divider"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-attributes-order"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "change",
|
||
"description": "值变化时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-events-change"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssProperties-shape-corner"
|
||
},
|
||
{
|
||
"name": "--z-index",
|
||
"description": "组件的 CSS `z-index` 值",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssProperties-z-index"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "top",
|
||
"description": "顶部元素的容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssParts-top"
|
||
},
|
||
{
|
||
"name": "bottom",
|
||
"description": "底部元素的容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssParts-bottom"
|
||
},
|
||
{
|
||
"name": "items",
|
||
"description": "`<mdui-navigation-rail-item>` 组件的容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/navigation-rail#navigation-rail-cssParts-items"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-radio-group",
|
||
"description": "单选框组组件。需配合 `<mdui-radio>` 组件使用\n\n```html\n<mdui-radio-group value=\"chinese\">\n <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用此组件",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "单选框组的名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "单选框组的名称,将于表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-value"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须选中其中一个单选框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-required"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "`<mdui-radio>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用此组件",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "单选框组的名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "单选框组的名称,将于表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-value"
|
||
},
|
||
{
|
||
"name": "defaultValue",
|
||
"description": "默认选中的值。在重置表单时,将重置为该默认值。该属性只能通过 JavaScript 属性设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-defaultValue"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须选中其中一个单选框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-required"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-attributes-validationMessage"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "change",
|
||
"description": "选中值变化时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-events-change"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"description": "选中值变化时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-events-input"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-group-events-invalid"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-radio",
|
||
"description": "单选框组件。需配合 `<mdui-radio-group>` 组件使用\n\n```html\n<mdui-radio-group value=\"chinese\">\n <mdui-radio value=\"chinese\">Chinese</mdui-radio>\n <mdui-radio value=\"english\">English</mdui-radio>\n</mdui-radio-group>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "value",
|
||
"description": "当前单选项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-value"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用当前单选项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "checked",
|
||
"description": "当前单选项是否已选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-checked"
|
||
},
|
||
{
|
||
"name": "unchecked-icon",
|
||
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-unchecked-icon"
|
||
},
|
||
{
|
||
"name": "checked-icon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-checked-icon"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "文本内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-slots-default"
|
||
},
|
||
{
|
||
"name": "unchecked-icon",
|
||
"description": "未选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-slots-unchecked-icon"
|
||
},
|
||
{
|
||
"name": "checked-icon",
|
||
"description": "选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-slots-checked-icon"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "value",
|
||
"description": "当前单选项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-value"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用当前单选项",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "checked",
|
||
"description": "当前单选项是否已选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-checked"
|
||
},
|
||
{
|
||
"name": "uncheckedIcon",
|
||
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-uncheckedIcon"
|
||
},
|
||
{
|
||
"name": "checkedIcon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-checkedIcon"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-events-blur"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"description": "选中该单选项时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-events-change"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "control",
|
||
"description": "左侧图标容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-cssParts-control"
|
||
},
|
||
{
|
||
"name": "unchecked-icon",
|
||
"description": "未选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-cssParts-unchecked-icon"
|
||
},
|
||
{
|
||
"name": "checked-icon",
|
||
"description": "选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-cssParts-checked-icon"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "文本内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/radio#radio-cssParts-label"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-range-slider",
|
||
"description": "范围滑块组件\n\n```html\n<mdui-range-slider></mdui-range-slider>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-tabindex"
|
||
},
|
||
{
|
||
"name": "min",
|
||
"description": "滑块的最小值,默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-min"
|
||
},
|
||
{
|
||
"name": "max",
|
||
"description": "滑块的最大值,默认为 `100`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-max"
|
||
},
|
||
{
|
||
"name": "step",
|
||
"description": "步进间隔,默认为 `1`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-step"
|
||
},
|
||
{
|
||
"name": "tickmarks",
|
||
"description": "是否添加刻度标记",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-tickmarks"
|
||
},
|
||
{
|
||
"name": "nolabel",
|
||
"description": "是否隐藏文本提示",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-nolabel"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否被禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "滑块的名称,该名称将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-name"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider",
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "defaultValue",
|
||
"description": "默认值。在重置表单时,将重置为该默认值。此属性只能通过 JavaScript 属性设置",
|
||
"value": {
|
||
"type": "number[]"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-defaultValue"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "滑块的值,为数组格式,将于表单数据一起提交。\n\n**NOTE**:该属性无法通过 HTML 属性设置初始值,如果要修改该值,只能通过修改 JavaScript 属性值实现。",
|
||
"value": {
|
||
"type": "number[]"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-value"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-tabIndex"
|
||
},
|
||
{
|
||
"name": "min",
|
||
"description": "滑块的最小值,默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-min"
|
||
},
|
||
{
|
||
"name": "max",
|
||
"description": "滑块的最大值,默认为 `100`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-max"
|
||
},
|
||
{
|
||
"name": "step",
|
||
"description": "步进间隔,默认为 `1`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-step"
|
||
},
|
||
{
|
||
"name": "tickmarks",
|
||
"description": "是否添加刻度标记",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-tickmarks"
|
||
},
|
||
{
|
||
"name": "nolabel",
|
||
"description": "是否隐藏文本提示",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-nolabel"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否被禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "滑块的名称,该名称将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-name"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-validationMessage"
|
||
},
|
||
{
|
||
"name": "labelFormatter",
|
||
"description": "用于自定义标签的显示格式的函数。函数参数为滑块的当前值,返回值为期望显示的文本。",
|
||
"value": {
|
||
"type": "(value: number) => string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#attributes-labelFormatter"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-blur"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"description": "值发生变更,且失去焦点时,将触发该事件",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-change"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"description": "值变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-input"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#events-invalid"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "track-inactive",
|
||
"description": "未激活状态的轨道",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-track-inactive"
|
||
},
|
||
{
|
||
"name": "track-active",
|
||
"description": "已激活状态的轨道",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-track-active"
|
||
},
|
||
{
|
||
"name": "handle",
|
||
"description": "操作杆",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-handle"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "提示文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-label"
|
||
},
|
||
{
|
||
"name": "tickmark",
|
||
"description": "刻度标记",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/range-slider#cssParts-tickmark"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-segmented-button-group",
|
||
"description": "分段按钮组件。需配合 `<mdui-segmented-button>` 组件使用\n\n```html\n<mdui-segmented-button-group>\n <mdui-segmented-button>Day</mdui-segmented-button>\n <mdui-segmented-button>Week</mdui-segmented-button>\n <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "full-width",
|
||
"description": "是否填满父元素宽度",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-full-width"
|
||
},
|
||
{
|
||
"name": "selects",
|
||
"description": "分段按钮的可选中状态,默认为不可选中。可选值包括:\n\n* `single`:单选\n* `multiple`:多选",
|
||
"value": {
|
||
"type": [
|
||
"'single'",
|
||
"'multiple'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-selects"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否为禁用状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-required"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "提交表单时的名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前选中的 `<mdui-segmented-button>` 的值。\n\n**Note**:该属性的 HTML 属性始终为字符串,且仅在 `selects=\"single\"` 时可以通过 HTML 属性设置初始值。该属性的 JavaScript 属性值在 `selects=\"single\"` 时为字符串,在 `selects=\"multiple\"` 时为字符串数组。所以,在 `selects=\"multiple\"` 时,如果要修改该值,只能通过修改 JavaScript 属性值实现。",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-value"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "`<mdui-segmented-button>` 组件",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "fullWidth",
|
||
"description": "是否填满父元素宽度",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-fullWidth"
|
||
},
|
||
{
|
||
"name": "selects",
|
||
"description": "分段按钮的可选中状态,默认为不可选中。可选值包括:\n\n* `single`:单选\n* `multiple`:多选",
|
||
"value": {
|
||
"type": [
|
||
"'single'",
|
||
"'multiple'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-selects"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否为禁用状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须选中",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-required"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "提交表单时的名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前选中的 `<mdui-segmented-button>` 的值。\n\n**Note**:该属性的 HTML 属性始终为字符串,且仅在 `selects=\"single\"` 时可以通过 HTML 属性设置初始值。该属性的 JavaScript 属性值在 `selects=\"single\"` 时为字符串,在 `selects=\"multiple\"` 时为字符串数组。所以,在 `selects=\"multiple\"` 时,如果要修改该值,只能通过修改 JavaScript 属性值实现。",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-value"
|
||
},
|
||
{
|
||
"name": "defaultValue",
|
||
"description": "默认选中的值。在重置表单时,将重置为该默认值。该属性只能通过 JavaScript 属性设置",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-defaultValue"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-attributes-validationMessage"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "change",
|
||
"description": "选中的值变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-events-change"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-events-invalid"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-group-cssProperties-shape-corner"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-segmented-button",
|
||
"description": "分段按钮项组件。需配合 `<mdui-segmented-button-group>` 组件使用\n\n```html\n<mdui-segmented-button-group>\n <mdui-segmented-button>Day</mdui-segmented-button>\n <mdui-segmented-button>Week</mdui-segmented-button>\n <mdui-segmented-button>Month</mdui-segmented-button>\n</mdui-segmented-button-group>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-end-icon"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-selected-icon"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-tabindex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-form"
|
||
},
|
||
{
|
||
"name": "formaction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formaction"
|
||
},
|
||
{
|
||
"name": "formenctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formenctype"
|
||
},
|
||
{
|
||
"name": "formmethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formmethod"
|
||
},
|
||
{
|
||
"name": "formnovalidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formnovalidate"
|
||
},
|
||
{
|
||
"name": "formtarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formtarget"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "分段按钮项的文本内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-slots-default"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "分段按钮项的左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-slots-icon"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态的左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-slots-selected-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "分段按钮项的右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-slots-end-icon"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-icon"
|
||
},
|
||
{
|
||
"name": "endIcon",
|
||
"description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-endIcon"
|
||
},
|
||
{
|
||
"name": "selectedIcon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-selectedIcon"
|
||
},
|
||
{
|
||
"name": "href",
|
||
"description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-href"
|
||
},
|
||
{
|
||
"name": "download",
|
||
"description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-download"
|
||
},
|
||
{
|
||
"name": "target",
|
||
"description": "链接的打开方式。可选值包括:\n\n* `_blank`:在新窗口中打开链接\n* `_parent`:在父框架中打开链接\n* `_self`:默认。在当前框架中打开链接\n* `_top`:在整个窗口中打开链接\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_self'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-target"
|
||
},
|
||
{
|
||
"name": "rel",
|
||
"description": "当前文档与被链接文档之间的关系。可选值包括:\n\n* `alternate`:当前文档的替代版本\n* `author`:当前文档或文章的作者\n* `bookmark`:永久链接到最近的祖先章节\n* `external`:引用的文档与当前文档不在同一站点\n* `help`:链接到相关的帮助文档\n* `license`:当前文档的主要内容由被引用文件的版权许可覆盖\n* `me`:当前文档代表链接内容的所有者\n* `next`:当前文档是系列中的一部分,被引用的文档是系列的下一个文档\n* `nofollow`:当前文档的作者或发布者不认可被引用的文件\n* `noreferrer`:不包含 `Referer` 头。类似于 `noopener` 的效果\n* `opener`:如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文\n* `prev`:当前文档是系列的一部分,被引用的文档是系列的上一个文档\n* `search`:提供一个资源链接,可用于搜索当前文件及其相关页面\n* `tag`:提供一个适用于当前文档的标签(由给定地址识别)\n\n**Note**:仅在指定了 `href` 属性时可用。",
|
||
"value": {
|
||
"type": [
|
||
"'alternate'",
|
||
"'author'",
|
||
"'bookmark'",
|
||
"'external'",
|
||
"'help'",
|
||
"'license'",
|
||
"'me'",
|
||
"'next'",
|
||
"'nofollow'",
|
||
"'noreferrer'",
|
||
"'opener'",
|
||
"'prev'",
|
||
"'search'",
|
||
"'tag'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-rel"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-tabIndex"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-disabled"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-loading"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-value"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "按钮的类型。默认类型为 `button`。可选类型包括:\n\n* `submit`:点击按钮会提交表单数据到服务器\n* `reset`:点击按钮会将表单中的所有字段重置为初始值\n* `button`:此类型的按钮没有默认行为\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'submit'",
|
||
"'reset'",
|
||
"'button'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-type"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。\n\n**Note**:仅在未指定 `href` 属性时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-form"
|
||
},
|
||
{
|
||
"name": "formAction",
|
||
"description": "指定提交表单的 URL。\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `action` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formAction"
|
||
},
|
||
{
|
||
"name": "formEnctype",
|
||
"description": "指定提交表单到服务器的内容类型。可选值包括:\n\n* `application/x-www-form-urlencoded`:未指定该属性时的默认值\n* `multipart/form-data`:当表单包含 `<input type=\"file\">` 元素时使用\n* `text/plain`:HTML5 新增,用于调试\n\n如果指定了此属性,将覆盖 `<form>` 元素的 `enctype` 属性。\n\n**Note**:仅在未指定 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'application/x-www-form-urlencoded'",
|
||
"'multipart/form-data'",
|
||
"'text/plain'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formEnctype"
|
||
},
|
||
{
|
||
"name": "formMethod",
|
||
"description": "指定提交表单时使用的 HTTP 方法。可选值包括:\n\n* `post`:表单数据包含在表单内容中,发送到服务器\n* `get`:表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `method` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'post'",
|
||
"'get'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formMethod"
|
||
},
|
||
{
|
||
"name": "formNoValidate",
|
||
"description": "如果设置了此属性,表单提交时将不执行表单验证。\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `novalidate` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formNoValidate"
|
||
},
|
||
{
|
||
"name": "formTarget",
|
||
"description": "提交表单后接收到的响应应显示在何处。可选值包括:\n\n* `_self`:默认选项,在当前框架中打开\n* `_blank`:在新窗口中打开\n* `_parent`:在父框架中打开\n* `_top`:在整个窗口中打开\n\n如果设置了此属性,将覆盖 `<form>` 元素的 `target` 属性。\n\n**Note**:仅在未设置 `href` 属性且 `type=\"submit\"` 时,此属性才有效。",
|
||
"value": {
|
||
"type": [
|
||
"'_self'",
|
||
"'_blank'",
|
||
"'_parent'",
|
||
"'_top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-formTarget"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-attributes-validationMessage"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-events-blur"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-events-invalid"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "button",
|
||
"description": "内部的 `<button>` 或 `<a>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-button"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-icon"
|
||
},
|
||
{
|
||
"name": "selected-icon",
|
||
"description": "选中状态的左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-selected-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-end-icon"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "文本内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-label"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"description": "加载中状态的 `<mdui-circular-progress>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/segmented-button#segmented-button-cssParts-loading"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-select",
|
||
"description": "选择框组件。需配合 `<mdui-menu-item>` 组件使用\n\n```html\n<mdui-select>\n <mdui-menu-item value=\"item-1\">Item 1</mdui-menu-item>\n <mdui-menu-item value=\"item-2\">Item 2</mdui-menu-item>\n</mdui-select>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "选择框的样式。可选值包括:\n\n* `filled`:带背景色的选择框,视觉效果较强\n* `outlined`:带边框的选择框,视觉效果较弱",
|
||
"value": {
|
||
"type": [
|
||
"'filled'",
|
||
"'outlined'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-variant"
|
||
},
|
||
{
|
||
"name": "multiple",
|
||
"description": "是否支持多选",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-multiple"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "选择框的名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "选择框的值,将与表单数据一起提交。\n\n如果未指定 `multiple` 属性,该值为字符串;如果指定了 `multiple` 属性,该值为字符串数组。HTML 属性只能设置字符串值;如果需要设置数组值,请通过 JavaScript 属性设置。",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-value"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "标签文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-label"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"description": "占位符文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-placeholder"
|
||
},
|
||
{
|
||
"name": "helper",
|
||
"description": "选择框底部的帮助文本。也可以通过 `slot=\"helper\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-helper"
|
||
},
|
||
{
|
||
"name": "clearable",
|
||
"description": "是否可以清空选择框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-clearable"
|
||
},
|
||
{
|
||
"name": "clear-icon",
|
||
"description": "当选择框可清空时,显示在选择框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot=\"clear-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-clear-icon"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "选择框的位置。可选值包括:\n\n* `auto`:自动判断位置\n* `bottom`:位于下方\n* `top`:位于上方",
|
||
"value": {
|
||
"type": [
|
||
"'auto'",
|
||
"'bottom'",
|
||
"'top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-placement"
|
||
},
|
||
{
|
||
"name": "end-aligned",
|
||
"description": "文本是否右对齐",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-end-aligned"
|
||
},
|
||
{
|
||
"name": "prefix",
|
||
"description": "选择框的前缀文本。仅在聚焦状态,或选择框有值时才会显示。也可以通过 `slot=\"prefix\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-prefix"
|
||
},
|
||
{
|
||
"name": "suffix",
|
||
"description": "选择框的后缀文本。仅在聚焦状态,或选择框有值时才会显示。也可以通过 `slot=\"suffix\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-suffix"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "选择框的前缀图标的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "选择框的后缀图标的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-end-icon"
|
||
},
|
||
{
|
||
"name": "error-icon",
|
||
"description": "表单字段验证失败时,显示在选择框右侧的 Material Icons 图标名。也可以通过 `slot=\"error-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-error-icon"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-form"
|
||
},
|
||
{
|
||
"name": "readonly",
|
||
"description": "是否为只读状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-readonly"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否为禁用状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须填写该字段",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-required"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "`<mdui-menu-item>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-default"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-end-icon"
|
||
},
|
||
{
|
||
"name": "error-icon",
|
||
"description": "验证失败状态的右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-error-icon"
|
||
},
|
||
{
|
||
"name": "prefix",
|
||
"description": "左侧文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-prefix"
|
||
},
|
||
{
|
||
"name": "suffix",
|
||
"description": "右侧文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-suffix"
|
||
},
|
||
{
|
||
"name": "clear-button",
|
||
"description": "清空按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-clear-button"
|
||
},
|
||
{
|
||
"name": "clear-icon",
|
||
"description": "清空按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-clear-icon"
|
||
},
|
||
{
|
||
"name": "helper",
|
||
"description": "底部的帮助文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#slots-helper"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "选择框的样式。可选值包括:\n\n* `filled`:带背景色的选择框,视觉效果较强\n* `outlined`:带边框的选择框,视觉效果较弱",
|
||
"value": {
|
||
"type": [
|
||
"'filled'",
|
||
"'outlined'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-variant"
|
||
},
|
||
{
|
||
"name": "multiple",
|
||
"description": "是否支持多选",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-multiple"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "选择框的名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "选择框的值,将与表单数据一起提交。\n\n如果未指定 `multiple` 属性,该值为字符串;如果指定了 `multiple` 属性,该值为字符串数组。HTML 属性只能设置字符串值;如果需要设置数组值,请通过 JavaScript 属性设置。",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-value"
|
||
},
|
||
{
|
||
"name": "defaultValue",
|
||
"description": "默认选中的值。在重置表单时,将重置为该默认值。该属性只能通过 JavaScript 属性设置",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"string[]"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-defaultValue"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "标签文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-label"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"description": "占位符文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-placeholder"
|
||
},
|
||
{
|
||
"name": "helper",
|
||
"description": "选择框底部的帮助文本。也可以通过 `slot=\"helper\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-helper"
|
||
},
|
||
{
|
||
"name": "clearable",
|
||
"description": "是否可以清空选择框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-clearable"
|
||
},
|
||
{
|
||
"name": "clearIcon",
|
||
"description": "当选择框可清空时,显示在选择框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot=\"clear-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-clearIcon"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "选择框的位置。可选值包括:\n\n* `auto`:自动判断位置\n* `bottom`:位于下方\n* `top`:位于上方",
|
||
"value": {
|
||
"type": [
|
||
"'auto'",
|
||
"'bottom'",
|
||
"'top'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-placement"
|
||
},
|
||
{
|
||
"name": "endAligned",
|
||
"description": "文本是否右对齐",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-endAligned"
|
||
},
|
||
{
|
||
"name": "prefix",
|
||
"description": "选择框的前缀文本。仅在聚焦状态,或选择框有值时才会显示。也可以通过 `slot=\"prefix\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-prefix"
|
||
},
|
||
{
|
||
"name": "suffix",
|
||
"description": "选择框的后缀文本。仅在聚焦状态,或选择框有值时才会显示。也可以通过 `slot=\"suffix\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-suffix"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "选择框的前缀图标的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-icon"
|
||
},
|
||
{
|
||
"name": "endIcon",
|
||
"description": "选择框的后缀图标的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-endIcon"
|
||
},
|
||
{
|
||
"name": "errorIcon",
|
||
"description": "表单字段验证失败时,显示在选择框右侧的 Material Icons 图标名。也可以通过 `slot=\"error-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-errorIcon"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-form"
|
||
},
|
||
{
|
||
"name": "readonly",
|
||
"description": "是否为只读状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-readonly"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否为禁用状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须填写该字段",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-required"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-validationMessage"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-blur"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"description": "选中的值变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-change"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-invalid"
|
||
},
|
||
{
|
||
"name": "clear",
|
||
"description": "在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()` 阻止清空选择框",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#events-clear"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "chips",
|
||
"description": "多选时,放置选中值对应的 chip 的容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chips"
|
||
},
|
||
{
|
||
"name": "chip",
|
||
"description": "多选时,每一个选中的值对应的 chip",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chip"
|
||
},
|
||
{
|
||
"name": "chip__button",
|
||
"description": "chip 内部的 `<button>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chip__button"
|
||
},
|
||
{
|
||
"name": "chip__label",
|
||
"description": "chip 内部的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chip__label"
|
||
},
|
||
{
|
||
"name": "chip__delete-icon",
|
||
"description": "chip 内部的删除图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-chip__delete-icon"
|
||
},
|
||
{
|
||
"name": "text-field",
|
||
"description": "文本框,即 [`<mdui-text-field>`](https://www.mdui.org/zh-cn/docs/2/components/text-field) 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field"
|
||
},
|
||
{
|
||
"name": "text-field__container",
|
||
"description": "text-field 内部的文本框容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__container"
|
||
},
|
||
{
|
||
"name": "text-field__icon",
|
||
"description": "text-field 内部的左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__icon"
|
||
},
|
||
{
|
||
"name": "text-field__end-icon",
|
||
"description": "text-field 内部的右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__end-icon"
|
||
},
|
||
{
|
||
"name": "text-field__error-icon",
|
||
"description": "text-field 内部的验证失败状态的右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__error-icon"
|
||
},
|
||
{
|
||
"name": "text-field__prefix",
|
||
"description": "text-field 内部的左侧文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__prefix"
|
||
},
|
||
{
|
||
"name": "text-field__suffix",
|
||
"description": "text-field 内部的右侧文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__suffix"
|
||
},
|
||
{
|
||
"name": "text-field__label",
|
||
"description": "text-field 内部的标签文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__label"
|
||
},
|
||
{
|
||
"name": "text-field__input",
|
||
"description": "text-field 内部的 `<input>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__input"
|
||
},
|
||
{
|
||
"name": "text-field__clear-button",
|
||
"description": "text-field 内部的清空按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__clear-button"
|
||
},
|
||
{
|
||
"name": "text-field__clear-icon",
|
||
"description": "text-field 内部的清空按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__clear-icon"
|
||
},
|
||
{
|
||
"name": "text-field__supporting",
|
||
"description": "text-field 内部的底部辅助信息容器,包括 helper 和 error",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__supporting"
|
||
},
|
||
{
|
||
"name": "text-field__helper",
|
||
"description": "text-field 内部的底部帮助文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__helper"
|
||
},
|
||
{
|
||
"name": "text-field__error",
|
||
"description": "text-field 内部的底部错误描述文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-text-field__error"
|
||
},
|
||
{
|
||
"name": "menu",
|
||
"description": "下拉菜单,即 [`<mdui-menu>`](https://www.mdui.org/zh-cn/docs/2/components/menu) 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/select#cssParts-menu"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-slider",
|
||
"description": "滑块组件\n\n```html\n<mdui-slider></mdui-slider>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "value",
|
||
"description": "滑块的值,将于表单数据一起提交",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-value"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-tabindex"
|
||
},
|
||
{
|
||
"name": "min",
|
||
"description": "滑块的最小值,默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-min"
|
||
},
|
||
{
|
||
"name": "max",
|
||
"description": "滑块的最大值,默认为 `100`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-max"
|
||
},
|
||
{
|
||
"name": "step",
|
||
"description": "步进间隔,默认为 `1`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-step"
|
||
},
|
||
{
|
||
"name": "tickmarks",
|
||
"description": "是否添加刻度标记",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-tickmarks"
|
||
},
|
||
{
|
||
"name": "nolabel",
|
||
"description": "是否隐藏文本提示",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-nolabel"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否被禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "滑块的名称,该名称将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-name"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider",
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "value",
|
||
"description": "滑块的值,将于表单数据一起提交",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-value"
|
||
},
|
||
{
|
||
"name": "defaultValue",
|
||
"description": "默认值。在重置表单时,将重置为该默认值。该属性只能通过 JavaScript 属性设置",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-defaultValue"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-tabIndex"
|
||
},
|
||
{
|
||
"name": "min",
|
||
"description": "滑块的最小值,默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-min"
|
||
},
|
||
{
|
||
"name": "max",
|
||
"description": "滑块的最大值,默认为 `100`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-max"
|
||
},
|
||
{
|
||
"name": "step",
|
||
"description": "步进间隔,默认为 `1`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-step"
|
||
},
|
||
{
|
||
"name": "tickmarks",
|
||
"description": "是否添加刻度标记",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-tickmarks"
|
||
},
|
||
{
|
||
"name": "nolabel",
|
||
"description": "是否隐藏文本提示",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-nolabel"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否被禁用",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "滑块的名称,该名称将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-name"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-validationMessage"
|
||
},
|
||
{
|
||
"name": "labelFormatter",
|
||
"description": "用于自定义标签的显示格式的函数。函数参数为滑块的当前值,返回值为期望显示的文本。",
|
||
"value": {
|
||
"type": "(value: number) => string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#attributes-labelFormatter"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-blur"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"description": "在值发生变更,且失去焦点时,将触发该事件",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-change"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"description": "值变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-input"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证未通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#events-invalid"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "track-inactive",
|
||
"description": "未激活状态的轨道",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-track-inactive"
|
||
},
|
||
{
|
||
"name": "track-active",
|
||
"description": "已激活状态的轨道",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-track-active"
|
||
},
|
||
{
|
||
"name": "handle",
|
||
"description": "操作杆",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-handle"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "提示文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-label"
|
||
},
|
||
{
|
||
"name": "tickmark",
|
||
"description": "刻度标记",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/slider#cssParts-tickmark"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-snackbar",
|
||
"description": "消息条组件\n\n```html\n<mdui-snackbar>message</mdui-snackbar>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "open",
|
||
"description": "是否显示 Snackbar",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-open"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "Snackbar 的显示位置。默认为 `bottom`。可选值包括:\n\n* `top`:顶部居中\n* `top-start`:顶部左对齐\n* `top-end`:顶部右对齐\n* `bottom`:底部居中\n* `bottom-start`:底部左对齐\n* `bottom-end`:底部右对齐",
|
||
"value": {
|
||
"type": [
|
||
"'top'",
|
||
"'top-start'",
|
||
"'top-end'",
|
||
"'bottom'",
|
||
"'bottom-start'",
|
||
"'bottom-end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-placement"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"description": "操作按钮的文本。也可以通过 `slot=\"action\"` 设置操作按钮",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-action"
|
||
},
|
||
{
|
||
"name": "action-loading",
|
||
"description": "操作按钮是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-action-loading"
|
||
},
|
||
{
|
||
"name": "closeable",
|
||
"description": "是否在右侧显示关闭按钮",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-closeable"
|
||
},
|
||
{
|
||
"name": "close-icon",
|
||
"description": "关闭按钮的 Material Icons 图标名。也可以通过 `slot=\"close-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-close-icon"
|
||
},
|
||
{
|
||
"name": "message-line",
|
||
"description": "消息文本的最大显示行数。默认不限制。可选值包括:\n\n* `1`:最多显示一行\n* `2`:最多显示两行",
|
||
"value": {
|
||
"type": [
|
||
"1",
|
||
"2"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-message-line"
|
||
},
|
||
{
|
||
"name": "auto-close-delay",
|
||
"description": "自动关闭的延迟时间(单位:毫秒)。设置为 `0` 则不自动关闭。默认为 5000 毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-auto-close-delay"
|
||
},
|
||
{
|
||
"name": "close-on-outside-click",
|
||
"description": "点击或触摸 Snackbar 以外的区域时,是否关闭 Snackbar",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-close-on-outside-click"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "Snackbar 的消息文本内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#slots-default"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"description": "右侧的操作按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#slots-action"
|
||
},
|
||
{
|
||
"name": "close-button",
|
||
"description": "右侧的关闭按钮。必须设置 `closeable` 属性为 `true` 才会显示",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#slots-close-button"
|
||
},
|
||
{
|
||
"name": "close-icon",
|
||
"description": "关闭按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#slots-close-icon"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "open",
|
||
"description": "是否显示 Snackbar",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-open"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "Snackbar 的显示位置。默认为 `bottom`。可选值包括:\n\n* `top`:顶部居中\n* `top-start`:顶部左对齐\n* `top-end`:顶部右对齐\n* `bottom`:底部居中\n* `bottom-start`:底部左对齐\n* `bottom-end`:底部右对齐",
|
||
"value": {
|
||
"type": [
|
||
"'top'",
|
||
"'top-start'",
|
||
"'top-end'",
|
||
"'bottom'",
|
||
"'bottom-start'",
|
||
"'bottom-end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-placement"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"description": "操作按钮的文本。也可以通过 `slot=\"action\"` 设置操作按钮",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-action"
|
||
},
|
||
{
|
||
"name": "actionLoading",
|
||
"description": "操作按钮是否处于加载中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-actionLoading"
|
||
},
|
||
{
|
||
"name": "closeable",
|
||
"description": "是否在右侧显示关闭按钮",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-closeable"
|
||
},
|
||
{
|
||
"name": "closeIcon",
|
||
"description": "关闭按钮的 Material Icons 图标名。也可以通过 `slot=\"close-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-closeIcon"
|
||
},
|
||
{
|
||
"name": "messageLine",
|
||
"description": "消息文本的最大显示行数。默认不限制。可选值包括:\n\n* `1`:最多显示一行\n* `2`:最多显示两行",
|
||
"value": {
|
||
"type": [
|
||
"1",
|
||
"2"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-messageLine"
|
||
},
|
||
{
|
||
"name": "autoCloseDelay",
|
||
"description": "自动关闭的延迟时间(单位:毫秒)。设置为 `0` 则不自动关闭。默认为 5000 毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-autoCloseDelay"
|
||
},
|
||
{
|
||
"name": "closeOnOutsideClick",
|
||
"description": "点击或触摸 Snackbar 以外的区域时,是否关闭 Snackbar",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#attributes-closeOnOutsideClick"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "open",
|
||
"description": "Snackbar 开始显示时,事件被触发。可以通过调用 `event.preventDefault()` 阻止 Snackbar 显示",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-open"
|
||
},
|
||
{
|
||
"name": "opened",
|
||
"description": "Snackbar 显示动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-opened"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"description": "Snackbar 开始隐藏时,事件被触发。可以通过调用 `event.preventDefault()` 阻止 Snackbar 关闭",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-close"
|
||
},
|
||
{
|
||
"name": "closed",
|
||
"description": "Snackbar 隐藏动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-closed"
|
||
},
|
||
{
|
||
"name": "action-click",
|
||
"description": "点击操作按钮时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#events-action-click"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssProperties-shape-corner"
|
||
},
|
||
{
|
||
"name": "--z-index",
|
||
"description": "组件的 CSS `z-index` 值",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssProperties-z-index"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "message",
|
||
"description": "消息文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssParts-message"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"description": "操作按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssParts-action"
|
||
},
|
||
{
|
||
"name": "close-button",
|
||
"description": "关闭按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssParts-close-button"
|
||
},
|
||
{
|
||
"name": "close-icon",
|
||
"description": "关闭按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/snackbar#cssParts-close-icon"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-switch",
|
||
"description": "开关切换组件\n\n```html\n<mdui-switch></mdui-switch>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否为禁用状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "checked",
|
||
"description": "是否为选中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-checked"
|
||
},
|
||
{
|
||
"name": "unchecked-icon",
|
||
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-unchecked-icon"
|
||
},
|
||
{
|
||
"name": "checked-icon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置\n\n默认为 `check` 图标,可传入空字符串移除默认图标",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-checked-icon"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须选中此开关",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-required"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "开关的名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "开关的值,将于表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-value"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch",
|
||
"slots": [
|
||
{
|
||
"name": "unchecked-icon",
|
||
"description": "未选中状态的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#slots-unchecked-icon"
|
||
},
|
||
{
|
||
"name": "checked-icon",
|
||
"description": "选中状态的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#slots-checked-icon"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否为禁用状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "checked",
|
||
"description": "是否为选中状态",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-checked"
|
||
},
|
||
{
|
||
"name": "defaultChecked",
|
||
"description": "默认选中状态。在重置表单时,将重置为此状态。此属性只能通过 JavaScript 属性设置",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-defaultChecked"
|
||
},
|
||
{
|
||
"name": "uncheckedIcon",
|
||
"description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-uncheckedIcon"
|
||
},
|
||
{
|
||
"name": "checkedIcon",
|
||
"description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置\n\n默认为 `check` 图标,可传入空字符串移除默认图标",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-checkedIcon"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须选中此开关",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-required"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-form"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "开关的名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "开关的值,将于表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-value"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-validationMessage"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-blur"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"description": "选中状态变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-change"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"description": "选中状态变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-input"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证不通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#events-invalid"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件轨道的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssProperties-shape-corner"
|
||
},
|
||
{
|
||
"name": "--shape-corner-thumb",
|
||
"description": "组件图标容器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssProperties-shape-corner-thumb"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "track",
|
||
"description": "轨道",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssParts-track"
|
||
},
|
||
{
|
||
"name": "thumb",
|
||
"description": "图标容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssParts-thumb"
|
||
},
|
||
{
|
||
"name": "unchecked-icon",
|
||
"description": "未选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssParts-unchecked-icon"
|
||
},
|
||
{
|
||
"name": "checked-icon",
|
||
"description": "选中状态的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/switch#cssParts-checked-icon"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-tab-panel",
|
||
"description": "选项卡面板项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab>` 组件使用\n\n```html\n<mdui-tabs value=\"tab-1\">\n <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "value",
|
||
"description": "选项卡面板项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-panel-attributes-value"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "选项卡面板项内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-panel-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "value",
|
||
"description": "选项卡面板项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-panel-attributes-value"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-tab",
|
||
"description": "选项卡导航项组件。需配合 `<mdui-tabs>` 和 `<mdui-tab-panel>` 组件使用\n\n```html\n<mdui-tabs value=\"tab-1\">\n <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "value",
|
||
"description": "选项卡导航项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-value"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-icon"
|
||
},
|
||
{
|
||
"name": "inline",
|
||
"description": "是否把图标和文本水平排列",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-inline"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "选项卡导航项的文本内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-slots-default"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "选项卡导航项中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-slots-icon"
|
||
},
|
||
{
|
||
"name": "badge",
|
||
"description": "徽标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-slots-badge"
|
||
},
|
||
{
|
||
"name": "custom",
|
||
"description": "自定义整个选项卡导航项中的内容",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-slots-custom"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "value",
|
||
"description": "选项卡导航项的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-value"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-icon"
|
||
},
|
||
{
|
||
"name": "inline",
|
||
"description": "是否把图标和文本水平排列",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-inline"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-events-blur"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "container",
|
||
"description": "选项卡导航项容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-cssParts-container"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "选项卡导航项中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-cssParts-icon"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "选项卡导航项的文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tab-cssParts-label"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-tabs",
|
||
"description": "选项卡组件。需配合 `<mdui-tab>` 和 `<mdui-tab-panel>` 组件使用\n\n```html\n<mdui-tabs value=\"tab-1\">\n <mdui-tab value=\"tab-1\">Tab 1</mdui-tab>\n <mdui-tab value=\"tab-2\">Tab 2</mdui-tab>\n <mdui-tab value=\"tab-3\">Tab 3</mdui-tab>\n\n <mdui-tab-panel slot=\"panel\" value=\"tab-1\">Panel 1</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-2\">Panel 2</mdui-tab-panel>\n <mdui-tab-panel slot=\"panel\" value=\"tab-3\">Panel 3</mdui-tab-panel>\n</mdui-tabs>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "选项卡形状。可选值包括:\n\n* `primary`:适用于位于 `<mdui-top-app-bar>` 下方,用于切换应用的主页面的场景\n* `secondary`:适用于位于页面中,用于切换一组相关内容的场景",
|
||
"value": {
|
||
"type": [
|
||
"'primary'",
|
||
"'secondary'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-variant"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前激活的 `<mdui-tab>` 的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-value"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "选项卡位置。默认为 `top-start`。可选值包括:\n\n* `top-start`:位于上方,左对齐\n* `top`:位于上方,居中对齐\n* `top-end`:位于上方,右对齐\n* `bottom-start`:位于下方,左对齐\n* `bottom`:位于下方,居中对齐\n* `bottom-end`:位于下方,右对齐\n* `left-start`:位于左侧,顶部对齐\n* `left`:位于左侧,居中对齐\n* `left-end`:位于左侧,底部对齐\n* `right-start`:位于右侧,顶部对齐\n* `right`:位于右侧,居中对齐\n* `right-end`:位于右侧,底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'top-start'",
|
||
"'top'",
|
||
"'top-end'",
|
||
"'bottom-start'",
|
||
"'bottom'",
|
||
"'bottom-end'",
|
||
"'left-start'",
|
||
"'left'",
|
||
"'left-end'",
|
||
"'right-start'",
|
||
"'right'",
|
||
"'right-end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-placement"
|
||
},
|
||
{
|
||
"name": "full-width",
|
||
"description": "是否填满父元素宽度",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-full-width"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "`<mdui-tab>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-slots-default"
|
||
},
|
||
{
|
||
"name": "panel",
|
||
"description": "`<mdui-tab-panel>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-slots-panel"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "选项卡形状。可选值包括:\n\n* `primary`:适用于位于 `<mdui-top-app-bar>` 下方,用于切换应用的主页面的场景\n* `secondary`:适用于位于页面中,用于切换一组相关内容的场景",
|
||
"value": {
|
||
"type": [
|
||
"'primary'",
|
||
"'secondary'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-variant"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "当前激活的 `<mdui-tab>` 的值",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-value"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "选项卡位置。默认为 `top-start`。可选值包括:\n\n* `top-start`:位于上方,左对齐\n* `top`:位于上方,居中对齐\n* `top-end`:位于上方,右对齐\n* `bottom-start`:位于下方,左对齐\n* `bottom`:位于下方,居中对齐\n* `bottom-end`:位于下方,右对齐\n* `left-start`:位于左侧,顶部对齐\n* `left`:位于左侧,居中对齐\n* `left-end`:位于左侧,底部对齐\n* `right-start`:位于右侧,顶部对齐\n* `right`:位于右侧,居中对齐\n* `right-end`:位于右侧,底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'top-start'",
|
||
"'top'",
|
||
"'top-end'",
|
||
"'bottom-start'",
|
||
"'bottom'",
|
||
"'bottom-end'",
|
||
"'left-start'",
|
||
"'left'",
|
||
"'left-end'",
|
||
"'right-start'",
|
||
"'right'",
|
||
"'right-end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-placement"
|
||
},
|
||
{
|
||
"name": "fullWidth",
|
||
"description": "是否填满父元素宽度",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-attributes-fullWidth"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "change",
|
||
"description": "选中的值变化时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-events-change"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "container",
|
||
"description": "`<mdui-tab>` 元素的容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-cssParts-container"
|
||
},
|
||
{
|
||
"name": "indicator",
|
||
"description": "激活状态指示器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tabs#tabs-cssParts-indicator"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-text-field",
|
||
"description": "文本框组件\n\n```html\n<mdui-text-field label=\"Text Field\"></mdui-text-field>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "文本框的形状。默认为 `filled`。可选值包括:\n\n* `filled`:带背景色的文本框,视觉效果较强\n* `outlined`:带边框的文本框,视觉效果较弱",
|
||
"value": {
|
||
"type": [
|
||
"'filled'",
|
||
"'outlined'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-variant"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "文本框输入类型。默认为 `text`。可选值包括:\n\n* `text`:默认值。文本字段\n* `number`:只能输入数字。拥有动态键盘的设备上会显示数字键盘\n* `password`:用于输入密码,其值会被遮盖\n* `url`:用于输入 URL,会验证 URL 格式。在支持动态键盘的设备上有相应的键盘\n* `email`:用于输入邮箱地址,会验证邮箱格式。在支持动态键盘的设备上有相应的键盘\n* `search`:用于搜索框。拥有动态键盘的设备上的回车图标会变成搜索图标\n* `tel`:用于输入电话号码。拥有动态键盘的设备上会显示电话数字键盘\n* `hidden`:隐藏该控件,但其值仍会提交到服务器\n* `date`:输入日期的控件(年、月、日,不包括时间)。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮\n* `datetime-local`:输入日期和时间的控件,不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮\n* `month`:输入年和月的控件,没有时区\n* `time`:用于输入时间的控件,不包括时区\n* `week`:用于输入以年和周数组成的日期,不带时区",
|
||
"value": {
|
||
"type": [
|
||
"'text'",
|
||
"'number'",
|
||
"'password'",
|
||
"'url'",
|
||
"'email'",
|
||
"'search'",
|
||
"'tel'",
|
||
"'hidden'",
|
||
"'date'",
|
||
"'datetime-local'",
|
||
"'month'",
|
||
"'time'",
|
||
"'week'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-type"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "文本框名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "文本框的值,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-value"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "标签文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-label"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"description": "占位符文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-placeholder"
|
||
},
|
||
{
|
||
"name": "helper",
|
||
"description": "文本框底部的帮助文本。也可以通过 `slot=\"helper\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-helper"
|
||
},
|
||
{
|
||
"name": "helper-on-focus",
|
||
"description": "是否仅在获得焦点时,显示底部的帮助文本",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-helper-on-focus"
|
||
},
|
||
{
|
||
"name": "clearable",
|
||
"description": "是否可清空文本框内容",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-clearable"
|
||
},
|
||
{
|
||
"name": "clear-icon",
|
||
"description": "可清空文本框时,显示在文本框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot=\"clear-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-clear-icon"
|
||
},
|
||
{
|
||
"name": "end-aligned",
|
||
"description": "是否将文本右对齐",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-end-aligned"
|
||
},
|
||
{
|
||
"name": "prefix",
|
||
"description": "文本框的前缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot=\"prefix\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-prefix"
|
||
},
|
||
{
|
||
"name": "suffix",
|
||
"description": "文本框的后缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot=\"suffix\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-suffix"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "文本框的前缀图标的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "文本框的后缀图标的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-end-icon"
|
||
},
|
||
{
|
||
"name": "error-icon",
|
||
"description": "表单字段验证失败时,显示在文本框右侧的 Material Icons 图标名。也可以通过 `slot=\"error-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-error-icon"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-form"
|
||
},
|
||
{
|
||
"name": "readonly",
|
||
"description": "是否为只读模式",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-readonly"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用输入框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须填写该字段",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-required"
|
||
},
|
||
{
|
||
"name": "rows",
|
||
"description": "文本框的固定显示行数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-rows"
|
||
},
|
||
{
|
||
"name": "autosize",
|
||
"description": "是否根据输入内容自动调整文本框高度",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autosize"
|
||
},
|
||
{
|
||
"name": "min-rows",
|
||
"description": "`autosize` 为 `true` 时,文本框的最小行数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-min-rows"
|
||
},
|
||
{
|
||
"name": "max-rows",
|
||
"description": "`autosize` 为 `true` 时,文本框的最大行数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-max-rows"
|
||
},
|
||
{
|
||
"name": "minlength",
|
||
"description": "允许输入的最小字符数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-minlength"
|
||
},
|
||
{
|
||
"name": "maxlength",
|
||
"description": "允许输入的最大字符数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-maxlength"
|
||
},
|
||
{
|
||
"name": "counter",
|
||
"description": "是否显示字数统计,只在 `maxlength` 被指定时有效",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-counter"
|
||
},
|
||
{
|
||
"name": "min",
|
||
"description": "当 `type` 为 `number` 时,允许输入的最小数值",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-min"
|
||
},
|
||
{
|
||
"name": "max",
|
||
"description": "当 `type` 为 `number` 时,允许输入的最大数值",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-max"
|
||
},
|
||
{
|
||
"name": "step",
|
||
"description": "`type` 为 `number` 时,数值增减的步长",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-step"
|
||
},
|
||
{
|
||
"name": "pattern",
|
||
"description": "用于表单验证的正则表达式",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-pattern"
|
||
},
|
||
{
|
||
"name": "toggle-password",
|
||
"description": "`type` 为 `password` 时,设置此属性会添加一个切换按钮,用于在明文和密文之间切换",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-toggle-password"
|
||
},
|
||
{
|
||
"name": "show-password-icon",
|
||
"description": "密码切换按钮的 Material Icons 图标,当密码为明文时显示。也可以通过 `slot=\"show-password-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-show-password-icon"
|
||
},
|
||
{
|
||
"name": "hide-password-icon",
|
||
"description": "密码切换按钮的 Material Icons 图标,当密码为密文时显示。也可以通过 `slot=\"hide-password-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-hide-password-icon"
|
||
},
|
||
{
|
||
"name": "autocapitalize",
|
||
"description": "iOS 的非标准属性,用于控制文本首字母是否自动大写。在 iOS5 及以后的版本上有效。可选值包括:\n\n* `none`:禁用首字母大写\n* `sentences`:句子首字母大写\n* `words`:单词首字母大写\n* `characters`:所有字母大写",
|
||
"value": {
|
||
"type": [
|
||
"'none'",
|
||
"'sentences'",
|
||
"'words'",
|
||
"'characters'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocapitalize"
|
||
},
|
||
{
|
||
"name": "autocorrect",
|
||
"description": "`input` 元素的 `autocorrect` 属性",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocorrect"
|
||
},
|
||
{
|
||
"name": "autocomplete",
|
||
"description": "`input` 元素的 `autocomplete` 属性",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocomplete"
|
||
},
|
||
{
|
||
"name": "enterkeyhint",
|
||
"description": "`input` 元素的 `enterkeyhint` 属性,用于定制虚拟键盘上的 Enter 键的显示文本或图标。具体显示效果取决于用户使用的设备和语言。可选值包括:\n\n* `enter`:插入新行\n* `done`:完成输入,关闭虚拟键盘\n* `go`:导航到输入文本的目标\n* `next`:移动到下一个输入项\n* `previous`:移动到上一个输入项\n* `search`:导航到搜索结果\n* `send`:发送文本信息",
|
||
"value": {
|
||
"type": [
|
||
"'enter'",
|
||
"'done'",
|
||
"'go'",
|
||
"'next'",
|
||
"'previous'",
|
||
"'search'",
|
||
"'send'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-enterkeyhint"
|
||
},
|
||
{
|
||
"name": "spellcheck",
|
||
"description": "是否启用拼写检查",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-spellcheck"
|
||
},
|
||
{
|
||
"name": "inputmode",
|
||
"description": "`input` 元素的 `inputmode` 属性,用于定制虚拟键盘的类型。可选值包括:\n\n* `none`:无虚拟键盘。在需要实现自己的键盘输入控件时很有用\n* `text`:标准文本输入键盘\n* `decimal`:小数输入键盘,除了数字之外可能会有小数点 `.` 或者千分符逗号 `,`\n* `numeric`:显示 0-9 的数字键盘\n* `tel`:手机数字键盘,包含 0-9 数字、星号 `*` 或者井号 `#` 键\n* `search`:为搜索输入优化的虚拟键盘,提交按钮通常会显示 `search` 或者 “搜索”\n* `email`:为邮件地址输入优化的虚拟键盘,通常会有 `@ .` 等键\n* `url`:为 URL 输入优化的虚拟键盘,通常会有 `. / #` 等键",
|
||
"value": {
|
||
"type": [
|
||
"'none'",
|
||
"'text'",
|
||
"'decimal'",
|
||
"'numeric'",
|
||
"'tel'",
|
||
"'search'",
|
||
"'email'",
|
||
"'url'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-inputmode"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-tabindex"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field",
|
||
"slots": [
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-end-icon"
|
||
},
|
||
{
|
||
"name": "error-icon",
|
||
"description": "验证失败状态的右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-error-icon"
|
||
},
|
||
{
|
||
"name": "prefix",
|
||
"description": "左侧文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-prefix"
|
||
},
|
||
{
|
||
"name": "suffix",
|
||
"description": "右侧文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-suffix"
|
||
},
|
||
{
|
||
"name": "clear-button",
|
||
"description": "清空按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-clear-button"
|
||
},
|
||
{
|
||
"name": "clear-icon",
|
||
"description": "清空按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-clear-icon"
|
||
},
|
||
{
|
||
"name": "toggle-password-button",
|
||
"description": "密码显示状态切换按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-toggle-password-button"
|
||
},
|
||
{
|
||
"name": "show-password-icon",
|
||
"description": "显示密码状态下,密码显示状态切换按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-show-password-icon"
|
||
},
|
||
{
|
||
"name": "hide-password-icon",
|
||
"description": "隐藏密码状态下,密码显示状态切换按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-hide-password-icon"
|
||
},
|
||
{
|
||
"name": "helper",
|
||
"description": "底部的帮助文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#slots-helper"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "文本框的形状。默认为 `filled`。可选值包括:\n\n* `filled`:带背景色的文本框,视觉效果较强\n* `outlined`:带边框的文本框,视觉效果较弱",
|
||
"value": {
|
||
"type": [
|
||
"'filled'",
|
||
"'outlined'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-variant"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"description": "文本框输入类型。默认为 `text`。可选值包括:\n\n* `text`:默认值。文本字段\n* `number`:只能输入数字。拥有动态键盘的设备上会显示数字键盘\n* `password`:用于输入密码,其值会被遮盖\n* `url`:用于输入 URL,会验证 URL 格式。在支持动态键盘的设备上有相应的键盘\n* `email`:用于输入邮箱地址,会验证邮箱格式。在支持动态键盘的设备上有相应的键盘\n* `search`:用于搜索框。拥有动态键盘的设备上的回车图标会变成搜索图标\n* `tel`:用于输入电话号码。拥有动态键盘的设备上会显示电话数字键盘\n* `hidden`:隐藏该控件,但其值仍会提交到服务器\n* `date`:输入日期的控件(年、月、日,不包括时间)。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮\n* `datetime-local`:输入日期和时间的控件,不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮\n* `month`:输入年和月的控件,没有时区\n* `time`:用于输入时间的控件,不包括时区\n* `week`:用于输入以年和周数组成的日期,不带时区",
|
||
"value": {
|
||
"type": [
|
||
"'text'",
|
||
"'number'",
|
||
"'password'",
|
||
"'url'",
|
||
"'email'",
|
||
"'search'",
|
||
"'tel'",
|
||
"'hidden'",
|
||
"'date'",
|
||
"'datetime-local'",
|
||
"'month'",
|
||
"'time'",
|
||
"'week'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-type"
|
||
},
|
||
{
|
||
"name": "name",
|
||
"description": "文本框名称,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-name"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"description": "文本框的值,将与表单数据一起提交",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-value"
|
||
},
|
||
{
|
||
"name": "defaultValue",
|
||
"description": "默认值。在重置表单时,将重置为该默认值。该属性只能通过 JavaScript 属性设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-defaultValue"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "标签文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-label"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"description": "占位符文本",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-placeholder"
|
||
},
|
||
{
|
||
"name": "helper",
|
||
"description": "文本框底部的帮助文本。也可以通过 `slot=\"helper\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-helper"
|
||
},
|
||
{
|
||
"name": "helperOnFocus",
|
||
"description": "是否仅在获得焦点时,显示底部的帮助文本",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-helperOnFocus"
|
||
},
|
||
{
|
||
"name": "clearable",
|
||
"description": "是否可清空文本框内容",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-clearable"
|
||
},
|
||
{
|
||
"name": "clearIcon",
|
||
"description": "可清空文本框时,显示在文本框右侧的清空按钮的 Material Icons 图标名。也可以通过 `slot=\"clear-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-clearIcon"
|
||
},
|
||
{
|
||
"name": "endAligned",
|
||
"description": "是否将文本右对齐",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-endAligned"
|
||
},
|
||
{
|
||
"name": "prefix",
|
||
"description": "文本框的前缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot=\"prefix\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-prefix"
|
||
},
|
||
{
|
||
"name": "suffix",
|
||
"description": "文本框的后缀文本。只在文本框聚焦或有值时显示。也可以通过 `slot=\"suffix\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-suffix"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "文本框的前缀图标的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-icon"
|
||
},
|
||
{
|
||
"name": "endIcon",
|
||
"description": "文本框的后缀图标的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-endIcon"
|
||
},
|
||
{
|
||
"name": "errorIcon",
|
||
"description": "表单字段验证失败时,显示在文本框右侧的 Material Icons 图标名。也可以通过 `slot=\"error-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-errorIcon"
|
||
},
|
||
{
|
||
"name": "form",
|
||
"description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-form"
|
||
},
|
||
{
|
||
"name": "readonly",
|
||
"description": "是否为只读模式",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-readonly"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用输入框",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "required",
|
||
"description": "提交表单时,是否必须填写该字段",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-required"
|
||
},
|
||
{
|
||
"name": "rows",
|
||
"description": "文本框的固定显示行数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-rows"
|
||
},
|
||
{
|
||
"name": "autosize",
|
||
"description": "是否根据输入内容自动调整文本框高度",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autosize"
|
||
},
|
||
{
|
||
"name": "minRows",
|
||
"description": "`autosize` 为 `true` 时,文本框的最小行数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-minRows"
|
||
},
|
||
{
|
||
"name": "maxRows",
|
||
"description": "`autosize` 为 `true` 时,文本框的最大行数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-maxRows"
|
||
},
|
||
{
|
||
"name": "minlength",
|
||
"description": "允许输入的最小字符数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-minlength"
|
||
},
|
||
{
|
||
"name": "maxlength",
|
||
"description": "允许输入的最大字符数",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-maxlength"
|
||
},
|
||
{
|
||
"name": "counter",
|
||
"description": "是否显示字数统计,只在 `maxlength` 被指定时有效",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-counter"
|
||
},
|
||
{
|
||
"name": "min",
|
||
"description": "当 `type` 为 `number` 时,允许输入的最小数值",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-min"
|
||
},
|
||
{
|
||
"name": "max",
|
||
"description": "当 `type` 为 `number` 时,允许输入的最大数值",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-max"
|
||
},
|
||
{
|
||
"name": "step",
|
||
"description": "`type` 为 `number` 时,数值增减的步长",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-step"
|
||
},
|
||
{
|
||
"name": "pattern",
|
||
"description": "用于表单验证的正则表达式",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-pattern"
|
||
},
|
||
{
|
||
"name": "togglePassword",
|
||
"description": "`type` 为 `password` 时,设置此属性会添加一个切换按钮,用于在明文和密文之间切换",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-togglePassword"
|
||
},
|
||
{
|
||
"name": "showPasswordIcon",
|
||
"description": "密码切换按钮的 Material Icons 图标,当密码为明文时显示。也可以通过 `slot=\"show-password-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-showPasswordIcon"
|
||
},
|
||
{
|
||
"name": "hidePasswordIcon",
|
||
"description": "密码切换按钮的 Material Icons 图标,当密码为密文时显示。也可以通过 `slot=\"hide-password-icon\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-hidePasswordIcon"
|
||
},
|
||
{
|
||
"name": "autocapitalize",
|
||
"description": "iOS 的非标准属性,用于控制文本首字母是否自动大写。在 iOS5 及以后的版本上有效。可选值包括:\n\n* `none`:禁用首字母大写\n* `sentences`:句子首字母大写\n* `words`:单词首字母大写\n* `characters`:所有字母大写",
|
||
"value": {
|
||
"type": [
|
||
"'none'",
|
||
"'sentences'",
|
||
"'words'",
|
||
"'characters'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocapitalize"
|
||
},
|
||
{
|
||
"name": "autocorrect",
|
||
"description": "`input` 元素的 `autocorrect` 属性",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocorrect"
|
||
},
|
||
{
|
||
"name": "autocomplete",
|
||
"description": "`input` 元素的 `autocomplete` 属性",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autocomplete"
|
||
},
|
||
{
|
||
"name": "enterkeyhint",
|
||
"description": "`input` 元素的 `enterkeyhint` 属性,用于定制虚拟键盘上的 Enter 键的显示文本或图标。具体显示效果取决于用户使用的设备和语言。可选值包括:\n\n* `enter`:插入新行\n* `done`:完成输入,关闭虚拟键盘\n* `go`:导航到输入文本的目标\n* `next`:移动到下一个输入项\n* `previous`:移动到上一个输入项\n* `search`:导航到搜索结果\n* `send`:发送文本信息",
|
||
"value": {
|
||
"type": [
|
||
"'enter'",
|
||
"'done'",
|
||
"'go'",
|
||
"'next'",
|
||
"'previous'",
|
||
"'search'",
|
||
"'send'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-enterkeyhint"
|
||
},
|
||
{
|
||
"name": "spellcheck",
|
||
"description": "是否启用拼写检查",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-spellcheck"
|
||
},
|
||
{
|
||
"name": "inputmode",
|
||
"description": "`input` 元素的 `inputmode` 属性,用于定制虚拟键盘的类型。可选值包括:\n\n* `none`:无虚拟键盘。在需要实现自己的键盘输入控件时很有用\n* `text`:标准文本输入键盘\n* `decimal`:小数输入键盘,除了数字之外可能会有小数点 `.` 或者千分符逗号 `,`\n* `numeric`:显示 0-9 的数字键盘\n* `tel`:手机数字键盘,包含 0-9 数字、星号 `*` 或者井号 `#` 键\n* `search`:为搜索输入优化的虚拟键盘,提交按钮通常会显示 `search` 或者 “搜索”\n* `email`:为邮件地址输入优化的虚拟键盘,通常会有 `@ .` 等键\n* `url`:为 URL 输入优化的虚拟键盘,通常会有 `. / #` 等键",
|
||
"value": {
|
||
"type": [
|
||
"'none'",
|
||
"'text'",
|
||
"'decimal'",
|
||
"'numeric'",
|
||
"'tel'",
|
||
"'search'",
|
||
"'email'",
|
||
"'url'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-inputmode"
|
||
},
|
||
{
|
||
"name": "validity",
|
||
"description": "表单验证状态对象,具体参见 [`ValidityState`](https://developer.mozilla.org/zh-CN/docs/Web/API/ValidityState)",
|
||
"value": {
|
||
"type": "ValidityState"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-validity"
|
||
},
|
||
{
|
||
"name": "validationMessage",
|
||
"description": "如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-validationMessage"
|
||
},
|
||
{
|
||
"name": "valueAsNumber",
|
||
"description": "获取当前值,并转换为 `number` 类型;或设置一个 `number` 类型的值。\n如果值无法被转换为 `number` 类型,则会返回 `NaN`。",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-valueAsNumber"
|
||
},
|
||
{
|
||
"name": "autofocus",
|
||
"description": "是否在页面加载完成后自动获取焦点",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-autofocus"
|
||
},
|
||
{
|
||
"name": "tabIndex",
|
||
"description": "元素在使用 Tab 键切换焦点时的顺序",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#attributes-tabIndex"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "focus",
|
||
"description": "获得焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-focus"
|
||
},
|
||
{
|
||
"name": "blur",
|
||
"description": "失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-blur"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"description": "在文本框的值变更,且失去焦点时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-change"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"description": "在文本框的值变更时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-input"
|
||
},
|
||
{
|
||
"name": "invalid",
|
||
"description": "表单字段验证不通过时触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-invalid"
|
||
},
|
||
{
|
||
"name": "clear",
|
||
"description": "在点击由 `clearable` 属性生成的清空按钮时触发。可以通过调用 `event.preventDefault()` 阻止清空文本框",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#events-clear"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "container",
|
||
"description": "文本框容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-container"
|
||
},
|
||
{
|
||
"name": "icon",
|
||
"description": "左侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-icon"
|
||
},
|
||
{
|
||
"name": "end-icon",
|
||
"description": "右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-end-icon"
|
||
},
|
||
{
|
||
"name": "error-icon",
|
||
"description": "验证失败状态的右侧图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-error-icon"
|
||
},
|
||
{
|
||
"name": "prefix",
|
||
"description": "左侧文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-prefix"
|
||
},
|
||
{
|
||
"name": "suffix",
|
||
"description": "右侧文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-suffix"
|
||
},
|
||
{
|
||
"name": "label",
|
||
"description": "上方的标签文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-label"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"description": "内部的 `<input>` 或 `<textarea>` 元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-input"
|
||
},
|
||
{
|
||
"name": "clear-button",
|
||
"description": "清空按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-clear-button"
|
||
},
|
||
{
|
||
"name": "clear-icon",
|
||
"description": "清空按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-clear-icon"
|
||
},
|
||
{
|
||
"name": "toggle-password-button",
|
||
"description": "密码显示状态切换按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-toggle-password-button"
|
||
},
|
||
{
|
||
"name": "show-password-icon",
|
||
"description": "显示密码状态下,密码显示状态切换按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-show-password-icon"
|
||
},
|
||
{
|
||
"name": "hide-password-icon",
|
||
"description": "隐藏密码状态下,密码显示状态切换按钮中的图标",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-hide-password-icon"
|
||
},
|
||
{
|
||
"name": "supporting",
|
||
"description": "底部辅助信息容器,包括 helper、error、counter",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-supporting"
|
||
},
|
||
{
|
||
"name": "helper",
|
||
"description": "底部的帮助文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-helper"
|
||
},
|
||
{
|
||
"name": "error",
|
||
"description": "底部的错误描述文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-error"
|
||
},
|
||
{
|
||
"name": "counter",
|
||
"description": "底部右侧的字数统计",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/text-field#cssParts-counter"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-tooltip",
|
||
"description": "工具提示组件\n\n```html\n<mdui-tooltip content=\"tooltip content\">\n <mdui-button>button</mdui-button>\n</mdui-tooltip>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "tooltip 的形状。默认为 `plain`。可选值包括:\n\n* `plain`:纯文本,适用于简单的单行文本\n* `rich`:富文本,可以包含标题、正文和操作按钮",
|
||
"value": {
|
||
"type": [
|
||
"'plain'",
|
||
"'rich'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-variant"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "tooltip 的位置。默认为 `auto`。可选值包括:\n\n* `auto`:自动判断位置。`variant=\"plain\"` 时,优先使用 `top`;`variant=\"rich\"` 时,优先使用 `bottom-right`\n* `top-left`:位于左上方\n* `top-start`:位于上方,左对齐\n* `top`:位于上方,居中对齐\n* `top-end`:位于上方,右对齐\n* `top-right`:位于右上方\n* `bottom-left`:位于左下方\n* `bottom-start`:位于下方,左对齐\n* `bottom`:位于下方,居中对齐\n* `bottom-end`:位于下方,右对齐\n* `bottom-right`:位于右下方\n* `left-start`:位于左侧,顶部对齐\n* `left`:位于左侧,居中对齐\n* `left-end`:位于左侧,底部对齐\n* `right-start`:位于右侧,顶部对齐\n* `right`:位于右侧,居中对齐\n* `right-end`:位于右侧,底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'auto'",
|
||
"'top-left'",
|
||
"'top-start'",
|
||
"'top'",
|
||
"'top-end'",
|
||
"'top-right'",
|
||
"'bottom-left'",
|
||
"'bottom-start'",
|
||
"'bottom'",
|
||
"'bottom-end'",
|
||
"'bottom-right'",
|
||
"'left-start'",
|
||
"'left'",
|
||
"'left-end'",
|
||
"'right-start'",
|
||
"'right'",
|
||
"'right-end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-placement"
|
||
},
|
||
{
|
||
"name": "open-delay",
|
||
"description": "鼠标悬浮触发显示的延时,单位为毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-open-delay"
|
||
},
|
||
{
|
||
"name": "close-delay",
|
||
"description": "鼠标悬浮触发隐藏的延时,单位为毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-close-delay"
|
||
},
|
||
{
|
||
"name": "headline",
|
||
"description": "tooltip 的标题。仅 `variant=\"rich\"` 时可使用。也可以通过 `slot=\"headline\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-headline"
|
||
},
|
||
{
|
||
"name": "content",
|
||
"description": "tooltip 的内容。也可以通过 `slot=\"content\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-content"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"description": "触发方式,支持多个值,用空格分隔。可选值包括:\n\n* `click`:点击时触发\n* `hover`:鼠标悬浮时触发\n* `focus`:聚焦时触发\n* `manual`:只能通过编程方式打开和关闭 tooltip,不能再指定其他触发方式",
|
||
"value": {
|
||
"type": [
|
||
"'click'",
|
||
"'hover'",
|
||
"'focus'",
|
||
"'manual'",
|
||
"string"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-trigger"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用 tooltip",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"description": "是否显示 tooltip",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-open"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "tooltip 触发的目标元素,只有 `default` slot 中的第一个元素会作为目标元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#slots-default"
|
||
},
|
||
{
|
||
"name": "headline",
|
||
"description": "tooltip 的标题,只有当 `variant=\"rich\"` 时,此 slot 才有效",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#slots-headline"
|
||
},
|
||
{
|
||
"name": "content",
|
||
"description": "tooltip 的内容,可以包含 HTML。若只包含纯文本,可以使用 `content` 属性代替",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#slots-content"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"description": "tooltip 底部的按钮,只有当 `variant=\"rich\"` 时,此 slot 才有效",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#slots-action"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "tooltip 的形状。默认为 `plain`。可选值包括:\n\n* `plain`:纯文本,适用于简单的单行文本\n* `rich`:富文本,可以包含标题、正文和操作按钮",
|
||
"value": {
|
||
"type": [
|
||
"'plain'",
|
||
"'rich'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-variant"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"description": "tooltip 的位置。默认为 `auto`。可选值包括:\n\n* `auto`:自动判断位置。`variant=\"plain\"` 时,优先使用 `top`;`variant=\"rich\"` 时,优先使用 `bottom-right`\n* `top-left`:位于左上方\n* `top-start`:位于上方,左对齐\n* `top`:位于上方,居中对齐\n* `top-end`:位于上方,右对齐\n* `top-right`:位于右上方\n* `bottom-left`:位于左下方\n* `bottom-start`:位于下方,左对齐\n* `bottom`:位于下方,居中对齐\n* `bottom-end`:位于下方,右对齐\n* `bottom-right`:位于右下方\n* `left-start`:位于左侧,顶部对齐\n* `left`:位于左侧,居中对齐\n* `left-end`:位于左侧,底部对齐\n* `right-start`:位于右侧,顶部对齐\n* `right`:位于右侧,居中对齐\n* `right-end`:位于右侧,底部对齐",
|
||
"value": {
|
||
"type": [
|
||
"'auto'",
|
||
"'top-left'",
|
||
"'top-start'",
|
||
"'top'",
|
||
"'top-end'",
|
||
"'top-right'",
|
||
"'bottom-left'",
|
||
"'bottom-start'",
|
||
"'bottom'",
|
||
"'bottom-end'",
|
||
"'bottom-right'",
|
||
"'left-start'",
|
||
"'left'",
|
||
"'left-end'",
|
||
"'right-start'",
|
||
"'right'",
|
||
"'right-end'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-placement"
|
||
},
|
||
{
|
||
"name": "openDelay",
|
||
"description": "鼠标悬浮触发显示的延时,单位为毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-openDelay"
|
||
},
|
||
{
|
||
"name": "closeDelay",
|
||
"description": "鼠标悬浮触发隐藏的延时,单位为毫秒",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-closeDelay"
|
||
},
|
||
{
|
||
"name": "headline",
|
||
"description": "tooltip 的标题。仅 `variant=\"rich\"` 时可使用。也可以通过 `slot=\"headline\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-headline"
|
||
},
|
||
{
|
||
"name": "content",
|
||
"description": "tooltip 的内容。也可以通过 `slot=\"content\"` 设置",
|
||
"value": {
|
||
"type": "string"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-content"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"description": "触发方式,支持多个值,用空格分隔。可选值包括:\n\n* `click`:点击时触发\n* `hover`:鼠标悬浮时触发\n* `focus`:聚焦时触发\n* `manual`:只能通过编程方式打开和关闭 tooltip,不能再指定其他触发方式",
|
||
"value": {
|
||
"type": [
|
||
"'click'",
|
||
"'hover'",
|
||
"'focus'",
|
||
"'manual'",
|
||
"string"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-trigger"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"description": "是否禁用 tooltip",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-disabled"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"description": "是否显示 tooltip",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#attributes-open"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "open",
|
||
"description": "tooltip 开始显示时,事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 打开",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#events-open"
|
||
},
|
||
{
|
||
"name": "opened",
|
||
"description": "tooltip 显示动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#events-opened"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"description": "tooltip 开始隐藏时,事件被触发。可以通过调用 `event.preventDefault()` 阻止 tooltip 关闭",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#events-close"
|
||
},
|
||
{
|
||
"name": "closed",
|
||
"description": "tooltip 隐藏动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#events-closed"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner-plain",
|
||
"description": "当 variant=\"plain\" 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssProperties-shape-corner-plain"
|
||
},
|
||
{
|
||
"name": "--shape-corner-rich",
|
||
"description": "当 variant=\"rich\" 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssProperties-shape-corner-rich"
|
||
},
|
||
{
|
||
"name": "--z-index",
|
||
"description": "组件的 CSS `z-index` 值",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssProperties-z-index"
|
||
}
|
||
],
|
||
"parts": [
|
||
{
|
||
"name": "popup",
|
||
"description": "tooltip 的容器",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssParts-popup"
|
||
},
|
||
{
|
||
"name": "headline",
|
||
"description": "标题",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssParts-headline"
|
||
},
|
||
{
|
||
"name": "content",
|
||
"description": "正文",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssParts-content"
|
||
},
|
||
{
|
||
"name": "action",
|
||
"description": "操作按钮",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/tooltip#cssParts-action"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-top-app-bar-title",
|
||
"description": "顶部应用栏标题组件。需配合 `<mdui-top-app-bar>` 组件使用\n\n```html\n<mdui-top-app-bar>\n <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n <div style=\"flex-grow: 1\"></div>\n <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n</mdui-top-app-bar>\n```",
|
||
"attributes": [],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "顶部应用栏的标题文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-title-slots-default"
|
||
},
|
||
{
|
||
"name": "label-large",
|
||
"description": "展开状态下的标题文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-title-slots-label-large"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": []
|
||
},
|
||
"css": {
|
||
"parts": [
|
||
{
|
||
"name": "label",
|
||
"description": "标题文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-title-cssParts-label"
|
||
},
|
||
{
|
||
"name": "label-large",
|
||
"description": "展开状态下的标题文本",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-title-cssParts-label-large"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
"name": "mdui-top-app-bar",
|
||
"description": "顶部应用栏组件\n\n```html\n<mdui-top-app-bar>\n <mdui-button-icon icon=\"menu\"></mdui-button-icon>\n <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>\n <div style=\"flex-grow: 1\"></div>\n <mdui-button-icon icon=\"more_vert\"></mdui-button-icon>\n</mdui-top-app-bar>\n```",
|
||
"attributes": [
|
||
{
|
||
"name": "variant",
|
||
"description": "顶部应用栏的形状。默认为 `small`。可选值包括:\n\n* `center-aligned`:小型应用栏,标题居中\n* `small`:小型应用栏\n* `medium`:中型应用栏\n* `large`:大型应用栏",
|
||
"value": {
|
||
"type": [
|
||
"'center-aligned'",
|
||
"'small'",
|
||
"'medium'",
|
||
"'large'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-variant"
|
||
},
|
||
{
|
||
"name": "hide",
|
||
"description": "是否隐藏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-hide"
|
||
},
|
||
{
|
||
"name": "shrink",
|
||
"description": "是否缩小为 `variant=\"small\"` 的样式,仅在 `variant=\"medium\"` 或 `variant=\"large\"` 时生效",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-shrink"
|
||
},
|
||
{
|
||
"name": "scroll-behavior",
|
||
"description": "滚动行为。可同时使用多个值,用空格分隔。可选值包括:\n\n* `hide`:滚动时隐藏\n* `shrink`:在中型、大型应用栏中可使用,滚动时缩小成小型应用栏的样式\n* `elevate`:滚动时添加阴影",
|
||
"value": {
|
||
"type": [
|
||
"'hide'",
|
||
"'shrink'",
|
||
"'elevate'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-behavior"
|
||
},
|
||
{
|
||
"name": "scroll-target",
|
||
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"HTMLElement",
|
||
"JQ<HTMLElement>"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-target"
|
||
},
|
||
{
|
||
"name": "scroll-threshold",
|
||
"description": "在滚动多少距离之后触发滚动行为,单位为 `px`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scroll-threshold"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-order"
|
||
}
|
||
],
|
||
"priority": "highest",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar",
|
||
"slots": [
|
||
{
|
||
"name": "",
|
||
"description": "顶部应用栏内部的元素",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-slots-default"
|
||
}
|
||
],
|
||
"js": {
|
||
"properties": [
|
||
{
|
||
"name": "variant",
|
||
"description": "顶部应用栏的形状。默认为 `small`。可选值包括:\n\n* `center-aligned`:小型应用栏,标题居中\n* `small`:小型应用栏\n* `medium`:中型应用栏\n* `large`:大型应用栏",
|
||
"value": {
|
||
"type": [
|
||
"'center-aligned'",
|
||
"'small'",
|
||
"'medium'",
|
||
"'large'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-variant"
|
||
},
|
||
{
|
||
"name": "hide",
|
||
"description": "是否隐藏",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-hide"
|
||
},
|
||
{
|
||
"name": "shrink",
|
||
"description": "是否缩小为 `variant=\"small\"` 的样式,仅在 `variant=\"medium\"` 或 `variant=\"large\"` 时生效",
|
||
"value": {
|
||
"type": "boolean"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-shrink"
|
||
},
|
||
{
|
||
"name": "scrollBehavior",
|
||
"description": "滚动行为。可同时使用多个值,用空格分隔。可选值包括:\n\n* `hide`:滚动时隐藏\n* `shrink`:在中型、大型应用栏中可使用,滚动时缩小成小型应用栏的样式\n* `elevate`:滚动时添加阴影",
|
||
"value": {
|
||
"type": [
|
||
"'hide'",
|
||
"'shrink'",
|
||
"'elevate'"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scrollBehavior"
|
||
},
|
||
{
|
||
"name": "scrollTarget",
|
||
"description": "需要监听其滚动事件的元素。值可以是 CSS 选择器、DOM 元素、或 [JQ 对象](https://www.mdui.org/zh-cn/docs/2/functions/jq)。默认监听 `window` 的滚动事件",
|
||
"value": {
|
||
"type": [
|
||
"string",
|
||
"HTMLElement",
|
||
"JQ<HTMLElement>"
|
||
]
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scrollTarget"
|
||
},
|
||
{
|
||
"name": "scrollThreshold",
|
||
"description": "在滚动多少距离之后触发滚动行为,单位为 `px`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-scrollThreshold"
|
||
},
|
||
{
|
||
"name": "order",
|
||
"description": "该组件在 [`<mdui-layout>`](https://www.mdui.org/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`",
|
||
"value": {
|
||
"type": "number"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-attributes-order"
|
||
}
|
||
],
|
||
"events": [
|
||
{
|
||
"name": "show",
|
||
"description": "开始显示时,事件被触发。可以通过调用 `event.preventDefault()` 阻止显示",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-events-show"
|
||
},
|
||
{
|
||
"name": "shown",
|
||
"description": "显示动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-events-shown"
|
||
},
|
||
{
|
||
"name": "hide",
|
||
"description": "开始隐藏时,事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-events-hide"
|
||
},
|
||
{
|
||
"name": "hidden",
|
||
"description": "隐藏动画完成时,事件被触发",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-events-hidden"
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--shape-corner",
|
||
"description": "组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner)",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-cssProperties-shape-corner"
|
||
},
|
||
{
|
||
"name": "--z-index",
|
||
"description": "组件的 CSS `z-index` 值",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/components/top-app-bar#top-app-bar-cssProperties-z-index"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
},
|
||
"css": {
|
||
"properties": [
|
||
{
|
||
"name": "--mdui-breakpoint-xs",
|
||
"description": "断点值。默认为 `0px`\n\n**注意**:该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**:\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-xs: 0px;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
|
||
},
|
||
{
|
||
"name": "--mdui-breakpoint-sm",
|
||
"description": "断点值。默认为 `600px`\n\n**注意**:该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**:\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-sm: 620px;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
|
||
},
|
||
{
|
||
"name": "--mdui-breakpoint-md",
|
||
"description": "断点值。默认为 `840px`\n\n**注意**:该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**:\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-md: 860px;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
|
||
},
|
||
{
|
||
"name": "--mdui-breakpoint-lg",
|
||
"description": "断点值。默认为 `1080px`\n\n**注意**:该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**:\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-lg: 1100px;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
|
||
},
|
||
{
|
||
"name": "--mdui-breakpoint-xl",
|
||
"description": "断点值。默认为 `1440px`\n\n**注意**:该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**:\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-xl: 1460px;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
|
||
},
|
||
{
|
||
"name": "--mdui-breakpoint-xxl",
|
||
"description": "断点值。默认为 `1920px`\n\n**注意**:该断点值不支持在 CSS 媒体查询中使用。\n\n**示例**:\n```css\n/* 修改断点值 */\n:root {\n --mdui-breakpoint-xxl: 1940px;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#breakpoint"
|
||
},
|
||
{
|
||
"name": "--mdui-color-primary-light",
|
||
"description": "**Primary**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-primary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-primary-container-light",
|
||
"description": "**Primary Container**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-primary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-primary-light",
|
||
"description": "**On Primary**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-primary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-primary-container-light",
|
||
"description": "**On Primary Container**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-primary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-inverse-primary-light",
|
||
"description": "**Inverse Primary**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-inverse-primary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-secondary-light",
|
||
"description": "**Secondary**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-secondary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-secondary-container-light",
|
||
"description": "**Secondary Container**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-secondary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-secondary-light",
|
||
"description": "**On Secondary**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-secondary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-secondary-container-light",
|
||
"description": "**On Secondary Container**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-secondary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-tertiary-light",
|
||
"description": "**Tertiary**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-tertiary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-tertiary-container-light",
|
||
"description": "**Tertiary Container**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-tertiary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-tertiary-light",
|
||
"description": "**On Tertiary**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-tertiary-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-tertiary-container-light",
|
||
"description": "**On Tertiary Container**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-tertiary-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-light",
|
||
"description": "**Surface**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-dim-light",
|
||
"description": "**Surface Dim**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-dim-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-bright-light",
|
||
"description": "**Surface Bright**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-bright-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-lowest-light",
|
||
"description": "**Surface Container Lowest**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-lowest-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-low-light",
|
||
"description": "**Surface Container Low**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-low-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-light",
|
||
"description": "**Surface Container**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-high-light",
|
||
"description": "**Surface Container High**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-high-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-highest-light",
|
||
"description": "**Surface Container Highest**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-container-highest-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-variant-light",
|
||
"description": "**Surface Variant**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-variant-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-surface-light",
|
||
"description": "**On Surface**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-surface-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-surface-variant-light",
|
||
"description": "**On Surface Variant**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-surface-variant-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-inverse-surface-light",
|
||
"description": "**Inverse Surface**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-inverse-surface-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-inverse-on-surface-light",
|
||
"description": "**Inverse On Surface**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-inverse-on-surface-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-background-light",
|
||
"description": "**Background**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-background-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-background-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-background));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-background-light",
|
||
"description": "**On Background**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-background-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-error-light",
|
||
"description": "**Error**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-error-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-error-container-light",
|
||
"description": "**Error Container**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-error-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-error-light",
|
||
"description": "**On Error**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-error-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-error-container-light",
|
||
"description": "**On Error Container**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-on-error-container-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-outline-light",
|
||
"description": "**Outline**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-outline-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-outline-variant-light",
|
||
"description": "**Outline Variant**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-outline-variant-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-shadow-light",
|
||
"description": "**Shadow**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-shadow-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-tint-color-light",
|
||
"description": "**Surface Tint Color**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-surface-tint-color-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-scrim-light",
|
||
"description": "**Scrim**\n\n亮色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变亮色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置亮色模式颜色值 */\n:root {\n --mdui-color-scrim-light: 255, 0, 0;\n}\n\n/* 读取亮色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim-light));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-primary-dark",
|
||
"description": "**Primary**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-primary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-primary-container-dark",
|
||
"description": "**Primary Container**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-primary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-primary-dark",
|
||
"description": "**On Primary**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-primary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-primary-container-dark",
|
||
"description": "**On Primary Container**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-inverse-primary-dark",
|
||
"description": "**Inverse Primary**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-secondary-dark",
|
||
"description": "**Secondary**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-secondary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-secondary-container-dark",
|
||
"description": "**Secondary Container**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-secondary-dark",
|
||
"description": "**On Secondary**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-secondary-container-dark",
|
||
"description": "**On Secondary Container**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-tertiary-dark",
|
||
"description": "**Tertiary**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-tertiary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-tertiary-container-dark",
|
||
"description": "**Tertiary Container**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-tertiary-dark",
|
||
"description": "**On Tertiary**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-tertiary-container-dark",
|
||
"description": "**On Tertiary Container**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-dark",
|
||
"description": "**Surface**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-dim-dark",
|
||
"description": "**Surface Dim**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-bright-dark",
|
||
"description": "**Surface Bright**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-lowest-dark",
|
||
"description": "**Surface Container Lowest**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-low-dark",
|
||
"description": "**Surface Container Low**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-dark",
|
||
"description": "**Surface Container**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-high-dark",
|
||
"description": "**Surface Container High**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-highest-dark",
|
||
"description": "**Surface Container Highest**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-variant-dark",
|
||
"description": "**Surface Variant**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-surface-dark",
|
||
"description": "**On Surface**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-surface-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-surface-variant-dark",
|
||
"description": "**On Surface Variant**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-inverse-surface-dark",
|
||
"description": "**Inverse Surface**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-inverse-on-surface-dark",
|
||
"description": "**Inverse On Surface**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-background-dark",
|
||
"description": "**Background**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-background-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-background-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-background));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-background), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-background-dark",
|
||
"description": "**On Background**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-background-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-background), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-error-dark",
|
||
"description": "**Error**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-error-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-error-container-dark",
|
||
"description": "**Error Container**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-error-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-error-dark",
|
||
"description": "**On Error**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-error-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-error-container-dark",
|
||
"description": "**On Error Container**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-outline-dark",
|
||
"description": "**Outline**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-outline-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-outline-variant-dark",
|
||
"description": "**Outline Variant**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-shadow-dark",
|
||
"description": "**Shadow**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-shadow-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-shadow), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-tint-color-dark",
|
||
"description": "**Surface Tint Color**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-scrim-dark",
|
||
"description": "**Scrim**\n\n暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n修改该属性可以改变暗色模式下的颜色值。\n\n**示例**:\n```css\n/* 设置暗色模式颜色值 */\n:root {\n --mdui-color-scrim-dark: 255, 0, 0;\n}\n\n/* 读取暗色模式颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim-dark));\n}\n\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-scrim), 0.5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-primary",
|
||
"description": "**Primary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-primary-light` 和 `--mdui-color-primary-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-primary-light: 255, 0, 0;\n --mdui-color-primary-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-primary-container",
|
||
"description": "**Primary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-primary-container-light` 和 `--mdui-color-primary-container-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-primary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-primary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-primary-container-light: 255, 0, 0;\n --mdui-color-primary-container-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-primary",
|
||
"description": "**On Primary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-primary-light` 和 `--mdui-color-on-primary-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-primary-light: 255, 0, 0;\n --mdui-color-on-primary-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-primary-container",
|
||
"description": "**On Primary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-primary-container-light` 和 `--mdui-color-on-primary-container-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-primary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-primary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-primary-container-light: 255, 0, 0;\n --mdui-color-on-primary-container-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-inverse-primary",
|
||
"description": "**Inverse Primary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-inverse-primary-light` 和 `--mdui-color-inverse-primary-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-primary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-primary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-inverse-primary-light: 255, 0, 0;\n --mdui-color-inverse-primary-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-secondary",
|
||
"description": "**Secondary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-secondary-light` 和 `--mdui-color-secondary-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-secondary-light: 255, 0, 0;\n --mdui-color-secondary-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-secondary-container",
|
||
"description": "**Secondary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-secondary-container-light` 和 `--mdui-color-secondary-container-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-secondary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-secondary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-secondary-container-light: 255, 0, 0;\n --mdui-color-secondary-container-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-secondary",
|
||
"description": "**On Secondary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-secondary-light` 和 `--mdui-color-on-secondary-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-secondary-light: 255, 0, 0;\n --mdui-color-on-secondary-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-secondary-container",
|
||
"description": "**On Secondary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-secondary-container-light` 和 `--mdui-color-on-secondary-container-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-secondary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-secondary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-secondary-container-light: 255, 0, 0;\n --mdui-color-on-secondary-container-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-tertiary",
|
||
"description": "**Tertiary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-tertiary-light` 和 `--mdui-color-tertiary-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-tertiary-light: 255, 0, 0;\n --mdui-color-tertiary-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-tertiary-container",
|
||
"description": "**Tertiary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-tertiary-container-light` 和 `--mdui-color-tertiary-container-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-tertiary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-tertiary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-tertiary-container-light: 255, 0, 0;\n --mdui-color-tertiary-container-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-tertiary",
|
||
"description": "**On Tertiary**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-tertiary-light` 和 `--mdui-color-on-tertiary-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-tertiary-light: 255, 0, 0;\n --mdui-color-on-tertiary-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-tertiary-container",
|
||
"description": "**On Tertiary Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-tertiary-container-light` 和 `--mdui-color-on-tertiary-container-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-tertiary-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-tertiary-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-tertiary-container-light: 255, 0, 0;\n --mdui-color-on-tertiary-container-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface",
|
||
"description": "**Surface**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-light` 和 `--mdui-color-surface-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-light: 255, 0, 0;\n --mdui-color-surface-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-dim",
|
||
"description": "**Surface Dim**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-dim-light` 和 `--mdui-color-surface-dim-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-dim));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-dim), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-dim-light: 255, 0, 0;\n --mdui-color-surface-dim-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-bright",
|
||
"description": "**Surface Bright**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-bright-light` 和 `--mdui-color-surface-bright-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-bright));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-bright), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-bright-light: 255, 0, 0;\n --mdui-color-surface-bright-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-lowest",
|
||
"description": "**Surface Container Lowest**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-container-lowest-light` 和 `--mdui-color-surface-container-lowest-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-lowest));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-lowest), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-lowest-light: 255, 0, 0;\n --mdui-color-surface-container-lowest-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-low",
|
||
"description": "**Surface Container Low**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-container-low-light` 和 `--mdui-color-surface-container-low-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-low));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-low), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-low-light: 255, 0, 0;\n --mdui-color-surface-container-low-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container",
|
||
"description": "**Surface Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-container-light` 和 `--mdui-color-surface-container-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-light: 255, 0, 0;\n --mdui-color-surface-container-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-high",
|
||
"description": "**Surface Container High**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-container-high-light` 和 `--mdui-color-surface-container-high-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-high));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-high), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-high-light: 255, 0, 0;\n --mdui-color-surface-container-high-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-container-highest",
|
||
"description": "**Surface Container Highest**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-container-highest-light` 和 `--mdui-color-surface-container-highest-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-container-highest));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-container-highest), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-container-highest-light: 255, 0, 0;\n --mdui-color-surface-container-highest-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-variant",
|
||
"description": "**Surface Variant**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-variant-light` 和 `--mdui-color-surface-variant-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-variant));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-variant), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-variant-light: 255, 0, 0;\n --mdui-color-surface-variant-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-surface",
|
||
"description": "**On Surface**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-surface-light` 和 `--mdui-color-on-surface-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-surface-light: 255, 0, 0;\n --mdui-color-on-surface-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-surface-variant",
|
||
"description": "**On Surface Variant**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-surface-variant-light` 和 `--mdui-color-on-surface-variant-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-surface-variant));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-surface-variant), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-surface-variant-light: 255, 0, 0;\n --mdui-color-on-surface-variant-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-inverse-surface",
|
||
"description": "**Inverse Surface**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-inverse-surface-light` 和 `--mdui-color-inverse-surface-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-surface), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-inverse-surface-light: 255, 0, 0;\n --mdui-color-inverse-surface-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-inverse-on-surface",
|
||
"description": "**Inverse On Surface**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-inverse-on-surface-light` 和 `--mdui-color-inverse-on-surface-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-inverse-on-surface));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-inverse-on-surface), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-inverse-on-surface-light: 255, 0, 0;\n --mdui-color-inverse-on-surface-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-background",
|
||
"description": "**Background**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-background-light` 和 `--mdui-color-background-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-background));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-background), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-background-light: 255, 0, 0;\n --mdui-color-background-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-background",
|
||
"description": "**On Background**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-background-light` 和 `--mdui-color-on-background-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-background));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-background), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-background-light: 255, 0, 0;\n --mdui-color-on-background-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-error",
|
||
"description": "**Error**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-error-light` 和 `--mdui-color-error-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-error-light: 255, 0, 0;\n --mdui-color-error-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-error-container",
|
||
"description": "**Error Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-error-container-light` 和 `--mdui-color-error-container-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-error-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-error-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-error-container-light: 255, 0, 0;\n --mdui-color-error-container-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-error",
|
||
"description": "**On Error**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-error-light` 和 `--mdui-color-on-error-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-error-light: 255, 0, 0;\n --mdui-color-on-error-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-on-error-container",
|
||
"description": "**On Error Container**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-on-error-container-light` 和 `--mdui-color-on-error-container-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-on-error-container));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-on-error-container), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-on-error-container-light: 255, 0, 0;\n --mdui-color-on-error-container-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-outline",
|
||
"description": "**Outline**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-outline-light` 和 `--mdui-color-outline-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-outline-light: 255, 0, 0;\n --mdui-color-outline-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-outline-variant",
|
||
"description": "**Outline Variant**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-outline-variant-light` 和 `--mdui-color-outline-variant-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-outline-variant));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-outline-variant), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-outline-variant-light: 255, 0, 0;\n --mdui-color-outline-variant-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-shadow",
|
||
"description": "**Shadow**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-shadow-light` 和 `--mdui-color-shadow-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-shadow));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-shadow), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-shadow-light: 255, 0, 0;\n --mdui-color-shadow-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-surface-tint-color",
|
||
"description": "**Surface Tint Color**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-surface-tint-color-light` 和 `--mdui-color-surface-tint-color-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-surface-tint-color));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-surface-tint-color), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-surface-tint-color-light: 255, 0, 0;\n --mdui-color-surface-tint-color-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-color-scrim",
|
||
"description": "**Scrim**\n\n自动适配亮色模式和暗色模式的 RGB 颜色值,RGB 三色用 `,` 分隔。\n\n若要设置该颜色值,建议分别设置 `--mdui-color-scrim-light` 和 `--mdui-color-scrim-dark`。\n\n**示例**:\n```css\n/* 读取自动适配的颜色值 */\n.element {\n color: rgb(var(--mdui-color-scrim));\n}\n\n/* 读取自动适配的颜色值,并添加不透明度 */\n.element {\n color: rgba(var(--mdui-color-scrim), 0.5);\n}\n\n/* 分别设置亮色模式、暗色模式的颜色值 */\n:root {\n --mdui-color-scrim-light: 255, 0, 0;\n --mdui-color-scrim-dark: 255, 0, 0;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#color"
|
||
},
|
||
{
|
||
"name": "--mdui-elevation-level0",
|
||
"description": "Level 0 级别的高度对应的阴影值。\n\n**示例**:\n```css\n/* 设置 level0 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level0: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level0 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level0);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
|
||
},
|
||
{
|
||
"name": "--mdui-elevation-level1",
|
||
"description": "Level 1 级别的高度对应的阴影值。\n\n**示例**:\n```css\n/* 设置 level1 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level1 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level1);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
|
||
},
|
||
{
|
||
"name": "--mdui-elevation-level2",
|
||
"description": "Level 2 级别的高度对应的阴影值。\n\n**示例**:\n```css\n/* 设置 level2 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level2: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level2 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level2);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
|
||
},
|
||
{
|
||
"name": "--mdui-elevation-level3",
|
||
"description": "Level 3 级别的高度对应的阴影值。\n\n**示例**:\n```css\n/* 设置 level3 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level3: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level3 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level3);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
|
||
},
|
||
{
|
||
"name": "--mdui-elevation-level4",
|
||
"description": "Level 4 级别的高度对应的阴影值。\n\n**示例**:\n```css\n/* 设置 level4 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level4: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level4 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level4);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
|
||
},
|
||
{
|
||
"name": "--mdui-elevation-level5",
|
||
"description": "Level 5 级别的高度对应的阴影值。\n\n**示例**:\n```css\n/* 设置 level5 级别的高度对应的阴影值 */\n:root {\n --mdui-elevation-level5: 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.19);\n}\n\n/* 读取 level5 级别的高度对应的阴影值 */\n.element {\n box-shadow: var(--mdui-elevation-level5);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#elevation"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-easing-linear",
|
||
"description": "线性动画的缓动曲线。\n\n**示例**:\n```css\n/* 设置线性动画的缓动曲线 */\n:root {\n --mdui-motion-easing-linear: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取线性动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-linear);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-easing-standard",
|
||
"description": "标准动画的缓动曲线。\n\n**示例**:\n```css\n/* 设置标准动画的缓动曲线 */\n:root {\n --mdui-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取标准动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-standard);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-easing-standard-accelerate",
|
||
"description": "标准加速动画的缓动曲线。\n\n**示例**:\n```css\n/* 设置标准加速动画的缓动曲线 */\n:root {\n --mdui-motion-easing-standard-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取标准加速动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-standard-accelerate);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-easing-standard-decelerate",
|
||
"description": "标准减速动画的缓动曲线。\n\n**示例**:\n```css\n/* 设置标准减速动画的缓动曲线 */\n:root {\n --mdui-motion-easing-standard-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取标准减速动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-standard-decelerate);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-easing-emphasized",
|
||
"description": "强调动画的缓动曲线。\n\n**示例**:\n```css\n/* 设置强调动画的缓动曲线 */\n:root {\n --mdui-motion-easing-emphasized: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取强调动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-emphasized);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-easing-emphasized-accelerate",
|
||
"description": "强调加速动画的缓动曲线。\n\n**示例**:\n```css\n/* 设置强调加速动画的缓动曲线 */\n:root {\n --mdui-motion-easing-emphasized-accelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取强调加速动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-emphasized-accelerate);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-easing-emphasized-decelerate",
|
||
"description": "强调减速动画的缓动曲线。\n\n**示例**:\n```css\n/* 设置强调减速动画的缓动曲线 */\n:root {\n --mdui-motion-easing-emphasized-decelerate: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* 读取强调减速动画的缓动曲线 */\n.element {\n transition-timing-function: var(--mdui-motion-easing-emphasized-decelerate);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-short1",
|
||
"description": "short1 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 short1 动画的持续时间 */\n:root {\n --mdui-motion-duration-short1: 0.3s;\n}\n\n/* 读取 short1 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-short1);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-short2",
|
||
"description": "short2 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 short2 动画的持续时间 */\n:root {\n --mdui-motion-duration-short2: 0.3s;\n}\n\n/* 读取 short2 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-short2);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-short3",
|
||
"description": "short3 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 short3 动画的持续时间 */\n:root {\n --mdui-motion-duration-short3: 0.3s;\n}\n\n/* 读取 short3 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-short3);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-short4",
|
||
"description": "short4 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 short4 动画的持续时间 */\n:root {\n --mdui-motion-duration-short4: 0.3s;\n}\n\n/* 读取 short4 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-short4);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-medium1",
|
||
"description": "medium1 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 medium1 动画的持续时间 */\n:root {\n --mdui-motion-duration-medium1: 0.3s;\n}\n\n/* 读取 medium1 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium1);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-medium2",
|
||
"description": "medium2 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 medium2 动画的持续时间 */\n:root {\n --mdui-motion-duration-medium2: 0.3s;\n}\n\n/* 读取 medium2 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium2);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-medium3",
|
||
"description": "medium3 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 medium3 动画的持续时间 */\n:root {\n --mdui-motion-duration-medium3: 0.3s;\n}\n\n/* 读取 medium3 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium3);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-medium4",
|
||
"description": "medium4 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 medium4 动画的持续时间 */\n:root {\n --mdui-motion-duration-medium4: 0.3s;\n}\n\n/* 读取 medium4 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-medium4);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-long1",
|
||
"description": "long1 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 long1 动画的持续时间 */\n:root {\n --mdui-motion-duration-long1: 0.3s;\n}\n\n/* 读取 long1 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-long1);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-long2",
|
||
"description": "long2 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 long2 动画的持续时间 */\n:root {\n --mdui-motion-duration-long2: 0.3s;\n}\n\n/* 读取 long2 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-long2);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-long3",
|
||
"description": "long3 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 long3 动画的持续时间 */\n:root {\n --mdui-motion-duration-long3: 0.3s;\n}\n\n/* 读取 long3 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-long3);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-long4",
|
||
"description": "long4 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 long4 动画的持续时间 */\n:root {\n --mdui-motion-duration-long4: 0.3s;\n}\n\n/* 读取 long4 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-long4);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-extra-long1",
|
||
"description": "extra-long1 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 extra-long1 动画的持续时间 */\n:root {\n --mdui-motion-duration-extra-long1: 0.3s;\n}\n\n/* 读取 extra-long1 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long1);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-extra-long2",
|
||
"description": "extra-long2 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 extra-long2 动画的持续时间 */\n:root {\n --mdui-motion-duration-extra-long2: 0.3s;\n}\n\n/* 读取 extra-long2 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long2);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-extra-long3",
|
||
"description": "extra-long3 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 extra-long3 动画的持续时间 */\n:root {\n --mdui-motion-duration-extra-long3: 0.3s;\n}\n\n/* 读取 extra-long3 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long3);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-motion-duration-extra-long4",
|
||
"description": "extra-long4 动画的持续时间。\n\n**示例**:\n```css\n/* 设置 extra-long4 动画的持续时间 */\n:root {\n --mdui-motion-duration-extra-long4: 0.3s;\n}\n\n/* 读取 extra-long4 动画的持续时间 */\n.element {\n transition-duration: var(--mdui-motion-duration-extra-long4);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#motion"
|
||
},
|
||
{
|
||
"name": "--mdui-shape-corner-none",
|
||
"description": "none 级别的圆角值。\n\n**示例**:\n```css\n/* 设置 none 级别的圆角值 */\n:root {\n --mdui-shape-corner-none: 4px;\n}\n\n/* 读取 none 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-none);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
|
||
},
|
||
{
|
||
"name": "--mdui-shape-corner-extra-small",
|
||
"description": "extra-small 级别的圆角值。\n\n**示例**:\n```css\n/* 设置 extra-small 级别的圆角值 */\n:root {\n --mdui-shape-corner-extra-small: 4px;\n}\n\n/* 读取 extra-small 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-extra-small);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
|
||
},
|
||
{
|
||
"name": "--mdui-shape-corner-small",
|
||
"description": "small 级别的圆角值。\n\n**示例**:\n```css\n/* 设置 small 级别的圆角值 */\n:root {\n --mdui-shape-corner-small: 4px;\n}\n\n/* 读取 small 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-small);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
|
||
},
|
||
{
|
||
"name": "--mdui-shape-corner-medium",
|
||
"description": "medium 级别的圆角值。\n\n**示例**:\n```css\n/* 设置 medium 级别的圆角值 */\n:root {\n --mdui-shape-corner-medium: 4px;\n}\n\n/* 读取 medium 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-medium);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
|
||
},
|
||
{
|
||
"name": "--mdui-shape-corner-large",
|
||
"description": "large 级别的圆角值。\n\n**示例**:\n```css\n/* 设置 large 级别的圆角值 */\n:root {\n --mdui-shape-corner-large: 4px;\n}\n\n/* 读取 large 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-large);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
|
||
},
|
||
{
|
||
"name": "--mdui-shape-corner-extra-large",
|
||
"description": "extra-large 级别的圆角值。\n\n**示例**:\n```css\n/* 设置 extra-large 级别的圆角值 */\n:root {\n --mdui-shape-corner-extra-large: 4px;\n}\n\n/* 读取 extra-large 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-extra-large);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
|
||
},
|
||
{
|
||
"name": "--mdui-shape-corner-full",
|
||
"description": "full 级别的圆角值。\n\n**示例**:\n```css\n/* 设置 full 级别的圆角值 */\n:root {\n --mdui-shape-corner-full: 4px;\n}\n\n/* 读取 full 级别的圆角值 */\n.element {\n border-radius: var(--mdui-shape-corner-full);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#shape-corner"
|
||
},
|
||
{
|
||
"name": "--mdui-state-layer-hover",
|
||
"description": "`hover` 状态的状态层不透明度。\n\n**示例**:\n```css\n/* 设置 hover 状态的状态层不透明度 */\n:root {\n --mdui-state-layer-hover: 0.1;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#state-layer"
|
||
},
|
||
{
|
||
"name": "--mdui-state-layer-focus",
|
||
"description": "`focus` 状态的状态层不透明度。\n\n**示例**:\n```css\n/* 设置 focus 状态的状态层不透明度 */\n:root {\n --mdui-state-layer-focus: 0.1;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#state-layer"
|
||
},
|
||
{
|
||
"name": "--mdui-state-layer-pressed",
|
||
"description": "`pressed` 状态的状态层不透明度。\n\n**示例**:\n```css\n/* 设置 pressed 状态的状态层不透明度 */\n:root {\n --mdui-state-layer-pressed: 0.1;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#state-layer"
|
||
},
|
||
{
|
||
"name": "--mdui-state-layer-dragged",
|
||
"description": "`dragged` 状态的状态层不透明度。\n\n**示例**:\n```css\n/* 设置 dragged 状态的状态层不透明度 */\n:root {\n --mdui-state-layer-dragged: 0.1;\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#state-layer"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-large-weight",
|
||
"description": "Display Large 字重。\n\n**示例**:\n```css\n/* 设置 Display Large 字重 */\n:root {\n --mdui-typescale-display-large-weight: 500;\n}\n\n/* 读取 Display Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-display-large-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-large-line-height",
|
||
"description": "Display Large 行高。\n\n**示例**:\n```css\n/* 设置 Display Large 行高 */\n:root {\n --mdui-typescale-display-large-line-height: 1.5;\n}\n\n/* 读取 Display Large 行高 */\n.element {\n line-height: var(--mdui-typescale-display-large-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-large-size",
|
||
"description": "Display Large 字体大小。\n\n**示例**:\n```css\n/* 设置 Display Large 字体大小 */\n:root {\n --mdui-typescale-display-large-size: 16px;\n}\n\n/* 读取 Display Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-display-large-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-large-tracking",
|
||
"description": "Display Large 字间距。\n\n**示例**:\n```css\n/* 设置 Display Large 字间距 */\n:root {\n --mdui-typescale-display-large-tracking: 0.1;\n}\n\n/* 读取 Display Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-display-large-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-medium-weight",
|
||
"description": "Display Medium 字重。\n\n**示例**:\n```css\n/* 设置 Display Medium 字重 */\n:root {\n --mdui-typescale-display-medium-weight: 500;\n}\n\n/* 读取 Display Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-display-medium-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-medium-line-height",
|
||
"description": "Display Medium 行高。\n\n**示例**:\n```css\n/* 设置 Display Medium 行高 */\n:root {\n --mdui-typescale-display-medium-line-height: 1.5;\n}\n\n/* 读取 Display Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-display-medium-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-medium-size",
|
||
"description": "Display Medium 字体大小。\n\n**示例**:\n```css\n/* 设置 Display Medium 字体大小 */\n:root {\n --mdui-typescale-display-medium-size: 16px;\n}\n\n/* 读取 Display Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-display-medium-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-medium-tracking",
|
||
"description": "Display Medium 字间距。\n\n**示例**:\n```css\n/* 设置 Display Medium 字间距 */\n:root {\n --mdui-typescale-display-medium-tracking: 0.1;\n}\n\n/* 读取 Display Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-display-medium-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-small-weight",
|
||
"description": "Display Small 字重。\n\n**示例**:\n```css\n/* 设置 Display Small 字重 */\n:root {\n --mdui-typescale-display-small-weight: 500;\n}\n\n/* 读取 Display Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-display-small-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-small-line-height",
|
||
"description": "Display Small 行高。\n\n**示例**:\n```css\n/* 设置 Display Small 行高 */\n:root {\n --mdui-typescale-display-small-line-height: 1.5;\n}\n\n/* 读取 Display Small 行高 */\n.element {\n line-height: var(--mdui-typescale-display-small-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-small-size",
|
||
"description": "Display Small 字体大小。\n\n**示例**:\n```css\n/* 设置 Display Small 字体大小 */\n:root {\n --mdui-typescale-display-small-size: 16px;\n}\n\n/* 读取 Display Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-display-small-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-display-small-tracking",
|
||
"description": "Display Small 字间距。\n\n**示例**:\n```css\n/* 设置 Display Small 字间距 */\n:root {\n --mdui-typescale-display-small-tracking: 0.1;\n}\n\n/* 读取 Display Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-display-small-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-large-weight",
|
||
"description": "Headline Large 字重。\n\n**示例**:\n```css\n/* 设置 Headline Large 字重 */\n:root {\n --mdui-typescale-headline-large-weight: 500;\n}\n\n/* 读取 Headline Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-headline-large-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-large-line-height",
|
||
"description": "Headline Large 行高。\n\n**示例**:\n```css\n/* 设置 Headline Large 行高 */\n:root {\n --mdui-typescale-headline-large-line-height: 1.5;\n}\n\n/* 读取 Headline Large 行高 */\n.element {\n line-height: var(--mdui-typescale-headline-large-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-large-size",
|
||
"description": "Headline Large 字体大小。\n\n**示例**:\n```css\n/* 设置 Headline Large 字体大小 */\n:root {\n --mdui-typescale-headline-large-size: 16px;\n}\n\n/* 读取 Headline Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-headline-large-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-large-tracking",
|
||
"description": "Headline Large 字间距。\n\n**示例**:\n```css\n/* 设置 Headline Large 字间距 */\n:root {\n --mdui-typescale-headline-large-tracking: 0.1;\n}\n\n/* 读取 Headline Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-headline-large-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-medium-weight",
|
||
"description": "Headline Medium 字重。\n\n**示例**:\n```css\n/* 设置 Headline Medium 字重 */\n:root {\n --mdui-typescale-headline-medium-weight: 500;\n}\n\n/* 读取 Headline Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-headline-medium-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-medium-line-height",
|
||
"description": "Headline Medium 行高。\n\n**示例**:\n```css\n/* 设置 Headline Medium 行高 */\n:root {\n --mdui-typescale-headline-medium-line-height: 1.5;\n}\n\n/* 读取 Headline Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-headline-medium-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-medium-size",
|
||
"description": "Headline Medium 字体大小。\n\n**示例**:\n```css\n/* 设置 Headline Medium 字体大小 */\n:root {\n --mdui-typescale-headline-medium-size: 16px;\n}\n\n/* 读取 Headline Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-headline-medium-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-medium-tracking",
|
||
"description": "Headline Medium 字间距。\n\n**示例**:\n```css\n/* 设置 Headline Medium 字间距 */\n:root {\n --mdui-typescale-headline-medium-tracking: 0.1;\n}\n\n/* 读取 Headline Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-headline-medium-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-small-weight",
|
||
"description": "Headline Small 字重。\n\n**示例**:\n```css\n/* 设置 Headline Small 字重 */\n:root {\n --mdui-typescale-headline-small-weight: 500;\n}\n\n/* 读取 Headline Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-headline-small-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-small-line-height",
|
||
"description": "Headline Small 行高。\n\n**示例**:\n```css\n/* 设置 Headline Small 行高 */\n:root {\n --mdui-typescale-headline-small-line-height: 1.5;\n}\n\n/* 读取 Headline Small 行高 */\n.element {\n line-height: var(--mdui-typescale-headline-small-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-small-size",
|
||
"description": "Headline Small 字体大小。\n\n**示例**:\n```css\n/* 设置 Headline Small 字体大小 */\n:root {\n --mdui-typescale-headline-small-size: 16px;\n}\n\n/* 读取 Headline Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-headline-small-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-headline-small-tracking",
|
||
"description": "Headline Small 字间距。\n\n**示例**:\n```css\n/* 设置 Headline Small 字间距 */\n:root {\n --mdui-typescale-headline-small-tracking: 0.1;\n}\n\n/* 读取 Headline Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-headline-small-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-large-weight",
|
||
"description": "Title Large 字重。\n\n**示例**:\n```css\n/* 设置 Title Large 字重 */\n:root {\n --mdui-typescale-title-large-weight: 500;\n}\n\n/* 读取 Title Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-title-large-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-large-line-height",
|
||
"description": "Title Large 行高。\n\n**示例**:\n```css\n/* 设置 Title Large 行高 */\n:root {\n --mdui-typescale-title-large-line-height: 1.5;\n}\n\n/* 读取 Title Large 行高 */\n.element {\n line-height: var(--mdui-typescale-title-large-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-large-size",
|
||
"description": "Title Large 字体大小。\n\n**示例**:\n```css\n/* 设置 Title Large 字体大小 */\n:root {\n --mdui-typescale-title-large-size: 16px;\n}\n\n/* 读取 Title Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-title-large-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-large-tracking",
|
||
"description": "Title Large 字间距。\n\n**示例**:\n```css\n/* 设置 Title Large 字间距 */\n:root {\n --mdui-typescale-title-large-tracking: 0.1;\n}\n\n/* 读取 Title Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-title-large-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-medium-weight",
|
||
"description": "Title Medium 字重。\n\n**示例**:\n```css\n/* 设置 Title Medium 字重 */\n:root {\n --mdui-typescale-title-medium-weight: 500;\n}\n\n/* 读取 Title Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-title-medium-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-medium-line-height",
|
||
"description": "Title Medium 行高。\n\n**示例**:\n```css\n/* 设置 Title Medium 行高 */\n:root {\n --mdui-typescale-title-medium-line-height: 1.5;\n}\n\n/* 读取 Title Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-title-medium-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-medium-size",
|
||
"description": "Title Medium 字体大小。\n\n**示例**:\n```css\n/* 设置 Title Medium 字体大小 */\n:root {\n --mdui-typescale-title-medium-size: 16px;\n}\n\n/* 读取 Title Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-title-medium-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-medium-tracking",
|
||
"description": "Title Medium 字间距。\n\n**示例**:\n```css\n/* 设置 Title Medium 字间距 */\n:root {\n --mdui-typescale-title-medium-tracking: 0.1;\n}\n\n/* 读取 Title Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-title-medium-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-small-weight",
|
||
"description": "Title Small 字重。\n\n**示例**:\n```css\n/* 设置 Title Small 字重 */\n:root {\n --mdui-typescale-title-small-weight: 500;\n}\n\n/* 读取 Title Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-title-small-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-small-line-height",
|
||
"description": "Title Small 行高。\n\n**示例**:\n```css\n/* 设置 Title Small 行高 */\n:root {\n --mdui-typescale-title-small-line-height: 1.5;\n}\n\n/* 读取 Title Small 行高 */\n.element {\n line-height: var(--mdui-typescale-title-small-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-small-size",
|
||
"description": "Title Small 字体大小。\n\n**示例**:\n```css\n/* 设置 Title Small 字体大小 */\n:root {\n --mdui-typescale-title-small-size: 16px;\n}\n\n/* 读取 Title Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-title-small-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-title-small-tracking",
|
||
"description": "Title Small 字间距。\n\n**示例**:\n```css\n/* 设置 Title Small 字间距 */\n:root {\n --mdui-typescale-title-small-tracking: 0.1;\n}\n\n/* 读取 Title Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-title-small-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-large-weight",
|
||
"description": "Label Large 字重。\n\n**示例**:\n```css\n/* 设置 Label Large 字重 */\n:root {\n --mdui-typescale-label-large-weight: 500;\n}\n\n/* 读取 Label Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-label-large-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-large-line-height",
|
||
"description": "Label Large 行高。\n\n**示例**:\n```css\n/* 设置 Label Large 行高 */\n:root {\n --mdui-typescale-label-large-line-height: 1.5;\n}\n\n/* 读取 Label Large 行高 */\n.element {\n line-height: var(--mdui-typescale-label-large-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-large-size",
|
||
"description": "Label Large 字体大小。\n\n**示例**:\n```css\n/* 设置 Label Large 字体大小 */\n:root {\n --mdui-typescale-label-large-size: 16px;\n}\n\n/* 读取 Label Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-label-large-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-large-tracking",
|
||
"description": "Label Large 字间距。\n\n**示例**:\n```css\n/* 设置 Label Large 字间距 */\n:root {\n --mdui-typescale-label-large-tracking: 0.1;\n}\n\n/* 读取 Label Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-label-large-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-medium-weight",
|
||
"description": "Label Medium 字重。\n\n**示例**:\n```css\n/* 设置 Label Medium 字重 */\n:root {\n --mdui-typescale-label-medium-weight: 500;\n}\n\n/* 读取 Label Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-label-medium-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-medium-line-height",
|
||
"description": "Label Medium 行高。\n\n**示例**:\n```css\n/* 设置 Label Medium 行高 */\n:root {\n --mdui-typescale-label-medium-line-height: 1.5;\n}\n\n/* 读取 Label Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-label-medium-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-medium-size",
|
||
"description": "Label Medium 字体大小。\n\n**示例**:\n```css\n/* 设置 Label Medium 字体大小 */\n:root {\n --mdui-typescale-label-medium-size: 16px;\n}\n\n/* 读取 Label Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-label-medium-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-medium-tracking",
|
||
"description": "Label Medium 字间距。\n\n**示例**:\n```css\n/* 设置 Label Medium 字间距 */\n:root {\n --mdui-typescale-label-medium-tracking: 0.1;\n}\n\n/* 读取 Label Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-label-medium-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-small-weight",
|
||
"description": "Label Small 字重。\n\n**示例**:\n```css\n/* 设置 Label Small 字重 */\n:root {\n --mdui-typescale-label-small-weight: 500;\n}\n\n/* 读取 Label Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-label-small-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-small-line-height",
|
||
"description": "Label Small 行高。\n\n**示例**:\n```css\n/* 设置 Label Small 行高 */\n:root {\n --mdui-typescale-label-small-line-height: 1.5;\n}\n\n/* 读取 Label Small 行高 */\n.element {\n line-height: var(--mdui-typescale-label-small-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-small-size",
|
||
"description": "Label Small 字体大小。\n\n**示例**:\n```css\n/* 设置 Label Small 字体大小 */\n:root {\n --mdui-typescale-label-small-size: 16px;\n}\n\n/* 读取 Label Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-label-small-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-label-small-tracking",
|
||
"description": "Label Small 字间距。\n\n**示例**:\n```css\n/* 设置 Label Small 字间距 */\n:root {\n --mdui-typescale-label-small-tracking: 0.1;\n}\n\n/* 读取 Label Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-label-small-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-large-weight",
|
||
"description": "Body Large 字重。\n\n**示例**:\n```css\n/* 设置 Body Large 字重 */\n:root {\n --mdui-typescale-body-large-weight: 500;\n}\n\n/* 读取 Body Large 字重 */\n.element {\n font-weight: var(--mdui-typescale-body-large-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-large-line-height",
|
||
"description": "Body Large 行高。\n\n**示例**:\n```css\n/* 设置 Body Large 行高 */\n:root {\n --mdui-typescale-body-large-line-height: 1.5;\n}\n\n/* 读取 Body Large 行高 */\n.element {\n line-height: var(--mdui-typescale-body-large-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-large-size",
|
||
"description": "Body Large 字体大小。\n\n**示例**:\n```css\n/* 设置 Body Large 字体大小 */\n:root {\n --mdui-typescale-body-large-size: 16px;\n}\n\n/* 读取 Body Large 字体大小 */\n.element {\n font-size: var(--mdui-typescale-body-large-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-large-tracking",
|
||
"description": "Body Large 字间距。\n\n**示例**:\n```css\n/* 设置 Body Large 字间距 */\n:root {\n --mdui-typescale-body-large-tracking: 0.1;\n}\n\n/* 读取 Body Large 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-body-large-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-medium-weight",
|
||
"description": "Body Medium 字重。\n\n**示例**:\n```css\n/* 设置 Body Medium 字重 */\n:root {\n --mdui-typescale-body-medium-weight: 500;\n}\n\n/* 读取 Body Medium 字重 */\n.element {\n font-weight: var(--mdui-typescale-body-medium-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-medium-line-height",
|
||
"description": "Body Medium 行高。\n\n**示例**:\n```css\n/* 设置 Body Medium 行高 */\n:root {\n --mdui-typescale-body-medium-line-height: 1.5;\n}\n\n/* 读取 Body Medium 行高 */\n.element {\n line-height: var(--mdui-typescale-body-medium-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-medium-size",
|
||
"description": "Body Medium 字体大小。\n\n**示例**:\n```css\n/* 设置 Body Medium 字体大小 */\n:root {\n --mdui-typescale-body-medium-size: 16px;\n}\n\n/* 读取 Body Medium 字体大小 */\n.element {\n font-size: var(--mdui-typescale-body-medium-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-medium-tracking",
|
||
"description": "Body Medium 字间距。\n\n**示例**:\n```css\n/* 设置 Body Medium 字间距 */\n:root {\n --mdui-typescale-body-medium-tracking: 0.1;\n}\n\n/* 读取 Body Medium 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-body-medium-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-small-weight",
|
||
"description": "Body Small 字重。\n\n**示例**:\n```css\n/* 设置 Body Small 字重 */\n:root {\n --mdui-typescale-body-small-weight: 500;\n}\n\n/* 读取 Body Small 字重 */\n.element {\n font-weight: var(--mdui-typescale-body-small-weight);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-small-line-height",
|
||
"description": "Body Small 行高。\n\n**示例**:\n```css\n/* 设置 Body Small 行高 */\n:root {\n --mdui-typescale-body-small-line-height: 1.5;\n}\n\n/* 读取 Body Small 行高 */\n.element {\n line-height: var(--mdui-typescale-body-small-line-height);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-small-size",
|
||
"description": "Body Small 字体大小。\n\n**示例**:\n```css\n/* 设置 Body Small 字体大小 */\n:root {\n --mdui-typescale-body-small-size: 16px;\n}\n\n/* 读取 Body Small 字体大小 */\n.element {\n font-size: var(--mdui-typescale-body-small-size);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
},
|
||
{
|
||
"name": "--mdui-typescale-body-small-tracking",
|
||
"description": "Body Small 字间距。\n\n**示例**:\n```css\n/* 设置 Body Small 字间距 */\n:root {\n --mdui-typescale-body-small-tracking: 0.1;\n}\n\n/* 读取 Body Small 字间距 */\n.element {\n letter-spacing: var(--mdui-typescale-body-small-tracking);\n}\n```\n",
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/design-tokens#typescale"
|
||
}
|
||
],
|
||
"classes": [
|
||
{
|
||
"name": "mdui-theme-light",
|
||
"description": "将此 class 添加到元素上,该元素及其子元素将使用亮色模式显示。",
|
||
"description-sections": {
|
||
"示例": "```html\n<div class=\"mdui-theme-light\"></div>\n```"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/dark-mode"
|
||
},
|
||
{
|
||
"name": "mdui-theme-dark",
|
||
"description": "将此 class 添加到 `<html>` 元素上,整个页面将使用暗色模式显示。也可以添加到其他元素上,使该元素及其子元素使用暗色模式显示。",
|
||
"description-sections": {
|
||
"示例": "```html\n<!-- 整个页面使用暗色模式显示 -->\n<html class=\"mdui-theme-dark\"></html>\n\n<!-- 该元素及其子元素使用暗色模式显示 -->\n<div class=\"mdui-theme-dark\"></div>\n```"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/dark-mode"
|
||
},
|
||
{
|
||
"name": "mdui-theme-auto",
|
||
"description": "将此 class 添加到 `<html>` 上,整个页面将根据操作系统设置自动切换亮色模式和暗色模式。也可添加到其他元素上,使该元素及其子元素自动切换亮色模式和暗色模式。",
|
||
"description-sections": {
|
||
"示例": "```html\n<!-- 整个页面自动切换亮色模式和暗色模式 -->\n<html class=\"mdui-theme-auto\"></html>\n\n<!-- 该元素及其子元素自动切换亮色模式和暗色模式 -->\n<div class=\"mdui-theme-auto\"></div>\n```"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/dark-mode"
|
||
},
|
||
{
|
||
"name": "mdui-prose",
|
||
"description": "添加此 class,将优化文章的排版样式。",
|
||
"description-sections": {
|
||
"示例": "```html\n<div class=\"mdui-prose\">\n <h1>文章标题</h2>\n <p>文章正文</p>\n</div>\n```"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/prose"
|
||
},
|
||
{
|
||
"name": "mdui-table",
|
||
"description": "在 `<table>` 元素上添加此 class,将优化表格的显示样式。\n\n也可以添加在 `<table>` 的父元素上,除了优化表格显示样式外,还支持表格横向滚动",
|
||
"description-sections": {
|
||
"示例": "```html\n<table class=\"mdui-table\"></table>\n\n<div class=\"mdui-table\">\n <table></table>\n</div>\n```"
|
||
},
|
||
"doc-url": "https://www.mdui.org/zh-cn/docs/2/styles/prose"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
} |