代码演示

基本形式

<div class=g-row>
     <jr-button type="primary" title="primary" />
     <jr-button type="secondary" title="secondary" />
     <jr-button type="tertiary" title="tertiary" />
     <jr-button type="info" title="info" />
     <jr-button type="success" title="success" />
     <jr-button type="warning" title="warn" />
     <jr-button type="error" title="error" />
</div>
<div class=g-row>
     <jr-button type="primary" title="primary" size="sm" />
     <jr-button type="secondary" title="secondary" size="sm" />
     <jr-button type="tertiary" title="tertiary" size="sm" />
     <jr-button type="info" title="info" size="sm" />
     <jr-button type="success" title="success" size="sm" />
     <jr-button type="warning" title="warn" size="sm" />
     <jr-button type="error" title="error" size="sm" />
 </div>
var component = new JRUI.Component({
    template: template
});

常用的button类型

<div class=g-row>
    <jr-button action="view" title="查看" />
    <jr-button action="undo" title="撤销" />
    <jr-button action="cancel" title="取消" />
    <jr-button action="remove" title="删除" />
    <jr-button action="update" title="更新" />
</div>
<div class=g-row>
    <jr-button action="submit" title="提交" />
    <jr-button action="save" title="保存" />
    <jr-button action="copy" title="复制" />
    <jr-button action="pass" title="通过" />
    <jr-button action="reject" title="驳回" />
</div>
<div class=g-row>
    <jr-button action="backward" title="返回" />
    <jr-button action="download" title="下载" />
    <jr-button action="upload" title="上传" />
    <jr-button action="search" title="查询" />
    <jr-button action="edit" title="编辑" />
</div>
<div class=g-row>
    <jr-button action="add" title="添加" />
    <jr-button action="link" title="链接" link="http://www.baidu.com" />
</div>

圆角的图标按钮

<div class=g-row>
    <jr-button action="update" shape="circle" size="xs" />
    <jr-button action="update" shape="circle" size="sm" />
    <jr-button action="update" shape="circle" />
    <jr-button action="update" shape="circle" size="lg" />
    <jr-button action="update" shape="circle" size="xl" />
</div>

图标按钮

<div class=g-row>
    <jr-button action="update" type="primary" shape="icon" size="xs" />
    <jr-button action="update" type="info" shape="icon" size="sm" />
    <jr-button action="update" type="error" shape="icon" />
    <jr-button action="update" shape="icon" size="lg" />
    <jr-button action="update" shape="icon" size="xl" />
</div>

加载中的按钮

<div class=g-row>
    <jr-button action="update" loading />
</div>

buttonGroup

<div class=g-row>
    <div class="u-btngroup u-btngroup-horizontal">
       <jr-button action="view" />
       <jr-button action="edit" />
    </div>
</div>

API

Classes

JRButton

Constants

validator

JRButton 按钮

JRButton

Kind: global class
Extend: Component

new JRButton()

Param Type Default Description
[options.data] object => 绑定属性
[options.data.title] string "确定" => 按钮标题
[options.data.type] string "default" => 按钮样式, primary, default, info, success, warn, error
[options.data.size] string "normal" => 按钮大小, xs, sm, lg, xl
[options.data.icon] string => 按钮图标,action不能满足需求时使用;
[options.data.action] string => 按钮操作类型, 每种类型有对应的icon;
[options.data.link] string => 按钮的链接
[options.data.target] string "_self" => 按钮链接的打开方式
[options.data.shape] string => circle, icon或者默认
[options.data.download] string => 下载链接
[options.data.loading] boolean false => 是否正在加载
[options.data.disabled] boolean false => 禁止按钮
[options.data.class] boolean false => 样式扩展

validator

JRButton 按钮

Kind: global constant

复选框 →