guy 6 years ago
parent
commit
0f33b21f42
  1. 7
      demo/css/main.css
  2. 87
      demo/js/face.js
  3. 26
      demo/js/preview.js
  4. 8
      demo/less/main.less
  5. 7
      dist/demo.css
  6. 113
      dist/demo.js

7
demo/css/main.css

@ -42,6 +42,13 @@
body {
background-color: #fafbfc;
}
#wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.bi-theme-dark body {
background-color: #191B2B;
}

87
demo/js/face.js

@ -73,7 +73,15 @@ Demo.Face = BI.inherit(BI.Widget, {
self.activeFontColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试激活状态",
forceCenter: true
}
}]
};
},
@ -87,7 +95,15 @@ Demo.Face = BI.inherit(BI.Widget, {
self.selectFontColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试选中状态",
forceCenter: true
}
}]
};
},
@ -97,11 +113,19 @@ Demo.Face = BI.inherit(BI.Widget, {
type: "bi.htape",
cls: "config-item bi-border-bottom",
height: 40,
items: [this._createLabel("灰色字体颜色(用于Card2):"), this._createColorPicker(function () {
items: [this._createLabel("tip提示字体颜色:"), this._createColorPicker(function () {
self.grayFontColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.icon_text_item",
cls: "bi-tips copy-font",
height: 40,
text: "测试提示文字"
}
}]
};
},
@ -127,28 +151,19 @@ Demo.Face = BI.inherit(BI.Widget, {
};
},
_createCard1BackgroundConfig: function () {
_createCardBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item bi-border-bottom",
height: 40,
items: [this._createLabel("Card1背景颜色:"), this._createColorPicker(function () {
items: [this._createLabel("Card背景颜色:"), this._createColorPicker(function () {
self.cardBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
};
},
_createCard2BackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item bi-border-bottom",
height: 40,
items: [this._createLabel("Card2背景颜色:无颜色")]
};
},
_createHoverBackgroundColor: function () {
var self = this;
@ -160,7 +175,15 @@ Demo.Face = BI.inherit(BI.Widget, {
self.hoverBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试悬浮状态",
forceCenter: true
}
}]
};
},
@ -174,7 +197,15 @@ Demo.Face = BI.inherit(BI.Widget, {
self.activeBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试激活状态",
forceCenter: true
}
}]
};
},
@ -188,7 +219,15 @@ Demo.Face = BI.inherit(BI.Widget, {
self.selectBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试选中状态",
forceCenter: true
}
}]
};
},
@ -198,7 +237,7 @@ Demo.Face = BI.inherit(BI.Widget, {
type: "bi.htape",
cls: "config-item bi-border-bottom",
height: 40,
items: [this._createLabel("分割线颜色(只对左边的表格有效):"), this._createColorPicker(function () {
items: [this._createLabel("分割线颜色:"), this._createColorPicker(function () {
self.slitColor = this;
}, function () {
self._runGlobalStyle();
@ -211,13 +250,12 @@ Demo.Face = BI.inherit(BI.Widget, {
type: "bi.vertical",
items: [this._createLabel("--通用配色--"),
this._createBackgroundConfig(),
this._createCardBackgroundConfig(),
this._createFontConfig(),
this._createActiveFontConfig(),
this._createSelectFontConfig(),
this._createGrayFontConfig(),
this._createDisableFontConfig(),
this._createCard1BackgroundConfig(),
this._createCard2BackgroundConfig(),
this._createHoverBackgroundColor(),
this._createActiveBackgroundColor(),
this._createSelectBackgroundColor(),
@ -568,7 +606,8 @@ Demo.Face = BI.inherit(BI.Widget, {
color: fontColor
},
"#wrapper .bi-card": {
"background-color": cardBackgroundColor
"background-color": cardBackgroundColor,
color: fontColor
},
"#wrapper .bi-tips": {
color: grayFontColor
@ -617,6 +656,10 @@ Demo.Face = BI.inherit(BI.Widget, {
".bi-button.button-ignore": {
"background-color": button4BackgroundColor
},
// 以下是分割线颜色
"#wrapper .bi-border,#wrapper .bi-border-top,#wrapper .bi-border-bottom,#wrapper .bi-border-left,#wrapper .bi-border-right": {
"border-color": slitColor
},
".bi-collection-table-cell": {
"border-right-color": slitColor,
"border-bottom-color": slitColor

26
demo/js/preview.js

@ -30,28 +30,6 @@ Demo.Preview = BI.inherit(BI.Widget, {
type: "bi.absolute",
cls: "preview-background",
items: [{
el: {
type: "bi.left",
cls: "preview-header bi-tips",
height: 40,
items: [{
type: "bi.label",
height: 40,
text: "Card2",
hgap: 10,
textAlign: "left"
}, {
type: "bi.icon_text_item",
cls: "filter-font",
text: "测试图标",
width: 100,
height: 40
}]
},
left: 60,
right: 60,
top: 60
}, {
el: {
type: "bi.vtape",
cls: "preview-card bi-card",
@ -60,7 +38,7 @@ Demo.Preview = BI.inherit(BI.Widget, {
type: "bi.label",
cls: "preview-title bi-border-bottom",
height: 40,
text: "Card1",
text: "Card",
hgap: 10,
textAlign: "left"
},
@ -92,7 +70,7 @@ Demo.Preview = BI.inherit(BI.Widget, {
},
left: 60,
right: 60,
top: 160,
top: 60,
bottom: 60
}]
};

8
demo/less/main.less

@ -57,6 +57,14 @@ body {
background-color: @color-bi-background-normal;
}
#wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.bi-theme-dark body {
background-color: @color-bi-background-normal-theme-dark;
}

7
dist/demo.css vendored

@ -45,6 +45,13 @@
body {
background-color: #fafbfc;
}
#wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.bi-theme-dark body {
background-color: #191B2B;
}

113
dist/demo.js vendored

@ -8789,7 +8789,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
self.activeFontColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试激活状态",
forceCenter: true
}
}]
};
},
@ -8803,7 +8811,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
self.selectFontColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试选中状态",
forceCenter: true
}
}]
};
},
@ -8813,11 +8829,19 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
type: "bi.htape",
cls: "config-item bi-border-bottom",
height: 40,
items: [this._createLabel("灰色字体颜色(用于Card2):"), this._createColorPicker(function () {
items: [this._createLabel("tip提示字体颜色:"), this._createColorPicker(function () {
self.grayFontColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.icon_text_item",
cls: "bi-tips copy-font",
height: 40,
text: "测试提示文字"
}
}]
};
},
@ -8843,28 +8867,19 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
};
},
_createCard1BackgroundConfig: function () {
_createCardBackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item bi-border-bottom",
height: 40,
items: [this._createLabel("Card1背景颜色:"), this._createColorPicker(function () {
items: [this._createLabel("Card背景颜色:"), this._createColorPicker(function () {
self.cardBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
};
},
_createCard2BackgroundConfig: function () {
var self = this;
return {
type: "bi.htape",
cls: "config-item bi-border-bottom",
height: 40,
items: [this._createLabel("Card2背景颜色:无颜色")]
};
},
_createHoverBackgroundColor: function () {
var self = this;
@ -8876,7 +8891,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
self.hoverBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试悬浮状态",
forceCenter: true
}
}]
};
},
@ -8890,7 +8913,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
self.activeBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试激活状态",
forceCenter: true
}
}]
};
},
@ -8904,7 +8935,15 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
self.selectBackgroundColor = this;
}, function () {
self._runGlobalStyle();
})]
}), {
width: 100,
el: {
type: "bi.text_button",
cls: "bi-list-item-active",
text: "测试选中状态",
forceCenter: true
}
}]
};
},
@ -8914,7 +8953,7 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
type: "bi.htape",
cls: "config-item bi-border-bottom",
height: 40,
items: [this._createLabel("分割线颜色(只对左边的表格有效):"), this._createColorPicker(function () {
items: [this._createLabel("分割线颜色:"), this._createColorPicker(function () {
self.slitColor = this;
}, function () {
self._runGlobalStyle();
@ -8927,13 +8966,12 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
type: "bi.vertical",
items: [this._createLabel("--通用配色--"),
this._createBackgroundConfig(),
this._createCardBackgroundConfig(),
this._createFontConfig(),
this._createActiveFontConfig(),
this._createSelectFontConfig(),
this._createGrayFontConfig(),
this._createDisableFontConfig(),
this._createCard1BackgroundConfig(),
this._createCard2BackgroundConfig(),
this._createHoverBackgroundColor(),
this._createActiveBackgroundColor(),
this._createSelectBackgroundColor(),
@ -9284,7 +9322,8 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
color: fontColor
},
"#wrapper .bi-card": {
"background-color": cardBackgroundColor
"background-color": cardBackgroundColor,
color: fontColor
},
"#wrapper .bi-tips": {
color: grayFontColor
@ -9333,6 +9372,10 @@ BI.shortcut("demo.searcher_view", Demo.Func);Demo.Face = BI.inherit(BI.Widget, {
".bi-button.button-ignore": {
"background-color": button4BackgroundColor
},
// 以下是分割线颜色
"#wrapper .bi-border,#wrapper .bi-border-top,#wrapper .bi-border-bottom,#wrapper .bi-border-left,#wrapper .bi-border-right": {
"border-color": slitColor
},
".bi-collection-table-cell": {
"border-right-color": slitColor,
"border-bottom-color": slitColor
@ -11592,28 +11635,6 @@ BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, {
type: "bi.absolute",
cls: "preview-background",
items: [{
el: {
type: "bi.left",
cls: "preview-header bi-tips",
height: 40,
items: [{
type: "bi.label",
height: 40,
text: "Card2",
hgap: 10,
textAlign: "left"
}, {
type: "bi.icon_text_item",
cls: "filter-font",
text: "测试图标",
width: 100,
height: 40
}]
},
left: 60,
right: 60,
top: 60
}, {
el: {
type: "bi.vtape",
cls: "preview-card bi-card",
@ -11622,7 +11643,7 @@ BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, {
type: "bi.label",
cls: "preview-title bi-border-bottom",
height: 40,
text: "Card1",
text: "Card",
hgap: 10,
textAlign: "left"
},
@ -11654,7 +11675,7 @@ BI.shortcut("demo.north", Demo.North);Demo.Preview = BI.inherit(BI.Widget, {
},
left: 60,
right: 60,
top: 160,
top: 60,
bottom: 60
}]
};

Loading…
Cancel
Save