fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

DESIGN-4069 feat: 去掉 plain 按钮最小宽度

es6
treecat 2 years ago
parent
b3809a21d6
commit
4440b1b969
2 changed files with 309 additions and 423 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 118
      demo/js/base/button/demo.button.js
  2. 30
      src/base/single/button/buttons/button.js

118
demo/js/base/button/demo.button.js
Unescape View File

@ -4,240 +4,181 @@ Demo.Button = BI.inherit(BI.Widget, {
}, },
render: function () { render: function () {
var items = [{ var items = [{
el: {
type: "bi.button", type: "bi.button",
text: "一般按钮", text: "一般按钮",
level: "common", level: "common",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示成功状态按钮", text: "表示成功状态按钮",
level: "success", level: "success",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示警告状态的按钮", text: "表示警告状态的按钮",
level: "warning", level: "warning",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示错误状态的按钮", text: "表示错误状态的按钮",
level: "error", level: "error",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示忽略状态的按钮", text: "表示忽略状态的按钮",
level: "ignore", level: "ignore",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "普通灰化按钮", text: "普通灰化按钮",
disabled: true, disabled: true,
level: "success", level: "success",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "忽略状态灰化按钮", text: "忽略状态灰化按钮",
disabled: true, disabled: true,
level: "ignore", level: "ignore",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "带图标的按钮", text: "带图标的按钮",
// level: 'ignore', // level: 'ignore',
iconCls: "close-font", iconCls: "close-font",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "一般按钮", text: "一般按钮",
block: true, block: true,
level: "common", level: "common",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示成功状态按钮", text: "表示成功状态按钮",
block: true, block: true,
level: "success", level: "success",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示警告状态的按钮", text: "表示警告状态的按钮",
block: true, block: true,
level: "warning", level: "warning",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示忽略状态的按钮", text: "表示忽略状态的按钮",
block: true, block: true,
level: "ignore", level: "ignore",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "普通灰化按钮", text: "普通灰化按钮",
block: true, block: true,
disabled: true, disabled: true,
level: "success", level: "success",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "忽略状态灰化按钮", text: "忽略状态灰化按钮",
block: true, block: true,
disabled: true, disabled: true,
level: "ignore", level: "ignore",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "带图标的按钮", text: "带图标的按钮",
block: true, block: true,
// level: 'ignore', // level: 'ignore',
iconCls: "close-font", iconCls: "close-font",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "一般按钮", text: "一般按钮",
clear: true, clear: true,
level: "common", level: "common",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示成功状态按钮", text: "表示成功状态按钮",
clear: true, clear: true,
level: "success", level: "success",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示警告状态的按钮", text: "表示警告状态的按钮",
clear: true, clear: true,
level: "warning", level: "warning",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "表示忽略状态的按钮", text: "表示忽略状态的按钮",
clear: true, clear: true,
level: "ignore", level: "ignore",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "普通灰化按钮", text: "普通灰化按钮",
clear: true, clear: true,
disabled: true, disabled: true,
level: "success", level: "success",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "忽略状态灰化按钮", text: "忽略状态灰化按钮",
clear: true, clear: true,
disabled: true, disabled: true,
level: "ignore", level: "ignore",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "带图标的按钮", text: "带图标的按钮",
clear: true, clear: true,
// level: 'ignore', // level: 'ignore',
iconCls: "close-font", iconCls: "close-font",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.text_button", type: "bi.text_button",
text: "文字按钮", text: "文字按钮",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
level: "warning", level: "warning",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
level: "error", level: "error",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "幽灵按钮（common）", text: "幽灵按钮（common）",
ghost: true, ghost: true,
level: "success", level: "success",
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "幽灵按钮（common）灰化", text: "幽灵按钮（common）灰化",
disabled: true, disabled: true,
ghost: true, ghost: true,
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "弹出bubble", text: "弹出bubble",
bubble: function () { bubble: function () {
@ -247,17 +188,13 @@ Demo.Button = BI.inherit(BI.Widget, {
BI.Msg.toast("1111"); BI.Msg.toast("1111");
}, },
height: 30 height: 30
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "图标在上面的按钮，而且可以自动撑开高度", text: "图标在上面的按钮，而且可以自动撑开高度",
iconCls: "close-font", iconCls: "close-font",
iconGap: 24, iconGap: 24,
iconPosition: "top" iconPosition: "top"
}
},{ },{
el: {
type: "bi.button", type: "bi.button",
text: "自动撑开高度", text: "自动撑开高度",
iconCls: "close-font", iconCls: "close-font",
@ -266,129 +203,87 @@ Demo.Button = BI.inherit(BI.Widget, {
vgap: 16, vgap: 16,
hgap: 100, hgap: 100,
iconPosition: "top" iconPosition: "top"
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "图标在下面的按钮", text: "图标在下面的按钮",
iconCls: "close-font", iconCls: "close-font",
iconPosition: "bottom" iconPosition: "bottom"
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "图标在左边的按钮", text: "图标在左边的按钮",
iconCls: "close-font", iconCls: "close-font",
iconPosition: "left" iconPosition: "left"
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "图标在右边的按钮", text: "图标在右边的按钮",
iconCls: "close-font", iconCls: "close-font",
iconPosition: "right" iconPosition: "right"
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "浅色的一般按钮", text: "浅色的一般按钮",
iconCls: "plus-font", iconCls: "plus-font",
light: true light: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "浅色的成功按钮", text: "浅色的成功按钮",
level: "success", level: "success",
iconCls: "plus-font", iconCls: "plus-font",
light: true light: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
text: "浅色的警告按钮", text: "浅色的警告按钮",
level: "warning", level: "warning",
iconCls: "plus-font", iconCls: "plus-font",
light: true light: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "浅色的失败按钮", text: "浅色的失败按钮",
level: "error", level: "error",
cls: "hover-mask", cls: "hover-mask",
light: true light: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "common", level: "common",
plain: true plain: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "success", level: "success",
plain: true plain: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "error", level: "error",
plain: true plain: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "warning", level: "warning",
plain: true plain: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "ignore", level: "ignore",
plain: true plain: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮",
level: "ignore",
plain: true, plain: true,
disabled: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "error", level: "error",
plain: true,
disabled: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "朴素的按钮",
level: "common",
plain: true, plain: true,
disabled: true disabled: true
}
}, { }, {
el: {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "点我，更改图标", text: "点我，更改图标",
@ -401,19 +296,18 @@ Demo.Button = BI.inherit(BI.Widget, {
this.setIcon(arr[this.i]); this.setIcon(arr[this.i]);
}, },
height: 24 height: 24
}
}]; }];
// BI.each(items, function (i, item) {
// item.el.handler = function () {
// BI.Msg.alert("按钮", this.options.text);
// };
// });
return { return {
type: "bi.left", type: "bi.left",
scrolly: true, scrolly: true,
vgap: 100, vgap: 100,
hgap: 20, hgap: 20,
items: items items: BI.map(items, function (index, value) {
return {
el: value
}
})
}; };
} }
}); });

