Button 按钮

常用的操作按钮，含各种类型及状态。

引入说明

TIP

import Button from "jimoui/components/Button/Button";

代码演示

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>

属性

配置	用途	取值	使用描述
: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	按钮文字颜色，传入任意颜色色值。