UNPKG

mdui

Version:

实现 material you 设计规范的 Web Components 组件库

1,504 lines 265 kB
{ "version": 1.1, "tags": [ { "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 地址", "references": [ { "name": "开发文档", "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` 中较小的一个相同", "values": [ { "name": "contain", "description": "保持图片原有尺寸比例,内容会被等比例缩放" }, { "name": "cover", "description": "保持图片原有尺寸比例,但部分内容可能被剪切" }, { "name": "fill", "description": "默认值,不保持图片原有尺寸比例,内容会被拉伸以填充整个容器" }, { "name": "none", "description": "保留图片原有尺寸,内容不会被缩放或拉伸" }, { "name": "scale-down", "description": "保持图片原有尺寸比例,内容尺寸与 `none` 或 `contain` 中较小的一个相同" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-fit" } ] }, { "name": "icon", "description": "头像的 Material Icons 图标名", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-icon" } ] }, { "name": "label", "description": "头像的替代文本描述", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/avatar#attributes-label" } ] } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/avatar" }, { "name": "Github", "url": "https://github.com/zdhxiong/mdui/blob/v2/packages/mdui/src/components/avatar/index.ts" } ] }, { "name": "mdui-badge", "description": "徽标组件\n\n```html\n<mdui-badge>12</mdui-badge>\n```", "attributes": [ { "name": "variant", "description": "徽标的形状。可选值包括:\n\n* `small`:小型徽标,不显示文本\n* `large`:大型徽标,会显示文本", "values": [ { "name": "small", "description": "小型徽标,不显示文本" }, { "name": "large", "description": "大型徽标,会显示文本" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/badge#attributes-variant" } ] } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/badge" }, { "name": "Github", "url": "https://github.com/zdhxiong/mdui/blob/v2/packages/mdui/src/components/badge/index.ts" } ] }, { "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": "是否隐藏", "references": [ { "name": "开发文档", "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) 仍会停留在页面上", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-fab-detach" } ] }, { "name": "scroll-behavior", "description": "滚动行为。可选值为:\n\n* `hide`:滚动时隐藏", "values": [ { "name": "hide" }, { "name": "shrink" }, { "name": "elevate" } ], "references": [ { "name": "开发文档", "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` 的滚动事件", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-scroll-target" } ] }, { "name": "scroll-threshold", "description": "在滚动多少距离之后触发滚动行为,单位为 `px`", "references": [ { "name": "开发文档", "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`", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar#attributes-order" } ] } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/bottom-app-bar" }, { "name": "Github", "url": "https://github.com/zdhxiong/mdui/blob/v2/packages/mdui/src/components/bottom-app-bar/index.ts" } ] }, { "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`:适用于中等优先级的操作", "values": [ { "name": "standard", "description": "适用于最低优先级的操作" }, { "name": "filled", "description": "视觉效果强烈,适用于高优先级的操作" }, { "name": "tonal", "description": "视觉效果介于 `filled` 和 `outlined` 之间,适用于中高优先级的操作" }, { "name": "outlined", "description": "适用于中等优先级的操作" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-variant" } ] }, { "name": "icon", "description": "Material Icons 图标名。也可以通过 default slot 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-icon" } ] }, { "name": "selected-icon", "description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selected-icon" } ] }, { "name": "selectable", "description": "是否可选中", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selectable" } ] }, { "name": "selected", "description": "是否已被选中", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-selected" } ] }, { "name": "href", "description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-href" } ] }, { "name": "download", "description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "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` 属性时,此属性才有效。", "values": [ { "name": "_blank", "description": "在新窗口中打开链接" }, { "name": "_parent", "description": "在父框架中打开链接" }, { "name": "_self", "description": "默认。在当前框架中打开链接" }, { "name": "_top", "description": "在整个窗口中打开链接" } ], "references": [ { "name": "开发文档", "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` 属性时可用。", "values": [ { "name": "alternate", "description": "当前文档的替代版本" }, { "name": "author", "description": "当前文档或文章的作者" }, { "name": "bookmark", "description": "永久链接到最近的祖先章节" }, { "name": "external", "description": "引用的文档与当前文档不在同一站点" }, { "name": "help", "description": "链接到相关的帮助文档" }, { "name": "license", "description": "当前文档的主要内容由被引用文件的版权许可覆盖" }, { "name": "me", "description": "当前文档代表链接内容的所有者" }, { "name": "next", "description": "当前文档是系列中的一部分,被引用的文档是系列的下一个文档" }, { "name": "nofollow", "description": "当前文档的作者或发布者不认可被引用的文件" }, { "name": "noreferrer", "description": "不包含 `Referer` 头。类似于 `noopener` 的效果" }, { "name": "opener", "description": "如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文" }, { "name": "prev", "description": "当前文档是系列的一部分,被引用的文档是系列的上一个文档" }, { "name": "search", "description": "提供一个资源链接,可用于搜索当前文件及其相关页面" }, { "name": "tag", "description": "提供一个适用于当前文档的标签(由给定地址识别)" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-rel" } ] }, { "name": "autofocus", "description": "是否在页面加载完成后自动获取焦点", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-autofocus" } ] }, { "name": "tabindex", "description": "元素在使用 Tab 键切换焦点时的顺序", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-tabindex" } ] }, { "name": "disabled", "description": "是否禁用", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-disabled" } ] }, { "name": "loading", "description": "是否处于加载中状态", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-loading" } ] }, { "name": "name", "description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-name" } ] }, { "name": "value", "description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "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` 属性时,此属性才有效。", "values": [ { "name": "submit", "description": "此按钮将表单数据提交给服务器" }, { "name": "reset", "description": "此按钮重置所有组件为初始值" }, { "name": "button", "description": "此按钮没有默认行为" } ], "references": [ { "name": "开发文档", "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` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "values": [ { "name": "application/x-www-form-urlencoded", "description": "未指定该属性时的默认值" }, { "name": "multipart/form-data", "description": "当表单包含 `<input type=\"file\">` 元素时使用" }, { "name": "text/plain", "description": "HTML5 新增,用于调试" } ], "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "values": [ { "name": "post", "description": "表单数据包含在表单内容中,发送到服务器" }, { "name": "get", "description": "表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法" } ], "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "values": [ { "name": "_self", "description": "默认选项,在当前框架中打开" }, { "name": "_blank", "description": "在新窗口中打开" }, { "name": "_parent", "description": "在父框架中打开" }, { "name": "_top", "description": "在整个窗口中打开" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon#attributes-formtarget" } ] } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button-icon" }, { "name": "Github", "url": "https://github.com/zdhxiong/mdui/blob/v2/packages/mdui/src/components/button-icon/index.ts" } ] }, { "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`:文本按钮,适用于最低优先级的操作", "values": [ { "name": "elevated", "description": "带阴影的按钮,适用于需要将按钮与背景视觉分离的场景" }, { "name": "filled", "description": "视觉效果强烈,适用于重要流程的最终操作,如“保存”、“确认”等" }, { "name": "tonal", "description": "视觉效果介于 `filled` 和 `outlined` 之间,适用于中高优先级的操作,如流程中的“下一步”" }, { "name": "outlined", "description": "带边框的按钮,适用于中等优先级,且次要的操作,如“返回”" }, { "name": "text", "description": "文本按钮,适用于最低优先级的操作" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-variant" } ] }, { "name": "full-width", "description": "是否填满父元素宽度", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-full-width" } ] }, { "name": "icon", "description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-icon" } ] }, { "name": "end-icon", "description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-end-icon" } ] }, { "name": "href", "description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-href" } ] }, { "name": "download", "description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "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` 属性时,此属性才有效。", "values": [ { "name": "_blank", "description": "在新窗口中打开链接" }, { "name": "_parent", "description": "在父框架中打开链接" }, { "name": "_self", "description": "默认。在当前框架中打开链接" }, { "name": "_top", "description": "在整个窗口中打开链接" } ], "references": [ { "name": "开发文档", "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` 属性时可用。", "values": [ { "name": "alternate", "description": "当前文档的替代版本" }, { "name": "author", "description": "当前文档或文章的作者" }, { "name": "bookmark", "description": "永久链接到最近的祖先章节" }, { "name": "external", "description": "引用的文档与当前文档不在同一站点" }, { "name": "help", "description": "链接到相关的帮助文档" }, { "name": "license", "description": "当前文档的主要内容由被引用文件的版权许可覆盖" }, { "name": "me", "description": "当前文档代表链接内容的所有者" }, { "name": "next", "description": "当前文档是系列中的一部分,被引用的文档是系列的下一个文档" }, { "name": "nofollow", "description": "当前文档的作者或发布者不认可被引用的文件" }, { "name": "noreferrer", "description": "不包含 `Referer` 头。类似于 `noopener` 的效果" }, { "name": "opener", "description": "如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文" }, { "name": "prev", "description": "当前文档是系列的一部分,被引用的文档是系列的上一个文档" }, { "name": "search", "description": "提供一个资源链接,可用于搜索当前文件及其相关页面" }, { "name": "tag", "description": "提供一个适用于当前文档的标签(由给定地址识别)" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-rel" } ] }, { "name": "autofocus", "description": "是否在页面加载完成后自动获取焦点", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-autofocus" } ] }, { "name": "tabindex", "description": "元素在使用 Tab 键切换焦点时的顺序", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-tabindex" } ] }, { "name": "disabled", "description": "是否禁用", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-disabled" } ] }, { "name": "loading", "description": "是否处于加载中状态", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-loading" } ] }, { "name": "name", "description": "按钮的名称,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-name" } ] }, { "name": "value", "description": "按钮的初始值,将与表单数据一起提交。\n\n**Note**:仅在未设置 `href` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "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` 属性时,此属性才有效。", "values": [ { "name": "submit", "description": "此按钮将表单数据提交给服务器" }, { "name": "reset", "description": "此按钮重置所有组件为初始值" }, { "name": "button", "description": "此按钮没有默认行为" } ], "references": [ { "name": "开发文档", "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` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "values": [ { "name": "application/x-www-form-urlencoded", "description": "未指定该属性时的默认值" }, { "name": "multipart/form-data", "description": "当表单包含 `<input type=\"file\">` 元素时使用" }, { "name": "text/plain", "description": "HTML5 新增,用于调试" } ], "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "values": [ { "name": "post", "description": "表单数据包含在表单内容中,发送到服务器" }, { "name": "get", "description": "表单数据以 `?` 作为分隔符附加到表单的 URI 属性中,生成的 URI 发送到服务器。当表单没有副作用,并且仅包含 ASCII 字符时,使用此方法" } ], "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "references": [ { "name": "开发文档", "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\"` 时,此属性才有效。", "values": [ { "name": "_self", "description": "默认选项,在当前框架中打开" }, { "name": "_blank", "description": "在新窗口中打开" }, { "name": "_parent", "description": "在父框架中打开" }, { "name": "_top", "description": "在整个窗口中打开" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button#attributes-formtarget" } ] } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/button" }, { "name": "Github", "url": "https://github.com/zdhxiong/mdui/blob/v2/packages/mdui/src/components/button/index.ts" } ] }, { "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`:带边框的卡片,与背景的视觉分离度最高", "values": [ { "name": "elevated", "description": "带阴影的卡片,与背景的视觉分离度较高" }, { "name": "filled", "description": "带填充色的卡片,与背景的视觉分离度较低" }, { "name": "outlined", "description": "带边框的卡片,与背景的视觉分离度最高" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-variant" } ] }, { "name": "clickable", "description": "是否可点击。为 `true` 时,卡片将具有鼠标悬浮效果和点击涟漪效果", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-clickable" } ] }, { "name": "disabled", "description": "是否禁用", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-disabled" } ] }, { "name": "href", "description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-href" } ] }, { "name": "download", "description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "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` 属性时,此属性才有效。", "values": [ { "name": "_blank", "description": "在新窗口中打开链接" }, { "name": "_parent", "description": "在父框架中打开链接" }, { "name": "_self", "description": "默认。在当前框架中打开链接" }, { "name": "_top", "description": "在整个窗口中打开链接" } ], "references": [ { "name": "开发文档", "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` 属性时可用。", "values": [ { "name": "alternate", "description": "当前文档的替代版本" }, { "name": "author", "description": "当前文档或文章的作者" }, { "name": "bookmark", "description": "永久链接到最近的祖先章节" }, { "name": "external", "description": "引用的文档与当前文档不在同一站点" }, { "name": "help", "description": "链接到相关的帮助文档" }, { "name": "license", "description": "当前文档的主要内容由被引用文件的版权许可覆盖" }, { "name": "me", "description": "当前文档代表链接内容的所有者" }, { "name": "next", "description": "当前文档是系列中的一部分,被引用的文档是系列的下一个文档" }, { "name": "nofollow", "description": "当前文档的作者或发布者不认可被引用的文件" }, { "name": "noreferrer", "description": "不包含 `Referer` 头。类似于 `noopener` 的效果" }, { "name": "opener", "description": "如果超链接会创建一个顶级浏览上下文(即 `target` 属性值为 `_blank`),则创建一个辅助浏览上下文" }, { "name": "prev", "description": "当前文档是系列的一部分,被引用的文档是系列的上一个文档" }, { "name": "search", "description": "提供一个资源链接,可用于搜索当前文件及其相关页面" }, { "name": "tag", "description": "提供一个适用于当前文档的标签(由给定地址识别)" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-rel" } ] }, { "name": "autofocus", "description": "是否在页面加载完成后自动获取焦点", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-autofocus" } ] }, { "name": "tabindex", "description": "元素在使用 Tab 键切换焦点时的顺序", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/card#attributes-tabindex" } ] } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/card" }, { "name": "Github", "url": "https://github.com/zdhxiong/mdui/blob/v2/packages/mdui/src/components/card/index.ts" } ] }, { "name": "mdui-checkbox", "description": "复选框组件\n\n```html\n<mdui-checkbox>Checkbox</mdui-checkbox>\n```", "attributes": [ { "name": "disabled", "description": "是否为禁用状态", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-disabled" } ] }, { "name": "checked", "description": "是否为选中状态", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checked" } ] }, { "name": "indeterminate", "description": "是否处于不确定状态", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminate" } ] }, { "name": "required", "description": "提交表单时,是否必须选中此复选框", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-required" } ] }, { "name": "form", "description": "关联的 `<form>` 元素。此属性值应为同一页面中的一个 `<form>` 元素的 `id`。\n\n如果未指定此属性,则该元素必须是 `<form>` 元素的子元素。通过此属性,你可以将元素放置在页面的任何位置,而不仅仅是 `<form>` 元素的子元素。", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-form" } ] }, { "name": "name", "description": "复选框名称,将与表单数据一起提交", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-name" } ] }, { "name": "value", "description": "复选框的值,将于表单数据一起提交", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-value" } ] }, { "name": "unchecked-icon", "description": "未选中状态的 Material Icons 图标名。也可以通过 `slot=\"unchecked-icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-unchecked-icon" } ] }, { "name": "checked-icon", "description": "选中状态的 Material Icons 图标名。也可以通过 `slot=\"checked-icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-checked-icon" } ] }, { "name": "indeterminate-icon", "description": "不确定状态的 Material Icons 图标名。也可以通过 `slot=\"indeterminate-icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-indeterminate-icon" } ] }, { "name": "autofocus", "description": "是否在页面加载完成后自动获取焦点", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-autofocus" } ] }, { "name": "tabindex", "description": "元素在使用 Tab 键切换焦点时的顺序", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox#attributes-tabindex" } ] } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/checkbox" }, { "name": "Github", "url": "https://github.com/zdhxiong/mdui/blob/v2/packages/mdui/src/components/checkbox/index.ts" } ] }, { "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`:用于提供动态生成的推荐信息,以简化用户操作,如在聊天应用中预测用户可能想发送的信息", "values": [ { "name": "assist", "description": "用于显示与当前上下文相关的辅助操作,如在点餐页面提供分享、收藏等功能" }, { "name": "filter", "description": "用于对内容进行筛选,如在搜索结果页过滤搜索结果" }, { "name": "input", "description": "用于表示用户输入的信息片段,如在 Gmail 的“收件人”字段中的联系人" }, { "name": "suggestion", "description": "用于提供动态生成的推荐信息,以简化用户操作,如在聊天应用中预测用户可能想发送的信息" } ], "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-variant" } ] }, { "name": "elevated", "description": "是否显示阴影", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-elevated" } ] }, { "name": "selectable", "description": "是否可选中", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selectable" } ] }, { "name": "selected", "description": "是否已选中", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selected" } ] }, { "name": "deletable", "description": "是否可删除。为 `true` 时,纸片右侧会显示删除图标", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-deletable" } ] }, { "name": "icon", "description": "左侧的 Material Icons 图标名。也可以通过 `slot=\"icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-icon" } ] }, { "name": "selected-icon", "description": "选中状态下左侧的 Material Icons 图标名。也可以通过 `slot=\"selected-icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-selected-icon" } ] }, { "name": "end-icon", "description": "右侧的 Material Icons 图标名。也可以通过 `slot=\"end-icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-end-icon" } ] }, { "name": "delete-icon", "description": "可删除时,右侧删除图标的 Material Icons 图标名。也可以通过 `slot=\"delete-icon\"` 设置", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-delete-icon" } ] }, { "name": "href", "description": "链接的目标 URL。\n\n如果设置了此属性,组件内部将渲染为 `<a>` 元素,并可以使用链接相关的属性。", "references": [ { "name": "开发文档", "url": "https://www.mdui.org/zh-cn/docs/2/components/chip#attributes-href" } ] }, { "name": "download", "description": "下载链接的目标。\n\n**Note**:仅在设置了 `href` 属性时,此属性才有效。", "references": [ { "name": "开发文档", "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` 属性时,此属性才有效。", "values": [ { "name": "_blank", "description": "在新窗口中打开链接" }, { "name": "_parent", "description": "在父框架中打开链接" }, { "name": "_self", "description": "默认。在当前框架中打开链接" }, { "name": "_top", "description": "在整个窗口中打开链接" } ], "references": [ { "name": "开发文档", "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` 属性时可用。", "values": [ { "name": "alternate", "description": "当前文档的替代版本" }, { "name": "author", "description": "当前文档或文章的作者" }, { "name": "bookmark", "description": "永久链接到最近的祖先章节" }, { "name": "external", "description": "引用的文档与当前文档不在同一站点" }, { "name": "help", "description": "链接到相关的帮助文档" }, { "name": "license", "description": "当前文档的主要内容由被引用文件的版权许可覆盖" }, { "name": "me", "description": "当前文档代表链接内容的所有者" }, { "name": "next", "description": "当前文档是系列中的一部分,被引用的文档是系列的下一个文档" }, { "name": "nofollow", "description": "当前文档的作者或发布者不认可被引用的文件" }, { "name": "noreferre