30
src/base/single/button/buttons/button.js
Unescape View File

@ -30,12 +30,14 @@
adaptiveHeight += (tGap + bGap); adaptiveHeight += (tGap + bGap);
} }
var clearMinWidth = props.block === true || props.clear === true || props.plain;
return BI.extend(conf, { return BI.extend(conf, {
baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""), baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
attributes: { attributes: {
tabIndex: 1 tabIndex: 1
}, },
minWidth: (props.block === true || props.clear === true) ? 0 : 80, minWidth: clearMinWidth ? 0 : 80,
height: isVertical(props.iconPosition) ? adaptiveHeight : 24, height: isVertical(props.iconPosition) ? adaptiveHeight : 24,
shadow: props.clear !== true, shadow: props.clear !== true,
isShadowShowingOnSelected: true, isShadowShowingOnSelected: true,
@ -64,7 +66,7 @@
}, },
render: function () { render: function () {
var o = this.options; var o = this.options, self = this;
// 由于button默认情况下有个边框，所以要主动算行高 // 由于button默认情况下有个边框，所以要主动算行高
var lineHeight, textHeight = o.textHeight; var lineHeight, textHeight = o.textHeight;
@ -148,24 +150,14 @@
value: o.value value: o.value
}); });
} }
if (o.block === true) { var classArr = ["block", "clear", "ghost", "plain", "loading", "light"];
this.element.addClass("block"); // 如果 options 对应的属性为 true 则给元素添加 class
} BI.each(classArr, function (_, clz) {
if (o.clear === true) { if (BI.get(o, clz) === true) {
this.element.addClass("clear"); self.element.addClass(clz);
}
if (o.ghost === true) {
this.element.addClass("ghost");
}
if (o.plain === true) {
this.element.addClass("plain");
}
if (o.loading === true) {
this.element.addClass("loading");
}
if (o.light === true) {
this.element.addClass("light");
} }
});
if (o.minWidth > 0) { if (o.minWidth > 0) {
this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit}); this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
} }

Write Preview
Loading…
Cancel
Save