Button 按钮

Ripple

按钮是移动端最重要的组件,常用于单击操作。分为“主按钮”、“幽灵按钮”、“扁平按钮”,每种按钮都有不同状态,点击时可以触发 Ripple 效果,并伴随设备振动。

按钮尺寸

按钮分为两种尺寸:“大型按钮”、“小型按钮”

“大型按钮”一般横贯整个设备宽度,而“小型按钮”则经常出现在行内。

按钮尺寸

大型按钮

每个按钮分为四种状态:

“正常状态”: 按钮的初始状态

“active状态”: 按钮被按下

“ripple状态”: Ripple 效果

“禁止点击状态”: 用户无法点击,不同类型按钮的禁止点击状态样式是一致的

大型按钮

幽灵按钮

幽灵按钮正常状态是透明的

“active状态”: 按钮被按下的时候发生背景色、文本颜色的变化

“ripple状态”: Ripple 效果不会改变按钮的透明背景,Ripple 的颜色是按钮颜色的 20%

幽灵按钮

扁平按钮

扁平按钮正常状态是透明背景、无边框的

“active状态”: 按钮被按下的时候发生背景色的变化

“ripple状态”: Ripple 效果不会改变按钮的透明背景,Ripple 的颜色是纯黑色的 20%

扁平按钮