# Button 按钮
常用的操作按钮,含各种类型及状态。
# 引入说明
TIP
import Button from "jimoui/components/Button/Button";
1
# 代码演示
TIP
# 按钮类型及状态
类型分重要、次要、普通;状态为默认、触摸、禁用
//重要
<Button type="default" height="32px" style="margin-right:8px">
默认 Normal
</Button>
<Button type="unable" height="32px">禁用 Disabled</Button>
//次要
<Button type="normal" fontColor="#FF680A" borderColor="rgba(255, 104, 10, 0.4)" height="32px">
次要
</Button>
//普通
<Button type="normal" height="32px" style="margin-right:8px">默认 Normal</Button>
<Button type="normal unable" height="32px">禁用 Disabled</Button>
//按钮尺寸
<Button width="267px" height="44px" fontSize="17px">88px按钮</Button>
<Button type="default" fontSize="16px" style="margin-right:8px">80px按钮</Button>
<Button width="89px" fontSize="13px" height="32px">64px按钮</Button>
//自定义颜色
<Button type="default" boldFont height="32px" firstBg="#FF4C31" secondBg="#FF7D2D" style="margin-right:8px">
渐变按钮
</Button>
<Button type="default" height="32px" firstBg="#023894" style="margin-right:8px">
单色按钮
</Button>
<Button type="normal" height="32px" fontColor="#023894" borderColor="#023894">
单色按钮
</Button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
# 属性
配置 | 用途 | 取值 | 使用描述 |
---|---|---|---|
:type | 配色风格配色风格 | default highLight unable normal minor | 默认、高亮、禁用、普通、次要 当type传值为unable时,按钮点击时将触发unableTap回调。 普通按钮具备禁用状态,可以同时传入normal与unable两种状态。 |
width | 宽度 | String | 宽度尺寸,请自行带入单位 |
height | 高度 | String | 高度尺寸,请自行带入单位 |
firstBg | 背景颜色/渐变起始色 | String | 任意颜色色值 |
secondBg | 渐变结束色 | String | 任意颜色色值 |
borderColor | 边框颜色 | String | 任意颜色色值。 该属性仅限type为normal与minor时生效。 |
@click | 点击事件 | Event | $event |
@unableTap | 被禁用的按钮点击事件 | Event | $event 仅当type入参为unable时,该事件将触发。 |
empty | 页面空状态按钮 | 无 | 为页面空状态的配图按钮使用 |
login | 登录页面按钮 | 无 | 登录页面使用的按钮 |
boldFont | 按钮文字加粗 | 无 | 声明该属性后,按钮文字默认使用粗体文字 |
:fontSize | 按钮文字大小 | String | 按钮文字字号 需要附带数值单位,如12px。 |
:fontColor | 按钮文字颜色 | String | 按钮文字颜色,传入任意颜色色值。 |