名称：

Button | 按钮

图标：

功能：

• 有默认样式的按钮元件，可以修改或自定义按钮样式
• 用户在前端可以直接看到一个带名称的按钮，点击后触发其内部的“”固定名称的逻辑处理元件（这个在有代码传统开发中是一个点击事件）

• 可以添加固定名称“<Disabled>”的一个字符变量元件，功能是是否设定按钮为失效状态，失效状态下用户点击后并不能触发点击事件

  使用方式：

  设计一个用户体验更好的按钮

• 按钮内部的“<Caption>”字符类型变量默认存放按钮名称，需要显示非按钮命名的名称时传入新名称字符，不过一般的用法就是当执行完逻辑运算后，如果有需要时可在按钮上直接反馈一个结果，比如一个“提交”按钮，当客户点击后，“提交”变为“您已提交”或是“谢谢提交”，这类用法可大幅提高用户体验，且实现方式简单

• 按钮中可以放置一个动态旋转图片显示的图片元件，在大数据或长时间的点击事件处理时，可以让用户在点击后显示一个旋转的图标，给用户一个正在运行的反馈以提升用户体验

先在按钮中添加一个图片元件，传入“images”文件夹下的一个动态旋转图标 图片元件的样式属性中设定图片尺寸（不大于按钮尺寸）及显示位置 图片中放一个“”固定名称的布尔变量，先为其传入一个布尔No值，即初始不显示 在按钮点击事件的行为处理元件中，先将图片的显示变量改为Yes值传入，则用户点击后按钮显示一个旋转图标 当逻辑处理完成后，完成“”的空值输出连至一个布尔常量No值，再将No值传给图片“”变量改变图片显示状态

以下为客户端操作演示：

• 添加固定名称“<Disabled>”的一个布尔类型的变量子元件，来设定按钮是否失效状态，可以在页面预处理逻辑中，设计在某些条件下按钮不可以操作，传一个布尔值No给此元件即可；比如如果输入信息未达到设定的要求字数或是有些内容未输入有空白就传入布尔No借让按钮失效，当全部输入符合要求传Yes值给此变量

• 可以添加固定名称的布尔类型属性变量如“<Visible>”来控制按钮的显示与不显示

  样式属性：

• 属性设置与Pane显示块元件的属性设置一样，在属性中添加“html.style”即可进行样式标签及值的定义

• 可以使用样式类，在“html.styleClass”属性中设定类名称
• 样式及样式类定义请参考“无代码图形化编程”“前端及样式设计”一章
• 默认样式类“btn btn-primary”定义的文件是“web\styles\bootstrap”下“016-buttons.less”文件，查询“btn”即可找到所有样式定义内容，可以修改某些默认的样式为自己的显示风格
  · 修改样式类文件中默认显示样式类方式请参考本章中“带标签的字符输入”一节相关内容
  · 建议最大可能利用LESS框架的样式类进行统一风格设计，将会使项目的设计速度加快、减少设计工作量，同时维护成本大量节省

• 按钮属性设定中，无代码开发平台在样式文件中已默认定义了以下几个样式类可以显示不同颜色，可以在元件的“html.styleClass”属性中修改默认定义“btn-primary”为“btn-info”或“btn-success”等进行显示效果测试:

  · btn-primary默认蓝色按钮 · btn-danger默认红色按钮 · btn-warning默认黄色按钮 · btn-success默认绿色按钮 · btn-inverse默认为黑底白定的按钮 · 只保留btn样式类名称，删除后面btn-x的样式类名时是白底黑字按钮

• 可以在样式文件中修改颜色自定义某个类名称按钮颜色；或添加列多类名称和样式值