前言
随着利用开发需要的一直增大，疾速开发曾经成为很多企业指标，然而传统的应用程序想要实现疾速开发并不事实，那怎么办呢？低代码开发平台能够帮到你。低代码开发领有的组件化特点是明天的主题，让咱们以button为例，来看看iofod是如何实现button的基本功能。
Button的相干介绍
1. 什么是button
在UI设计中，button是一个明确批示交互行为动作的组件，次要用于触发某一个即时操作，很多时候，咱们须要采取下一步口头或返回到上一步，都要通过按钮（请疏忽手势交互）来实现。
2. Button的倒退历史
2009年，按钮设计的以灰色为主导。按钮简直都是用奥妙的突变， 圆角，和暗影形成。
2010年，按钮的格调应用了更多的色彩，更多的细节(例如内暗影)，更多的装璜排版。
2011年，拟物化仍旧占主导地位，然而有很多设计者开始在这个格调上进行翻新。
2012年，拟物化格调趋势降落，扁平化格调趋势开始呈现。
2013年，这一年也呈现了新的设计趋势——扁平化设计。
2014年，每个设计师简直是忽然开始用扁平化格调的按钮。
2015年，扁平的按钮下方减少了渺小的暗影。
2016年，突变呈现在按钮设计中，不再强调三维感，而是强调 按钮自身的质感。按钮开始应用发光的黑白暗影。
2017年，一方面极简主义和扁平化设计曾经继续了一年。
可见button的设计曾经非常成熟了。
以下的描述八年间button款式变动大抵详情的图片出于Dribble——一个为全世界设计师提供分享它们设计我的项目的平台。
Button组件的设计实现
形成该组件的根底元素包含背景、字体。其中，背景button-background：色彩（background color）、形态（border-radius:0px）、相对高度（line height）等等；字体font：色彩（text-color）、大小（font-size:14px）、外部间距【绝对背景平面坐标XYZ】（padding/shadow）等等。
在iofod中，先拖出文本输入框，并在右侧属性编辑区中设置width：184px，height：48px，background color：06C160（主要操作则采纳更淡的色彩），rounded corner：8px。
预览如图：
在特定的场景下，button组件的属性设置是能够更改的。次要看交互事件是如何设置的，以下是设计思路：
按钮有两个状态：1.敞开状态；2.启用状态。敞开状态由$disable模型来管制，增加tap交互事件，通过判断符断言if : $disable == true，如果是真，则执行终止符终止动作。启用状态的前提是$disable == false，当无需作过多设置，只需实现激活状态下的交互事件。首先增加交互动作touchstrat和touchend，后别离先后执行批改模型变量行为（批改$active<current> == true/false），这样子，子状态default:$active就能在一瞬间显示，预览如图：
Iofod通过数据驱动去管制交互事件和状态变动之间的链接，咱们只需设置另一个基于原状态的子状态，输出其款式，而后通过手指触摸开始后进行激活，这样一个button的交互事件就设置实现了。看完之后是不是感觉非常简略。
结语
Button的介绍到此为止。在实现过程中，应用了Iofod反对下的数据驱动，使得每个组件和交互动作都可能取得联系，只有你了解到其中的含意，操作起来非常简略，这就是我喜爱iofod的起因，一个低代码开发平台，对无论是老手还是新手都非常敌对。
iofod - 构建利用毫不费力
相干链接:
- iofod 官网
- iofod 官网文档
- Github 开源
- weui案例