Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects 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. 700
      demo/js/base/button/demo.button.js
  2. 32
      src/base/single/button/buttons/button.js

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

@ -4,416 +4,310 @@ 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 }, {
} type: "bi.button",
}, { text: "表示成功状态按钮",
el: { level: "success",
type: "bi.button", height: 30
text: "表示成功状态按钮", }, {
level: "success", type: "bi.button",
height: 30 text: "表示警告状态的按钮",
} level: "warning",
}, { height: 30
el: { }, {
type: "bi.button", type: "bi.button",
text: "表示警告状态的按钮", text: "表示错误状态的按钮",
level: "warning", level: "error",
height: 30 height: 30
} }, {
}, { type: "bi.button",
el: { text: "表示忽略状态的按钮",
type: "bi.button", level: "ignore",
text: "表示错误状态的按钮", height: 30
level: "error", }, {
height: 30 type: "bi.button",
} text: "普通灰化按钮",
}, { disabled: true,
el: { level: "success",
type: "bi.button", height: 30
text: "表示忽略状态的按钮", }, {
level: "ignore", type: "bi.button",
height: 30 text: "忽略状态灰化按钮",
} disabled: true,
}, { level: "ignore",
el: { height: 30
type: "bi.button", }, {
text: "普通灰化按钮", type: "bi.button",
disabled: true, text: "带图标的按钮",
level: "success", // level: 'ignore',
height: 30 iconCls: "close-font",
} height: 30
}, { }, {
el: { type: "bi.button",
type: "bi.button", text: "一般按钮",
text: "忽略状态灰化按钮", block: true,
disabled: true, level: "common",
level: "ignore", height: 30
height: 30 }, {
} type: "bi.button",
}, { text: "表示成功状态按钮",
el: { block: true,
type: "bi.button", level: "success",
text: "带图标的按钮", height: 30
// level: 'ignore', }, {
iconCls: "close-font", type: "bi.button",
height: 30 text: "表示警告状态的按钮",
} block: true,
}, { level: "warning",
el: { height: 30
type: "bi.button", }, {
text: "一般按钮", type: "bi.button",
block: true, text: "表示忽略状态的按钮",
level: "common", block: true,
height: 30 level: "ignore",
} height: 30
}, { }, {
el: { type: "bi.button",
type: "bi.button", text: "普通灰化按钮",
text: "表示成功状态按钮", block: true,
block: true, disabled: true,
level: "success", level: "success",
height: 30 height: 30
} }, {
}, { type: "bi.button",
el: { text: "忽略状态灰化按钮",
type: "bi.button", block: true,
text: "表示警告状态的按钮", disabled: true,
block: true, level: "ignore",
level: "warning", height: 30
height: 30 }, {
} type: "bi.button",
}, { text: "带图标的按钮",
el: { block: true,
type: "bi.button", // level: 'ignore',
text: "表示忽略状态的按钮", iconCls: "close-font",
block: true, height: 30
level: "ignore", }, {
height: 30 type: "bi.button",
} text: "一般按钮",
}, { clear: true,
el: { level: "common",
type: "bi.button", height: 30
text: "普通灰化按钮", }, {
block: true, type: "bi.button",
disabled: true, text: "表示成功状态按钮",
level: "success", clear: true,
height: 30 level: "success",
} height: 30
}, { }, {
el: { type: "bi.button",
type: "bi.button", text: "表示警告状态的按钮",
text: "忽略状态灰化按钮", clear: true,
block: true, level: "warning",
disabled: true, height: 30
level: "ignore", }, {
height: 30 type: "bi.button",
} text: "表示忽略状态的按钮",
}, { clear: true,
el: { level: "ignore",
type: "bi.button", height: 30
text: "带图标的按钮", }, {
block: true, type: "bi.button",
// level: 'ignore', text: "普通灰化按钮",
iconCls: "close-font", clear: true,
height: 30 disabled: true,
} level: "success",
}, { height: 30
el: { }, {
type: "bi.button", type: "bi.button",
text: "一般按钮", text: "忽略状态灰化按钮",
clear: true, clear: true,
level: "common", disabled: true,
height: 30 level: "ignore",
} height: 30
}, { }, {
el: { type: "bi.button",
type: "bi.button", text: "带图标的按钮",
text: "表示成功状态按钮", clear: true,
clear: true, // level: 'ignore',
level: "success", iconCls: "close-font",
height: 30 height: 30
} }, {
}, { type: "bi.text_button",
el: { text: "文字按钮",
type: "bi.button", height: 30
text: "表示警告状态的按钮", }, {
clear: true, type: "bi.button",
level: "warning", text: "幽灵按钮（common）",
height: 30 ghost: true,
} height: 30
}, { }, {
el: { type: "bi.button",
type: "bi.button", iconCls: "plus-font",
text: "表示忽略状态的按钮", text: "幽灵按钮（common）",
clear: true, ghost: true,
level: "ignore", height: 30
height: 30 }, {
} type: "bi.button",
}, { iconCls: "plus-font",
el: { text: "幽灵按钮（common）",
type: "bi.button", ghost: true,
text: "普通灰化按钮", level: "warning",
clear: true, height: 30
disabled: true, }, {
level: "success", type: "bi.button",
height: 30 iconCls: "plus-font",
} text: "幽灵按钮（common）",
}, { ghost: true,
el: { level: "error",
type: "bi.button", height: 30
text: "忽略状态灰化按钮", }, {
clear: true, type: "bi.button",
disabled: true, iconCls: "plus-font",
level: "ignore", text: "幽灵按钮（common）",
height: 30 ghost: true,
} level: "success",
}, { height: 30
el: { }, {
type: "bi.button", type: "bi.button",
text: "带图标的按钮", text: "幽灵按钮（common）灰化",
clear: true, disabled: true,
// level: 'ignore', ghost: true,
iconCls: "close-font", height: 30
height: 30 }, {
} type: "bi.button",
}, { text: "弹出bubble",
el: { bubble: function () {
type: "bi.text_button", return BI.parseInt(Math.random() * 100) % 10 + "提示"
text: "文字按钮", },
height: 30 handler: function () {
} BI.Msg.toast("1111");
}, { },
el: { height: 30
type: "bi.button", }, {
text: "幽灵按钮（common）", type: "bi.button",
ghost: true, text: "图标在上面的按钮，而且可以自动撑开高度",
height: 30 iconCls: "close-font",
} iconGap: 24,
}, { iconPosition: "top"
el: {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
height: 30
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
level: "warning",
height: 30
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
level: "error",
height: 30
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
level: "success",
height: 30
}
}, {
el: {
type: "bi.button",
text: "幽灵按钮（common）灰化",
disabled: true,
ghost: true,
height: 30
}
}, {
el: {
type: "bi.button",
text: "弹出bubble",
bubble: function () {
return BI.parseInt(Math.random() * 100) % 10 + "提示"
},
handler: function () {
BI.Msg.toast("1111");
},
height: 30
}
}, {
el: {
type: "bi.button",
text: "图标在上面的按钮，而且可以自动撑开高度",
iconCls: "close-font",
iconGap: 24,
iconPosition: "top"
}
},{ },{
el: { type: "bi.button",
type: "bi.button", text: "自动撑开高度",
text: "自动撑开高度", iconCls: "close-font",
iconCls: "close-font", textHeight: 32,
textHeight: 32, iconGap: 24,
iconGap: 24, vgap: 16,
vgap: 16, hgap: 100,
hgap: 100, iconPosition: "top"
iconPosition: "top" }, {
} type: "bi.button",
}, { text: "图标在下面的按钮",
el: { iconCls: "close-font",
type: "bi.button", iconPosition: "bottom"
text: "图标在下面的按钮", }, {
iconCls: "close-font", type: "bi.button",
iconPosition: "bottom" text: "图标在左边的按钮",
} iconCls: "close-font",
}, { iconPosition: "left"
el: { }, {
type: "bi.button", type: "bi.button",
text: "图标在左边的按钮", text: "图标在右边的按钮",
iconCls: "close-font", iconCls: "close-font",
iconPosition: "left" iconPosition: "right"
} }, {
}, { type: "bi.button",
el: { text: "浅色的一般按钮",
type: "bi.button", iconCls: "plus-font",
text: "图标在右边的按钮", light: true
iconCls: "close-font", }, {
iconPosition: "right" type: "bi.button",
} text: "浅色的成功按钮",
}, { level: "success",
el: { iconCls: "plus-font",
type: "bi.button", light: true
text: "浅色的一般按钮", }, {
iconCls: "plus-font", type: "bi.button",
light: true text: "浅色的警告按钮",
} level: "warning",
}, { iconCls: "plus-font",
el: { light: true
type: "bi.button", }, {
text: "浅色的成功按钮", type: "bi.button",
level: "success", iconCls: "plus-font",
iconCls: "plus-font", text: "浅色的失败按钮",
light: true level: "error",
} cls: "hover-mask",
}, { light: true
el: { }, {
type: "bi.button", type: "bi.button",
text: "浅色的警告按钮", iconCls: "plus-font",
level: "warning", text: "朴素的按钮",
iconCls: "plus-font", level: "common",
light: true plain: true
} }, {
}, { type: "bi.button",
el: { iconCls: "plus-font",
type: "bi.button", text: "朴素的按钮",
iconCls: "plus-font", level: "success",
text: "浅色的失败按钮", plain: true
level: "error", }, {
cls: "hover-mask", type: "bi.button",
light: true iconCls: "plus-font",
} text: "朴素的按钮",
}, { level: "error",
el: { plain: true
type: "bi.button", }, {
iconCls: "plus-font", type: "bi.button",
text: "朴素的按钮", iconCls: "plus-font",
level: "common", text: "朴素的按钮",
plain: true level: "warning",
} plain: true
}, { }, {
el: { type: "bi.button",
type: "bi.button", iconCls: "plus-font",
iconCls: "plus-font", text: "朴素的按钮",
text: "朴素的按钮", level: "ignore",
level: "success", plain: true
plain: true }, {
} type: "bi.button",
}, { iconCls: "plus-font",
el: { plain: true,
type: "bi.button", level: "error",
iconCls: "plus-font", }, {
text: "朴素的按钮", type: "bi.button",
level: "error", iconCls: "plus-font",
plain: true text: "朴素的按钮",
} plain: true,
}, { disabled: true
el: { }, {
type: "bi.button", type: "bi.button",
iconCls: "plus-font", iconCls: "plus-font",
text: "朴素的按钮", text: "点我，更改图标",
level: "warning", handler() {
plain: true this.i = this.i === undefined ? 0 : ++this.i;
} const arr = ["text-background-font", "check-mark-ha-font", "close-font", "search-font", "date-change-h-font"];
}, { if(this.i >= arr.length) {
el: { this.i = 0;
type: "bi.button", }
iconCls: "plus-font", this.setIcon(arr[this.i]);
text: "朴素的按钮", },
level: "ignore", height: 24
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "ignore",
plain: true,
disabled: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "error",
plain: true,
disabled: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "common",
plain: true,
disabled: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "点我，更改图标",
handler() {
this.i = this.i === undefined ? 0 : ++this.i;
const arr = ["text-background-font", "check-mark-ha-font", "close-font", "search-font", "date-change-h-font"];
if(this.i >= arr.length) {
this.i = 0;
}
this.setIcon(arr[this.i]);
},
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
}
})
}; };
} }
}); });

32
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