01. 提交按钮组件专为表单提交打造,组件本身提供了交互动画、成功提示、失败提示等数据提交相关的过程展示。
02. 提交按钮依然使用原生按钮为基础,但对原生按钮进行了隐藏,实现了多平台按钮样式统一的目标。
gui-submit-button : /graceUI/组件目录/gui-submit-button
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
属性名称 | 类型 | 默认值 | 作用 |
titleClass | String | gui-sbutton-text | 按钮标题颜色名称 |
loaingPointClass | String | gui-sbutton-loading-point | 按钮加载圆点样式名称 |
baseClass | String | gui-sbutton | 按钮基础样式名称,用于规划尺寸 圆角等基础样式 |
defaultClass | String | gui-sbutton-default | 按钮默认样式 |
loadingClass | String | gui-sbutton-loading | 按钮数据交互时加载样式 |
successClass | String | gui-sbutton-success | 提交成功时按钮样式 |
failClass | String | gui-sbutton-fail | 提交失败是按钮样式 |
以上样式都保存在框架皮肤样式内,皮肤样式内同时还提供了修改按钮样式的演示,请按照要求部署皮肤和修改文件( 请仔细观看群文件框架部署视频教程 )。
01. <slot name="default"></slot> 按钮默认展示元素
02. <slot name="success"></slot> 提交成功展示元素
03. <slot name="error"></slot> 提交失败展示元素
04. <slot name="realBtn"></slot> 原生按钮原生( 真正起到表单提交作用,但元素会被透明化 )