共计 1517 个字符，预计需要花费 4 分钟才能阅读完成。
前言
随着利用开发需要的一直增大，疾速开发曾经成为很多企业指标，然而传统的应用程序想要实现疾速开发并不事实，那怎么办呢？低代码开发平台能够帮到你。低代码开发领有的组件化特点是明天的主题，让咱们以 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 案例
