diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js index 6098389e7..400559566 100644 --- a/demo/js/base/button/demo.button.js +++ b/demo/js/base/button/demo.button.js @@ -309,6 +309,73 @@ 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 + } }]; // BI.each(items, function (i, item) { // item.el.handler = function () { diff --git a/package.json b/package.json index 0a9f52fc5..84cbf8cc1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fineui", - "version": "2.0.20220620162306", + "version": "2.0.20220621140421", "description": "fineui", "main": "dist/fineui.min.js", "types": "dist/lib/index.d.ts", diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js index 1eb9c0f22..78e910f7c 100644 --- a/src/base/single/button/buttons/button.js +++ b/src/base/single/button/buttons/button.js @@ -38,6 +38,7 @@ ghost: false, // 是否幽灵显示, 即正常状态无背景 loading: false, // 是否处于加载中 light: false, // 是否使用浅色 + plain: false, // 是否是朴素按钮,和 clear 的区别是 plain 有悬浮效果 textAlign: "center", whiteSpace: "nowrap", textWidth: null, @@ -144,6 +145,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"); } diff --git a/src/component/form/form.field.js b/src/component/form/form.field.js index e6c11a924..0b67041b8 100644 --- a/src/component/form/form.field.js +++ b/src/component/form/form.field.js @@ -9,6 +9,7 @@ baseCls: "bi-form-field", label: "", el: {}, + headerCls: "", labelAlign: "right", // 文字默认右对齐 validate: function () { return true; @@ -69,6 +70,7 @@ textAlign: o.labelAlign, text: o.label, width: o.labelWidth, + cls: o.headerCls, rgap: 20 // 表单文字与右侧输入间距均为20px } }, field] : [field] diff --git a/src/component/form/form.js b/src/component/form/form.js index 27734455f..de8caeaea 100644 --- a/src/component/form/form.js +++ b/src/component/form/form.js @@ -18,7 +18,8 @@ label: "", el: {} }], - labelWidth: "" + labelWidth: "", + headerCls: "", // 左侧文字样式 }, render: function () { @@ -44,6 +45,7 @@ height: item.el.height || 28, labelAlign: o.labelAlign, labelWidth: o.labelWidth, + headerCls: o.headerCls, el: item.el, label: item.label, tip: item.tip, diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less index 97e0b75ac..6eae05320 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; diff --git a/src/widget/multiselect/multiselect.trigger.js b/src/widget/multiselect/multiselect.trigger.js index 7406bd5ba..5b39b84dc 100644 --- a/src/widget/multiselect/multiselect.trigger.js +++ b/src/widget/multiselect/multiselect.trigger.js @@ -95,7 +95,12 @@ BI.MultiSelectTrigger = BI.inherit(BI.Trigger, { el: { type: "bi.text", title: function () { - return self.searcher.getState(); + /** 修正REPORT-73699引入,需要考虑到传递过来的值是方法的情况 */ + var state = self.searcher.getState(); + if (BI.isFunction(state)) { + return state(); + } + return state; } }, left: 0,