From bcc66b51b933e84abbf70cfec5b3cc9296828df8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8A=B2=E9=B9=8F?= Date: Sat, 9 May 2020 10:50:07 +0800 Subject: [PATCH] add colors property in GradientColor --- doric-demo/src/EffectsDemo.ts | 173 +++++++++++++++++++++++++++++++ doric-js/index.d.ts | 5 +- doric-js/lib/src/util/color.d.ts | 5 +- doric-js/src/util/color.ts | 5 +- 4 files changed, 182 insertions(+), 6 deletions(-) diff --git a/doric-demo/src/EffectsDemo.ts b/doric-demo/src/EffectsDemo.ts index 518597c1..0d62d10d 100644 --- a/doric-demo/src/EffectsDemo.ts +++ b/doric-demo/src/EffectsDemo.ts @@ -604,6 +604,179 @@ class EffectsDemo extends Panel { ], { space: 20 } ), + hlayout( + [ + vlayout( + [ + label("Multi-Grad TOP_BOTTOM"), + box().apply({ + width: 100, + height: 100, + backgroundColor: { + colors: [colors[0], Color.WHITE, colors[1]], + orientation: GradientOrientation.TOP_BOTTOM + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Gradient TR_BL"), + box().apply({ + width: 100, + height: 100, + backgroundColor: { + colors: [colors[0], Color.WHITE, colors[1]], + orientation: GradientOrientation.TR_BL + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Multi-Grad RIGHT_LEFT"), + box().apply({ + width: 100, + height: 100, + backgroundColor: { + colors: [colors[0], Color.WHITE, colors[1]], + orientation: GradientOrientation.RIGHT_LEFT + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Multi-Grad BR_TL"), + box().apply({ + width: 100, + height: 100, + backgroundColor: { + colors: [colors[0], Color.WHITE, colors[1]], + orientation: GradientOrientation.BR_TL + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Multi-Grad BOTTOM_TOP"), + box().apply({ + width: 100, + height: 100, + backgroundColor: { + colors: [colors[0], Color.WHITE, colors[1]], + orientation: GradientOrientation.BOTTOM_TOP + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Multi-Grad BL_TR"), + box().apply({ + width: 100, + height: 100, + backgroundColor: { + colors: [colors[0], Color.WHITE, colors[1]], + orientation: GradientOrientation.BL_TR + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Gradient LEFT_RIGHT"), + box().apply({ + width: 100, + height: 100, + backgroundColor: { + colors: [colors[0], Color.WHITE, colors[1]], + orientation: GradientOrientation.LEFT_RIGHT + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + vlayout( + [ + label("Multi-Grad TL_BR"), + box().apply({ + width: 100, + height: 100, + backgroundColor: { + colors: [colors[0], Color.WHITE, colors[1]], + orientation: GradientOrientation.TL_BR + }, + layoutConfig: layoutConfig().just().configMargin({ + left: 5, + right: 5, + bottom: 5, + }) + }), + ], + { + gravity: Gravity.Center, + space: 10, + }), + ], + { space: 20 } + ), ], { space: 20 diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts index 465defd0..b76fd1ca 100644 --- a/doric-js/index.d.ts +++ b/doric-js/index.d.ts @@ -956,8 +956,9 @@ declare module 'doric/lib/src/util/color' { TL_BR = 7 } export interface GradientColor { - start: Color; - end: Color; + start?: Color; + end?: Color; + colors?: Array; orientation: GradientOrientation; } } diff --git a/doric-js/lib/src/util/color.d.ts b/doric-js/lib/src/util/color.d.ts index b23493f3..5ab83d45 100644 --- a/doric-js/lib/src/util/color.d.ts +++ b/doric-js/lib/src/util/color.d.ts @@ -41,7 +41,8 @@ export declare enum GradientOrientation { TL_BR = 7 } export interface GradientColor { - start: Color; - end: Color; + start?: Color; + end?: Color; + colors?: Array; orientation: GradientOrientation; } diff --git a/doric-js/src/util/color.ts b/doric-js/src/util/color.ts index 3e0e698c..cb24094e 100644 --- a/doric-js/src/util/color.ts +++ b/doric-js/src/util/color.ts @@ -91,8 +91,9 @@ export enum GradientOrientation { } export interface GradientColor { - start: Color - end: Color + start?: Color + end?: Color + colors?: Array orientation: GradientOrientation }