DESIGN-4069 【组件化】反馈-按钮

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,11 +58,15 @@ BI.Button = BI.inherit(BI.BasicButton, {
         // 由于button默认情况下有个边框，所以要主动算行高
         var lineHeight, textHeight = o.textHeight;
         if (BI.isNumber(o.height)) {
+            if(!isVertical(o.iconPosition)) {
                 if (o.clear || o.block) {
                     lineHeight = o.height;
                 } else {
                     lineHeight = o.height - 2;
                 }
+            } else {
+                lineHeight = textHeight;
+            }
         }
         if (!textHeight) {
             if (o.whiteSpace === "nowrap") {
@@ -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 {