Button 按钮

基础控件,当用户点击时触发一个操作

使用方法

  • 按钮触发应用的功能,存在于页面的许多地方。按钮可以是“图标按钮”,也可以是“文字按钮”,也可以“图文结合”。
  • 使用“文字按钮”时,注意使用动词或动词短语来描述按钮所执行的操作。
  • 按钮有4种状态:默认、点击、选中、禁用。
  • 按钮最多会有3种状态:默认、点击、禁用,也可以只有2种状态:默认、点击或者默认、选中(只有默认、选中的按钮作用)。
  • 按钮支持按下后逃逸行为,即按下按钮后再移出热区区域即为取消操作。

标准按钮 #

标准按钮有四种类型:主按钮 zr-btn-primary 、次按钮 zr-btn-default 、危险按钮 zr-btn-danger 、不可点按钮 zr-btn-disable
<code>

显示代码

多种标签 #

可以很好的支持button标签与A标签
<code>

A target A target

A target A target
显示代码

按钮尺寸 #

按钮有大 zr-btn-lg 、中(默认)、小 zr-btn-sm 三种尺寸,在这里我们只定义三种高度(24px,32px,40px),宽度随内容自适应
<code>


显示代码

图标按钮 #

图标按钮:带icon的圆形按钮 zr-btn-circle 、带icon和text的按钮则同标准按钮
<code>

显示代码

组合按钮 #

组合按钮需给父级添加 zr-btn-group ,组合按钮的样式分为:basic、with icon、icon
<code>
显示代码