diff --git a/Android/doric/src/main/java/pub/doric/shader/ViewNode.java b/Android/doric/src/main/java/pub/doric/shader/ViewNode.java
index 1189811c..73705098 100644
--- a/Android/doric/src/main/java/pub/doric/shader/ViewNode.java
+++ b/Android/doric/src/main/java/pub/doric/shader/ViewNode.java
@@ -48,7 +48,6 @@ import com.github.pengfeizhou.jscore.JSObject;
 import com.github.pengfeizhou.jscore.JSValue;
 import com.github.pengfeizhou.jscore.JavaValue;
 
-import java.util.HashMap;
 import java.util.LinkedList;
 
 /**
@@ -179,17 +178,17 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
                     setY(prop.asNumber().toFloat());
                 }
                 break;
-            case "bgColor":
+            case "backgroundColor":
                 if (isAnimating()) {
                     ObjectAnimator animator = ObjectAnimator.ofInt(
                             this,
                             name,
-                            getBgColor(),
+                            getBackgroundColor(),
                             prop.asNumber().toInt());
                     animator.setEvaluator(new ArgbEvaluator());
                     addAnimator(animator);
                 } else {
-                    setBgColor(prop.asNumber().toInt());
+                    setBackgroundColor(prop.asNumber().toInt());
                 }
                 break;
             case "onClick":
@@ -540,7 +539,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
     }
 
     @DoricMethod
-    public int getBgColor() {
+    public int getBackgroundColor() {
         if (mView.getBackground() instanceof ColorDrawable) {
             return ((ColorDrawable) mView.getBackground()).getColor();
         }
@@ -548,7 +547,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
     }
 
     @DoricMethod
-    public void setBgColor(int color) {
+    public void setBackgroundColor(int color) {
         mView.setBackgroundColor(color);
     }
 
diff --git a/demo/src/AnimatorDemo.ts b/demo/src/AnimatorDemo.ts
index 42a19ecc..185acd51 100644
--- a/demo/src/AnimatorDemo.ts
+++ b/demo/src/AnimatorDemo.ts
@@ -6,7 +6,7 @@ function thisLabel(str: string) {
         text: str,
         width: 60,
         height: 50,
-        bgColor: colors[0],
+        backgroundColor: colors[0],
         textSize: 15,
         textColor: Color.WHITE,
         layoutConfig: layoutConfig().exactly(),
@@ -34,7 +34,7 @@ class AnimatorDemo extends Panel {
                                         view.width = view.height = 20
                                         view.x = view.y = 0
                                         view.rotation = 0
-                                        view.bgColor = colors[2]
+                                        view.backgroundColor = colors[2]
                                         view.corners = 0
                                         view.scaleX = 1
                                         view.scaleY = 1
@@ -102,7 +102,7 @@ class AnimatorDemo extends Panel {
                             onClick: () => {
                                 animate(this)({
                                     animations: () => {
-                                        view.bgColor = colors[(idx++) % colors.length]
+                                        view.backgroundColor = colors[(idx++) % colors.length]
                                     },
                                     duration: 1000,
                                 });
@@ -174,7 +174,7 @@ class AnimatorDemo extends Panel {
                 view,
             ]).apply({
                 layoutConfig: layoutConfig().atmost(),
-                bgColor: colors[1].alpha(0.3 * 255),
+                backgroundColor: colors[1].alpha(0.3 * 255),
             }),
         ]).apply({
             layoutConfig: layoutConfig().atmost(),
diff --git a/demo/src/ComplicatedAnimations.ts b/demo/src/ComplicatedAnimations.ts
index 9b11d028..9eb5d3a8 100644
--- a/demo/src/ComplicatedAnimations.ts
+++ b/demo/src/ComplicatedAnimations.ts
@@ -6,7 +6,7 @@ function thisLabel(str: string) {
         text: str,
         width: 80,
         height: 30,
-        bgColor: colors[0],
+        backgroundColor: colors[0],
         textSize: 10,
         textColor: Color.WHITE,
         layoutConfig: layoutConfig().exactly(),
@@ -128,7 +128,7 @@ class AnimationDemo extends Panel {
                 view,
             ]).apply({
                 layoutConfig: layoutConfig().atmost(),
-                bgColor: colors[1].alpha(0.3 * 255),
+                backgroundColor: colors[1].alpha(0.3 * 255),
             }),
         ]).apply({
             layoutConfig: layoutConfig().atmost(),
diff --git a/demo/src/Counter.ts b/demo/src/Counter.ts
index 44ea2f19..3b152919 100644
--- a/demo/src/Counter.ts
+++ b/demo/src/Counter.ts
@@ -59,7 +59,7 @@ class CounterView extends ViewHolder<CountModel> {
                 offsetY: 10,
             }
             it.corners = 20
-            it.bgColor = Color.parse('#ff00ff')
+            it.backgroundColor = Color.parse('#ff00ff')
         }))
 
         root.addChild((new Image).also(iv => {
diff --git a/demo/src/EffectsDemo.ts b/demo/src/EffectsDemo.ts
index 49b6ca83..126d6728 100644
--- a/demo/src/EffectsDemo.ts
+++ b/demo/src/EffectsDemo.ts
@@ -6,7 +6,7 @@ import { colors } from "./utils";
 function box(idx = 0) {
     return (new Stack).also(it => {
         it.width = it.height = 20
-        it.bgColor = colors[idx || 0]
+        it.backgroundColor = colors[idx || 0]
     })
 }
 
@@ -15,7 +15,7 @@ function boxStr(str: string, idx = 0) {
         it.width = it.height = 20
         it.text = str
         it.textColor = Color.WHITE
-        it.bgColor = colors[idx || 0]
+        it.backgroundColor = colors[idx || 0]
     })
 }
 
diff --git a/demo/src/FlowLayoutDemo.ts b/demo/src/FlowLayoutDemo.ts
index 1bdb13ed..f668cc08 100644
--- a/demo/src/FlowLayoutDemo.ts
+++ b/demo/src/FlowLayoutDemo.ts
@@ -23,7 +23,7 @@ class FlowDemo extends Panel {
             rowSpace: 10,
             renderItem: (idx) => {
                 return new FlowLayoutItem().apply({
-                    bgColor: colors[idx % colors.length],
+                    backgroundColor: colors[idx % colors.length],
                     height: 50 + (idx % 3) * 20,
                     layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
                 }).also(it => {
diff --git a/demo/src/ImageDemo.ts b/demo/src/ImageDemo.ts
index 15ce8d55..357a8e22 100644
--- a/demo/src/ImageDemo.ts
+++ b/demo/src/ImageDemo.ts
@@ -13,7 +13,7 @@ class ImageDemo extends Panel {
                 layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
                 textSize: 30,
                 textColor: Color.WHITE,
-                bgColor: colors[5],
+                backgroundColor: colors[5],
                 textAlignment: gravity().center(),
                 height: 50,
             }),
diff --git a/demo/src/LayoutDemo.ts b/demo/src/LayoutDemo.ts
index 442e2844..b4762dbb 100644
--- a/demo/src/LayoutDemo.ts
+++ b/demo/src/LayoutDemo.ts
@@ -14,7 +14,7 @@ const colors = [
 function box(idx = 0) {
     return (new Stack).also(it => {
         it.width = it.height = 20
-        it.bgColor = Color.parse(colors[idx || 0])
+        it.backgroundColor = Color.parse(colors[idx || 0])
     })
 }
 function boxStr(str: string, idx = 0) {
@@ -22,7 +22,7 @@ function boxStr(str: string, idx = 0) {
         it.width = it.height = 20
         it.text = str
         it.textColor = Color.parse('#ffffff')
-        it.bgColor = Color.parse(colors[idx || 0])
+        it.backgroundColor = Color.parse(colors[idx || 0])
     })
 }
 function label(str: string) {
@@ -117,7 +117,7 @@ class LayoutDemo extends Panel {
                             widthSpec: LayoutSpec.EXACTLY,
                             heightSpec: LayoutSpec.EXACTLY,
                         },
-                        bgColor: Color.parse('#eeeeee'),
+                        backgroundColor: Color.parse('#eeeeee'),
                         gravity: gravity().center(),
                     } as IHLayout),
                     hlayout([
@@ -137,7 +137,7 @@ class LayoutDemo extends Panel {
                             widthSpec: LayoutSpec.EXACTLY,
                             heightSpec: LayoutSpec.EXACTLY,
                         },
-                        bgColor: Color.parse('#eeeeee'),
+                        backgroundColor: Color.parse('#eeeeee'),
                         gravity: gravity().center(),
                     } as IHLayout),
                     hlayout([
@@ -157,7 +157,7 @@ class LayoutDemo extends Panel {
                             widthSpec: LayoutSpec.EXACTLY,
                             heightSpec: LayoutSpec.EXACTLY,
                         },
-                        bgColor: Color.parse('#eeeeee'),
+                        backgroundColor: Color.parse('#eeeeee'),
                         gravity: gravity().center(),
                     } as IHLayout),
                     hlayout([
@@ -183,7 +183,7 @@ class LayoutDemo extends Panel {
                             widthSpec: LayoutSpec.EXACTLY,
                             heightSpec: LayoutSpec.EXACTLY,
                         },
-                        bgColor: Color.parse('#eeeeee'),
+                        backgroundColor: Color.parse('#eeeeee'),
                         gravity: gravity().center(),
                     } as IHLayout),
                     hlayout([
@@ -215,7 +215,7 @@ class LayoutDemo extends Panel {
                             widthSpec: LayoutSpec.EXACTLY,
                             heightSpec: LayoutSpec.EXACTLY,
                         },
-                        bgColor: Color.parse('#eeeeee'),
+                        backgroundColor: Color.parse('#eeeeee'),
                         gravity: gravity().center(),
                     } as IHLayout),
                 ]).also(it => {
@@ -315,7 +315,7 @@ class LayoutDemo extends Panel {
                                 widthSpec: LayoutSpec.EXACTLY,
                                 heightSpec: LayoutSpec.EXACTLY,
                             },
-                            bgColor: Color.parse('#eeeeee'),
+                            backgroundColor: Color.parse('#eeeeee'),
                             gravity: gravity().center(),
                         } as IVLayout),
                         vlayout([
@@ -345,7 +345,7 @@ class LayoutDemo extends Panel {
                                 widthSpec: LayoutSpec.EXACTLY,
                                 heightSpec: LayoutSpec.EXACTLY,
                             },
-                            bgColor: Color.parse('#eeeeee'),
+                            backgroundColor: Color.parse('#eeeeee'),
                             gravity: gravity().center(),
                         } as IVLayout),
                         vlayout([
@@ -375,7 +375,7 @@ class LayoutDemo extends Panel {
                                 widthSpec: LayoutSpec.EXACTLY,
                                 heightSpec: LayoutSpec.EXACTLY,
                             },
-                            bgColor: Color.parse('#eeeeee'),
+                            backgroundColor: Color.parse('#eeeeee'),
                             gravity: gravity().center(),
                         } as IVLayout),
                         vlayout([
@@ -406,7 +406,7 @@ class LayoutDemo extends Panel {
                                 widthSpec: LayoutSpec.EXACTLY,
                                 heightSpec: LayoutSpec.EXACTLY,
                             },
-                            bgColor: Color.parse('#eeeeee'),
+                            backgroundColor: Color.parse('#eeeeee'),
                             gravity: gravity().center(),
                         } as IVLayout),
                         vlayout([
@@ -438,7 +438,7 @@ class LayoutDemo extends Panel {
                                 widthSpec: LayoutSpec.EXACTLY,
                                 heightSpec: LayoutSpec.EXACTLY,
                             },
-                            bgColor: Color.parse('#eeeeee'),
+                            backgroundColor: Color.parse('#eeeeee'),
                             gravity: gravity().center(),
                         } as IVLayout),
                     ]).also(it => {
diff --git a/demo/src/ListDemo.ts b/demo/src/ListDemo.ts
index 81e65d97..ebd5c186 100644
--- a/demo/src/ListDemo.ts
+++ b/demo/src/ListDemo.ts
@@ -14,7 +14,7 @@ class ListPanel extends Panel {
                 },
                 textSize: 30,
                 textColor: Color.parse("#535c68"),
-                bgColor: Color.parse("#dff9fb"),
+                backgroundColor: Color.parse("#dff9fb"),
                 textAlignment: gravity().center(),
                 height: 50,
             }),
@@ -64,7 +64,7 @@ class ListPanel extends Panel {
                                             }
                                         }
                                         it.gravity = gravity().center()
-                                        it.bgColor = colors[(idx + offset) % colors.length]
+                                        it.backgroundColor = colors[(idx + offset) % colors.length]
                                         let clicked = 0
                                         it.onClick = () => {
                                             counter.text = `Item Clicked ${++clicked}`
@@ -107,8 +107,8 @@ class ListPanel extends Panel {
                 widthSpec: LayoutSpec.AT_MOST,
                 heightSpec: LayoutSpec.AT_MOST,
             }
-            it.bgColor = Color.WHITE
+            it.backgroundColor = Color.WHITE
         }).in(rootView)
-        refreshView.bgColor = Color.YELLOW
+        refreshView.backgroundColor = Color.YELLOW
     }
 }
\ No newline at end of file
diff --git a/demo/src/ModalDemo.ts b/demo/src/ModalDemo.ts
index 9fccd7e6..2086e1b0 100644
--- a/demo/src/ModalDemo.ts
+++ b/demo/src/ModalDemo.ts
@@ -10,7 +10,7 @@ class ModalDemo extends Panel {
                 layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
                 textSize: 30,
                 textColor: Color.WHITE,
-                bgColor: colors[1],
+                backgroundColor: colors[1],
                 textAlignment: Gravity.Center,
                 height: 50,
             }),
@@ -18,7 +18,7 @@ class ModalDemo extends Panel {
             label('Click me').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -30,7 +30,7 @@ class ModalDemo extends Panel {
             label('Click me').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -43,7 +43,7 @@ class ModalDemo extends Panel {
             label('Click me').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -56,14 +56,14 @@ class ModalDemo extends Panel {
                 layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
                 textSize: 30,
                 textColor: Color.WHITE,
-                bgColor: colors[2],
+                backgroundColor: colors[2],
                 textAlignment: Gravity.Center,
                 height: 50,
             }),
             label('Click me').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -82,14 +82,14 @@ class ModalDemo extends Panel {
                 layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
                 textSize: 30,
                 textColor: Color.WHITE,
-                bgColor: colors[3],
+                backgroundColor: colors[3],
                 textAlignment: Gravity.Center,
                 height: 50,
             }),
             label('Click me').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -113,14 +113,14 @@ class ModalDemo extends Panel {
                 layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
                 textSize: 30,
                 textColor: Color.WHITE,
-                bgColor: colors[4],
+                backgroundColor: colors[4],
                 textAlignment: Gravity.Center,
                 height: 50,
             }),
             label('Click me').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
diff --git a/demo/src/NavbarDemo.ts b/demo/src/NavbarDemo.ts
index 01e8a7f2..43b743ca 100644
--- a/demo/src/NavbarDemo.ts
+++ b/demo/src/NavbarDemo.ts
@@ -9,7 +9,7 @@ class NavbarDemo extends Panel {
             label('isHidden').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -22,7 +22,7 @@ class NavbarDemo extends Panel {
             label('setHidden').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -37,7 +37,7 @@ class NavbarDemo extends Panel {
             label('setTitle').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -51,7 +51,7 @@ class NavbarDemo extends Panel {
             label('setBgColor').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -65,7 +65,7 @@ class NavbarDemo extends Panel {
             label('Pop').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
diff --git a/demo/src/NavigatorDemo.ts b/demo/src/NavigatorDemo.ts
index dfc1bd60..03796ef5 100644
--- a/demo/src/NavigatorDemo.ts
+++ b/demo/src/NavigatorDemo.ts
@@ -9,7 +9,7 @@ class NaivgatorDemo extends Panel {
                 layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
                 textSize: 30,
                 textColor: Color.WHITE,
-                bgColor: colors[1],
+                backgroundColor: colors[1],
                 textAlignment: gravity().center(),
                 height: 50,
             }),
@@ -20,7 +20,7 @@ class NaivgatorDemo extends Panel {
                 'NetworkDemo', 'ScrollerDemo', 'SliderDemo', 'Snake', 'StorageDemo'].map(e =>
                     label(e).apply({
                         height: 50,
-                        bgColor: colors[0],
+                        backgroundColor: colors[0],
                         textSize: 30,
                         textColor: Color.WHITE,
                         layoutConfig: layoutConfig().exactly().w(LayoutSpec.AT_MOST),
@@ -32,7 +32,7 @@ class NaivgatorDemo extends Panel {
             label('POP').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
diff --git a/demo/src/NetworkDemo.ts b/demo/src/NetworkDemo.ts
index da218364..851b5704 100644
--- a/demo/src/NetworkDemo.ts
+++ b/demo/src/NetworkDemo.ts
@@ -9,7 +9,7 @@ class NetworkDemo extends Panel {
             label('Click me').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
diff --git a/demo/src/PopoverDemo.ts b/demo/src/PopoverDemo.ts
index b78a5c63..fd0e4f99 100644
--- a/demo/src/PopoverDemo.ts
+++ b/demo/src/PopoverDemo.ts
@@ -9,7 +9,7 @@ class PopoverDemo extends Panel {
             label('Popover').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -17,14 +17,14 @@ class PopoverDemo extends Panel {
                     popover(context).show(text({
                         width: 200,
                         height: 50,
-                        bgColor: colors[0],
+                        backgroundColor: colors[0],
                         textColor: Color.WHITE,
                         layoutConfig: layoutConfig().exactly().a(Gravity.Center),
                         text: "This is PopOver Window",
                     }).also(v => {
                         let idx = 0
                         v.onClick = () => {
-                            v.bgColor = colors[(++idx) % colors.length]
+                            v.backgroundColor = colors[(++idx) % colors.length]
                         }
                         modal(context).toast('Dismissed after 3 seconds')
                         setTimeout(() => {
diff --git a/demo/src/RefreshableDemo.ts b/demo/src/RefreshableDemo.ts
index 5dd775b2..08e2854e 100644
--- a/demo/src/RefreshableDemo.ts
+++ b/demo/src/RefreshableDemo.ts
@@ -40,7 +40,7 @@ class RefreshableDemo extends Panel {
                 label('start Refresh').apply({
                     width: 300,
                     height: 50,
-                    bgColor: colors[0],
+                    backgroundColor: colors[0],
                     textSize: 30,
                     textColor: Color.WHITE,
                     layoutConfig: layoutConfig().exactly(),
@@ -51,7 +51,7 @@ class RefreshableDemo extends Panel {
                 label('stop Refresh').apply({
                     width: 300,
                     height: 50,
-                    bgColor: colors[0],
+                    backgroundColor: colors[0],
                     textSize: 30,
                     textColor: Color.WHITE,
                     layoutConfig: layoutConfig().exactly(),
@@ -63,7 +63,7 @@ class RefreshableDemo extends Panel {
                 label('Enable Refresh').apply({
                     width: 300,
                     height: 50,
-                    bgColor: colors[0],
+                    backgroundColor: colors[0],
                     textSize: 30,
                     textColor: Color.WHITE,
                     layoutConfig: layoutConfig().exactly(),
@@ -75,7 +75,7 @@ class RefreshableDemo extends Panel {
                 label('Disable Refresh').apply({
                     width: 300,
                     height: 50,
-                    bgColor: colors[0],
+                    backgroundColor: colors[0],
                     textSize: 30,
                     textColor: Color.WHITE,
                     layoutConfig: layoutConfig().exactly(),
@@ -86,7 +86,7 @@ class RefreshableDemo extends Panel {
                 label('Rotate self').apply({
                     width: 300,
                     height: 50,
-                    bgColor: colors[0],
+                    backgroundColor: colors[0],
                     textSize: 30,
                     textColor: Color.WHITE,
                     layoutConfig: layoutConfig().exactly(),
@@ -101,7 +101,7 @@ class RefreshableDemo extends Panel {
                 space: 10,
             } as IVLayout))
         }).apply({
-            bgColor: Color.YELLOW
+            backgroundColor: Color.YELLOW
         }).in(rootView)
     }
 }
\ No newline at end of file
diff --git a/demo/src/ScrollerDemo.ts b/demo/src/ScrollerDemo.ts
index 7981e123..9870d3d1 100644
--- a/demo/src/ScrollerDemo.ts
+++ b/demo/src/ScrollerDemo.ts
@@ -12,7 +12,7 @@ class ScrollerPanel extends Panel {
                     layoutConfig: layoutConfig().exactly(),
                     width: 300,
                     height: 500,
-                    bgColor: Color.RED,
+                    backgroundColor: Color.RED,
                 }),
                 scroller(
                     vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
@@ -20,14 +20,14 @@ class ScrollerPanel extends Panel {
                     layoutConfig: layoutConfig().exactly(),
                     width: 300,
                     height: 500,
-                    bgColor: Color.BLUE,
+                    backgroundColor: Color.BLUE,
                 })
             ])
         )
             .apply({
                 layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY),
                 height: 500,
-                bgColor: Color.YELLOW,
+                backgroundColor: Color.YELLOW,
             })
             .in(rootView)
     }
diff --git a/demo/src/SliderDemo.ts b/demo/src/SliderDemo.ts
index 7ca6da6c..6ab55c38 100644
--- a/demo/src/SliderDemo.ts
+++ b/demo/src/SliderDemo.ts
@@ -24,7 +24,7 @@ class SliderPanel extends Panel {
                 },
                 textSize: 30,
                 textColor: Color.WHITE,
-                bgColor: colors[1],
+                backgroundColor: colors[1],
                 textAlignment: gravity().center(),
                 height: 50,
             }),
@@ -38,7 +38,7 @@ class SliderPanel extends Panel {
                     })).also(it => {
                         let start = idx
                         it.onClick = () => {
-                            it.bgColor = (colors[++start % colors.length])
+                            it.backgroundColor = (colors[++start % colors.length])
                         }
                     })
                 },
diff --git a/demo/src/Snake.ts b/demo/src/Snake.ts
index 90d2da7d..05bcba33 100644
--- a/demo/src/Snake.ts
+++ b/demo/src/Snake.ts
@@ -144,7 +144,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
     right?: Text
 
     build(root: Group): void {
-        root.bgColor = Color.parse('#000000')
+        root.backgroundColor = Color.parse('#000000')
         vlayout([
             text({
                 text: "Snake",
@@ -160,7 +160,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
                 },
             }),
             (new Stack).also(panel => {
-                panel.bgColor = Color.parse('#00ff00')
+                panel.backgroundColor = Color.parse('#00ff00')
                 this.panel = panel
             }),
             hlayout([
@@ -188,7 +188,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
                         text: "↑",
                         textSize: 30,
                         textAlignment: new Gravity().center(),
-                        bgColor: Color.parse('#ffff00'),
+                        backgroundColor: Color.parse('#ffff00'),
                         layoutConfig: {
                             widthSpec: LayoutSpec.EXACTLY,
                             heightSpec: LayoutSpec.EXACTLY,
@@ -207,7 +207,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
                         text: "←",
                         textSize: 30,
                         textAlignment: new Gravity().center(),
-                        bgColor: Color.parse('#ffff00'),
+                        backgroundColor: Color.parse('#ffff00'),
                         layoutConfig: {
                             widthSpec: LayoutSpec.EXACTLY,
                             heightSpec: LayoutSpec.EXACTLY,
@@ -219,7 +219,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
                         text: "↓",
                         textSize: 30,
                         textAlignment: new Gravity().center(),
-                        bgColor: Color.parse('#ffff00'),
+                        backgroundColor: Color.parse('#ffff00'),
                         layoutConfig: {
                             widthSpec: LayoutSpec.EXACTLY,
                             heightSpec: LayoutSpec.EXACTLY,
@@ -231,7 +231,7 @@ class SnakeView extends ViewHolder<SnakeModel> {
                         text: "→",
                         textSize: 30,
                         textAlignment: new Gravity().center(),
-                        bgColor: Color.parse('#ffff00'),
+                        backgroundColor: Color.parse('#ffff00'),
                         layoutConfig: {
                             widthSpec: LayoutSpec.EXACTLY,
                             heightSpec: LayoutSpec.EXACTLY,
@@ -292,9 +292,9 @@ class SnakeView extends ViewHolder<SnakeModel> {
                 this.panel.addChild(item)
             }
             if (index === nodes.length - 1) {
-                item.bgColor = Color.parse('#ffff00')
+                item.backgroundColor = Color.parse('#ffff00')
             } else {
-                item.bgColor = Color.parse('#ff0000')
+                item.backgroundColor = Color.parse('#ff0000')
             }
             item.x = e.x * 10
             item.y = e.y * 10
diff --git a/demo/src/StorageDemo.ts b/demo/src/StorageDemo.ts
index a25717be..f13db93b 100644
--- a/demo/src/StorageDemo.ts
+++ b/demo/src/StorageDemo.ts
@@ -20,7 +20,7 @@ class StorageDemo extends Panel {
                 layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
                 textSize: 30,
                 textColor: Color.WHITE,
-                bgColor: colors[1],
+                backgroundColor: colors[1],
                 textAlignment: gravity().center(),
                 height: 50,
             }),
@@ -29,14 +29,14 @@ class StorageDemo extends Panel {
                 layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
                 textSize: 20,
                 textColor: Color.WHITE,
-                bgColor: colors[3],
+                backgroundColor: colors[3],
                 textAlignment: gravity().center(),
                 height: 50,
             }).also(it => this.stored = it),
             label('store a value').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -57,7 +57,7 @@ class StorageDemo extends Panel {
             label('remove value').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
@@ -70,7 +70,7 @@ class StorageDemo extends Panel {
             label('clear values').apply({
                 width: 200,
                 height: 50,
-                bgColor: colors[0],
+                backgroundColor: colors[0],
                 textSize: 30,
                 textColor: Color.WHITE,
                 layoutConfig: layoutConfig().exactly(),
diff --git a/demo/src/utils.ts b/demo/src/utils.ts
index 83bdf2da..a7c7b2cc 100644
--- a/demo/src/utils.ts
+++ b/demo/src/utils.ts
@@ -24,7 +24,7 @@ export function label(str: string) {
 export function box(idx = 0) {
     return (new Stack).also(it => {
         it.width = it.height = 20
-        it.bgColor = colors[idx || 0]
+        it.backgroundColor = colors[idx || 0]
     })
 }
 export function boxStr(str: string, idx = 0) {
@@ -32,7 +32,7 @@ export function boxStr(str: string, idx = 0) {
         it.width = it.height = 20
         it.text = str
         it.textColor = Color.WHITE
-        it.bgColor = colors[idx || 0]
+        it.backgroundColor = colors[idx || 0]
     })
 }
 
@@ -42,7 +42,7 @@ export function title(str: string) {
         layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST),
         textSize: 30,
         textColor: Color.WHITE,
-        bgColor: colors[1],
+        backgroundColor: colors[1],
         textAlignment: gravity().center(),
         height: 50,
     })
diff --git a/iOS/Pod/Classes/Shader/DoricViewNode.m b/iOS/Pod/Classes/Shader/DoricViewNode.m
index 61da0980..b51243db 100644
--- a/iOS/Pod/Classes/Shader/DoricViewNode.m
+++ b/iOS/Pod/Classes/Shader/DoricViewNode.m
@@ -176,7 +176,7 @@ - (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop
         view.x = [(NSNumber *) prop floatValue];
     } else if ([name isEqualToString:@"y"]) {
         view.y = [(NSNumber *) prop floatValue];
-    } else if ([name isEqualToString:@"bgColor"]) {
+    } else if ([name isEqualToString:@"backgroundColor"]) {
         view.backgroundColor = DoricColor(prop);
     } else if ([name isEqualToString:@"alpha"]) {
         view.alpha = [prop floatValue];
@@ -590,7 +590,7 @@ - (CABasicAnimation *)parseChangeable:(NSDictionary *)params fillMode:(NSNumber
         animation.keyPath = @"transform.rotation.z";
         animation.fromValue = @([params[@"fromValue"] floatValue] * M_PI);
         animation.toValue = @([params[@"toValue"] floatValue] * M_PI);
-    } else if ([@"bgColor" isEqualToString:key]) {
+    } else if ([@"backgroundColor" isEqualToString:key]) {
         animation.keyPath = @"backgroundColor";
         animation.fromValue = params[@"fromValue"];
         animation.toValue = params[@"toValue"];
diff --git a/js-framework/src/ui/view.ts b/js-framework/src/ui/view.ts
index b8a0a7a6..29052d80 100644
--- a/js-framework/src/ui/view.ts
+++ b/js-framework/src/ui/view.ts
@@ -28,7 +28,7 @@ export function Property(target: Object, propKey: string) {
 export interface IView {
     width?: number
     height?: number
-    bgColor?: Color | GradientColor
+    backgroundColor?: Color | GradientColor
     corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }
     border?: { width: number; color: Color; }
     shadow?: { color: Color; opacity: number; radius: number; offsetX: number; offsetY: number }
@@ -85,7 +85,7 @@ export abstract class View implements Modeling, IView {
     y: number = 0
 
     @Property
-    bgColor?: Color | GradientColor
+    backgroundColor?: Color | GradientColor
 
     @Property
     corners?: number | { leftTop?: number; rightTop?: number; leftBottom?: number; rightBottom?: number }