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
Split 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 () {
var items = [{
el: {
type: "bi.button",
text: "一般按钮",
level: "common",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示成功状态按钮",
level: "success",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示警告状态的按钮",
level: "warning",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示错误状态的按钮",
level: "error",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示忽略状态的按钮",
level: "ignore",
height: 30
}
}, {
el: {
type: "bi.button",
text: "普通灰化按钮",
disabled: true,
level: "success",
height: 30
}
}, {
el: {
type: "bi.button",
text: "忽略状态灰化按钮",
disabled: true,
level: "ignore",
height: 30
}
}, {
el: {
type: "bi.button",
text: "带图标的按钮",
// level: 'ignore',
iconCls: "close-font",
height: 30
}
}, {
el: {
type: "bi.button",
text: "一般按钮",
block: true,
level: "common",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示成功状态按钮",
block: true,
level: "success",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示警告状态的按钮",
block: true,
level: "warning",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示忽略状态的按钮",
block: true,
level: "ignore",
height: 30
}
}, {
el: {
type: "bi.button",
text: "普通灰化按钮",
block: true,
disabled: true,
level: "success",
height: 30
}
}, {
el: {
type: "bi.button",
text: "忽略状态灰化按钮",
block: true,
disabled: true,
level: "ignore",
height: 30
}
}, {
el: {
type: "bi.button",
text: "带图标的按钮",
block: true,
// level: 'ignore',
iconCls: "close-font",
height: 30
}
}, {
el: {
type: "bi.button",
text: "一般按钮",
clear: true,
level: "common",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示成功状态按钮",
clear: true,
level: "success",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示警告状态的按钮",
clear: true,
level: "warning",
height: 30
}
}, {
el: {
type: "bi.button",
text: "表示忽略状态的按钮",
clear: true,
level: "ignore",
height: 30
}
}, {
el: {
type: "bi.button",
text: "普通灰化按钮",
clear: true,
disabled: true,
level: "success",
height: 30
}
}, {
el: {
type: "bi.button",
text: "忽略状态灰化按钮",
clear: true,
disabled: true,
level: "ignore",
height: 30
}
}, {
el: {
type: "bi.button",
text: "带图标的按钮",
clear: true,
// level: 'ignore',
iconCls: "close-font",
height: 30
}
}, {
el: {
type: "bi.text_button",
text: "文字按钮",
height: 30
}
}, {
el: {
type: "bi.button",
text: "幽灵按钮（common）",
ghost: true,
height: 30
}
}, {
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"
}
type: "bi.button",
text: "一般按钮",
level: "common",
height: 30
}, {
type: "bi.button",
text: "表示成功状态按钮",
level: "success",
height: 30
}, {
type: "bi.button",
text: "表示警告状态的按钮",
level: "warning",
height: 30
}, {
type: "bi.button",
text: "表示错误状态的按钮",
level: "error",
height: 30
}, {
type: "bi.button",
text: "表示忽略状态的按钮",
level: "ignore",
height: 30
}, {
type: "bi.button",
text: "普通灰化按钮",
disabled: true,
level: "success",
height: 30
}, {
type: "bi.button",
text: "忽略状态灰化按钮",
disabled: true,
level: "ignore",
height: 30
}, {
type: "bi.button",
text: "带图标的按钮",
// level: 'ignore',
iconCls: "close-font",
height: 30
}, {
type: "bi.button",
text: "一般按钮",
block: true,
level: "common",
height: 30
}, {
type: "bi.button",
text: "表示成功状态按钮",
block: true,
level: "success",
height: 30
}, {
type: "bi.button",
text: "表示警告状态的按钮",
block: true,
level: "warning",
height: 30
}, {
type: "bi.button",
text: "表示忽略状态的按钮",
block: true,
level: "ignore",
height: 30
}, {
type: "bi.button",
text: "普通灰化按钮",
block: true,
disabled: true,
level: "success",
height: 30
}, {
type: "bi.button",
text: "忽略状态灰化按钮",
block: true,
disabled: true,
level: "ignore",
height: 30
}, {
type: "bi.button",
text: "带图标的按钮",
block: true,
// level: 'ignore',
iconCls: "close-font",
height: 30
}, {
type: "bi.button",
text: "一般按钮",
clear: true,
level: "common",
height: 30
}, {
type: "bi.button",
text: "表示成功状态按钮",
clear: true,
level: "success",
height: 30
}, {
type: "bi.button",
text: "表示警告状态的按钮",
clear: true,
level: "warning",
height: 30
}, {
type: "bi.button",
text: "表示忽略状态的按钮",
clear: true,
level: "ignore",
height: 30
}, {
type: "bi.button",
text: "普通灰化按钮",
clear: true,
disabled: true,
level: "success",
height: 30
}, {
type: "bi.button",
text: "忽略状态灰化按钮",
clear: true,
disabled: true,
level: "ignore",
height: 30
}, {
type: "bi.button",
text: "带图标的按钮",
clear: true,
// level: 'ignore',
iconCls: "close-font",
height: 30
}, {
type: "bi.text_button",
text: "文字按钮",
height: 30
}, {
type: "bi.button",
text: "幽灵按钮（common）",
ghost: true,
height: 30
}, {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
height: 30
}, {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
level: "warning",
height: 30
}, {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
level: "error",
height: 30
}, {
type: "bi.button",
iconCls: "plus-font",
text: "幽灵按钮（common）",
ghost: true,
level: "success",
height: 30
}, {
type: "bi.button",
text: "幽灵按钮（common）灰化",
disabled: true,
ghost: true,
height: 30
}, {
type: "bi.button",
text: "弹出bubble",
bubble: function () {
return BI.parseInt(Math.random() * 100) % 10 + "提示"
},
handler: function () {
BI.Msg.toast("1111");
},
height: 30
}, {
type: "bi.button",
text: "图标在上面的按钮，而且可以自动撑开高度",
iconCls: "close-font",
iconGap: 24,
iconPosition: "top"
},{
el: {
type: "bi.button",
text: "自动撑开高度",
iconCls: "close-font",
textHeight: 32,
iconGap: 24,
vgap: 16,
hgap: 100,
iconPosition: "top"
}
}, {
el: {
type: "bi.button",
text: "图标在下面的按钮",
iconCls: "close-font",
iconPosition: "bottom"
}
}, {
el: {
type: "bi.button",
text: "图标在左边的按钮",
iconCls: "close-font",
iconPosition: "left"
}
}, {
el: {
type: "bi.button",
text: "图标在右边的按钮",
iconCls: "close-font",
iconPosition: "right"
}
}, {
el: {
type: "bi.button",
text: "浅色的一般按钮",
iconCls: "plus-font",
light: true
}
}, {
el: {
type: "bi.button",
text: "浅色的成功按钮",
level: "success",
iconCls: "plus-font",
light: true
}
}, {
el: {
type: "bi.button",
text: "浅色的警告按钮",
level: "warning",
iconCls: "plus-font",
light: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "浅色的失败按钮",
level: "error",
cls: "hover-mask",
light: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "common",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "success",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "error",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "warning",
plain: true
}
}, {
el: {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "ignore",
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
}
type: "bi.button",
text: "自动撑开高度",
iconCls: "close-font",
textHeight: 32,
iconGap: 24,
vgap: 16,
hgap: 100,
iconPosition: "top"
}, {
type: "bi.button",
text: "图标在下面的按钮",
iconCls: "close-font",
iconPosition: "bottom"
}, {
type: "bi.button",
text: "图标在左边的按钮",
iconCls: "close-font",
iconPosition: "left"
}, {
type: "bi.button",
text: "图标在右边的按钮",
iconCls: "close-font",
iconPosition: "right"
}, {
type: "bi.button",
text: "浅色的一般按钮",
iconCls: "plus-font",
light: true
}, {
type: "bi.button",
text: "浅色的成功按钮",
level: "success",
iconCls: "plus-font",
light: true
}, {
type: "bi.button",
text: "浅色的警告按钮",
level: "warning",
iconCls: "plus-font",
light: true
}, {
type: "bi.button",
iconCls: "plus-font",
text: "浅色的失败按钮",
level: "error",
cls: "hover-mask",
light: true
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "common",
plain: true
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "success",
plain: true
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "error",
plain: true
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "warning",
plain: true
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
level: "ignore",
plain: true
}, {
type: "bi.button",
iconCls: "plus-font",
plain: true,
level: "error",
}, {
type: "bi.button",
iconCls: "plus-font",
text: "朴素的按钮",
plain: true,
disabled: true
}, {
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 {
type: "bi.left",
scrolly: true,
vgap: 100,
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);
}
var clearMinWidth = props.block === true || props.clear === true || props.plain;
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,
minWidth: clearMinWidth ? 0 : 80,
height: isVertical(props.iconPosition) ? adaptiveHeight : 24,
shadow: props.clear !== true,
isShadowShowingOnSelected: true,
@ -64,7 +66,7 @@
},
render: function () {
var o = this.options;
var o = this.options, self = this;
// 由于button默认情况下有个边框，所以要主动算行高
var lineHeight, textHeight = o.textHeight;
@ -148,24 +150,14 @@
value: o.value
});
}
if (o.block === true) {
this.element.addClass("block");
}
if (o.clear === true) {
this.element.addClass("clear");
}
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");
}
var classArr = ["block", "clear", "ghost", "plain", "loading", "light"];
// 如果 options 对应的属性为 true 则给元素添加 class
BI.each(classArr, function (_, clz) {
if (BI.get(o, clz) === true) {
self.element.addClass(clz);
}
});
if (o.minWidth > 0) {
this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
}

Write Preview
Loading…
Cancel
Save