diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 0863d0935..4f6a144de 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -1,3 +1,7 @@ +function isVertical(position) { + return position === "top" || position === "bottom"; +} + /** * 文字类型的按钮 * @class BI.Button @@ -9,18 +13,21 @@ BI.Button = BI.inherit(BI.BasicButton, { _const: { - iconWidth: 18 + iconWidth: 16 }, _defaultConfig: function (props) { var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); + + return BI.extend(conf, { baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), attributes: { tabIndex: 1 }, minWidth: (props.block === true || props.clear === true) ? 0 : 80, - height: 24, + // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 + height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24, shadow: props.clear !== true, isShadowShowingOnSelected: true, readonly: true, @@ -38,7 +45,10 @@ BI.Button = BI.inherit(BI.BasicButton, { tgap: 0, bgap: 0, lgap: 0, - rgap: 0 + rgap: 0, + iconGap: 4, + iconPosition: "left", + iconSize: props.iconSize || 12 }); }, @@ -48,10 +58,14 @@ BI.Button = BI.inherit(BI.BasicButton, { // 由于button默认情况下有个边框,所以要主动算行高 var lineHeight, textHeight = o.textHeight; if (BI.isNumber(o.height)) { - if (o.clear || o.block) { - lineHeight = o.height; + if(!isVertical(o.iconPosition)) { + if (o.clear || o.block) { + lineHeight = o.height; + } else { + lineHeight = o.height - 2; + } } else { - lineHeight = o.height - 2; + lineHeight = textHeight; } } if (!textHeight) { @@ -63,11 +77,14 @@ BI.Button = BI.inherit(BI.BasicButton, { this.icon = BI.createWidget({ type: "bi.icon_label", cls: o.iconCls, - width: this._const.iconWidth, - height: lineHeight, - lineHeight: lineHeight, + width: o.iconWidth, + height: o.iconHeight, + lineHeight: o.iconHeight, iconWidth: o.iconWidth, - iconHeight: o.iconHeight + iconHeight: o.iconHeight, + css: { + fontSize: o.iconSize + "px" + } }); this.text = BI.createWidget({ type: "bi.label", @@ -77,15 +94,30 @@ BI.Button = BI.inherit(BI.BasicButton, { height: lineHeight, value: o.value }); + var layoutType = "bi.horizontal"; + var gapContainer = { + lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0, + rgap: o.iconPosition === "right" ? o.iconGap : 0, + tgap: o.iconPosition === "top" ? o.iconGap : 0, + bgap: o.iconPosition === "bottom" ? o.iconGap : 0 + }; + var items = [this.icon, BI.extend({el: this.text}, gapContainer)]; + if (isVertical(o.iconPosition)) { + layoutType = "bi.vertical"; + } + if (o.iconPosition === "right" || o.iconPosition === "bottom") { + items = [BI.extend({el: this.text}, gapContainer), this.icon]; + } BI.createWidget({ type: "bi.center_adapt", element: this, hgap: o.hgap, vgap: o.vgap, items: [{ - type: "bi.horizontal", - columnSize: ["", "fill"], - items: [this.icon, this.text] + type: layoutType, + horizontalAlign: "center", + verticalAlign: "middle", + items: items }] }); } else {