diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 6098389e7..110431afb 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -256,6 +256,17 @@ Demo.Button = BI.inherit(BI.Widget, { 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", @@ -309,6 +320,88 @@ Demo.Button = BI.inherit(BI.Widget, { 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 + } }]; // BI.each(items, function (i, item) { // item.el.handler = function () { diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 1eb9c0f22..cd3cfebd8 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -14,20 +14,29 @@ BI.Button = BI.inherit(BI.BasicButton, { _const: { - iconWidth: 16 + iconWidth: 18 }, _defaultConfig: function (props) { var conf = BI.Button.superclass._defaultConfig.apply(this, arguments); + var adaptiveHeight = 0; + if (isVertical(props.iconPosition)) { + // 图标高度和文字高度默认相等 + adaptiveHeight += (props.textHeight || 16) * 2; + adaptiveHeight += props.iconGap || 0; + var tGap = props.tgap || props.vgap || 2; + var bGap = props.bgap || props.vgap || 2; + adaptiveHeight += (tGap + bGap); + } + 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, - // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12 - height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24, + height: isVertical(props.iconPosition) ? adaptiveHeight : 24, shadow: props.clear !== true, isShadowShowingOnSelected: true, readonly: true, @@ -38,6 +47,7 @@ ghost: false, // 是否幽灵显示, 即正常状态无背景 loading: false, // 是否处于加载中 light: false, // 是否使用浅色 + plain: false, // 是否是朴素按钮,和 clear 的区别是 plain 有悬浮效果 textAlign: "center", whiteSpace: "nowrap", textWidth: null, @@ -48,7 +58,7 @@ bgap: 0, lgap: 0, rgap: 0, - iconGap: 8, + iconGap: 0, iconPosition: "left" }); }, @@ -80,7 +90,10 @@ cls: o.iconCls, width: this._const.iconWidth, height: lineHeight, - lineHeight: lineHeight + lineHeight: lineHeight, + // 不设置,自定义按钮无法居中 + iconWidth: o.iconWidth, + iconHeight: o.iconHeight }); this.text = BI.createWidget({ type: "bi.label", @@ -144,6 +157,9 @@ if (o.ghost === true) { this.element.addClass("ghost"); } + if (o.plain === true) { + this.element.addClass("plain"); + } if (o.loading === true) { this.element.addClass("loading"); } @@ -191,6 +207,14 @@ } }, + setIcon: function (cls) { + var o = this.options; + if (this.icon && o.iconCls !== cls) { + this.icon.element.removeClass(o.iconCls).addClass(cls); + o.iconCls = cls; + } + }, + doRedMark: function () { this.text.doRedMark.apply(this.text, arguments); }, diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less index f6f24bfa6..210bc4e89 100644 --- a/src/less/base/single/button/button.less +++ b/src/less/base/single/button/button.less @@ -33,6 +33,11 @@ body .bi-button, #body .bi-button { display: none; } } + &.plain { + font-size: inherit; + border-width: 0; + background-color: transparent; + } &.ghost { font-size: inherit; background-color: transparent; @@ -60,6 +65,18 @@ body .bi-button, #body .bi-button { &.clear, &.clear .b-font:before { color: @color-bi-text-common-clear-button; } + &.plain, &.plain .b-font:before { + background-color: transparent; + color: @color-bi-text-common-plain-button; + } + &.plain { + &:hover { + background-color: @color-bi-background-hover-plain-button; + } + &:focus { + background-color: @color-bi-background-active-plain-button; + } + } &.ghost { &, & .b-font:before { color: @color-bi-text-common-ghost-button; @@ -99,6 +116,18 @@ body .bi-button, #body .bi-button { background-color: transparent; border-color: @color-bi-border-dark-gray-line; } + &.plain, &.plain .b-font:before { + background-color: transparent; + color: @color-bi-text-ignore-plain-button; + } + &.plain { + &:hover { + background-color: @color-bi-background-hover-plain-button; + } + &:focus { + background-color: @color-bi-background-active-plain-button; + } + } } &.button-success { & { @@ -144,6 +173,18 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-success-button; } } + &.plain, &.plain .b-font:before { + background-color: transparent; + color: @color-bi-text-success-plain-button; + } + &.plain { + &:hover { + background-color: @color-bi-background-hover-plain-button; + } + &:focus { + background-color: @color-bi-background-active-plain-button; + } + } } &.button-warning { & { @@ -189,6 +230,18 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-warning-button; } } + &.plain, &.plain .b-font:before { + background-color: transparent; + color: @color-bi-text-warning-plain-button; + } + &.plain { + &:hover { + background-color: @color-bi-background-hover-plain-button; + } + &:focus { + background-color: @color-bi-background-active-plain-button; + } + } } &.button-error { & { @@ -234,6 +287,18 @@ body .bi-button, #body .bi-button { background-color: @color-bi-background-error-button; } } + &.plain, &.plain .b-font:before { + background-color: transparent; + color: @color-bi-text-error-plain-button; + } + &.plain { + &:hover { + background-color: @color-bi-background-hover-plain-button; + } + &:focus { + background-color: @color-bi-background-active-plain-button; + } + } } &.button-common.disabled, &.button-success.disabled, @@ -277,6 +342,16 @@ body .bi-button, #body .bi-button { .opacity(1); } } + &.plain { + &, & .b-font:before { + color: @color-bi-text-disabled-plain-clear-button !important; + } + background: transparent !important; + border-width: 0 !important; + &:hover, &:focus, &:active { + .opacity(1); + } + } &.ghost { &, & .b-font:before { // color: @color-bi-text-disabled-ignore-ghost-button !important; diff --git a/src/less/lib/theme.less b/src/less/lib/theme.less index 87d578943..ae3fd45bb 100644 --- a/src/less/lib/theme.less +++ b/src/less/lib/theme.less @@ -64,6 +64,7 @@ @color-bi-background-button: @color-bi-background-highlight; @color-bi-text-common-button: @color-bi-text; @color-bi-text-common-clear-button: @color-bi-text-highlight; +@color-bi-text-common-plain-button: @color-bi-text-highlight; @color-bi-text-common-ghost-button: @color-bi-text-highlight; @color-bi-text-common-ghost-button-theme-dark: @color-bi-text; @color-bi-text-disabled-common-ghost-button-theme-dark: @color-bi-text; @@ -77,10 +78,13 @@ @color-bi-background-common-light-button: @color-bi-background-light-blue; @color-bi-background-hover-common-light-button: @color-bi-background-light-blue; @color-bi-background-active-common-light-button: @color-bi-background-light-blue; +@color-bi-background-hover-plain-button: @color-black-5; +@color-bi-background-active-plain-button: @color-black-10; @color-bi-background-active-common-ghost-button: @color-bi-background-highlight; @color-bi-background-active-common-ghost-button-theme-dark: @color-bi-background-default; @color-bi-text-ignore-button: @color-bi-text-highlight; +@color-bi-text-ignore-plain-button: @background-color-light-black; @color-bi-border-ignore-button: @color-bi-border-highlight; @color-bi-background-ignore-button: @color-bi-background-default; @color-bi-background-ignore-button-theme-dark: @color-bi-background-default-theme-dark; @@ -91,6 +95,7 @@ @color-bi-background-success-button: @color-bi-background-success; @color-bi-border-success-button: @color-bi-border-success; @color-bi-text-success-clear-button: @color-bi-text-success; +@color-bi-text-success-plain-button: @color-bi-text-success; @color-bi-text-success-ghost-button: @color-bi-text-success; @color-bi-text-success-light-button: @color-bi-text-success; @color-bi-background-success-light-button: @color-bi-background-light-success; @@ -98,6 +103,7 @@ @color-bi-background-active-success-light-button: @color-bi-background-light-success; @color-bi-text-warning-button: @color-bi-text; +@color-bi-text-warning-plain-button: @color-bi-text-redmark; @color-bi-text-warning-light-button: @color-bi-text-redmark; @color-bi-background-warning-light-button: @color-bi-background-light-warning; @color-bi-background-hover-warning-light-button: @color-bi-background-light-warning; @@ -115,6 +121,7 @@ @color-bi-background-hover-error-light-button: @color-bi-background-light-failure; @color-bi-background-active-error-light-button: @color-bi-background-light-failure; @color-bi-border-error-button: @color-bi-border-failure; +@color-bi-text-error-plain-button: @color-bi-text-failure; @color-bi-text-error-clear-button: @color-bi-text-failure; @color-bi-text-error-ghost-button: @color-bi-text-failure; @color-bi-text-disabled-button: @color-bi-text-disabled; @@ -124,6 +131,7 @@ @color-bi-background-disabled-ignore-button: @color-bi-background-default; @color-bi-border-disabled-ignore-button: @color-bi-border-line; @color-bi-text-disabled-ignore-clear-button: @color-bi-text-disabled; +@color-bi-text-disabled-plain-clear-button: @color-bi-text-disabled; @color-bi-text-disabled-common-ghost-button: @color-bi-text-highlight; @color-bi-border-disabled-common-ghost-button: @color-bi-border-highlight; @color-bi-text-disabled-success-ghost-button: @color-bi-text-success;