fineui/uidoc/detailed/bi.button/general.md

bi.button

##通用按钮

{% method %} source

{% common %}

Demo = {};
Demo.Buttons = BI.inherit(BI.Widget, {
    props: {
        baseCls: "demo-button"
    },
    render: function () {
        var items = [{
                el: {
                    type: 'bi.button',
                    text: '一般按钮',
                    level: 'common',
                    height: 30
                }
            },
             {
                el: {
                    type: 'bi.button',
                    text: '普通灰化按钮',
                    disabled: true,
                    level: 'success',
                    height: 30
                }
            },  {
                el: {
                    type: 'bi.button',
                    text: '带图标的按钮',
                    //level: 'ignore',
                    iconClass: "close-font",
                    height: 30
                }
            }, {
                el: {
                    type: 'bi.button',
                    text: '一般按钮',
                    block: true,
                    level: 'common',
                    height: 30
                }
            }, 
           {
                el: {
                    type: 'bi.button',
                    text: '普通灰化按钮',
                    block: true,
                    disabled: true,
                    level: 'success',
                    height: 30
                }
            },  {
                el: {
                    type: 'bi.button',
                    text: '带图标的按钮',
                    block: true,
                    //level: 'ignore',
                    iconClass: "close-font",
                    height: 30
                }
            }, {
                el: {
                    type: 'bi.button',
                    text: '一般按钮',
                    clear: true,
                    level: 'common',
                    height: 30
                }
            }, 
           {
                el: {
                    type: 'bi.button',
                    text: '普通灰化按钮',
                    clear: true,
                    disabled: true,
                    level: 'success',
                    height: 30
                }
            },  {
                el: {
                    type: 'bi.button',
                    text: '带图标的按钮',
                    clear: true,
                    //level: 'ignore',
                    iconClass: "close-font",
                    height: 30
                }
            }, {
                el: {
                    type: 'bi.text_button',
                    text: '文字按钮',
                    height: 30
                }
            }
        ];
        BI.each(items, function (i, item) {
            item.el.handler = function () {
                BI.Msg.alert('按钮', this.options.text);
            }
        });
        return {
            type: "bi.left",
            vgap: 100,
            hgap: 20,
            items: items
        }
    }
});
BI.shortcut("demo.buttons", Demo.Buttons);
BI.createWidget({
  type: 'demo.buttons',
  element: "#wrapper",
  text: '一般按钮',
  level: 'common',
  height: 30
});

{% endmethod %}

API

基础属性

参数	说明	类型	可选值	默认值
hgap	效果相当于文本框左右padding值，如果clear属性为true,该属性值置0	number		10
vgap	效果相当于文本框上下padding值	number		0
lgap	效果相当于文本框left-padding值	number		0
rgap	效果相当于文本框right-padding值	number		0
tgap	效果相当于文本框top-padding值	number		0
bgap	效果相当于文本框bottom-padding值	number		0
items	子控件数组	array
width	宽度	number
height	高度	number

高级属性

参数	说明	类型	可选值	默认值
level	按钮类型	string	common,success,warning,ignore	common
text	按钮文本内容	string
disabled	灰化	boolean	true,false
minWidth	最小宽度，如果block/clear中某一项为true，此项值为0，否则为90	number		90
shadow		boolean	true,false
isShadowShowingOnSelected		boolean	true,false	true
readonly	是否只读	boolean	true,false	true
iconClass	图标类型	string		" "
block	是否块状显示，即不显示边框，没有最小宽度的限制	boolean	true,false	false
clear	是否去掉边框和背景	boolean	true,false	false
textAlign	文字布局	string	left,center,right	cneter
whiteSpace	元素内的空白处理方式	string	normal,pre,nowrap,pre-wrap,pre-line,inherit	nowrap
forceCenter		boolean	true,false	false
textWidth	按钮文本宽度	number		null
textHeight	按钮文本高度	number		null

---