ButtonIcon 图标按钮
图标按钮主要用于执行一些次要的操作。
使用方法
按需导入组件:
import 'mdui/components/button-icon.js';
按需导入组件的 TypeScript 类型:
import type { ButtonIcon } from 'mdui/components/button-icon.js';
使用示例:
<mdui-button-icon icon="search"></mdui-button-icon>
形状
使用 variant
属性设置图标按钮的形状。
可选中
添加 selectable
属性使图标按钮可被选中。
使用 selected-icon
属性指定选中状态的 Material Icons 图标名称。也可以通过 selected-icon
slot 指定选中状态的图标元素。
图标按钮被选中后,selected
属性变为 true
。也可以通过添加 selected
属性,使图标按钮默认处于选中状态。
链接
添加 href
属性,可使图标按钮变为链接,此时还可使用这些和链接相关的属性:download
、target
、rel
。
禁用及 loading 状态
添加 disabled
属性可禁用图标按钮;添加 loading
属性可为图标按钮添加加载中状态。
API
属性
HTML 属性 | JavaScript 属性 | Reflect | 类型 | 默认值 |
---|---|---|---|---|
variant | variant | 'standard' | 'filled' | 'tonal' | 'outlined' | 'standard' | |
图标按钮的形状。可选值包括:
| ||||
icon | icon | string | - | |
Material Icons 图标名。也可以通过 default slot 设置 | ||||
selected-icon | selectedIcon | string | - | |
选中状态的 Material Icons 图标名。也可以通过 | ||||
selectable | selectable | boolean | false | |
是否可选中 | ||||
selected | selected | boolean | false | |
是否已被选中 | ||||
href | href | string | - | |
链接的目标 URL。 如果设置了此属性,组件内部将渲染为 | ||||
download | download | string | - | |
下载链接的目标。 Note:仅在设置了 | ||||
target | target | '_blank' | '_parent' | '_self' | '_top' | - | |
链接的打开方式。可选值包括:
Note:仅在设置了 | ||||
rel | rel | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - | |
当前文档与被链接文档之间的关系。可选值包括:
Note:仅在指定了 | ||||
autofocus | autofocus | boolean | false | |
是否在页面加载完成后自动获取焦点 | ||||
tabindex | tabIndex | number | - | |
元素在使用 Tab 键切换焦点时的顺序 | ||||
disabled | disabled | boolean | false | |
是否禁用 | ||||
loading | loading | boolean | false | |
是否处于加载中状态 | ||||
name | name | string | '' | |
按钮的名称,将与表单数据一起提交。 Note:仅在未设置 | ||||
value | value | string | '' | |
按钮的初始值,将与表单数据一起提交。 Note:仅在未设置 | ||||
type | type | 'submit' | 'reset' | 'button' | 'button' | |
按钮的类型。默认类型为
Note:仅在未指定 | ||||
form | form | string | - | |
关联的 如果未指定此属性,则该元素必须是 Note:仅在未指定 | ||||
formaction | formAction | string | - | |
指定提交表单的 URL。 如果指定了此属性,将覆盖 Note:仅在未指定 | ||||
formenctype | formEnctype | 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | - | |
指定提交表单到服务器的内容类型。可选值包括:
如果指定了此属性,将覆盖 Note:仅在未指定 | ||||
formmethod | formMethod | 'post' | 'get' | - | |
指定提交表单时使用的 HTTP 方法。可选值包括:
如果设置了此属性,将覆盖 Note:仅在未设置 | ||||
formnovalidate | formNoValidate | boolean | false | |
如果设置了此属性,表单提交时将不执行表单验证。 如果设置了此属性,将覆盖 Note:仅在未设置 | ||||
formtarget | formTarget | '_self' | '_blank' | '_parent' | '_top' | - | |
提交表单后接收到的响应应显示在何处。可选值包括:
如果设置了此属性,将覆盖 Note:仅在未设置 | ||||
validity | ValidityState | - | ||
表单验证状态对象,具体参见 | ||||
validationMessage | string | - | ||
如果表单验证未通过,此属性将包含提示信息。如果验证通过,此属性将为空字符串 |
方法
名称 | 参数 | 返回值 |
---|---|---|
click | void | |
模拟鼠标点击元素 | ||
focus |
| void |
将焦点设置到当前元素。 可以传入一个对象作为参数,该对象的属性包括:
| ||
blur | void | |
移除当前元素的焦点 | ||
checkValidity | boolean | |
检查表单字段是否通过验证。如果未通过,返回 | ||
reportValidity | boolean | |
检查表单字段是否通过验证。如果未通过,返回 如果验证未通过,还会在组件上显示验证失败的提示。 | ||
setCustomValidity |
| void |
设置自定义的错误提示文本。只要这个文本不为空,就表示字段未通过验证 |
Slots
名称 |
---|
默认 |
图标组件 |
selected-icon |
选中状态显示的图标元素 |
CSS Parts
名称 |
---|
button |
内部的 |
icon |
未选中状态的图标 |
selected-icon |
选中状态的图标 |
loading |
加载中状态的 |
CSS 自定义属性
名称 |
---|
--shape-corner |
组件的圆角大小。可以指定一个具体的像素值;但更推荐引用设计令牌 |