移动端基础组件｜按钮 Button

Vant、Nut UI、material Design、Apple Design对于按钮的定义大致如下：

按钮用于传递用户触摸时会触发的操作

在Material Design中，介绍了按钮的多种类型，且对每一个按钮的描述更加具体。

Material 按钮在点击时会有涟漪效果。按钮可以显示文本、图像。扁平按钮和浮动按钮是最常用的两种按钮类型。

其他的按钮类型包括：

底部固定按钮 为扁平按钮，大多用于页面底部或对话框底部。

下拉按钮 可以显示多个下拉选项。

可切换按钮 将相关选项组合起来。图标切换时允许用户选择或取消选择单个选项。

扁平按钮 扁平按钮只包含文本，它们可用于对话框、工具栏或内嵌在其他组件中，它们不会改变海拔高度，但会在点击时改变颜色。

浮动按钮 浮动按钮为矩形按钮，它们可以内嵌在其他组件中，它们在点击时会改变海拔高度和触发涟漪效果。

在前端组件对按钮有如下属性的支持：

- 按钮状态支持默认【default】、主要【primary】、危险【danger】、警告【warning】、成功【success】

- 按钮的尺寸：大号按钮【large】、普通按钮【normal】、小按钮【small】、迷你按钮【mini】

- 按钮的形状：圆形、方形

- 按钮的点击状态：可点击、不可点击

-加载状态的显示、是否提示文字

-是否为按钮图标

-是否带有阴影

-是否有描边

综上，在移动端建立按钮的设计组件规范时可以从几个常见的角度搭建：

1.按钮类型：主要按钮、次要按钮、次次要按钮、带图标按钮、边框按钮、警告按钮、微信按钮、成功按钮...

2.点击状态：按钮默认状态、点击状态、不可点击状态

3.尺寸：超大按钮、大按钮、中按钮、小按钮、mini按钮

4.如果带了图标，在进行命名的时候icon=on，没有带图标icon=false