# 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

# 属性

配置 用途 取值 使用描述
: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 按钮文字颜色,传入任意颜色色值。
  • iOS
  • Android
  • Web
  • MP
v1.0.0