Fab 浮动操作按钮
浮动操作按钮(FAB)用于突出显示页面上的主要操作,它将关键操作置于易于访问的位置。
使用方法
按需导入组件:
import 'mdui/components/fab.js';
按需导入组件的 TypeScript 类型:
import type { Fab } from 'mdui/components/fab.js';
使用示例:
<mdui-fab icon="edit"></mdui-fab>
展开状态
添加 extended
属性可以将 FAB 设置为展开状态,此时 default slot 中的文本将显示出来。
形状
使用 variant
属性可以设置 FAB 的形状。
大小
使用 size
属性可以设置 FAB 的大小。
链接
添加 href
属性,可以使 FAB 具有链接功能,此时还可以使用与链接相关的属性:download
、target
、rel
。
禁用及加载中状态
添加 disabled
属性可以禁用 FAB;添加 loading
属性可以为 FAB 添加加载中状态。
API
属性
HTML 属性 | JavaScript 属性 | Reflect | 类型 | 默认值 |
---|---|---|---|---|
variant | variant | 'primary' | 'surface' | 'secondary' | 'tertiary' | 'primary' | |
FAB 的形状,此组件的不同形状之间只有颜色不一样。可选值包括:
| ||||
size | size | 'normal' | 'small' | 'large' | 'normal' | |
FAB 的大小。可选值包括:
| ||||
icon | icon | string | - | |
Material Icons 图标名。也可以通过 | ||||
extended | extended | 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 |
设置自定义的错误提示文本。只要这个文本不为空,就表示字段未通过验证 |
CSS 自定义属性
名称 |
---|
--shape-corner-small |
|
--shape-corner-normal |
|
--shape-corner-large |
|