diff --git a/ace/ace_standard/src/main/config.json b/ace/ace_standard/src/main/config.json
index 52b8b520a131e8d62859945d7bf3b010d8a6c95b..3ab8612d9ecb82cd2ff6ce2a478edfbb424c3009 100755
--- a/ace/ace_standard/src/main/config.json
+++ b/ace/ace_standard/src/main/config.json
@@ -53,21 +53,21 @@
"pages/index/index",
"pages/routerPush/index",
"pages/routerReplace/index",
- "pages/button/index",
- "pages/chart/index",
+ "pages/button/router/index",
+ "pages/chart/router/index",
"pages/input/index",
"pages/slider/index",
"pages/text/index",
- "pages/divider/index",
- "pages/image/index",
+ "pages/divider/router/index",
+ "pages/image/router/index",
"pages/label/index",
"pages/rating/index",
"pages/search/index",
"pages/toolbar/index",
"pages/textarea/index",
- "pages/menu/index",
- "pages/span/index",
- "pages/switch/index",
+ "pages/menu/router/index",
+ "pages/span/router/index",
+ "pages/switch/router/index",
"pages/toggle/index",
"pages/option/index",
"pages/picker/index",
@@ -76,7 +76,7 @@
"pages/progress/index",
"pages/qrcode/index",
"pages/select/index",
- "pages/div/index",
+ "pages/div/router/index",
"pages/badge/index",
"pages/dialog/index",
"pages/form/index",
@@ -93,7 +93,43 @@
"pages/swiper/index",
"pages/tabs/index",
"pages/tab-bar/index",
- "pages/tab-content/index"
+ "pages/tab-content/index",
+ "pages/svg_text/index",
+ "pages/video/index",
+ "pages/gridContainer/index",
+ "pages/gridRow/index",
+ "pages/gridCol/index",
+ "pages/canvas/index",
+ "pages/obj_CanvasRenderingContext2D/index",
+ "pages/obj_Image/index",
+ "pages/obj_CanvasGradient/index",
+ "pages/obj_ImageData/index",
+ "pages/obj_Path2D/index",
+ "pages/obj_ImageBitmap/index",
+ "pages/obj_OffscreenCanvas/index",
+ "pages/obj_OffscreenCanvasRenderingContext2D/index",
+ "pages/svg/index",
+ "pages/rect/index",
+ "pages/circle/index",
+ "pages/ellipse/index",
+ "pages/path/index",
+ "pages/line/index",
+ "pages/polyline/index",
+ "pages/polygon/index",
+ "pages/animate/index",
+ "pages/animateMotion/index",
+ "pages/animateTransform/index",
+ "pages/textPath/index",
+ "pages/tspan/index",
+ "pages/div/prop/index",
+ "pages/div/style/index",
+ "pages/divider/prop/index",
+ "pages/button/prop/index",
+ "pages/chart/prop/index",
+ "pages/image/prop/index",
+ "pages/span/prop/index",
+ "pages/menu/prop/index",
+ "pages/switch/prop/index"
],
"name": "default",
"window": {
diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.css b/ace/ace_standard/src/main/js/default/pages/animate/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ffdc1d5b9cb8ad5ed3bdb3d44e57389b07de6cf0
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/animate/index.css
@@ -0,0 +1,17 @@
+.container {
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+}
+.title{
+ font-size: 18px;
+ color: grey;
+ padding: 5px;
+ text-align: center;
+}
+.svg-style{
+ border: 1px solid #000000;
+}
+.outerBox{
+ flex-direction: column;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.hml b/ace/ace_standard/src/main/js/default/pages/animate/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..590a28a1fc50a39bfc1f57783e659cc53741542d
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/animate/index.hml
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/image/index.js b/ace/ace_standard/src/main/js/default/pages/animate/index.js
similarity index 99%
rename from ace/ace_standard/src/main/js/default/pages/image/index.js
rename to ace/ace_standard/src/main/js/default/pages/animate/index.js
index 340173be1a6ec22fa90abccfc38e7ed7e99fc317..5f7728fdfc32729af96180ba1c3abab0e0894f94 100644
--- a/ace/ace_standard/src/main/js/default/pages/image/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/animate/index.js
@@ -14,5 +14,4 @@
*/
export default {
-
-}
\ No newline at end of file
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.css b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..0d9ddc7fbcbc4e2e9f390b69ca08429d4745505e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/index.js b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.js
similarity index 70%
rename from ace/ace_standard/src/main/js/default/pages/switch/index.js
rename to ace/ace_standard/src/main/js/default/pages/animateMotion/index.js
index 560c0796dd6c6cb2f23a3506668c4c8bd51b1a76..7326f4bafb3dc62a81b1d676ec84535353ee8f29 100644
--- a/ace/ace_standard/src/main/js/default/pages/switch/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.js
@@ -13,20 +13,8 @@
* limitations under the License.
*/
-import prompt from '@system.prompt';
export default {
data: {
title: 'World'
- },
- switchChange(e){
- if(e.checked){
- prompt.showToast({
- message: "打开开关"
- });
- }else{
- prompt.showToast({
- message: "关闭开关"
- });
- }
}
-}
\ No newline at end of file
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..c559fb041924e682782f7d7afbc9e0591dbda708
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css
@@ -0,0 +1,14 @@
+/* xxx.css */
+.container {
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: flex-start;
+ background-color: #f8f8ff;
+}
+.back_container {
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ height: 1000px;
+ width: 1080px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..3c27430c1df4d393d65c31c26509e504a6df8199
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..7326f4bafb3dc62a81b1d676ec84535353ee8f29
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+ data: {
+ title: 'World'
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/button/index.css b/ace/ace_standard/src/main/js/default/pages/button/index.css
deleted file mode 100644
index a5e022f0593895148202bf9957530e113dae86c2..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/button/index.css
+++ /dev/null
@@ -1,78 +0,0 @@
-.div-button {
- flex-direction: column;
- width: 100%;
-}
-.circleall{
- width: 90%;
- flex-direction: row;
- justify-content: space-around;
- margin-left: 4%;
-}
-.circlealls{
- flex-direction: row;
-}
-.buttons {
- margin-top: 15px;
- width: 45%;
- height: 45px;
- text-align: center;
- font-size: 14px;
- border-radius: 10px;
- background-color: #317aff;
-}
-.title{
- font-size: 13px;
- margin-top: 60px;
- margin-left: 20px;
- color: grey;
-}
-.all{
- flex-direction: column;
- align-items: center;
- margin-bottom: 20px;
-}
-.oriage{
- background-color: #ee8443;
-}
-.white{
- opacity: 0.4;
-}
-.icon{
- icon-height: 30px;
- icon-width: 30px;
-}
-.warn{
- background-color: #f55a42;
-}
-.circle {
- radius: 30px;
- icon-width: 30px;
- icon-height: 30px;
- margin-left: 20px;
- margin-top: 20px;
- background-color: #317aff;
-}
-.cir{
- background-color: #f55a42;
-}
-.text {
- text-color: #0a59f7;
- font-size: 17px;
- font-weight: 600;
- font-family: sans-serif;
- font-style: normal;
-}
-.text1{
- text-color: #969696;
-}
-.text2{
- text-color: #e84026;
-}
-.download {
- margin-top: 15px;
- width: 88%;
- height: 45px;
- border-radius: 50px;
- text-color: white;
- background-color: #007dff;
-}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/button/index.hml b/ace/ace_standard/src/main/js/default/pages/button/index.hml
deleted file mode 100644
index ba8548a1acccca9334e0a80674faf141b095985d..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/button/index.hml
+++ /dev/null
@@ -1,46 +0,0 @@
-
diff --git a/ace/ace_standard/src/main/js/default/pages/button/index.js b/ace/ace_standard/src/main/js/default/pages/button/index.js
deleted file mode 100644
index f093e003d376a12f448ec78359c591680d0dd7be..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/button/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Copyright (C) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default {
- data: {
- progress: 10,
- downloadText: "进度条按钮"
- },
- setProgress(e) {
- var i=0
- var set= setInterval(()=>{
- i+=10
- this.progress=i
- this.downloadText = this.progress + "%";
- this.$element('download-btn').setProgress({ progress: this.progress });
- if(this.progress>=100){
- clearInterval(set)
- this.downloadText="完成"
- }
- },1000)
- },
-}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/button/prop/index.css b/ace/ace_standard/src/main/js/default/pages/button/prop/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..43c222fb8a0a6e7c686a7a50c8e49b271fb6d4b1
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/button/prop/index.css
@@ -0,0 +1,519 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.prop-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#idProp {
+ flex-weight: 1;
+ background-color:#f00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.classProp {
+ flex-weight: 1;
+ background-color:#0f0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#classPropNone {
+ flex-weight: 1;
+ background-color:#0000e0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refProp {
+ flex-weight: 1;
+ background-color:#00f000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refPropNone {
+ flex-weight: 1;
+ background-color:#00000e;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropTrue {
+ flex-weight: 1;
+ background-color:#000f00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropFalse {
+ flex-weight: 1;
+ background-color:#0000f0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropNone {
+ flex-weight: 1;
+ background-color:#d00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropTrue {
+ flex-weight: 1;
+ background-color:#00000f;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropFalse {
+ flex-weight: 1;
+ background-color:#ff0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropNone {
+ flex-weight: 1;
+ background-color:#0d0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataProp {
+ flex-weight: 1;
+ background-color:#0ff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataPropNone {
+ flex-weight: 1;
+ background-color:#00d000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropSmall {
+ height: 15px;
+ background-color:#00ff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropMedium {
+ height: 15px;
+ background-color:#000ff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropLarge {
+ height: 15px;
+ background-color:#fff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropNone{
+ height: 15px;
+ background-color:#000d00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropRtl {
+ flex-weight: 1;
+ background-color:#0fff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropAuto {
+ flex-weight: 1;
+ background-color:#00fff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropLtr {
+ flex-weight: 1;
+ background-color:#000fff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropNone {
+ flex-weight: 1;
+ background-color:#0000d0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropNull {
+ flex-weight: 1;
+ background-color:#ffff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropOne {
+ flex-weight: 1;
+ background-color:#00e000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropThree {
+ flex-weight: 1;
+ background-color:#000e00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropTrue {
+ flex-weight: 1;
+ background-color:#0ffff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropTrue {
+ flex-weight: 1;
+ background-color:#e00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropFalse {
+ flex-weight: 1;
+ background-color:#0e0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropNone {
+ flex-weight: 1;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.specific-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#typeArc{
+ height: 30px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+#typeCapsule{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeCircle{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeText{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeDownload{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#value{
+ height: 15px;
+ font-size: 10px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#valueNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#icon{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#iconNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#placementStart{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#placementEnd{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#placementTop{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#placementBottom{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#placementNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#waitingTrue{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#waitingFalse{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#waitingNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/button/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/button/prop/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..48343c8de1956769b71813a89260035cecc8bf21
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/button/prop/index.hml
@@ -0,0 +1,238 @@
+
+
+
+
+
+ button通用属性
+
+
+
+ 通用属性 -- id
+
+
+
+
+
+ 通用属性 -- class
+
+
+
+
+
+
+
+ 通用属性 -- style
+
+
+
+
+
+ 通用属性 -- ref
+
+
+
+
+
+
+
+ 通用属性 -- disabled
+
+
+
+
+
+
+
+
+
+ 通用属性 -- focusable
+
+
+
+
+
+
+
+
+
+ 通用属性 -- data-*
+
+
+
+
+
+
+
+ 通用属性 -- click-effect
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性 -- dir
+
+
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- for
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- if
+
+
+
+
+
+ 渲染属性 -- show
+
+
+
+
+
+
+
+
+
+
+
+
+
+ button特有属性
+
+
+
+ 特有属性 -- type
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 特有属性 -- value
+
+
+
+
+
+
+
+ 特有属性 -- icon
+
+
+
+
+
+
+
+ 特有属性 -- placement
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 特有属性 -- waiting
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/button/prop/index.js b/ace/ace_standard/src/main/js/default/pages/button/prop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9f6c506ff0c62f0634a8ffbbc34f053c21b4c98
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/button/prop/index.js
@@ -0,0 +1,149 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+ data:{
+ listOne:[{}],
+ listThree:[{},{},{}],
+ idProp : null,
+ classProp : null,
+ classPropNone : null,
+ styleProp : null,
+ refProp : null,
+ refPropNone : null,
+ disabledPropTrue : null,
+ disabledPropFalse : null,
+ disabledPropNone : null,
+ focusablePropTrue : null,
+ focusablePropFalse : null,
+ focusablePropNone : null,
+ dataProp : null,
+ dataPropNone : null,
+ clickEffectPropSmall : null,
+ clickEffectPropMedium : null,
+ clickEffectPropLarge : null,
+ clickEffectPropNone : null,
+ dirPropRtl : null,
+ dirPropAuto : null,
+ dirPropLtr : null,
+ dirPropNone : null,
+ forPropNull : null,
+ forPropOne : null,
+ forPropThree : null,
+ ifPropTrue : null,
+ showPropTrue : null,
+ showPropFalse : null,
+ showPropNone : null,
+
+ typeArc : null,
+ typeCapsule : null,
+ typeCircle : null,
+ typeText : null,
+ typeDownload : null,
+ typeNone : null,
+ value : null,
+ valueNone : null,
+ icon : null,
+ iconNone : null,
+ placementStart : null,
+ placementEnd : null,
+ placementTop : null,
+ placementBottom : null,
+ placementNone : null,
+ waitingTrue : null,
+ waitingFalse : null,
+ waitingNone : null
+ },
+ onShow(){
+ this.getCommonPropValues();
+ this.getSpecificPropValues();
+ globalThis.value = {
+ idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
+ styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
+ disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse,
+ disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue,
+ focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone,
+ dataProp : this.dataProp, dataPropNone : this.dataPropNone,
+ clickEffectPropSmall : this.clickEffectPropSmall,
+ clickEffectPropMedium : this.clickEffectPropMedium,
+ clickEffectPropLarge : this.clickEffectPropLarge,
+ clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl,
+ dirPropAuto : this.dirPropAuto,
+ dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull,
+ forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue,
+ showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone,
+
+ typeArc : this.typeArc, typeCapsule : this.typeCapsule, typeCircle : this.typeCircle,
+ typeText : this.typeText, typeDownload : this.typeDownload, typeNone : this.typeNone,
+ value : this.value, valueNone : this.valueNone, icon : this.icon, iconNone : this.iconNone,
+ placementStart : this.placementStart, placementEnd : this.placementEnd, placementTop : this.placementTop,
+ placementBottom : this.placementBottom, placementNone : this.placementNone,
+ waitingTrue : this.waitingTrue, waitingFalse : this.waitingFalse, waitingNone : this.waitingNone
+ }
+ },
+ getCommonPropValues(){
+ this.idProp = this.$element("idProp").getInspector()
+ this.classProp = this.$element("classProp").getInspector()
+ this.classPropNone = this.$element("classPropNone").getInspector()
+ this.styleProp = this.$element("styleProp").getInspector()
+ this.refProp = this.$element("refProp").getInspector()
+ this.refPropNone = this.$element("refPropNone").getInspector()
+ this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
+ this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
+ this.disabledPropNone = this.$element("disabledPropNone").getInspector()
+ this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
+ this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
+ this.focusablePropNone = this.$element("focusablePropNone").getInspector()
+ this.dataProp = this.$element("dataProp").getInspector()
+ this.dataPropNone = this.$element("dataPropNone").getInspector()
+ this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
+ this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
+ this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
+ this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
+ this.dirPropRtl = this.$element("dirPropRtl").getInspector()
+ this.dirPropAuto = this.$element("dirPropAuto").getInspector()
+ this.dirPropLtr = this.$element("dirPropLtr").getInspector()
+ this.dirPropNone = this.$element("dirPropNone").getInspector()
+ this.forPropNull = this.$element("forPropNull").getInspector()
+ this.forPropOne = this.$element("forPropOne").getInspector()
+ this.forPropThree = this.$element("forPropThree").getInspector()
+ this.ifPropTrue = this.$element("ifPropTrue").getInspector()
+ this.showPropTrue = this.$element("showPropTrue").getInspector()
+ this.showPropFalse = this.$element("showPropFalse").getInspector()
+ this.showPropNone = this.$element("showPropNone").getInspector()
+ },
+ getSpecificPropValues(){
+ this.typeArc = this.$element("typeArc").getInspector()
+ this.typeCapsule = this.$element("typeCapsule").getInspector()
+ this.typeCircle = this.$element("typeCircle").getInspector()
+ this.typeText = this.$element("typeText").getInspector()
+ this.typeDownload = this.$element("typeDownload").getInspector()
+ this.typeNone = this.$element("typeNone").getInspector()
+ this.value = this.$element("value").getInspector()
+ this.valueNone = this.$element("valueNone").getInspector()
+ this.icon = this.$element("icon").getInspector()
+ this.iconNone = this.$element("iconNone").getInspector()
+ this.placementStart = this.$element("placementStart").getInspector()
+ this.placementEnd = this.$element("placementEnd").getInspector()
+ this.placementTop = this.$element("placementTop").getInspector()
+ this.placementBottom = this.$element("placementBottom").getInspector()
+ this.placementNone = this.$element("placementNone").getInspector()
+ this.waitingTrue = this.$element("waitingTrue").getInspector()
+ this.waitingFalse = this.$element("waitingFalse").getInspector()
+ this.waitingNone = this.$element("waitingNone").getInspector()
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/button/router/index.css b/ace/ace_standard/src/main/js/default/pages/button/router/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..9ddb2a97656b072b75aa2d8d787cb7896a46d0e8
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/button/router/index.css
@@ -0,0 +1,440 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+button{
+ width: 60%;
+ height: 20px;
+}
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+.contain1{
+ width: 100%;
+ height: 15%;
+ flex-direction: column;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 60%;
+ padding-left: 2px;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 20%;
+}
+
+.function-container{
+ flex-direction: column;
+ height: 20%;
+}
+
+.gradient-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 15%;
+}
+
+.atom-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.multimode-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+.sub-title{
+ width: 100%;
+ height: 25px;
+ font-size: 15px;
+ text-align: left;
+ margin-bottom: 1px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ mask-color:red;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 20px;
+ padding-left: 10px;
+ padding-top: 1px;
+ padding-right: 15px;
+ padding-bottom: 1px;
+ margin-left: 10px;
+ margin-top: 0px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 70%;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ height: 20px;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ height: 20px;
+ width: 60%;
+ padding: 1px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.style5{
+ width: 50%;
+ height: 20px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 20px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ height: 20px;
+ text-color:salmon;
+ font-size:15px;
+ allow-scale:false;
+ font-style:normal;
+ font-weight:100;
+ font-family:sans-serif;
+ icon-width:60px;
+ icon-height:15px;
+ radius:10px;
+}
+
+.style8 {
+ height: 20px;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ background-color: sandybrown;
+}
+.event1{
+ width: 100%;
+ height: 20px;
+ background-color: salmon;
+}
+
+.event2{
+ width: 100%;
+ height: 20px;
+ background-color: darkorchid;
+}
+
+.event3{
+ width: 100%;
+ height: 20px;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ width: 100%;
+ height: 20px;
+ background-color: blanchedalmond;
+}
+
+.event5{
+ width: 100%;
+ height: 20px;
+ background-color: blanchedalmond;
+}
+
+
+#prop1 {
+ background-color: mediumslateblue;
+ height: 20px;
+ margin: 2px;
+}
+
+.prop2 {
+ background-color: salmon;
+ height: 20px;
+ margin: 2px;
+}
+
+.prop4 {
+ background-color: skyblue;
+ height: 20px;
+ margin: 2px;
+ text-color:skyblue;
+ font-size:15px;
+ allow-scale:true;
+ font-style:italic;
+ font-weight:200;
+ font-family:sans-serif;
+}
+
+.prop5 {
+ background-color: gold;
+ height: 20px;
+ width: 100%;
+ margin: 2px;
+}
+
+.prop6 {
+ background-color: gold;
+ height: 30px;
+ width: 100%;
+ margin: 2px;
+}
+
+.prop7 {
+ background-color: gold;
+ height: 20px;
+ width: 100%;
+ margin: 2px;
+}
+
+.prop8 {
+ background-color: gold;
+ height: 20px;
+ width: 100%;
+ margin: 2px;
+}
+
+.prop9 {
+ background-color: gold;
+ height: 20px;
+ width: 100%;
+ margin: 2px;
+}
+
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 100%;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient1{
+ margin: 5px;
+ height: 20px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ height: 20px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ height: 20px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ margin: 5px;
+ height: 20px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access1{
+ color: #321124;
+ height: 20px;
+ margin: 5px;
+ background-color: chartreuse;
+}
+
+.atom1{
+ background-color: saddlebrown;
+ width: 40px;
+ height: 40px;
+}
+.atom2{
+ background-color: blueviolet;
+ width: 40px;
+ height: 40px;
+}
+.atom3{
+ background-color: aquamarine;
+ width: 40px;
+ height: 40px;
+}
+
+.multimode1{
+ background-color: firebrick;
+ height: 20px;
+ width: 100%;
+ margin: 5px;
+}
+
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 30px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 30px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 30px;
+}
+
+.function4 {
+ flex-direction: row;
+ width: 60%;
+ height: 60px;
+ overflow: scroll;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/button/router/index.hml b/ace/ace_standard/src/main/js/default/pages/button/router/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..25e2ec4635f26d42e86d7ecef2ecbc8cd1fcadc1
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/button/router/index.hml
@@ -0,0 +1,353 @@
+
+
+
+
+
+
+
+ 通用样式
+
+
+
+ button通用样式1
+
+
+
+
+
+ button通用样式2
+
+
+
+
+
+ button通用样式3
+
+
+
+
+
+ button通用样式4
+
+
+
+
+
+ button通用样式5
+
+
+
+
+
+
+
+
+
+ button特有样式
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+
+ button动画样式1
+
+
+
+
+
+ button动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ button通用属性1
+
+
+
+
+
+ button通用属性2
+
+
+
+
+
+ button通用属性3
+
+
+
+
+
+ arc按钮
+
+
+
+
+
+ capsule按钮
+
+
+
+
+
+ circle按钮
+
+
+
+
+
+ text按钮
+
+
+
+
+
+ download按钮
+
+ {{downloadText}}>
+
+
+
+ 普通按钮
+
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ button通用事件1
+
+
+
+
+
+ button通用事件2
+
+
+
+
+
+ button通用事件3
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ button通用方法1
+
+
+
+
+
+ button通用方法2
+
+
+
+
+
+ button通用方法3
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+
+ button渐变样式1
+
+
+
+
+
+ button渐变样式2
+
+
+
+
+
+ button渐变样式3
+
+
+
+
+
+ button渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ button无障碍1
+
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ button原子布局1
+
+
+
+
+
+
+
+
+
+
+ button原子布局2
+
+
+
+
+
+
+
+
+
+
+ button原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ button多模输入1
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/button/router/index.js b/ace/ace_standard/src/main/js/default/pages/button/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..038ade7844e7cea21a954ea2e4f320b65493fdb5
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/button/router/index.js
@@ -0,0 +1,507 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+export default {
+
+ data: {
+ progress: 10,
+ downloadText: "进度条按钮"
+ },
+ setProgress(e) {
+ var i=0
+ var set= setInterval(()=>{
+ i+=10
+ this.progress=i
+ this.downloadText = this.progress + "%";
+ this.$element('download-btn').setProgress({ progress: this.progress });
+ if(this.progress>=100){
+ clearInterval(set)
+ this.downloadText="完成"
+ }
+ },1000)
+ },
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$element('function4');
+ var scrollOffset = function4.getScrollOffset();
+ var x = scrollOffset.x;
+ var y = scrollOffset.y;
+ var message = 'x--' + x + ',y--' + y;
+ prompt.showToast({
+ message: 'functionTest4 scrollOffset:\n' + message
+ });
+
+ var scrollParam = {
+ dx:60,
+ dy:0,
+ smooth:true
+ }
+ function4.scrollBy(scrollParam)
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/button/style/index.css b/ace/ace_standard/src/main/js/default/pages/button/style/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/button/style/index.hml b/ace/ace_standard/src/main/js/default/pages/button/style/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/button/style/index.js b/ace/ace_standard/src/main/js/default/pages/button/style/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/button/style/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.css b/ace/ace_standard/src/main/js/default/pages/canvas/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..49d51183a908826b56cf3de17f619898256bb397
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/canvas/index.css
@@ -0,0 +1,440 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ flex-direction: column;
+ flex-wrap:wrap;
+ justify-content:flex-start;
+ align-items: flex-end;
+ align-content:space-around;
+ display: flex;
+ height: 40px;
+}
+
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+
+
+.color-primary {
+ background-color: mediumpurple;
+}
+
+.color-warning {
+ background-color: pink;
+}
+
+.color-success {
+ background-color: cornflowerblue;
+}
+
+.grid-child {
+ width: 100%;
+ border-radius: 2px;
+}
+
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+ background-color: yellow;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+ background-color: red;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ flex-direction: row;
+ width: 90%;
+ flex-weight: 1;
+ overflow:scroll;
+}
+
+.event5{
+ flex-direction: column;
+ width: 100%;
+ height: 90px;
+ overflow:scroll;
+}
+
+.prop-container{
+ flex-direction: column;
+}
+
+#prop1 {
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ background-color: #72ac33;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ background-color: #321124;
+ margin: 5px;
+ width: 90%;
+ height: 30px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+
+.function-container{
+ flex-direction: column;
+}
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 20px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 20px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 20px;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.hml b/ace/ace_standard/src/main/js/default/pages/canvas/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..929efb068cf14d6c85dfc92f72a8f0ac5467fa3a
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/canvas/index.hml
@@ -0,0 +1,280 @@
+
+
+
+
+
+
+ 通用样式
+
+
+ canvas通用样式1
+
+
+
+
+ canvas通用样式2
+
+
+
+
+ canvas通用样式3
+
+
+
+
+ canvas通用样式4
+
+
+
+
+ canvas通用样式5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ canvas通用事件1
+
+
+
+
+ canvas通用事件2
+
+
+
+
+ canvas通用事件3
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ canvas通用属性1
+
+
+
+
+ canvas通用属性2
+
+
+
+
+ canvas通用属性3
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ canvas通用方法1
+
+
+
+ canvas通用方法2
+
+
+
+ canvas通用方法3
+
+
+
+ canvas特有方法4
+
+
+
+ canvas特有方法5
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ canvas动画样式1
+
+
+
+
+ canvas动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ canvas渐变样式1
+
+
+
+
+ canvas渐变样式2
+
+
+
+
+ canvas渐变样式3
+
+
+
+
+ canvas渐变样式4
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ canvas无障碍1
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ canvas原子布局1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ canvas原子布局2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ canvas原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ canvas多模输入1
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.js b/ace/ace_standard/src/main/js/default/pages/canvas/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..41cf7b9b6582d34b29ac471bb39b772b24128514
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/canvas/index.js
@@ -0,0 +1,465 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+export default {
+ data:{
+ left:0,
+ top:0,
+ },
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$refs.function1;
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$refs.function2;
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$refs.function3;
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$refs.function4;
+ let ctx = function4.getContext('2d', { antialias: true });
+ ctx.beginPath();
+ ctx.arc(50, 15, 15, 0, 6.28);
+ ctx.stroke();
+ },
+ functionTest5(event){
+ var function5 = this.$refs.function5;
+ let dataURL = function5.toDataURL({type: 'image/png'}, {quality: 0.92});
+ prompt.showToast({
+ message: 'function5 dataURL:' + dataURL
+ });
+ },
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/index.css b/ace/ace_standard/src/main/js/default/pages/chart/index.css
deleted file mode 100644
index 13b25306c535b95aa9db3773f1e82bfc76a88418..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/chart/index.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-.chart-region {
- height: 400px;
- width: 700px;
-}
-.chart-background {
- object-fit: fill;
-}
-.chart-data {
- width: 700px;
- height: 600px;
-}
-button {
- width: 100%;
- height: 50px;
- background-color: #F4F2F1;
- text-color: #0C81F3;
-}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/index.hml b/ace/ace_standard/src/main/js/default/pages/chart/index.hml
deleted file mode 100644
index 4455b4537471d7dd1fe34052c85bed1b943e1788..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/chart/index.hml
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/index.js b/ace/ace_standard/src/main/js/default/pages/chart/index.js
deleted file mode 100644
index 608abe82e1d84362dc0390f8e102b4c005076a62..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/chart/index.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*
- * Copyright (C) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default {
- data: {
- lineData: [
- {
- strokeColor: '#0081ff',
- fillColor: '#cce5ff',
- data: [763, 550, 551, 554, 731, 654, 525, 696,
- 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
- gradient: true,
- }
- ],
- lineOps: {
- xAxis: {
- min: 0,
- max: 20,
- display: false,
- },
- yAxis: {
- min: 0,
- max: 1000,
- display: false,
- },
- series: {
- lineStyle: {
- width: "5px",
- smooth: true,
- },
- headPoint: {
- shape: "circle",
- size: 20,
- strokeWidth: 5,
- fillColor: '#ffffff',
- strokeColor: '#007aff',
- display: true,
- },
- loop: {
- margin: 2,
- gradient: true,
- }
- }
- },
- },
- addData() {
- this.$refs.linechart.append({
- serial: 0,
- data: [Math.floor(Math.random() * 400) + 400]
- })
- }
-}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/prop/index.css b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..a07fbad739e4876d9dfac1abdf7c0acff2c2253c
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.css
@@ -0,0 +1,557 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.prop-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#idProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#f00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.classProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0f0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#classPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000e0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00f000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00000e;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000f00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000f0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#d00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00000f;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#ff0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0d0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0ff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00d000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropSmall {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00ff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropMedium {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000ff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropLarge {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#fff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropNone{
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000d00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropRtl {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0fff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropAuto {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00fff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropLtr {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000fff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000d0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropNull {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#ffff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropOne {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00e000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropThree {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000e00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0ffff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#e00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0e0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.specific-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#typeBar{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+#typeLine{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeGauge{
+ height: 50px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeProgress{
+ height: 50px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeLoading{
+ height: 50px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeRainbow{
+ height: 50px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeNone{
+ height: 15px;
+ font-size: 10px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#options{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#optionsNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#datasets{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#datasetsNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#segmentsSeg{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#segmentsRain{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#segmentsNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#effectsTrue{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#effectsFalse{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#effectsNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#animationduration{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#animationdurationNone{
+ height: 15px;
+ margin-bottom: 3px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..7f143b9c310fd8a6c091bd72c1b6d52ad10bee85
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.hml
@@ -0,0 +1,245 @@
+
+
+
+
+
+ chart通用属性
+
+
+
+ 通用属性 -- id
+
+
+
+
+
+ 通用属性 -- class
+
+
+
+
+
+
+
+ 通用属性 -- style
+
+
+
+
+
+ 通用属性 -- ref
+
+
+
+
+
+
+
+ 通用属性 -- disabled
+
+
+
+
+
+
+
+
+
+ 通用属性 -- focusable
+
+
+
+
+
+
+
+
+
+ 通用属性 -- data-*
+
+
+
+
+
+
+
+ 通用属性 -- click-effect
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性 -- dir
+
+
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- for
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- if
+
+
+
+
+
+ 渲染属性 -- show
+
+
+
+
+
+
+
+
+
+
+
+
+
+ chart特有属性
+
+
+
+ 特有属性 -- type
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 特有属性 -- options
+
+
+
+
+
+
+
+ 特有属性 -- datasets
+
+
+
+
+
+
+
+ 特有属性 -- segments
+
+
+
+
+
+
+
+
+
+ 特有属性 -- waiting
+
+
+
+
+
+
+
+
+
+ 特有属性 -- animationduration
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/prop/index.js b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..73383d2bf3bb4b6bcf877ec680754d9a94f462ea
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/chart/prop/index.js
@@ -0,0 +1,211 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+ data:{
+ lineData: [
+ {
+ strokeColor: '#0081ff',
+ fillColor: '#cce5ff',
+ data: [763, 550, 551, 554, 731, 654, 525, 696,
+ 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
+ gradient: true,
+ }
+ ],
+ lineOps: {
+ xAxis: {
+ min: 0,
+ max: 20,
+ display: false,
+ },
+ yAxis: {
+ min: 0,
+ max: 1000,
+ display: false,
+ },
+ series: {
+ lineStyle: {
+ width: "5px",
+ smooth: true,
+ },
+ headPoint: {
+ shape: "circle",
+ size: 20,
+ strokeWidth: 5,
+ fillColor: '#ffffff',
+ strokeColor: '#007aff',
+ display: true,
+ },
+ loop: {
+ margin: 2,
+ gradient: true,
+ }
+ }
+ },
+ lineSeg:{
+ startColor:'#f7ce00',
+ endColor:'#d9542b',
+ value:50,
+ name:'蔬菜'
+ },
+ lineRain:[
+ {
+ startColor:'#f7ce00',
+ endColor:'#d9542b',
+ value:50,
+ name:'蔬菜'
+ },
+ {
+ startColor:'#f7ce00',
+ endColor:'#d9542b',
+ value:50,
+ name:'水果'
+ }
+ ],
+ listOne:[{}],
+ listThree:[{},{},{}],
+ idProp : null,
+ classProp : null,
+ classPropNone : null,
+ styleProp : null,
+ refProp : null,
+ refPropNone : null,
+ disabledPropTrue : null,
+ disabledPropFalse : null,
+ disabledPropNone : null,
+ focusablePropTrue : null,
+ focusablePropFalse : null,
+ focusablePropNone : null,
+ dataProp : null,
+ dataPropNone : null,
+ clickEffectPropSmall : null,
+ clickEffectPropMedium : null,
+ clickEffectPropLarge : null,
+ clickEffectPropNone : null,
+ dirPropRtl : null,
+ dirPropAuto : null,
+ dirPropLtr : null,
+ dirPropNone : null,
+ forPropNull : null,
+ forPropOne : null,
+ forPropThree : null,
+ ifPropTrue : null,
+ showPropTrue : null,
+ showPropFalse : null,
+ showPropNone : null,
+
+ typeBar : null,
+ typeLine : null,
+ typeGauge : null,
+ typeProgress : null,
+ typeLoading : null,
+ typeRainbow : null,
+ typeNone : null,
+ options : null,
+ optionsNone : null,
+ datasets : null,
+ datasetsNone : null,
+ segmentsSeg : null,
+ segmentsRain : null,
+ segmentsNone : null,
+ effectsTrue : null,
+ effectsFalse : null,
+ effectsNone : null,
+ animationduration : null,
+ animationdurationNone : null,
+ },
+ onShow(){
+ this.getCommonPropValues();
+ this.getSpecificPropValues();
+ globalThis.value = {
+ idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
+ styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
+ disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse,
+ disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue,
+ focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone,
+ dataProp : this.dataProp, dataPropNone : this.dataPropNone,
+ clickEffectPropSmall : this.clickEffectPropSmall,
+ clickEffectPropMedium : this.clickEffectPropMedium,
+ clickEffectPropLarge : this.clickEffectPropLarge,
+ clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl,
+ dirPropAuto : this.dirPropAuto,
+ dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull,
+ forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue,
+ showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone,
+
+ typeBar : this.typeBar, typeLine : this.typeLine, typeGauge : this.typeGauge,
+ typeProgress : this.typeProgress, typeLoading : this.typeLoading, typeRainbow : this.typeRainbow,
+ typeNone : this.typeNone, options : this.options,
+ optionsNone : this.optionsNone, datasets : this.datasets, datasetsNone : this.datasetsNone,
+ segmentsSeg : this.segmentsSeg, segmentsRain : this.segmentsRain, segmentsNone : this.segmentsNone,
+ effectsTrue : this.effectsTrue, effectsFalse : this.effectsFalse, effectsNone : this.effectsNone,
+ animationduration : this.animationduration, animationdurationNone : this.animationdurationNone
+ }
+ },
+ getCommonPropValues(){
+ this.idProp = this.$element("idProp").getInspector()
+ this.classProp = this.$element("classProp").getInspector()
+ this.classPropNone = this.$element("classPropNone").getInspector()
+ this.styleProp = this.$element("styleProp").getInspector()
+ this.refProp = this.$element("refProp").getInspector()
+ this.refPropNone = this.$element("refPropNone").getInspector()
+ this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
+ this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
+ this.disabledPropNone = this.$element("disabledPropNone").getInspector()
+ this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
+ this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
+ this.focusablePropNone = this.$element("focusablePropNone").getInspector()
+ this.dataProp = this.$element("dataProp").getInspector()
+ this.dataPropNone = this.$element("dataPropNone").getInspector()
+ this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
+ this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
+ this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
+ this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
+ this.dirPropRtl = this.$element("dirPropRtl").getInspector()
+ this.dirPropAuto = this.$element("dirPropAuto").getInspector()
+ this.dirPropLtr = this.$element("dirPropLtr").getInspector()
+ this.dirPropNone = this.$element("dirPropNone").getInspector()
+ this.forPropNull = this.$element("forPropNull").getInspector()
+ this.forPropOne = this.$element("forPropOne").getInspector()
+ this.forPropThree = this.$element("forPropThree").getInspector()
+ this.ifPropTrue = this.$element("ifPropTrue").getInspector()
+ this.showPropTrue = this.$element("showPropTrue").getInspector()
+ this.showPropFalse = this.$element("showPropFalse").getInspector()
+ this.showPropNone = this.$element("showPropNone").getInspector()
+ },
+ getSpecificPropValues(){
+ this.typeBar = this.$element("typeBar").getInspector()
+ this.typeLine = this.$element("typeLine").getInspector()
+ this.typeGauge = this.$element("typeGauge").getInspector()
+ this.typeProgress = this.$element("typeProgress").getInspector()
+ this.typeLoading = this.$element("typeLoading").getInspector()
+ this.typeRainbow = this.$element("typeRainbow").getInspector()
+ this.typeNone = this.$element("typeNone").getInspector()
+ this.options = this.$element("options").getInspector()
+ this.optionsNone = this.$element("optionsNone").getInspector()
+ this.datasets = this.$element("datasets").getInspector()
+ this.datasetsNone = this.$element("datasetsNone").getInspector()
+ this.segmentsSeg = this.$element("segmentsSeg").getInspector()
+ this.segmentsRain = this.$element("segmentsRain").getInspector()
+ this.segmentsNone = this.$element("segmentsNone").getInspector()
+ this.effectsTrue = this.$element("effectsTrue").getInspector()
+ this.effectsFalse = this.$element("effectsFalse").getInspector()
+ this.effectsNone = this.$element("effectsNone").getInspector()
+ this.animationduration = this.$element("animationduration").getInspector()
+ this.animationdurationNone = this.$element("animationdurationNone").getInspector()
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/router/index.css b/ace/ace_standard/src/main/js/default/pages/chart/router/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..daaa1f4c27a4483e4ef9c17b8403652a983a8017
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/chart/router/index.css
@@ -0,0 +1,437 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+.contain1{
+ width: 100%;
+ height: 15%;
+ flex-direction: column;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 80%;
+ padding-left: 2px;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 35%;
+}
+
+.function-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.gradient-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 15%;
+}
+
+.atom-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.multimode-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+.sub-title{
+ width: 100%;
+ height: 25px;
+ font-size: 15px;
+ text-align: left;
+ margin-bottom: 1px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ mask-color:red;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 1px;
+ padding-right: 15px;
+ padding-bottom: 1px;
+ margin-left: 10px;
+ margin-top: 0px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 70%;
+ height: 12%;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 100%;
+ height: 8%;
+ padding: 1px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ height: 40px;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ background-color: navajowhite;
+}
+
+.style8 {
+ height: 40px;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ background-color: sandybrown;
+}
+
+.event1{
+ width: 100%;
+ height: 30px;
+ background-color: salmon;
+}
+
+.event2{
+ width: 100%;
+ height: 30px;
+ background-color: darkorchid;
+}
+
+.event3{
+ width: 100%;
+ height: 30px;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ width: 100%;
+ height: 30px;
+ background-color: blanchedalmond;
+}
+
+.event5{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+
+#prop1 {
+ background-color: mediumslateblue;
+ height: 20px;
+ margin: 2px;
+}
+
+.prop2 {
+ background-color: salmon;
+ height: 20px;
+ margin: 2px;
+}
+
+.prop4 {
+ background-color: skyblue;
+ height: 20px;
+ margin: 2px;
+}
+
+.prop5 {
+ background-color: gold;
+ height: 20px;
+ width: 100%;
+ margin: 2px;
+ stroke-width:10px;
+ start-angle:90;
+ total-angle:180;
+ font-family:sans-serif;
+ font-size:25px;
+ center-x:10px;
+ center-y:10px;
+ radius:5px;
+ colors:salmon,sandybrown,gold,black;
+ weights:2,2,2;
+}
+.prop6 {
+ background-color: gold;
+ height: 30px;
+ width: 100%;
+ margin: 2px;
+}
+
+.prop7 {
+ background-color: gold;
+ height: 20px;
+ width: 100%;
+ margin: 2px;
+}
+
+.prop8 {
+ background-color: gold;
+ height: 20px;
+ width: 100%;
+ margin: 2px;
+}
+
+.prop9 {
+ background-color: gold;
+ height: 20px;
+ width: 100%;
+ margin: 2px;
+ stroke-width:10px;
+ start-angle:90;
+ total-angle:180;
+ font-family:sans-serif;
+ font-size:25px;
+}
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 100%;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient1{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ margin: 5px;
+ height: 40px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access1{
+ color: #321124;
+ height: 40px;
+ margin: 5px;
+ background-color: chartreuse;
+}
+
+.atom1{
+ background-color: saddlebrown;
+ width: 40px;
+ height: 40px;
+}
+.atom2{
+ background-color: blueviolet;
+ width: 40px;
+ height: 40px;
+}
+.atom3{
+ background-color: aquamarine;
+ width: 40px;
+ height: 40px;
+}
+
+.multimode1{
+ background-color: firebrick;
+ height: 40px;
+ width: 100%;
+ margin: 5px;
+}
+
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 30px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 30px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 30px;
+}
+
+.function4 {
+ flex-direction: row;
+ width: 60%;
+ height: 10px;
+ overflow: scroll;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/router/index.hml b/ace/ace_standard/src/main/js/default/pages/chart/router/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..746242cd12301b5c83bb3b5a071b181b6b3f5137
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/chart/router/index.hml
@@ -0,0 +1,361 @@
+
+
+
+
+
+
+
+ 通用样式
+
+
+
+ chart通用样式1
+
+
+
+
+
+ chart通用样式2
+
+
+
+
+
+ chart通用样式3
+
+
+
+
+
+ chart通用样式4
+
+
+
+
+
+ chart通用样式5
+
+
+
+
+
+
+
+
+
+ chart特有样式
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+
+ chart动画样式1
+
+
+
+
+
+ chart动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ chart通用属性1
+
+
+
+
+
+ chart通用属性2
+
+
+
+
+
+ chart通用属性3
+
+
+
+
+
+ chart特有属性4
+
+
+
+
+
+ chart特有属性5
+
+
+
+
+
+ chart特有属性6
+
+
+
+
+
+ chart特有属性7
+
+
+
+
+
+ chart特有属性8
+
+
+
+
+
+ chart特有属性9
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ chart通用事件1
+
+
+
+
+
+ chart通用事件2
+
+
+
+
+
+ chart通用事件3
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ chart通用方法1
+
+
+
+
+
+ chart通用方法2
+
+
+
+
+
+ chart通用方法3
+
+
+
+
+
+ chart特有事件1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+
+ chart渐变样式1
+
+
+
+
+
+ chart渐变样式2
+
+
+
+
+
+ chart渐变样式3
+
+
+
+
+
+ chart渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ chart无障碍1
+
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ chart原子布局1
+
+
+
+
+
+
+
+
+
+
+ chart原子布局2
+
+
+
+
+
+
+
+
+
+
+ chart原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ chart多模输入1
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/router/index.js b/ace/ace_standard/src/main/js/default/pages/chart/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a392bff72e9b75d8060c4f63d0a0a240420f226b
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/chart/router/index.js
@@ -0,0 +1,557 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+export default {
+
+ data: {
+ lineData: [
+ {
+ strokeColor: '#0081ff',
+ fillColor: '#cce5ff',
+ data: [763, 550, 551, 554, 731, 654, 525, 696,
+ 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
+ gradient: true,
+ }
+ ],
+ lineOps: {
+ xAxis: {
+ min: 0,
+ max: 20,
+ display: false,
+ },
+ yAxis: {
+ min: 0,
+ max: 1000,
+ display: false,
+ },
+ series: {
+ lineStyle: {
+ width: "5px",
+ smooth: true,
+ },
+ headPoint: {
+ shape: "circle",
+ size: 20,
+ strokeWidth: 5,
+ fillColor: '#ffffff',
+ strokeColor: '#007aff',
+ display: true,
+ },
+ loop: {
+ margin: 2,
+ gradient: true,
+ }
+ }
+ },
+ lineSeg:{
+ startColor:'#f7ce00',
+ endColor:'#d9542b',
+ value:50,
+ name:'蔬菜'
+ },
+ lineRain:[
+ {
+ startColor:'#f7ce00',
+ endColor:'#d9542b',
+ value:50,
+ name:'蔬菜'
+ },
+ {
+ startColor:'#f7ce00',
+ endColor:'#d9542b',
+ value:50,
+ name:'水果'
+ }
+ ]
+ },
+ addData() {
+ this.$refs.linechart.append({
+ serial: 0,
+ data: [Math.floor(Math.random() * 400) + 400]
+ })
+ },
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$element('function4');
+ var scrollOffset = function4.getScrollOffset();
+ var x = scrollOffset.x;
+ var y = scrollOffset.y;
+ var message = 'x--' + x + ',y--' + y;
+ prompt.showToast({
+ message: 'functionTest4 scrollOffset:\n' + message
+ });
+
+ var scrollParam = {
+ dx:60,
+ dy:0,
+ smooth:true
+ }
+ function4.scrollBy(scrollParam)
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/style/index.css b/ace/ace_standard/src/main/js/default/pages/chart/style/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/style/index.hml b/ace/ace_standard/src/main/js/default/pages/chart/style/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/chart/style/index.js b/ace/ace_standard/src/main/js/default/pages/chart/style/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/chart/style/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.css b/ace/ace_standard/src/main/js/default/pages/circle/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e81f688df1b735e0a559604c5471e2344ea321f9
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/circle/index.css
@@ -0,0 +1,366 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 100px;
+ height:50px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+/* width: 100%;*/
+/* height:100px;*/
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 10%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 60%;
+ height: 70px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 70px;
+ position: absolute;
+ left: 10px;
+ top: 80px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ margin-bottom: 50px;
+ margin-top: 10px;
+ color: green;
+ stroke-width: 30px;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 2;
+}
+#prop1 {
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop2 {
+ background-color: pink;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop3 {
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop4 {
+ background-color: yellowgreen;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop5 {
+ background-color: cornflowerblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop6 {
+ background-color: burlywood;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop7 {
+ background-color: crimson;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 0.8;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ stroke-width: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ height:100px;
+ stroke-width:4px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ height:100px;
+ stroke-width: 4px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ height:100px;
+ stroke-width: 4px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ height:100px;
+ stroke-width: 4px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ height:100px;
+ color: #321124;
+ stroke-width: 4px;
+ margin: 5px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+ height:100px;
+ color: #978666;
+ stroke-width: 4px;
+ margin: 5px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.hml b/ace/ace_standard/src/main/js/default/pages/circle/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..3259148faa1a33a109f7a2daef0d68acac00f4f8
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/circle/index.hml
@@ -0,0 +1,189 @@
+
+
+
+ 通用样式
+
+
+ circle通用样式1
+
+
+
+
+ circle通用样式2
+
+
+
+
+ circle通用样式3
+
+
+
+
+
+
+ circle通用样式4
+
+
+
+ circle通用样式5
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ circle通用属性1
+
+
+
+
+
+
+ circle通用属性2
+
+
+
+
+
+
+ circle通用属性3
+
+
+
+
+
+
+ circle通用属性4
+
+
+
+
+
+
+ circle通用属性5
+
+
+
+
+
+
+ circle通用属性6
+
+
+
+
+
+
+ circle通用属性7
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ circle动画样式1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ circle动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ circle渐变样式1
+
+
+
+ circle渐变样式2
+
+
+
+ circle渐变样式3
+
+
+
+ circle渐变样式4
+
+
+
+
+
+
+
+ 无障碍
+
+
+ circle无障碍1
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ circle多模输入1
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.js b/ace/ace_standard/src/main/js/default/pages/circle/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/circle/index.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+ data: {
+ title: ""
+ },
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element("prop1");
+ var name1 = prop1.dataSet.a
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.a
+ }
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/div/prop/index.css b/ace/ace_standard/src/main/js/default/pages/div/prop/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e815b366974cb2a04e98ed2dd5b2ba57913ff8c2
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/div/prop/index.css
@@ -0,0 +1,347 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.prop-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#idProp {
+ flex-weight: 1;
+ background-color:#f00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.classProp {
+ flex-weight: 1;
+ background-color:#0f0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#classPropNone {
+ flex-weight: 1;
+ background-color:#0000e0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refProp {
+ flex-weight: 1;
+ background-color:#00f000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refPropNone {
+ flex-weight: 1;
+ background-color:#00000e;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropTrue {
+ flex-weight: 1;
+ background-color:#000f00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropFalse {
+ flex-weight: 1;
+ background-color:#0000f0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropNone {
+ flex-weight: 1;
+ background-color:#d00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropTrue {
+ flex-weight: 1;
+ background-color:#00000f;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropFalse {
+ flex-weight: 1;
+ background-color:#ff0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropNone {
+ flex-weight: 1;
+ background-color:#0d0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataProp {
+ flex-weight: 1;
+ background-color:#0ff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataPropNone {
+ flex-weight: 1;
+ background-color:#00d000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropSmall {
+ height: 15px;
+ background-color:#00ff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropMedium {
+ height: 15px;
+ background-color:#000ff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropLarge {
+ height: 15px;
+ background-color:#fff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropNone{
+ height: 15px;
+ background-color:#000d00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropRtl {
+ flex-weight: 1;
+ background-color:#0fff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropAuto {
+ flex-weight: 1;
+ background-color:#00fff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropLtr {
+ flex-weight: 1;
+ background-color:#000fff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropNone {
+ flex-weight: 1;
+ background-color:#0000d0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropNull {
+ flex-weight: 1;
+ background-color:#ffff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropOne {
+ flex-weight: 1;
+ background-color:#00e000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropThree {
+ flex-weight: 1;
+ background-color:#000e00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropTrue {
+ flex-weight: 1;
+ background-color:#0ffff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropFalse {
+ flex-weight: 1;
+ background-color:#00ffff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropNone {
+ flex-weight: 1;
+ background-color:#00000d;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropTrue {
+ flex-weight: 1;
+ background-color:#e00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropFalse {
+ flex-weight: 1;
+ background-color:#0e0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropNone {
+ flex-weight: 1;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.specific-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/div/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/div/prop/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..d53736f4d28fc1842085d1707883e9b42766a0a2
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/div/prop/index.hml
@@ -0,0 +1,165 @@
+
+
+
+
+
+ div通用属性
+
+
+
+ 通用属性 -- id
+
+
+
+
+
+ 通用属性 -- class
+
+
+
+
+
+
+
+
+ 通用属性 -- style
+
+
+
+
+
+ 通用属性 -- ref
+
+
+
+
+
+
+
+ 通用属性 -- disabled
+
+
+
+
+
+
+
+
+
+ 通用属性 -- focusable
+
+
+
+
+
+
+
+
+
+ 通用属性 -- data-*
+
+
+
+
+
+
+
+ 通用属性 -- click-effect
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性 -- dir
+
+
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- for
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- if
+
+
+
+
+
+ 渲染属性 -- show
+
+
+
+
+
+
+
+
+
+
+
+
+
+ div特有属性
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/div/prop/index.js b/ace/ace_standard/src/main/js/default/pages/div/prop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..5625ecb4562dc3d76b761fc475d00851748b3bf1
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/div/prop/index.js
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+ data:{
+ listOne:[{}],
+ listThree:[{},{},{}],
+ idProp : null,
+ classProp : null,
+ classPropNone : null,
+ styleProp : null,
+ refProp : null,
+ refPropNone : null,
+ disabledPropTrue : null,
+ disabledPropFalse : null,
+ disabledPropNone : null,
+ focusablePropTrue : null,
+ focusablePropFalse : null,
+ focusablePropNone : null,
+ dataProp : null,
+ dataPropNone : null,
+ clickEffectPropSmall : null,
+ clickEffectPropMedium : null,
+ clickEffectPropLarge : null,
+ clickEffectPropNone : null,
+ dirPropRtl : null,
+ dirPropAuto : null,
+ dirPropLtr : null,
+ dirPropNone : null,
+ forPropNull : null,
+ forPropOne : null,
+ forPropThree : null,
+ ifPropTrue : null,
+ ifPropFalse : null,
+ ifPropNone : null,
+ showPropTrue : null,
+ showPropFalse : null,
+ showPropNone : null
+ },
+
+ onShow(){
+ this.getCommonPropValues();
+ globalThis.value = {
+ idProp : this.idProp,
+ classProp : this.classProp,
+ classPropNone : this.classPropNone,
+ styleProp : this.styleProp,
+ refProp : this.refProp,
+ refPropNone : this.refPropNone,
+ disabledPropTrue : this.disabledPropTrue,
+ disabledPropFalse : this.disabledPropFalse,
+ disabledPropNone : this.disabledPropNone,
+ focusablePropTrue : this.focusablePropTrue,
+ focusablePropFalse : this.focusablePropFalse,
+ focusablePropNone : this.focusablePropNone,
+ dataProp : this.dataProp,
+ dataPropNone : this.dataPropNone,
+ clickEffectPropSmall : this.clickEffectPropSmall,
+ clickEffectPropMedium : this.clickEffectPropMedium,
+ clickEffectPropLarge : this.clickEffectPropLarge,
+ clickEffectPropNone : this.clickEffectPropNone,
+ dirPropRtl : this.dirPropRtl,
+ dirPropAuto : this.dirPropAuto,
+ dirPropLtr : this.dirPropLtr,
+ dirPropNone : this.dirPropNone,
+ forPropNull : this.forPropNull,
+ forPropOne : this.forPropOne,
+ forPropThree : this.forPropThree,
+ ifPropTrue : this.ifPropTrue,
+ showPropTrue : this.showPropTrue,
+ showPropFalse : this.showPropFalse,
+ showPropNone : this.showPropNone
+ }
+ },
+
+ getCommonPropValues(){
+ this.idProp = this.$element("idProp").getInspector()
+ this.classProp = this.$element("classProp").getInspector()
+ this.classPropNone = this.$element("classPropNone").getInspector()
+ this.styleProp = this.$element("styleProp").getInspector()
+ this.refProp = this.$element("refProp").getInspector()
+ this.refPropNone = this.$element("refPropNone").getInspector()
+ this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
+ this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
+ this.disabledPropNone = this.$element("disabledPropNone").getInspector()
+ this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
+ this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
+ this.focusablePropNone = this.$element("focusablePropNone").getInspector()
+ this.dataProp = this.$element("dataProp").getInspector()
+ this.dataPropNone = this.$element("dataPropNone").getInspector()
+ this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
+ this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
+ this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
+ this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
+ this.dirPropRtl = this.$element("dirPropRtl").getInspector()
+ this.dirPropAuto = this.$element("dirPropAuto").getInspector()
+ this.dirPropLtr = this.$element("dirPropLtr").getInspector()
+ this.dirPropNone = this.$element("dirPropNone").getInspector()
+ this.forPropNull = this.$element("forPropNull").getInspector()
+ this.forPropOne = this.$element("forPropOne").getInspector()
+ this.forPropThree = this.$element("forPropThree").getInspector()
+ this.ifPropTrue = this.$element("ifPropTrue").getInspector()
+ this.showPropTrue = this.$element("showPropTrue").getInspector()
+ this.showPropFalse = this.$element("showPropFalse").getInspector()
+ this.showPropNone = this.$element("showPropNone").getInspector()
+ },
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/div/index.css b/ace/ace_standard/src/main/js/default/pages/div/router/index.css
similarity index 100%
rename from ace/ace_standard/src/main/js/default/pages/div/index.css
rename to ace/ace_standard/src/main/js/default/pages/div/router/index.css
diff --git a/ace/ace_standard/src/main/js/default/pages/div/index.hml b/ace/ace_standard/src/main/js/default/pages/div/router/index.hml
similarity index 96%
rename from ace/ace_standard/src/main/js/default/pages/div/index.hml
rename to ace/ace_standard/src/main/js/default/pages/div/router/index.hml
index 44c740e3ff11f7f1a8f12ec8cf07f04b6a07afb5..edfb36f1774ceded6d1e5a5b28bc665b225920f2 100644
--- a/ace/ace_standard/src/main/js/default/pages/div/index.hml
+++ b/ace/ace_standard/src/main/js/default/pages/div/router/index.hml
@@ -1,5 +1,5 @@
+
+
+
+
+ div通用样式
+
+
+
+ 通用样式 1-8 \n width height padding margin border opacity align-self
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用样式9-20 \n display flex z-index position
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用样式21-23 box-shadow
+
+
+
+
+ 通用样式23-25 visibility clip-path
+
+
+
+
+
+
+
+ 通用样式26-31 background
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用样式32 clip-path image-fill mask-image
+
+
+
+
+
+
+
+
+ div特有样式
+
+
+
+ 特有样式 flex-direction flex-wrap justify-content align-items align-content
+
+
+
+
+
+
+
+ 特有样式 overflow scrollbar-color scrollbar-width overscroll-effect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 特有样式 grid
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/index.js b/ace/ace_standard/src/main/js/default/pages/div/style/index.js
similarity index 65%
rename from ace/ace_standard/src/main/js/default/pages/divider/index.js
rename to ace/ace_standard/src/main/js/default/pages/div/style/index.js
index 65b64b6e48b2dc6b6be4862d921115d432980a03..8179ff70cbe9fa27c38c5386a6f497949bf60f3a 100644
--- a/ace/ace_standard/src/main/js/default/pages/divider/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/div/style/index.js
@@ -13,20 +13,7 @@
* limitations under the License.
*/
-import prompt from '@system.prompt';
-
export default {
- data: {
- title: 'World'
- },
- onShow(){
- // 通用属性
- var prop1 = this.$element("prop1");
- var name1 = prop1.dataSet.name
- var prop2 = this.$refs.prop2;
- var name2 = prop2.dataSet.name
- prompt.showToast({
- message: 'prop1--' + name1 + '\nprop2--' + name2
- });
- }
-}
\ No newline at end of file
+
+
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/index.hml
deleted file mode 100644
index 318aa797b0e75160f57b7484617a078b5066fc41..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/divider/index.hml
+++ /dev/null
@@ -1,235 +0,0 @@
-
-
-
-
-
- 通用样式
-
-
- divider通用样式1
-
-
-
-
- divider通用样式2
-
-
-
-
- divider通用样式3
-
-
-
-
- divider通用样式4
-
-
-
-
- divider通用样式5
-
-
-
- divider特有样式
-
-
-
-
-
-
-
-
-
-
-
- 通用属性
-
-
- divider通用属性1
-
-
-
-
- divider通用属性2
-
-
-
-
- divider通用属性3
-
-
-
-
- divider特有属性4
-
-
-
-
- divider特有属性5
-
-
-
-
-
-
-
-
-
-
-
- 动画样式
-
-
- divider动画样式1
-
-
-
-
- divider动画样式2
-
-
-
-
-
-
-
-
-
-
-
-
- 渐变样式
-
-
- divider渐变样式1
-
-
-
-
- divider渐变样式2
-
-
-
-
- divider渐变样式3
-
-
-
-
- divider渐变样式4
-
-
-
-
-
-
-
-
- 无障碍
-
-
- divider无障碍1
-
-
-
-
-
-
-
-
- 原子布局
-
-
- divider原子布局1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- divider原子布局2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- divider原子布局3
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 多模输入
-
-
- divider多模输入1
-
-
-
-
-
-
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..6ffcda0b1aa1040a90903ce3644a53b1b8d634d9
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css
@@ -0,0 +1,367 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+}
+divider {
+ color: #0d0000;
+}
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.prop-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#idProp {
+ flex-weight: 1;
+ background-color:#f00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.classProp {
+ flex-weight: 1;
+ background-color:#0f0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#classPropNone {
+ flex-weight: 1;
+ background-color:#0000e0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refProp {
+ flex-weight: 1;
+ background-color:#00f000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refPropNone {
+ flex-weight: 1;
+ background-color:#00000e;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropTrue {
+ flex-weight: 1;
+ background-color:#000f00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropFalse {
+ flex-weight: 1;
+ background-color:#0000f0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropNone {
+ flex-weight: 1;
+ background-color:#d00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropTrue {
+ flex-weight: 1;
+ background-color:#00000f;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropFalse {
+ flex-weight: 1;
+ background-color:#ff0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropNone {
+ flex-weight: 1;
+ background-color:#0d0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataProp {
+ flex-weight: 1;
+ background-color:#0ff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataPropNone {
+ flex-weight: 1;
+ background-color:#00d000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropSmall {
+ height: 15px;
+ background-color:#00ff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropMedium {
+ height: 15px;
+ background-color:#000ff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropLarge {
+ height: 15px;
+ background-color:#fff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropNone{
+ height: 15px;
+ background-color:#000d00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropRtl {
+ flex-weight: 1;
+ background-color:#0fff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropAuto {
+ flex-weight: 1;
+ background-color:#00fff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropLtr {
+ flex-weight: 1;
+ background-color:#000fff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropNone {
+ flex-weight: 1;
+ background-color:#0000d0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropNull {
+ flex-weight: 1;
+ background-color:#ffff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropOne {
+ flex-weight: 1;
+ background-color:#00e000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropThree {
+ flex-weight: 1;
+ background-color:#000e00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropTrue {
+ flex-weight: 1;
+ background-color:#0ffff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropFalse {
+ flex-weight: 1;
+ background-color:#00ffff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropNone {
+ flex-weight: 1;
+ background-color:#00000d;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropTrue {
+ flex-weight: 1;
+ background-color:#e00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropFalse {
+ flex-weight: 1;
+ background-color:#0e0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropNone {
+ flex-weight: 1;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.specific-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+#verticalTrue {
+ height: 10px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#verticalFalse {
+ height: 10px;
+ background-color:#e00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..76473a8fae3bb6f1fb595aa1db670cee821580ba
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml
@@ -0,0 +1,169 @@
+
+
+
+
+
+ divider通用属性
+
+
+
+ 通用属性 -- id
+
+
+
+
+
+ 通用属性 -- class
+
+
+
+
+
+
+
+
+ 通用属性 -- style
+
+
+
+
+
+ 通用属性 -- ref
+
+
+
+
+
+
+
+ 通用属性 -- disabled
+
+
+
+
+
+
+
+
+
+ 通用属性 -- focusable
+
+
+
+
+
+
+
+
+
+ 通用属性 -- data-*
+
+
+
+
+
+
+
+ 通用属性 -- click-effect
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性 -- dir
+
+
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- for
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- if
+
+
+
+
+ 渲染属性 -- show
+
+
+
+
+
+
+
+
+
+
+
+
+
+ divider特有属性
+
+
+ divider特有属性 -- vertical
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.js b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e3d1971b98e6d11e37ad32760fd0646bef47a554
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.js
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+ data:{
+ listOne:[{}],
+ listThree:[{},{},{}],
+ idProp : null,
+ classProp : null,
+ classPropNone : null,
+ styleProp : null,
+ refProp : null,
+ refPropNone : null,
+ disabledPropTrue : null,
+ disabledPropFalse : null,
+ disabledPropNone : null,
+ focusablePropTrue : null,
+ focusablePropFalse : null,
+ focusablePropNone : null,
+ dataProp : null,
+ dataPropNone : null,
+ clickEffectPropSmall : null,
+ clickEffectPropMedium : null,
+ clickEffectPropLarge : null,
+ clickEffectPropNone : null,
+ dirPropRtl : null,
+ dirPropAuto : null,
+ dirPropLtr : null,
+ dirPropNone : null,
+ forPropNull : null,
+ forPropOne : null,
+ forPropThree : null,
+ ifPropTrue : null,
+ showPropTrue : null,
+ showPropFalse : null,
+ showPropNone : null,
+ verticalTrue: null,
+ verticalFalse: null
+ },
+
+ onCreate(){
+ this.getCommonPropValues();
+ this.getSpecificPropValues();
+ globalThis.value = {
+ idProp : this.idProp,
+ classProp : this.classProp,
+ classPropNone : this.classPropNone,
+ styleProp : this.styleProp,
+ refProp : this.refProp,
+ refPropNone : this.refPropNone,
+ disabledPropTrue : this.disabledPropTrue,
+ disabledPropFalse : this.disabledPropFalse,
+ disabledPropNone : this.disabledPropNone,
+ focusablePropTrue : this.focusablePropTrue,
+ focusablePropFalse : this.focusablePropFalse,
+ focusablePropNone : this.focusablePropNone,
+ dataProp : this.dataProp,
+ dataPropNone : this.dataPropNone,
+ clickEffectPropSmall : this.clickEffectPropSmall,
+ clickEffectPropMedium : this.clickEffectPropMedium,
+ clickEffectPropLarge : this.clickEffectPropLarge,
+ clickEffectPropNone : this.clickEffectPropNone,
+ dirPropRtl : this.dirPropRtl,
+ dirPropAuto : this.dirPropAuto,
+ dirPropLtr : this.dirPropLtr,
+ dirPropNone : this.dirPropNone,
+ forPropNull : this.forPropNull,
+ forPropOne : this.forPropOne,
+ forPropThree : this.forPropThree,
+ ifPropTrue : this.ifPropTrue,
+ showPropTrue : this.showPropTrue,
+ showPropFalse : this.showPropFalse,
+ showPropNone : this.showPropNone,
+ verticalTrue: this.verticalTrue,
+ verticalFalse: this.verticalFalse
+ }
+ },
+
+ getCommonPropValues(){
+ this.idProp = this.$element("idProp").getInspector()
+ this.classProp = this.$element("classProp").getInspector()
+ this.classPropNone = this.$element("classPropNone").getInspector()
+ this.styleProp = this.$element("styleProp").getInspector()
+ this.refProp = this.$element("refProp").getInspector()
+ this.refPropNone = this.$element("refPropNone").getInspector()
+ this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
+ this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
+ this.disabledPropNone = this.$element("disabledPropNone").getInspector()
+ this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
+ this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
+ this.focusablePropNone = this.$element("focusablePropNone").getInspector()
+ this.dataProp = this.$element("dataProp").getInspector()
+ this.dataPropNone = this.$element("dataPropNone").getInspector()
+ this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
+ this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
+ this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
+ this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
+ this.dirPropRtl = this.$element("dirPropRtl").getInspector()
+ this.dirPropAuto = this.$element("dirPropAuto").getInspector()
+ this.dirPropLtr = this.$element("dirPropLtr").getInspector()
+ this.dirPropNone = this.$element("dirPropNone").getInspector()
+ this.forPropNull = this.$element("forPropNull").getInspector()
+ this.forPropOne = this.$element("forPropOne").getInspector()
+ this.forPropThree = this.$element("forPropThree").getInspector()
+ this.ifPropTrue = this.$element("ifPropTrue").getInspector()
+ this.showPropTrue = this.$element("showPropTrue").getInspector()
+ this.showPropFalse = this.$element("showPropFalse").getInspector()
+ this.showPropNone = this.$element("showPropNone").getInspector()
+ },
+ getSpecificPropValues () {
+ this.verticalTrue = this.$element("verticalTrue").getInspector()
+ this.verticalFalse = this.$element("verticalFalse").getInspector()
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/router/index.css b/ace/ace_standard/src/main/js/default/pages/divider/router/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..fe52f6baae7dc334d720a1177293b64ac31ef7f3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/divider/router/index.css
@@ -0,0 +1,313 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+.contain1{
+ width: 100%;
+ height: 15%;
+ flex-direction: column;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 45%;
+ padding-left: 2px;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.function-container{
+ flex-direction: column;
+ height: 25%;
+}
+
+.gradient-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 15%;
+}
+
+.atom-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.multimode-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+.sub-title{
+ width: 100%;
+ height: 25px;
+ font-size: 15px;
+ text-align: left;
+ margin-bottom: 1px;
+ padding: 2px;
+}
+
+divider {
+ color: darkblue;
+}
+.style1{
+ width: 100%;
+ mask-color:red;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 1px;
+ padding-right: 15px;
+ padding-bottom: 1px;
+ margin-left: 10px;
+ margin-top: 0px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2 {
+ height: 200px;
+ margin: 10px;
+ color: red;
+ stroke-width: 5px;
+ display: flex;
+ visibility: visible;
+ line-cap: square;
+ flex-grow: 1;
+ flex-shrink: 1;
+ flex-basis: 1;
+}
+.event1{
+ width: 100%;
+ height: 40px;
+ background-color: salmon;
+}
+
+.event2{
+ width: 100%;
+ height: 40px;
+ background-color: darkorchid;
+}
+
+.event3{
+ width: 100%;
+ height: 40px;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+.event5{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+
+#prop1 {
+ background-color: mediumslateblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop2 {
+ background-color: salmon;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop4 {
+ background-color: skyblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop5 {
+ background-color: gold;
+ height: 40px;
+ width: 100%;
+ margin: 2px;
+}
+
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 100%;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient1{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ margin: 5px;
+ height: 40px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access1{
+ color: #321124;
+ height: 40px;
+ margin: 5px;
+}
+
+.multimode1{
+ background-color: firebrick;
+ height: 40px;
+ margin: 5px;
+}
+
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 30px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 30px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 30px;
+}
+
+.function4 {
+ flex-direction: row;
+ width: 60%;
+ height: 60px;
+ overflow: scroll;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/router/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/router/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..bc74802387843a3114152b1ccc408990533044f1
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/divider/router/index.hml
@@ -0,0 +1,259 @@
+
+
+
+
+
+
+
+ 通用样式
+
+
+ 仅支持如下样式
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+
+ divider动画样式1
+
+
+
+
+
+ divider动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ divider通用属性1
+
+
+
+
+
+ divider通用属性2
+
+
+
+
+
+ divider通用属性3
+
+
+
+
+
+ divider特有属性4
+
+
+
+
+
+ divider特有属性5
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ divider不支持通用事件
+
+
+
+
+
+
+
+ 通用方法
+
+
+ divider不支持通用方法
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+
+ divider渐变样式1
+
+
+
+
+
+ divider渐变样式2
+
+
+
+
+
+ divider渐变样式3
+
+
+
+
+
+ divider渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ divider无障碍1
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ divider原子布局1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ divider原子布局2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ divider原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ divider多模输入1
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/router/index.js b/ace/ace_standard/src/main/js/default/pages/divider/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4988a2eb69e2c8a36a209d0ac6fb600e3b0b3907
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/divider/router/index.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+export default {
+
+ onMenuSelected(e) {
+ prompt.showToast({
+ message: e.value
+ })
+ },
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.css b/ace/ace_standard/src/main/js/default/pages/ellipse/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..bbf4883fa2cdebf3405bf634b69a1db7aa3cd69d
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/ellipse/index.css
@@ -0,0 +1,359 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 100px;
+ height: 50px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+/* width: 100%;*/
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 85%;
+ height: 7%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 80%;
+ height: 50px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 100px;
+ height: 50px;
+ position: absolute;
+ left: 10px;
+ top: 50px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ margin-bottom: 50px;
+ margin-top: 10px;
+ color: green;
+ stroke-width: 30px;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 2;
+}
+#prop1 {
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop2 {
+ background-color: pink;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop3 {
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop4 {
+ background-color: yellowgreen;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop5 {
+ background-color: cornflowerblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop6 {
+ background-color: burlywood;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop7 {
+ background-color: crimson;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ stroke-width: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ stroke-width: 30px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ color: #321124;
+ stroke-width: 30px;
+ margin: 5px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+ color: #978666;
+ stroke-width: 30px;
+ margin: 5px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml b/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..544f4580c2fcb73c0c21bb36db35c1089a111332
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml
@@ -0,0 +1,188 @@
+
+
+
+ 通用样式
+
+
+ ellipse通用样式1
+
+
+
+ ellipse通用样式2
+
+
+
+ ellipse通用样式3
+
+
+
+
+
+ ellipse通用样式4
+
+
+
+ ellipse通用样式5
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ circle通用属性1
+
+
+
+
+
+
+ circle通用属性2
+
+
+
+
+
+
+ circle通用属性3
+
+
+
+
+
+
+ circle通用属性4
+
+
+
+
+
+
+ circle通用属性5
+
+
+
+
+
+
+ circle通用属性6
+
+
+
+
+
+
+ circle通用属性7
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ ellipse动画样式1
+
+
+
+
+
+ ellipse动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ ellipse渐变样式1
+
+
+
+
+
+ ellipse渐变样式2
+
+
+
+
+
+ ellipse渐变样式3
+
+
+
+
+
+ ellipse渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ ellipse无障碍1
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ ellipse多模输入1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.js b/ace/ace_standard/src/main/js/default/pages/ellipse/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/ellipse/index.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+ data: {
+ title: ""
+ },
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element("prop1");
+ var name1 = prop1.dataSet.a
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.a
+ }
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/gridCol/index.css b/ace/ace_standard/src/main/js/default/pages/gridCol/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..95505ebff50cf267881ac97c8291266c53e578eb
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/gridCol/index.css
@@ -0,0 +1,483 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ flex-direction: column;
+ flex-wrap:wrap;
+ justify-content:center;
+ align-items: center;
+ align-content:space-around;
+ display: flex;
+ height: 40px;
+ background-color: blue;
+}
+
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+
+.style8{
+ flex-direction: row;
+ flex-wrap:nowrap;
+ scrollbar-color: yellow;
+ scrollbar-width: 10px;
+ overscroll-effect:spring;
+ height: 20px;
+ overflow:scroll;
+ flex-wrap:wrap;
+ justify-content:center;
+ align-items: center;
+ align-content:space-around;
+}
+
+.style9{
+ display: grid;
+ height: 20px;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+
+.color-primary {
+ background-color: mediumpurple;
+}
+
+.color-warning {
+ background-color: pink;
+}
+
+.color-success {
+ background-color: cornflowerblue;
+}
+
+.grid-child {
+ width: 100%;
+ border-radius: 2px;
+}
+
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+ background-color: yellow;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+ background-color: red;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ flex-direction: row;
+ width: 90%;
+ flex-weight: 1;
+ overflow:scroll;
+}
+
+.event5{
+ flex-direction: column;
+ width: 100%;
+ height: 90px;
+ overflow:scroll;
+}
+
+.prop-container{
+ flex-direction: column;
+}
+
+#prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ background-color: #321124;
+ margin: 5px;
+ width: 90%;
+ height: 30px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+
+.function-container{
+ flex-direction: column;
+}
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 20px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 20px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 20px;
+}
+
+.function4{
+ flex-direction: row;
+ width: 60%;
+ height: 20px;
+ overflow:scroll;
+}
+.container-style {
+ width: 100%;
+ height: 50px;
+ background-color: #b8b8bf;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/gridCol/index.hml b/ace/ace_standard/src/main/js/default/pages/gridCol/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..c65fde1f68d21191d951da72a8e1ac4a1488f559
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/gridCol/index.hml
@@ -0,0 +1,311 @@
+
+
+
+
+
+
+ 通用样式
+
+
+ grid-col通用样式1
+
+
+
+
+
+
+ grid-col通用样式2
+
+
+
+
+
+
+ grid-col通用样式3
+
+
+
+
+
+
+ grid-col通用样式4
+
+
+
+
+
+
+ grid-col通用样式5
+
+
+
+
+
+
+
+
+ grid-col特有样式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ grid-col动画样式1
+
+
+
+
+
+
+ grid-col动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ grid-col通用属性1
+
+
+
+
+
+
+ grid-col通用属性2
+
+
+
+
+
+
+ grid-col通用属性3
+
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ grid-col通用事件1
+
+
+
+
+
+
+ grid-col通用事件2
+
+
+
+
+
+
+ grid-col通用事件3
+
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ grid-col通用方法1
+
+
+
+
+
+ grid-col通用方法2
+
+
+
+
+ grid-col通用方法3
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ grid-col渐变样式1
+
+
+
+
+ grid-col渐变样式2
+
+
+
+
+ grid-col渐变样式3
+
+
+
+
+ grid-col渐变样式4
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ grid-col无障碍1
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ grid-col原子布局1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ grid-col原子布局2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ grid-col原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ grid-col多模输入1
+ grid-col多模输入1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridCol/index.js b/ace/ace_standard/src/main/js/default/pages/gridCol/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..95a4f132a25d4baef5b5b2e42dcf64f20438caed
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/gridCol/index.js
@@ -0,0 +1,489 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+
+export default {
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$element('function4');
+ var scrollOffset = function4.getScrollOffset();
+ var x = scrollOffset.x;
+ var y = scrollOffset.y;
+ var message = 'x--' + x + ',y--' + y;
+ prompt.showToast({
+ message: 'functionTest4 scrollOffset:\n' + message
+ });
+
+ var scrollParam = {
+ dx:60,
+ dy:0,
+ smooth:true
+ }
+ function4.scrollBy(scrollParam)
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..5d1b535a41a5d05437693238ae8cdebd1d8258bd
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css
@@ -0,0 +1,483 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 2;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ height: 50px;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 3px;
+ padding-top: 3px;
+ padding-right: 3px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 60px;
+ height: 30px;
+ padding-start: 2px;
+ padding-end: 2px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+
+.style3{
+ width: 100%;
+ height:10%;
+ padding: 0px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis:50px;
+ flex-shrink: 1;
+}
+.style4{
+ width: 60%;
+ height: 6%;
+ padding: 2px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 150px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ width: 100%;
+ height:60px;
+ margin-top: 10px;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ align-content: flex-start;
+}
+
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+
+.style8{
+ flex-direction: row;
+ flex-wrap:nowrap;
+ scrollbar-color: yellow;
+ scrollbar-width: 10px;
+ overscroll-effect:spring;
+ height: 40px;
+ overflow:scroll;
+}
+
+.style9{
+ display: grid;
+ height: 40px;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+
+.color-primary {
+ background-color: mediumpurple;
+}
+
+.color-warning {
+ background-color: pink;
+}
+
+.color-success {
+ background-color: cornflowerblue;
+}
+
+.grid-child {
+ width: 100%;
+ border-radius: 2px;
+}
+
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ flex-weight:1;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+ background-color: yellow;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+ background-color: red;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ flex-direction: row;
+ width: 90%;
+ flex-weight: 1;
+ overflow:scroll;
+}
+
+.event5{
+ width: 100%;
+ height: 30px;
+}
+
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+#prop1 {
+ width: 80%;
+ height:20px;
+ background-color: #ad4e2a;
+ margin: 2px;
+}
+
+.prop2 {
+ width: 80%;
+ height:20px;
+ background-color: #343524;
+ margin: 2px;
+}
+.prop3{
+ width: 80%;
+ height: 20px;
+}
+.prop4 {
+ width: 80%;
+ height:20px;
+ background-color: #456345;
+ margin: 2px;
+}
+
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ height:20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ height:20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ height:20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ height:20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ height:20px;
+ background-color: #321124;
+ margin: 5px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+ color: #978666;
+ margin: 5px;
+}
+.function-container{
+ flex-direction: column;
+}
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 20px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 20px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 20px;
+}
+
+.function4{
+ flex-direction: row;
+ width: 80%;
+ height: 40px;
+ background-color: #c4c4f8;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ align-content: flex-start;
+}
+.flex-class{
+ margin-top: 5px;
+ width: 100%;
+ height: 30px;
+ display: flex;
+/* background-color: #ee6363;*/
+ justify-content: center;
+ align-items: center;
+}
+.row-style{
+ width:40px;
+ height: 10px;
+ background-color: blue;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..f9befa686d6cb41dcc7259fa802ed6332494d6e8
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml
@@ -0,0 +1,324 @@
+
+
+
+
+
+
+ 通用样式
+
+
+ container通用样式1
+
+
+
+
+
+
+ container通用样式2
+
+
+
+
+
+
+ container通用样式3
+
+
+
+
+
+
+ container通用样式4
+
+
+
+
+
+
+ container通用样式5
+
+
+
+
+
+
+
+
+
+
+
+
+ container特有样式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ container动画样式1
+
+
+
+
+
+
+ container动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ container通用属性1
+
+
+
+
+
+
+ container通用属性2
+
+
+
+
+
+
+ container通用属性3
+
+
+
+
+
+
+ container特有属性4
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ container通用事件1
+
+
+
+
+ container通用事件2
+
+
+
+
+ container通用事件3
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ div通用方法1
+
+
+
+
+ div通用方法2
+
+
+
+
+ div通用方法3
+
+
+
+
+ div特有方法
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ div渐变样式1
+
+
+
+
+ div渐变样式2
+
+
+
+
+ div渐变样式3
+
+
+
+
+ div渐变样式4
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ div无障碍1
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ div原子布局1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ div原子布局2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ div原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ div多模输入1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..660daee86528605d4cf6f00054abd60b1580cb90
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js
@@ -0,0 +1,495 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+export default {
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ this.get()
+
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ get(){
+ console.info("getColumns:"+this.$element('function4').getColumns())
+ console.info("getGutterWidth:"+this.$element('function4').getGutterWidth())
+ console.info("getColumnWidth:"+this.$element('function4').getColumnWidth())
+ console.info("getSizeType:"+this.$element('function4').getSizeType())
+ },
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$element('function4');
+ var scrollOffset = function4.getScrollOffset();
+ var x = scrollOffset.x;
+ var y = scrollOffset.y;
+ var message = 'x--' + x + ',y--' + y;
+ prompt.showToast({
+ message: 'functionTest4 scrollOffset:\n' + message
+ });
+
+ var scrollParam = {
+ dx:60,
+ dy:0,
+ smooth:true
+ }
+ function4.scrollBy(scrollParam)
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/gridRow/index.css b/ace/ace_standard/src/main/js/default/pages/gridRow/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..95505ebff50cf267881ac97c8291266c53e578eb
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/gridRow/index.css
@@ -0,0 +1,483 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ flex-direction: column;
+ flex-wrap:wrap;
+ justify-content:center;
+ align-items: center;
+ align-content:space-around;
+ display: flex;
+ height: 40px;
+ background-color: blue;
+}
+
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+
+.style8{
+ flex-direction: row;
+ flex-wrap:nowrap;
+ scrollbar-color: yellow;
+ scrollbar-width: 10px;
+ overscroll-effect:spring;
+ height: 20px;
+ overflow:scroll;
+ flex-wrap:wrap;
+ justify-content:center;
+ align-items: center;
+ align-content:space-around;
+}
+
+.style9{
+ display: grid;
+ height: 20px;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+
+.color-primary {
+ background-color: mediumpurple;
+}
+
+.color-warning {
+ background-color: pink;
+}
+
+.color-success {
+ background-color: cornflowerblue;
+}
+
+.grid-child {
+ width: 100%;
+ border-radius: 2px;
+}
+
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+ background-color: yellow;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+ background-color: red;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ flex-direction: row;
+ width: 90%;
+ flex-weight: 1;
+ overflow:scroll;
+}
+
+.event5{
+ flex-direction: column;
+ width: 100%;
+ height: 90px;
+ overflow:scroll;
+}
+
+.prop-container{
+ flex-direction: column;
+}
+
+#prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ background-color: #321124;
+ margin: 5px;
+ width: 90%;
+ height: 30px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+
+.function-container{
+ flex-direction: column;
+}
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 20px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 20px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 20px;
+}
+
+.function4{
+ flex-direction: row;
+ width: 60%;
+ height: 20px;
+ overflow:scroll;
+}
+.container-style {
+ width: 100%;
+ height: 50px;
+ background-color: #b8b8bf;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/gridRow/index.hml b/ace/ace_standard/src/main/js/default/pages/gridRow/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..001fc440fce71bbf317c3816bcb966acef91d158
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/gridRow/index.hml
@@ -0,0 +1,310 @@
+
+
+
+
+
+
+ 通用样式
+
+
+ div通用样式1
+
+
+
+
+
+
+ div通用样式2
+
+
+
+
+
+
+ div通用样式3
+
+
+
+
+
+
+ div通用样式4
+
+
+
+
+
+
+ div通用样式5
+
+
+
+
+
+
+
+
+ div特有样式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ div动画样式1
+
+
+
+
+
+
+ div动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ div通用属性1
+
+
+
+
+
+
+ div通用属性2
+
+
+
+
+
+
+ div通用属性3
+
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ div通用事件1
+
+
+
+
+
+
+ div通用事件2
+
+
+
+
+
+
+ div通用事件3
+
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ div通用方法1
+
+
+
+
+
+ div通用方法2
+
+
+
+
+ div通用方法3
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ div渐变样式1
+
+
+
+
+ div渐变样式2
+
+
+
+
+ div渐变样式3
+
+
+
+
+ div渐变样式4
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ div无障碍1
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ div原子布局1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ div原子布局2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ div原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ div多模输入1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridRow/index.js b/ace/ace_standard/src/main/js/default/pages/gridRow/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..a0cfa7abbdd9b767b5186bcf9aa99a3d0f807a67
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/gridRow/index.js
@@ -0,0 +1,489 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+export default {
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$element('function4');
+ var scrollOffset = function4.getScrollOffset();
+ var x = scrollOffset.x;
+ var y = scrollOffset.y;
+ var message = 'x--' + x + ',y--' + y;
+ prompt.showToast({
+ message: 'functionTest4 scrollOffset:\n' + message
+ });
+
+ var scrollParam = {
+ dx:60,
+ dy:0,
+ smooth:true
+ }
+ function4.scrollBy(scrollParam)
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/image/index.css b/ace/ace_standard/src/main/js/default/pages/image/index.css
deleted file mode 100644
index bf19d9de6096e135a15cf4fd91a4a4cd241c9c8d..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/image/index.css
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.container {
- flex-direction: column; /* 设置容器内的项目纵向排列 */
- justify-content: center; /* 设置项目位于容器主轴的中心 */
- align-items: center; /* 项目在交叉轴居中 */
- width:100%;
- height:100%;
-}
-
-
-#one {
- width: 100%;
- height: 100%;
- min-width: 25px;
- min-height: 10px;
- max-width: 300px;
- max-height: 50px;
- padding-left: 10px;
- padding-top: 20px;
- padding-right: 15px;
- padding-bottom: 5px;
- margin-left: 10px;
- margin-top: 20px;
- margin-right: 15px;
- margin-bottom: 5px;
- border-left-style: solid;
- border-right-style: dashed;
- border-top-style: dashed;
- border-bottom-style: dotted;
- border-left-width: 5px;
- border-right-width: 10px;
- border-top-width: 15px;
- border-bottom-width: 20px;
- border-left-color: #ff0000;
- border-right-color: #00ff00;
- border-top-color: #0000ff;
- border-bottom-color: #fff000;
- border-bottom-left-radius: 10px;
- border-bottom-right-radius: 15px;
- border-top-left-radius: 8px;
- border-top-right-radius: 12px;
- background: linear-gradient(pink,#fff000);
- box-shadow: 2px 4px 6px 8px #888888;
- opacity: 0.5;
- display: flex;
- visibility: visible;
- align-self: center;
- image-fill: #000fff;
- clip-path: margin-box;
-}
-
-#two{
- width: 100px;
- height: 150px;
- padding-start: 10px;
- padding-end: 15px;
- margin-start: 5px;
- margin-end: 10px;
- border-style: dotted;
- border-width: 2px;
- border-color:#000000;
- border-radius:5px;
- background-color:#ffaa00;
- mask-image: url('common/images/icon.png');
- mask-size: cover;
- mask-position: center;
- flex:1;
- flex-grow: 2;
- flex-basis: 10px;
- flex-shrink: 1;
-}
-
-#three{
- width: 100px;
- height: 50px;
- padding: 10px;
- margin: 5px;
- border-left: 1px solid #000000;
- border-right: 2px dashed #00ff00;
- border-top: 1.5px dotted #0000ff;
- border-bottom: 2.5px dotted #fff000;
- background-image:url('common/images/image.png');
- background-size:contain;
- background-repeat: repeat-x;
- background-position: center;
-}
-
-#four{
- width: 150px;
- height: 50px;
- padding: 10px;
- margin: 5px;
- border: 1px solid #000000;
-}
-
-.contain1{
- width: 150px;
- height: 70px;
- flex-direction: column;
-}
-
-#five {
- width: 120px;
- height: 30px;
- background-color: yellow;
- border-image-source: url('/common/images/image.png');
- border-image-slice: 1px 2px 3px 4px;
- border-image-width: 2px 3px 4px 5px;
- border-image-outset: 3px 4px 5px 6px;
- border-image-repeat: repeat;
-}
-
-#six{
- width: 120px;
- height: 30px;
- position: absolute;
- left: 10px;
- top: 35px;
- bottom: 5px;
- right: 10px;
- background-color: pink;
- border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
-}
-
-#seven{
- object-fit:cover;
- match-text-direction:true;
- fit-original-size:true;
- object-position:left;
- margin-top: 15px;
- margin-bottom: 15px;
-}
diff --git a/ace/ace_standard/src/main/js/default/pages/image/index.hml b/ace/ace_standard/src/main/js/default/pages/image/index.hml
deleted file mode 100644
index 7d944da0c37a32f5c1c852e0dc00900a4ec6d3c2..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/image/index.hml
+++ /dev/null
@@ -1,83 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/ace/ace_standard/src/main/js/default/pages/image/prop/index.css b/ace/ace_standard/src/main/js/default/pages/image/prop/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..3adaa47226b63e0f2c3c9c2092ecd198f1724946
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/image/prop/index.css
@@ -0,0 +1,398 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.prop-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#idProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#f00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.classProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0f0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#classPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000e0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00f000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00000e;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000f00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000f0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#d00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00000f;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#ff0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0d0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0ff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00d000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropSmall {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00ff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropMedium {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000ff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropLarge {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#fff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropNone{
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000d00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropRtl {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0fff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropAuto {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00fff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropLtr {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000fff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000d0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropNull {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#ffff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropOne {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00e000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropThree {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000e00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0ffff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#e00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0e0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.specific-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#imageSrc{
+ height: 100px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+#imageSrcNone{
+ height: 100px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#imageAlt{
+ height: 100px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#imageAltNone{
+ height: 100px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
diff --git a/ace/ace_standard/src/main/js/default/pages/image/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/image/prop/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..7def27e7307a0c1a6b026dce3a22c30ef60aba6e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/image/prop/index.hml
@@ -0,0 +1,184 @@
+
+
+
+
+
+ image通用属性
+
+
+
+ 通用属性 -- id
+
+
+
+
+
+ 通用属性 -- class
+
+
+
+
+
+
+
+ 通用属性 -- style
+
+
+
+
+
+ 通用属性 -- ref
+
+
+
+
+
+
+
+ 通用属性 -- disabled
+
+
+
+
+
+
+
+
+
+ 通用属性 -- focusable
+
+
+
+
+
+
+
+
+
+ 通用属性 -- data-*
+
+
+
+
+
+
+
+ 通用属性 -- click-effect
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性 -- dir
+
+
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- for
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- if
+
+
+
+
+
+ 渲染属性 -- show
+
+
+
+
+
+
+
+
+
+
+
+
+
+ image特有属性
+
+
+
+ 特有属性 -- src
+
+
+
+
+
+
+
+ 特有属性 -- alt
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/image/prop/index.js b/ace/ace_standard/src/main/js/default/pages/image/prop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..622fb16fc7f4219c5e69c1959ece5a8a64c81b3b
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/image/prop/index.js
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+ data:{
+ listOne:[{}],
+ listThree:[{},{},{}],
+ idProp : null,
+ classProp : null,
+ classPropNone : null,
+ styleProp : null,
+ refProp : null,
+ refPropNone : null,
+ disabledPropTrue : null,
+ disabledPropFalse : null,
+ disabledPropNone : null,
+ focusablePropTrue : null,
+ focusablePropFalse : null,
+ focusablePropNone : null,
+ dataProp : null,
+ dataPropNone : null,
+ clickEffectPropSmall : null,
+ clickEffectPropMedium : null,
+ clickEffectPropLarge : null,
+ clickEffectPropNone : null,
+ dirPropRtl : null,
+ dirPropAuto : null,
+ dirPropLtr : null,
+ dirPropNone : null,
+ forPropNull : null,
+ forPropOne : null,
+ forPropThree : null,
+ ifPropTrue : null,
+ showPropTrue : null,
+ showPropFalse : null,
+ showPropNone : null,
+
+ imageSrc : null,
+ imageSrcNone : null,
+ imageAlt : null,
+ imageAltNone : null
+ },
+ onShow(){
+ this.getCommonPropValues();
+ this.getSpecificPropValues();
+ globalThis.value = {
+ idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
+ styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
+ disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse,
+ disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue,
+ focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone,
+ dataProp : this.dataProp, dataPropNone : this.dataPropNone,
+ clickEffectPropSmall : this.clickEffectPropSmall,
+ clickEffectPropMedium : this.clickEffectPropMedium,
+ clickEffectPropLarge : this.clickEffectPropLarge,
+ clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl,
+ dirPropAuto : this.dirPropAuto,
+ dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull,
+ forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue,
+ showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone,
+
+ imageSrc : this.imageSrc, imageSrcNone : this.imageSrcNone, imageAlt : this.imageAlt,
+ imageAltNone : this.imageAltNone,
+ }
+ },
+ getCommonPropValues(){
+ this.idProp = this.$element("idProp").getInspector()
+ this.classProp = this.$element("classProp").getInspector()
+ this.classPropNone = this.$element("classPropNone").getInspector()
+ this.styleProp = this.$element("styleProp").getInspector()
+ this.refProp = this.$element("refProp").getInspector()
+ this.refPropNone = this.$element("refPropNone").getInspector()
+ this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
+ this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
+ this.disabledPropNone = this.$element("disabledPropNone").getInspector()
+ this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
+ this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
+ this.focusablePropNone = this.$element("focusablePropNone").getInspector()
+ this.dataProp = this.$element("dataProp").getInspector()
+ this.dataPropNone = this.$element("dataPropNone").getInspector()
+ this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
+ this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
+ this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
+ this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
+ this.dirPropRtl = this.$element("dirPropRtl").getInspector()
+ this.dirPropAuto = this.$element("dirPropAuto").getInspector()
+ this.dirPropLtr = this.$element("dirPropLtr").getInspector()
+ this.dirPropNone = this.$element("dirPropNone").getInspector()
+ this.forPropNull = this.$element("forPropNull").getInspector()
+ this.forPropOne = this.$element("forPropOne").getInspector()
+ this.forPropThree = this.$element("forPropThree").getInspector()
+ this.ifPropTrue = this.$element("ifPropTrue").getInspector()
+ this.showPropTrue = this.$element("showPropTrue").getInspector()
+ this.showPropFalse = this.$element("showPropFalse").getInspector()
+ this.showPropNone = this.$element("showPropNone").getInspector()
+ },
+ getSpecificPropValues(){
+ this.imageSrc = this.$element("imageSrc").getInspector()
+ this.imageSrcNone = this.$element("imageSrcNone").getInspector()
+ this.imageAlt = this.$element("imageAlt").getInspector()
+ this.imageAltNone = this.$element("imageAltNone").getInspector()
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/image/router/index.css b/ace/ace_standard/src/main/js/default/pages/image/router/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ea57fcb2110a1acbf4cbdb00bfcabd97d2eca15a
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/image/router/index.css
@@ -0,0 +1,373 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+.contain1{
+ width: 100%;
+ height: 15%;
+ flex-direction: column;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 45%;
+ padding-left: 2px;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.function-container{
+ flex-direction: column;
+ height: 25%;
+}
+
+.gradient-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 15%;
+}
+
+.atom-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.multimode-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+.sub-title{
+ width: 100%;
+ height: 25px;
+ font-size: 15px;
+ text-align: left;
+ margin-bottom: 1px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ mask-color:red;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 1px;
+ padding-right: 15px;
+ padding-bottom: 1px;
+ margin-left: 10px;
+ margin-top: 0px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 70%;
+ height: 12%;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 1px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ height: 40px;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ color: green;
+ mask-color:lightblue;
+ line-cap: round;
+}
+
+.event1{
+ width: 100%;
+ height: 40px;
+ background-color: salmon;
+}
+
+.event2{
+ width: 100%;
+ height: 40px;
+ background-color: darkorchid;
+}
+
+.event3{
+ width: 100%;
+ height: 40px;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+.event5{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+
+#prop1 {
+ background-color: mediumslateblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop2 {
+ background-color: salmon;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop4 {
+ background-color: skyblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop5 {
+ background-color: gold;
+ height: 40px;
+ width: 100%;
+ margin: 2px;
+}
+
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 100%;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient1{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ margin: 5px;
+ height: 40px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access1{
+ color: #321124;
+ height: 40px;
+ margin: 5px;
+}
+
+.multimode1{
+ background-color: firebrick;
+ height: 40px;
+ margin: 5px;
+}
+
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 30px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 30px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 30px;
+}
+
+.function4 {
+ flex-direction: row;
+ width: 60%;
+ height: 60px;
+ overflow: scroll;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/image/router/index.hml b/ace/ace_standard/src/main/js/default/pages/image/router/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..bc74a55af7704e7f7784657a0b404aa08e435570
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/image/router/index.hml
@@ -0,0 +1,332 @@
+
+
+
+
+
+
+
+ 通用样式
+
+
+
+ image通用样式1
+
+
+
+
+
+ image通用样式2
+
+
+
+
+
+ image通用样式3
+
+
+
+
+
+ image通用样式4
+
+
+
+
+
+ image通用样式5
+
+
+
+
+
+
+
+
+
+ image特有样式
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+
+ image动画样式1
+
+
+
+
+
+ image动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ image通用属性1
+
+
+
+
+
+ image通用属性2
+
+
+
+
+
+ image通用属性3
+
+
+
+
+
+ image特有属性4
+
+
+
+
+
+ image特有属性5
+
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ image通用事件1
+
+
+
+
+
+ image通用事件2
+
+
+
+
+
+ image通用事件3
+
+
+
+
+
+ image特有事件1
+
+
+
+
+
+ image特有事件2
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ image通用方法1
+
+
+
+
+
+ image通用方法2
+
+
+
+
+
+ image通用方法3
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+
+ image渐变样式1
+
+
+
+
+
+ image渐变样式2
+
+
+
+
+
+ image渐变样式3
+
+
+
+
+
+ image渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ image无障碍1
+
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ image原子布局1
+
+
+
+
+
+
+
+
+
+
+ image原子布局2
+
+
+
+
+
+
+
+
+
+
+ image原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ image多模输入1
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/image/router/index.js b/ace/ace_standard/src/main/js/default/pages/image/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0f4eb3c6ac35f5a12cd0fcec52b5da74601f311
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/image/router/index.js
@@ -0,0 +1,489 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+export default {
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$element('function4');
+ var scrollOffset = function4.getScrollOffset();
+ var x = scrollOffset.x;
+ var y = scrollOffset.y;
+ var message = 'x--' + x + ',y--' + y;
+ prompt.showToast({
+ message: 'functionTest4 scrollOffset:\n' + message
+ });
+
+ var scrollParam = {
+ dx:60,
+ dy:0,
+ smooth:true
+ }
+ function4.scrollBy(scrollParam)
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/image/style/index.css b/ace/ace_standard/src/main/js/default/pages/image/style/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/image/style/index.hml b/ace/ace_standard/src/main/js/default/pages/image/style/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/image/style/index.js b/ace/ace_standard/src/main/js/default/pages/image/style/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/image/style/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/line/index.css b/ace/ace_standard/src/main/js/default/pages/line/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..883af7d1fd94729b28b41201b94a9e758a0f82bc
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/line/index.css
@@ -0,0 +1,369 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 100px;
+ height: 50px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+/* width: 100%;*/
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 85%;
+ height: 7%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 80%;
+ height: 50px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 100px;
+ height: 50px;
+ position: absolute;
+ left: 10px;
+ top: 50px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 2;
+ align-items: center;
+}
+
+#prop1 {
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop2 {
+ background-color: pink;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop3 {
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop4 {
+ background-color: yellowgreen;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop5 {
+ background-color: cornflowerblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop6 {
+ background-color: burlywood;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop7 {
+ background-color: tomato;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop8 {
+ background-color: darkblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop9 {
+ background-color: blueviolet;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 0.8;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ stroke-width: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+.gradient1{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ stroke-width: 30px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ color: #321124;
+ stroke-width: 30px;
+ margin: 5px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+ color: #978666;
+ stroke-width: 30px;
+ margin: 5px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/line/index.hml b/ace/ace_standard/src/main/js/default/pages/line/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..f3f5410cb16f4c632103779c4ffab3bb8fcd2908
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/line/index.hml
@@ -0,0 +1,207 @@
+
+
+
+ 通用样式
+
+
+ line通用样式1
+
+
+
+
+
+ line通用样式2
+
+
+
+
+
+ line通用样式3
+
+
+
+
+
+ line通用样式4
+
+
+
+
+
+ line通用样式5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ line通用属性1
+
+
+
+
+
+
+ line通用属性2
+
+
+
+
+
+
+ line通用属性3
+
+
+
+
+
+ line通用属性4
+
+
+
+
+
+ line通用属性5
+
+
+
+
+
+
+ line通用属性6
+
+
+
+
+
+
+ line通用属性7
+
+
+
+
+
+
+ line通用属性8
+
+
+
+
+
+
+ line通用属性9
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ line动画样式1
+
+
+
+
+
+ path动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ line渐变样式1
+
+
+
+
+
+ line渐变样式2
+
+
+
+
+
+ line渐变样式3
+
+
+
+
+
+ line渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ line无障碍1
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ line多模输入1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/line/index.js b/ace/ace_standard/src/main/js/default/pages/line/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/line/index.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+ data: {
+ title: ""
+ },
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element("prop1");
+ var name1 = prop1.dataSet.a
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.a
+ }
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/index.css b/ace/ace_standard/src/main/js/default/pages/menu/index.css
deleted file mode 100644
index f004e9fc3a55431049fec7b2617d8b6e41eafee1..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/menu/index.css
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.container {
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
-}
-
-.menu1{
- text-color:red;
- font-size:20px;
- allow-scale:true;
- letter-spacing:5px;
- font-style:normal;
- font-weight:200;
- font-family:sans-serif;
- min-width: 25px;
- min-height: 10px;
- max-width: 300px;
- max-height: 50px;
- padding-left: 10px;
- padding-top: 20px;
- padding-right: 15px;
- padding-bottom: 5px;
- margin-left: 10px;
- margin-top: 20px;
- margin-right: 15px;
- margin-bottom: 5px;
-}
-
-.menu2{
- text-color:yellow;
- font-size:20px;
- allow-scale:false;
- letter-spacing:5px;
- font-style:italic;
- font-weight:300;
- font-family:sans-serif;
- margin: 20px;
-}
-
-.menu3{
- text-color:beige;
- font-size:20px;
- allow-scale:true;
- letter-spacing:5px;
- font-style:normal;
- font-weight:200;
- font-family:sans-serif;
- margin: 20px;
-}
-
-.menu4{
- text-color:aqua;
- font-size:20px;
- allow-scale:false;
- letter-spacing:5px;
- font-style:italic;
- font-weight:200;
- font-family:sans-serif;
- margin: 20px;
-}
-
-.contain1{
- width: 150px;
- height: 150px;
- flex-direction: column;
-}
-
-.menu5{
- text-color:saddlebrown;
- font-size:30px;
- allow-scale:true;
- letter-spacing:5px;
- font-style:normal;
- font-weight:300;
- font-family:sans-serif;
- margin: 20px;
-}
-
-.menu6{
- text-color:darkcyan;
- font-size:40px;
- allow-scale:false;
- letter-spacing:5px;
- font-style:italic;
- font-weight:200;
- font-family:sans-serif;
- margin: 20px;
-}
-
-.menu7 {
- text-color:navajowhite;
- font-size:60px;
- allow-scale:true;
- letter-spacing:10px;
- font-style:normal;
- font-weight:500;
- font-family:sans-serif;
- margin: 20px;
-}
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/index.hml b/ace/ace_standard/src/main/js/default/pages/menu/index.hml
deleted file mode 100644
index 32c0ffb92cbd56eaac4b1ab45ef83a32240eb2ea..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/menu/index.hml
+++ /dev/null
@@ -1,70 +0,0 @@
-
-
-
-
-
menu1
-
-
-
menu2
-
-
-
menu3
-
-
-
menu4
-
-
-
- menu5
-
-
- menu6
-
-
-
-
menu7
-
-
-
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/prop/index.css b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..10c0164f72a6f2b2a247013cc44cd49a4b5d0e52
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.css
@@ -0,0 +1,419 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.prop-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#idProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#f00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.classProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0f0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#classPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000e0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00f000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00000e;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000f00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000f0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#d00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00000f;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#ff0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0d0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0ff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00d000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropSmall {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00ff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropMedium {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000ff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropLarge {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#fff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropNone{
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000d00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropRtl {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0fff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropAuto {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00fff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropLtr {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000fff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000d0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropNull {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#ffff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropOne {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00e000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropThree {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000e00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0ffff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#e00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0e0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.specific-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#menuTarget{
+ height: 40px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+#menuTargetNone{
+ height: 40px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeLongPress{
+ height: 40px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#typeNone{
+ height: 40px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#menuTitle{
+ height: 40px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+#menuTitleNone{
+ height: 40px;
+ margin-bottom: 20px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..eff1af21d35f5e98fe20767676478a8c918f2035
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.hml
@@ -0,0 +1,199 @@
+
+
+
+
+
+ menu通用属性
+
+
+
+ 通用属性 -- id
+
+
+
+
+
+ 通用属性 -- class
+
+
+
+
+
+
+
+ 通用属性 -- style
+
+
+
+
+
+ 通用属性 -- ref
+
+
+
+
+
+
+
+ 通用属性 -- disabled
+
+
+
+
+
+
+
+
+
+ 通用属性 -- focusable
+
+
+
+
+
+
+
+
+
+ 通用属性 -- data-*
+
+
+
+
+
+
+
+ 通用属性 -- click-effect
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性 -- dir
+
+
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- for
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- if
+
+
+
+
+
+ 渲染属性 -- show
+
+
+
+
+
+
+
+
+
+
+
+
+
+ menu特有属性
+
+
+
+ 特有属性 -- target
+
+
+
+
+
+ 特有属性 -- type
+
+
+
+
+
+
+
+
+
+ 特有属性 -- title
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/prop/index.js b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..96e4838418e48e799857dc46bdff683e1d16a4a4
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/menu/prop/index.js
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+ onTextClick() {
+ this.$element("menuTarget").show({x:280,y:120});
+ },
+ data:{
+ listOne:[{}],
+ listThree:[{},{},{}],
+ idProp : null,
+ classProp : null,
+ classPropNone : null,
+ styleProp : null,
+ refProp : null,
+ refPropNone : null,
+ dataProp : null,
+ dataPropNone : null,
+ clickEffectPropSmall : null,
+ clickEffectPropMedium : null,
+ clickEffectPropLarge : null,
+ clickEffectPropNone : null,
+ dirPropRtl : null,
+ dirPropAuto : null,
+ dirPropLtr : null,
+ dirPropNone : null,
+ forPropNull : null,
+ forPropOne : null,
+ forPropThree : null,
+ ifPropTrue : null,
+ showPropTrue : null,
+ showPropFalse : null,
+ showPropNone : null,
+
+ menuTarget : null,
+ menuTargetNone : null,
+ typeClick : null,
+ typeLongPress : null,
+ typeNone : null,
+ menuTitle : null,
+ menuTitleNone : null,
+ },
+ onShow(){
+ this.getCommonPropValues();
+ this.getSpecificPropValues();
+ globalThis.value = {
+ idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
+ styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
+ dataProp : this.dataProp, dataPropNone : this.dataPropNone,
+ clickEffectPropSmall : this.clickEffectPropSmall,
+ clickEffectPropMedium : this.clickEffectPropMedium,
+ clickEffectPropLarge : this.clickEffectPropLarge,
+ clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl,
+ dirPropAuto : this.dirPropAuto,
+ dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull,
+ forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue,
+ showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone,
+
+ menuTarget : this.menuTarget, menuTargetNone : this.menuTargetNone, typeClick : this.typeClick,
+ typeLongPress : this.typeLongPress, typeNone : this.typeNone,
+ menuTitle : this.menuTitle, menuTitleNone : this.menuTitleNone,
+ }
+ },
+ getCommonPropValues(){
+ this.idProp = this.$element("idProp").getInspector()
+ this.classProp = this.$element("classProp").getInspector()
+ this.classPropNone = this.$element("classPropNone").getInspector()
+ this.styleProp = this.$element("styleProp").getInspector()
+ this.refProp = this.$element("refProp").getInspector()
+ this.refPropNone = this.$element("refPropNone").getInspector()
+ this.dataProp = this.$element("dataProp").getInspector()
+ this.dataPropNone = this.$element("dataPropNone").getInspector()
+ this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
+ this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
+ this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
+ this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
+ this.dirPropRtl = this.$element("dirPropRtl").getInspector()
+ this.dirPropAuto = this.$element("dirPropAuto").getInspector()
+ this.dirPropLtr = this.$element("dirPropLtr").getInspector()
+ this.dirPropNone = this.$element("dirPropNone").getInspector()
+ this.forPropNull = this.$element("forPropNull").getInspector()
+ this.forPropOne = this.$element("forPropOne").getInspector()
+ this.forPropThree = this.$element("forPropThree").getInspector()
+ this.ifPropTrue = this.$element("ifPropTrue").getInspector()
+ this.showPropTrue = this.$element("showPropTrue").getInspector()
+ this.showPropFalse = this.$element("showPropFalse").getInspector()
+ this.showPropNone = this.$element("showPropNone").getInspector()
+ },
+ getSpecificPropValues(){
+ this.menuTarget = this.$element("menuTarget").getInspector()
+ this.menuTargetNone = this.$element("menuTargetNone").getInspector()
+ this.typeClick = this.$element("typeClick").getInspector()
+ this.typeLongPress = this.$element("typeLongPress").getInspector()
+ this.typeNone = this.$element("typeNone").getInspector()
+ this.menuTitle = this.$element("menuTitle").getInspector()
+ this.menuTitleNone = this.$element("menuTitleNone").getInspector()
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/router/index.css b/ace/ace_standard/src/main/js/default/pages/menu/router/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..8da8b58cd43ff1a247295c8477a4a26548c2f83d
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/menu/router/index.css
@@ -0,0 +1,400 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+.contain1{
+ width: 100%;
+ height: 15%;
+ flex-direction: column;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 45%;
+ padding-left: 2px;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.function-container{
+ flex-direction: column;
+ height: 25%;
+}
+
+.gradient-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 15%;
+}
+
+.atom-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.multimode-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+.sub-title{
+ width: 100%;
+ height: 25px;
+ font-size: 15px;
+ text-align: left;
+ margin-bottom: 1px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ mask-color:red;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 1px;
+ padding-right: 15px;
+ padding-bottom: 1px;
+ margin-left: 10px;
+ margin-top: 0px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 70%;
+ height: 12%;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 1px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ height: 40px;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ letter-spacing:5px;
+ allow-scale:true;
+ background-color: navajowhite;
+}
+
+.style8 {
+ height: 40px;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ letter-spacing:5px;
+ allow-scale:false;
+ background-color: sandybrown;
+}
+
+.event1{
+ width: 100%;
+ height: 40px;
+ background-color: salmon;
+}
+
+.event2{
+ width: 100%;
+ height: 40px;
+ background-color: darkorchid;
+}
+
+.event3{
+ width: 100%;
+ height: 40px;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+.event5{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+
+#prop1 {
+ background-color: mediumslateblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop2 {
+ background-color: salmon;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop4 {
+ background-color: skyblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop5 {
+ background-color: gold;
+ height: 40px;
+ width: 100%;
+ margin: 2px;
+}
+
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 100%;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient1{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ margin: 5px;
+ height: 40px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access1{
+ color: #321124;
+ height: 40px;
+ margin: 5px;
+ background-color: chartreuse;
+}
+
+.atom1{
+ background-color: saddlebrown;
+ width: 40px;
+ height: 40px;
+}
+.atom2{
+ background-color: blueviolet;
+ width: 40px;
+ height: 40px;
+}
+.atom3{
+ background-color: aquamarine;
+ width: 40px;
+ height: 40px;
+}
+
+.multimode1{
+ background-color: firebrick;
+ height: 40px;
+ width: 100%;
+ margin: 5px;
+}
+
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 30px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 30px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 30px;
+}
+
+.function4 {
+ flex-direction: row;
+ width: 60%;
+ height: 60px;
+ overflow: scroll;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/router/index.hml b/ace/ace_standard/src/main/js/default/pages/menu/router/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..faf28025a386fd9c672f357f6eb73e8e9043acaf
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/menu/router/index.hml
@@ -0,0 +1,306 @@
+
+
+
+
+
+
+
+ 通用样式
+
+
+
+ menu通用样式1
+
+
+
+
+
+ menu通用样式2
+
+
+
+
+
+ menu通用样式3
+
+
+
+
+
+ menu通用样式4
+
+
+
+
+
+ menu通用样式5
+
+
+
+
+
+
+
+
+
+ menu特有样式
+
+
+
+
+
+ menu特有样式
+
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+
+ menu动画样式1
+
+
+
+
+
+ menu动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ menu通用属性1
+
+
+
+
+
+ menu通用属性2
+
+
+
+
+
+ menu通用属性3
+
+
+
+
+
+ menu特有属性4
+
+
+
+
+
+ menu特有属性5
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ menu特有事件1
+
+
+ Item 1
+ Item 2
+
+
+
+ menu特有事件2
+
+
+ Item 1
+ Item 2
+
+
+
+
+
+
+
+ 通用方法
+
+
+ menu特有方法1
+
+
+ Item 1
+ Item 2
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+
+ menu渐变样式1
+
+
+
+
+
+ menu渐变样式2
+
+
+
+
+
+ menu渐变样式3
+
+
+
+
+
+ menu渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ menu无障碍1
+
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ menu原子布局1
+
+
+
+
+
+
+
+
+
+
+ menu原子布局2
+
+
+
+
+
+
+
+
+
+
+ menu原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ menu多模输入1
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/router/index.js b/ace/ace_standard/src/main/js/default/pages/menu/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..9484f61da180f05acc6611204b77b48f0656a0b3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/menu/router/index.js
@@ -0,0 +1,504 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+export default {
+
+ onMenuSelected(e) {
+ prompt.showToast({
+ message: e.value
+ })
+ },
+ onTextClick1() {
+ this.$element('event1').show({x:100,y:200});
+ },
+ onTextClick2() {
+ this.$element('event2').show({x:100,y:300});
+ },
+ onTextClick3() {
+ this.$element('function1').show({x:100,y:500});
+ },
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$element('function4');
+ var scrollOffset = function4.getScrollOffset();
+ var x = scrollOffset.x;
+ var y = scrollOffset.y;
+ var message = 'x--' + x + ',y--' + y;
+ prompt.showToast({
+ message: 'functionTest4 scrollOffset:\n' + message
+ });
+
+ var scrollParam = {
+ dx:60,
+ dy:0,
+ smooth:true
+ }
+ function4.scrollBy(scrollParam)
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/style/index.css b/ace/ace_standard/src/main/js/default/pages/menu/style/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/style/index.hml b/ace/ace_standard/src/main/js/default/pages/menu/style/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/style/index.js b/ace/ace_standard/src/main/js/default/pages/menu/style/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/menu/style/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css
@@ -0,0 +1,471 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.prop_all-container {
+ flex-direction: row;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ line-cap: square;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+.flex-box {
+ justify-content: space-around;
+ align-items: center;
+ height: 50px;
+ background-color: #ffffff;
+}
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+.color-primary {
+ background-color: mediumpurple;
+}
+.color-warning {
+ background-color: pink;
+}
+.color-success {
+ background-color: cornflowerblue;
+}
+.dragContent{
+ width: 60px;
+ height: 60px;
+ background-color: red;
+}
+.flex-box2 {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ height: 100px;
+ background-color: #ffffff;
+}
+.common {
+ background-color: #ffffff;
+ align-items: center;
+ justify-content: center;
+}
+.grid-parent {
+ display: grid;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+.grid-child {
+ width: 100%;
+/* height: 100%;*/
+ border-radius: 2px;
+}
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+}
+
+.function-container{
+ flex-direction: column;
+}
+.function {
+ height: 30px;
+ width: 100%;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..8d90041679bef595eb507f3af40136ae8f165eb4
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+ CanvasGradient对象的方法
+
+
+ 方法1
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c28adff32a1ee4f784d89624268279743e81def
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+export default {
+ data:{
+ left:0,
+ top:0,
+ },
+ onShow() {
+ this.functionTest()
+ },
+ functionTest() {
+ const el =this.$refs.canvas;
+ const ctx =el.getContext('2d');
+ const gradient = ctx.createLinearGradient(0,0,200,0);
+ gradient.addColorStop(0,'#00ffff');
+ gradient.addColorStop(1,'#ffff00');
+ ctx.fillStyle=gradient;
+ ctx.fillRect(20,20,300,100);
+ },
+
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css
@@ -0,0 +1,471 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.prop_all-container {
+ flex-direction: row;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ line-cap: square;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+.flex-box {
+ justify-content: space-around;
+ align-items: center;
+ height: 50px;
+ background-color: #ffffff;
+}
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+.color-primary {
+ background-color: mediumpurple;
+}
+.color-warning {
+ background-color: pink;
+}
+.color-success {
+ background-color: cornflowerblue;
+}
+.dragContent{
+ width: 60px;
+ height: 60px;
+ background-color: red;
+}
+.flex-box2 {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ height: 100px;
+ background-color: #ffffff;
+}
+.common {
+ background-color: #ffffff;
+ align-items: center;
+ justify-content: center;
+}
+.grid-parent {
+ display: grid;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+.grid-child {
+ width: 100%;
+/* height: 100%;*/
+ border-radius: 2px;
+}
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+}
+
+.function-container{
+ flex-direction: column;
+}
+.function {
+ height: 30px;
+ width: 100%;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..cd3f2d9be7915c9ece4c1478945ae7c8df4a702f
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml
@@ -0,0 +1,171 @@
+
+
+
+
+
+
+ 对象的属性
+
+
+ 属性1
+
+
+
+
+ 属性2
+
+
+
+
+ 属性3
+
+
+
+
+ 属性4
+
+
+
+
+ 属性5
+
+
+
+
+ 属性6
+
+
+
+
+ 属性7
+
+
+
+
+ 属性8
+
+
+
+
+ 属性9
+
+
+
+
+
+
+
+
+
+
+
+
+ 属性10
+
+
+
+
+ 属性11
+
+
+
+
+ 属性12
+
+
+
+
+
+
+
+
+ 对象的方法
+
+
+ 方法1
+
+
+
+
+ 方法2
+
+
+
+
+ 方法3
+
+
+
+
+ 方法4
+
+
+
+ 方法5
+
+
+
+
+
+
+
+
+
+
+
+ 方法6
+
+
+
+ 方法7
+
+
+
+ 方法8
+
+
+
+ 方法9
+
+
+
+ 方法10
+
+
+
+ 方法11
+
+
+
+ 方法12
+
+
+
+ 方法13
+
+
+
+ 方法14
+
+
+
+ 方法15
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cae268cf0b1d5212bf23e5b67f48872fa01479bf
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js
@@ -0,0 +1,287 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+export default {
+ data:{
+ left:0,
+ top:0,
+ },
+ onShow(){
+ // 屬性
+ this.props1()
+ this.props2()
+ this.props3()
+ this.props4()
+ this.props5()
+ this.props6()
+ this.props7()
+ this.props8()
+ this.props9()
+ this.props10()
+ this.props11()
+ this.props12()
+
+ // 方法
+ this.functionTouch1()
+ this.functionTouch2()
+ this.functionTouch3()
+ this.functionTouch4()
+ this.functionTouch5()
+ this.functionTouch6()
+ this.functionTouch7()
+ this.functionTouch8()
+ this.functionTouch9()
+ this.functionTouch10()
+ this.functionTouch11()
+ this.functionTouch12()
+ this.functionTouch13()
+ this.functionTouch14()
+ this.functionTouch15()
+ },
+ props1() {
+ const el = this.$refs.canvas1;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = '#0000ff';
+ ctx.fillRect(0, 0, 100, 30);
+ },
+ props2() {
+ const el = this.$refs.canvas2;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth = 10;
+ ctx.strokeStyle = '#0000ff';
+ ctx.lineCap = 'round';
+ ctx.strokeRect(0, 0, 100, 30);
+ },
+ props3() {
+ const el = this.$refs.canvas3;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth = 8;
+ ctx.beginPath();
+ ctx.lineCap = 'round';
+ ctx.moveTo(10, 10);
+ ctx.lineTo(100, 10);
+ ctx.stroke();
+ },
+ props4() {
+ const el = this.$refs.canvas4;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.lineWidth = 5;
+ ctx.lineJoin = 'miter';
+ ctx.moveTo(10, 10);
+ ctx.lineTo(80, 30);
+ ctx.lineTo(10, 50);
+ ctx.stroke();
+ },
+ props5() {
+ const el =this.$refs.canvas5;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth = 5;
+ ctx.lineJoin = 'miter';
+ ctx.miterLimit = 3;
+ ctx.moveTo(10, 10);
+ ctx.lineTo(60, 15);
+ ctx.lineTo(10, 40);
+ ctx.stroke();
+ },
+ props6() {
+ const el =this.$refs.canvas6;
+ const ctx = el.getContext('2d');
+ ctx.font = '20px sans-serif';
+ ctx.fillText("Hello World", 10, 20);
+ },
+ props7() {
+ const el =this.$refs.canvas7;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(0, 0, 40, 40);
+ ctx.globalAlpha = 0.4;
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(40, 40, 40, 40);
+
+ },
+ props8() {
+ const el =this.$refs.canvas8;
+ const ctx = el.getContext('2d');
+ ctx.arc(50, 40, 30, 0, 6.28);
+ ctx.setLineDash([10,20]);
+ ctx.lineDashOffset = 10.0;
+ ctx.stroke();
+ },
+ props9() {
+ const el =this.$refs.canvas9;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(10, 10, 30, 30);
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(25, 25, 30, 30);
+ // Start drawing second example
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(70, 10, 30, 30);
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(85, 25, 30, 30);
+ },
+ props10() {
+ const el =this.$refs.canvas10;
+ const ctx = el.getContext('2d');
+ ctx.shadowBlur = 30;
+ ctx.shadowColor = 'rgb(0,0,0)';
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(20, 20, 70, 50);
+ },
+ props11() {
+ const el =this.$refs.canvas11;
+ const ctx = el.getContext('2d');
+ ctx.shadowBlur = 10;
+ ctx.shadowOffsetX = 20;
+ ctx.shadowOffsetY = 20;
+ ctx.shadowColor = 'rgb(0,0,0)';
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(10, 0, 70, 50);
+ },
+ props12() {
+ const el =this.$refs.canvas12;
+ const ctx = el.getContext('2d');
+ var img = new Image();
+ img.src = 'common/images/image.png';
+ img.onload = function() {
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(img, 10, 0, 100, 60);
+ };
+ },
+
+ functionTouch1() {
+ const el =this.$refs.function1;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(0, 0, 100, 40);
+ ctx.clearRect(20, 10, 60, 20);
+ },
+ functionTouch2() {
+ const el =this.$refs.function2;
+ const ctx = el.getContext('2d');
+ ctx.font = '18px sans-serif';
+ ctx.strokeText("Hello World!", 0, 20);
+ },
+ functionTouch3() {
+ const el =this.$refs.function3;
+ const ctx = el.getContext('2d');
+ ctx.font = '16px sans-serif';
+ var txt = 'Hello World';
+ ctx.fillText("width:" + ctx.measureText(txt).width, 0, 10);
+ ctx.fillText(txt, 0, 25);
+ },
+ functionTouch4() {
+ const el =this.$refs.function4;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(5, 5);
+ ctx.lineTo(70, 5);
+ ctx.lineTo(40, 60);
+ ctx.closePath();
+ ctx.stroke();
+ },
+ functionTouch5() {
+ const el =this.$refs.function5;
+ const ctx = el.getContext('2d');
+ var img = new Image();
+ img.src = 'common/images/sun.png';
+ var pat = ctx.createPattern(img, 'repeat');
+ ctx.fillStyle = pat;
+ ctx.fillRect(20, 0, 60, 50);
+ },
+ functionTouch6() {
+ const el =this.$refs.function6;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(10, 10);
+ ctx.bezierCurveTo(20, 40, 80, 40, 100, 10);
+ ctx.stroke();
+ },
+ functionTouch7() {
+ const el =this.$refs.function7;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(10, 10);
+ ctx.quadraticCurveTo(50, 50, 100, 10);
+ ctx.stroke();
+ },
+ functionTouch8() {
+ const el =this.$refs.function8;
+ const ctx = el.getContext('2d');
+ ctx.moveTo(30, 20);
+ ctx.arcTo(70, 10, 70, 20, 30); // Create an arc
+ ctx.stroke();
+ },
+ functionTouch9() {
+ const el =this.$refs.function9;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.ellipse(50, 50, 30, 60, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
+ ctx.stroke();
+ },
+ functionTouch10() {
+ const el =this.$refs.function10;
+ const ctx = el.getContext('2d');
+ ctx.rect(10, 0, 60, 60); // Create a 100*100 rectangle at (20, 20)
+ ctx.fill(); // Draw it in default setting
+ },
+ functionTouch11() {
+ const el =this.$refs.function11;
+ const ctx = el.getContext('2d');
+ ctx.rect(10, 0, 50, 50);
+ ctx.stroke();
+ ctx.clip();
+ // Draw red rectangle after clip
+ ctx.fillStyle = "rgb(255,0,0)";
+ ctx.fillRect(0, 0, 40, 40);
+ },
+ functionTouch12() {
+ const el =this.$refs.function12;
+ const ctx = el.getContext('2d');
+ ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees
+ ctx.fillRect(20, 0, 20, 20);
+ },
+ functionTouch13() {
+ const el =this.$refs.function13;
+ const ctx = el.getContext('2d');
+ ctx.strokeRect(10, 10, 25, 25);
+ ctx.scale(1.5, 1.5);// Scale to 200%
+ ctx.strokeRect(10, 10, 20, 20);
+ },
+ functionTouch14() {
+ const el =this.$refs.function14;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(0,0,0)';
+ ctx.fillRect(0, 0, 30, 30)
+ ctx.transform(1, 0.5, -0.5, 1, 3, 3);
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(0, 0, 30, 30);
+ ctx.transform(1, 0.5, -0.5, 1, 3, 3);
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(0, 0, 30, 30);
+ },
+ functionTouch15() {
+ const el =this.$refs.function15;
+ const ctx = el.getContext('2d');
+ ctx.fillRect(10, 10, 30, 30);
+ ctx.translate(50, 10);
+ ctx.fillRect(10, 10, 30, 30);
+ }
+
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.css
@@ -0,0 +1,471 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.prop_all-container {
+ flex-direction: row;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ line-cap: square;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+.flex-box {
+ justify-content: space-around;
+ align-items: center;
+ height: 50px;
+ background-color: #ffffff;
+}
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+.color-primary {
+ background-color: mediumpurple;
+}
+.color-warning {
+ background-color: pink;
+}
+.color-success {
+ background-color: cornflowerblue;
+}
+.dragContent{
+ width: 60px;
+ height: 60px;
+ background-color: red;
+}
+.flex-box2 {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ height: 100px;
+ background-color: #ffffff;
+}
+.common {
+ background-color: #ffffff;
+ align-items: center;
+ justify-content: center;
+}
+.grid-parent {
+ display: grid;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+.grid-child {
+ width: 100%;
+/* height: 100%;*/
+ border-radius: 2px;
+}
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+}
+
+.function-container{
+ flex-direction: column;
+}
+.function {
+ height: 30px;
+ width: 100%;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..d6f936112de5c5f37ea2ee96b67d62d96c95820e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Image对象的属性
+
+
+ 属性1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/menu/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.js
similarity index 51%
rename from ace/ace_standard/src/main/js/default/pages/menu/index.js
rename to ace/ace_standard/src/main/js/default/pages/obj_Image/index.js
index c80df9b1c13894820780dba65519f294ede44d31..520fbf4f756d304cd3cb3f0ec99d9f95950c6fea 100644
--- a/ace/ace_standard/src/main/js/default/pages/menu/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.js
@@ -15,30 +15,29 @@
import prompt from '@system.prompt';
export default {
- onMenuSelected(e) {
- prompt.showToast({
- message: e.value
- })
- },
- onTextClick1() {
- this.$element('apiMenu1').show({x:120,y:10});
- },
- onTextClick2() {
- this.$element('apiMenu2').show({x:120,y:80});
- },
- onTextClick3() {
- this.$element('apiMenu3').show({x:120,y:150});
- },
- onTextClick4() {
- this.$element('apiMenu4').show({x:120,y:220});
- },
- onTextClick5() {
- this.$element('apiMenu5').show({x:120,y:290});
- },
- onTextClick6() {
- this.$element('apiMenu6').show({x:120,y:360});
- },
- onTextClick7() {
- this.$element('apiMenu7').show({x:120,y:650});
- }
+ data:{
+ left:0,
+ top:0,
+ },
+ onShow(){
+ // 屬性
+ this.props1()
+ },
+ props1() {
+ const el =this.$refs.canvas1
+ var ctx = el.getContext('2d');
+ var img = new Image();
+ img.src = 'common/images/image.png';
+ img.onload = function() {
+ console.log('Image load success');
+ ctx.drawImage(img, 0, 0, 300, 250);
+ prompt.showToast({
+ message: 'Image load success: width=' + img.width + ',height=' + img.height
+ });
+ };
+ img.onerror = function() {
+ console.log('Image load fail');
+ };
+ },
+
}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css
@@ -0,0 +1,471 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.prop_all-container {
+ flex-direction: row;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ line-cap: square;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+.flex-box {
+ justify-content: space-around;
+ align-items: center;
+ height: 50px;
+ background-color: #ffffff;
+}
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+.color-primary {
+ background-color: mediumpurple;
+}
+.color-warning {
+ background-color: pink;
+}
+.color-success {
+ background-color: cornflowerblue;
+}
+.dragContent{
+ width: 60px;
+ height: 60px;
+ background-color: red;
+}
+.flex-box2 {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ height: 100px;
+ background-color: #ffffff;
+}
+.common {
+ background-color: #ffffff;
+ align-items: center;
+ justify-content: center;
+}
+.grid-parent {
+ display: grid;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+.grid-child {
+ width: 100%;
+/* height: 100%;*/
+ border-radius: 2px;
+}
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+}
+
+.function-container{
+ flex-direction: column;
+}
+.function {
+ height: 30px;
+ width: 100%;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..72c83c2f5afc57939321fcfa033d2b71c60bbac6
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ ImageBitmap对象的属性
+
+
+ 属性1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..f6ab3d8c7190ef95c185ec47059af6eaf4f47a4b
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+export default {
+ data:{
+ left:0,
+ top:0,
+ },
+ onShow(){
+ // 屬性
+ this.props1()
+ },
+ props1() {
+ const canvas =this.$refs.canvas1
+ var ctx = canvas.getContext('2d');
+ var offscreen = new OffscreenCanvas(200,120);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+
+ offscreenCanvasCtx.rect(10, 10, 100, 100);
+ offscreenCanvasCtx.stroke();
+ this.textValue2 = offscreenCanvasCtx.isPointInStroke(20, 10);
+
+ var bitmap = offscreen.transferToImageBitmap();
+ ctx.transferFromImageBitmap(bitmap);
+
+ prompt.showToast({
+ message: 'function1 ImageBitmap:\n' + JSON.stringify(bitmap),
+ duration: 3000
+ });
+ console.log(JSON.stringify(bitmap))
+ },
+
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css
@@ -0,0 +1,471 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.prop_all-container {
+ flex-direction: row;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ line-cap: square;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+.flex-box {
+ justify-content: space-around;
+ align-items: center;
+ height: 50px;
+ background-color: #ffffff;
+}
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+.color-primary {
+ background-color: mediumpurple;
+}
+.color-warning {
+ background-color: pink;
+}
+.color-success {
+ background-color: cornflowerblue;
+}
+.dragContent{
+ width: 60px;
+ height: 60px;
+ background-color: red;
+}
+.flex-box2 {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ height: 100px;
+ background-color: #ffffff;
+}
+.common {
+ background-color: #ffffff;
+ align-items: center;
+ justify-content: center;
+}
+.grid-parent {
+ display: grid;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+.grid-child {
+ width: 100%;
+/* height: 100%;*/
+ border-radius: 2px;
+}
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+}
+
+.function-container{
+ flex-direction: column;
+}
+.function {
+ height: 30px;
+ width: 100%;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..2cea2845cdeb32005511542ee732cb4b5f23f1ae
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ ImageData对象的属性
+
+
+ 属性1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..bb9c25909ff6b9a55cafe3fa9fafcbd51ac5567f
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+export default {
+ data:{
+ left:0,
+ top:0,
+ },
+ onShow(){
+ // 屬性
+ this.props1()
+ },
+ props1() {
+ const el =this.$refs.canvas1;
+ const ctx = el.getContext('2d');
+ ctx.fillRect(0,0,200,200)
+ var imageData = ctx.createImageData(1,1)
+ prompt.showToast({
+ message:JSON.stringify(imageData),
+ duration:5000
+ })
+ console.log(JSON.stringify(imageData))
+ },
+
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css
@@ -0,0 +1,471 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.prop_all-container {
+ flex-direction: row;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ line-cap: square;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+.flex-box {
+ justify-content: space-around;
+ align-items: center;
+ height: 50px;
+ background-color: #ffffff;
+}
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+.color-primary {
+ background-color: mediumpurple;
+}
+.color-warning {
+ background-color: pink;
+}
+.color-success {
+ background-color: cornflowerblue;
+}
+.dragContent{
+ width: 60px;
+ height: 60px;
+ background-color: red;
+}
+.flex-box2 {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ height: 100px;
+ background-color: #ffffff;
+}
+.common {
+ background-color: #ffffff;
+ align-items: center;
+ justify-content: center;
+}
+.grid-parent {
+ display: grid;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+.grid-child {
+ width: 100%;
+/* height: 100%;*/
+ border-radius: 2px;
+}
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+}
+
+.function-container{
+ flex-direction: column;
+}
+.function {
+ height: 30px;
+ width: 100%;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..a6f52d62c6f116faa456b3574b56449d848584e4
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+ OffscreenCanvas对象的属性
+
+
+ 属性1
+
+
+
+
+
+
+
+
+
+
+
+
+ OffscreenCanvas对象的方法
+
+
+ 方法1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..720a1dfa3c8eb7a6f84d3ba09f1b6e34070e7fc9
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+export default {
+ data:{
+ left:0,
+ top:0,
+ },
+ onShow(){
+ // 属性
+ this.props1()
+ // 方法
+ this.functionTouch1()
+ },
+ props1() {
+ const el =this.$refs.canvas1
+ const ctx = el.getContext('2d');
+ var offscreen = new OffscreenCanvas(200,100);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+ var img = new Image();
+ img.src = 'common/images/image.png';
+ offscreenCanvasCtx.drawImage(img, 0, 0, 100, 100);
+ prompt.showToast({
+ message: 'OffscreenCanvas width='+offscreen.width+',OffscreenCanvas height='+offscreen.height
+ });
+ console.log('OffscreenCanvas width='+offscreen.width+',OffscreenCanvas height='+offscreen.height)
+ var bitmap = offscreen.transferToImageBitmap();
+ ctx.transferFromImageBitmap(bitmap);
+ },
+
+ functionTouch1() {
+ const el =this.$refs.function1
+ const ctx = el.getContext('2d');
+ var offscreen = new OffscreenCanvas(500,500);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+ var img = new Image();
+ img.src = 'common/images/image.png';
+ offscreenCanvasCtx.drawImage(img, 0, 0, 100, 100);
+ var dataURL = offscreen.toDataURL();
+ var bitmap = offscreen.transferToImageBitmap();
+ ctx.transferFromImageBitmap(bitmap);
+ prompt.showToast({
+ message: 'offscreenCanvasCtx='+offscreenCanvasCtx+',dataURL='+dataURL+',bitmap='+JSON.stringify(bitmap)
+ });
+ console.log('offscreenCanvasCtx='+offscreenCanvasCtx+',dataURL='+dataURL+',bitmap='+JSON.stringify(bitmap));
+
+ },
+
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css
@@ -0,0 +1,471 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.prop_all-container {
+ flex-direction: row;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ line-cap: square;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+.flex-box {
+ justify-content: space-around;
+ align-items: center;
+ height: 50px;
+ background-color: #ffffff;
+}
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+.color-primary {
+ background-color: mediumpurple;
+}
+.color-warning {
+ background-color: pink;
+}
+.color-success {
+ background-color: cornflowerblue;
+}
+.dragContent{
+ width: 60px;
+ height: 60px;
+ background-color: red;
+}
+.flex-box2 {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ height: 100px;
+ background-color: #ffffff;
+}
+.common {
+ background-color: #ffffff;
+ align-items: center;
+ justify-content: center;
+}
+.grid-parent {
+ display: grid;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+.grid-child {
+ width: 100%;
+/* height: 100%;*/
+ border-radius: 2px;
+}
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+}
+
+.function-container{
+ flex-direction: column;
+}
+.function {
+ height: 30px;
+ width: 100%;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..ad9128ce22167dc289a0476fbf78e262e5845db3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml
@@ -0,0 +1,171 @@
+
+
+
+
+
+
+ 对象的属性
+
+
+ 属性1
+
+
+
+
+ 属性2
+
+
+
+
+ 属性3
+
+
+
+
+ 属性4
+
+
+
+
+ 属性5
+
+
+
+
+ 属性6
+
+
+
+
+ 属性7
+
+
+
+
+ 属性8
+
+
+
+
+ 属性9
+
+
+
+
+
+
+
+
+
+
+
+
+ 属性10
+
+
+
+
+ 属性11
+
+
+
+
+ 属性12
+
+
+
+
+
+
+
+
+ 对象的方法
+
+
+ 方法1
+
+
+
+
+ 方法2
+
+
+
+
+ 方法3
+
+
+
+
+ 方法4
+
+
+
+ 方法5
+
+
+
+
+
+
+
+
+
+
+
+ 方法6
+
+
+
+ 方法7
+
+
+
+ 方法8
+
+
+
+ 方法9
+
+
+
+ 方法10
+
+
+
+ 方法11
+
+
+
+ 方法12
+
+
+
+ 方法13
+
+
+
+ 方法14
+
+
+
+ 方法15
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd5f1ac9dcf258b09e25a0f8e0982f6418a53b13
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js
@@ -0,0 +1,342 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+export default {
+ data:{
+ left:0,
+ top:0,
+ textValue: 0,
+ textValue2: 0
+ },
+ onShow(){
+ // 屬性
+ this.props1()
+ this.props2()
+ this.props3()
+ this.props4()
+ this.props5()
+ this.props6()
+ this.props7()
+ this.props8()
+ this.props9()
+ this.props10()
+ this.props11()
+ this.props12()
+
+ // 方法
+ this.functionTouch1()
+ this.functionTouch2()
+ this.functionTouch3()
+ this.functionTouch4()
+ this.functionTouch5()
+ this.functionTouch6()
+ this.functionTouch7()
+ this.functionTouch8()
+ this.functionTouch9()
+ this.functionTouch10()
+ this.functionTouch11()
+ this.functionTouch12()
+ this.functionTouch13()
+ this.functionTouch14()
+ this.functionTouch15()
+ },
+ props1() {
+ const el = this.$refs.canvas1;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = '#0000ff';
+ ctx.fillRect(0, 0, 100, 30);
+ },
+ props2() {
+ const el = this.$refs.canvas2;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth = 10;
+ ctx.strokeStyle = '#0000ff';
+ ctx.lineCap = 'round';
+ ctx.strokeRect(0, 0, 100, 30);
+ },
+ props3() {
+ const el = this.$refs.canvas3;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth = 8;
+ ctx.beginPath();
+ ctx.lineCap = 'round';
+ ctx.moveTo(10, 10);
+ ctx.lineTo(100, 10);
+ ctx.stroke();
+ },
+ props4() {
+ const el = this.$refs.canvas4;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.lineWidth = 5;
+ ctx.lineJoin = 'miter';
+ ctx.moveTo(10, 10);
+ ctx.lineTo(80, 30);
+ ctx.lineTo(10, 50);
+ ctx.stroke();
+ },
+ props5() {
+ const el =this.$refs.canvas5;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth = 5;
+ ctx.lineJoin = 'miter';
+ ctx.miterLimit = 3;
+ ctx.moveTo(10, 10);
+ ctx.lineTo(60, 15);
+ ctx.lineTo(10, 40);
+ ctx.stroke();
+ },
+ props6() {
+ const el =this.$refs.canvas6;
+ const ctx = el.getContext('2d');
+ ctx.font = '20px sans-serif';
+ ctx.fillText("Hello World", 10, 20);
+ },
+ props7() {
+ const el =this.$refs.canvas7;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(0, 0, 40, 40);
+ ctx.globalAlpha = 0.4;
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(40, 40, 40, 40);
+
+ },
+ props8() {
+ const el =this.$refs.canvas8;
+ const ctx = el.getContext('2d');
+ ctx.arc(50, 40, 30, 0, 6.28);
+ ctx.setLineDash([10,20]);
+ ctx.lineDashOffset = 10.0;
+ ctx.stroke();
+ },
+ props9() {
+ const el =this.$refs.canvas9;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(10, 10, 30, 30);
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(25, 25, 30, 30);
+ // Start drawing second example
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(70, 10, 30, 30);
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(85, 25, 30, 30);
+ },
+ props10() {
+ const el =this.$refs.canvas10;
+ const ctx = el.getContext('2d');
+ ctx.shadowBlur = 30;
+ ctx.shadowColor = 'rgb(0,0,0)';
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(20, 20, 70, 50);
+ },
+ props11() {
+ const el =this.$refs.canvas11;
+ const ctx = el.getContext('2d');
+ ctx.shadowBlur = 10;
+ ctx.shadowOffsetX = 20;
+ ctx.shadowOffsetY = 20;
+ ctx.shadowColor = 'rgb(0,0,0)';
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(10, 0, 70, 50);
+ },
+ props12() {
+ var ctx = this.$refs.canvas12.getContext('2d');
+ var offscreen = new OffscreenCanvas(100, 300);
+ var offCanvas2 = offscreen.getContext("2d");
+ var img = new Image();
+ img.src = 'common/images/image.png';
+ offCanvas2.drawImage(img, 0, 0, 33, 33);
+ offCanvas2.filter = 'blur(5px)';
+ offCanvas2.drawImage(img, 33, 0, 33, 33);
+
+ offCanvas2.filter = 'grayscale(50%)';
+ offCanvas2.drawImage(img, 66, 0, 33, 33);
+
+ offCanvas2.filter = 'hue-rotate(90deg)';
+ offCanvas2.drawImage(img, 0, 33, 33, 33);
+
+ offCanvas2.filter = 'invert(100%)';
+ offCanvas2.drawImage(img, 33, 33, 33, 33);
+
+ offCanvas2.filter = 'drop-shadow(8px 8px 10px green)';
+ offCanvas2.drawImage(img, 66, 33, 33, 33);
+
+ offCanvas2.filter = 'brightness(0.4)';
+ offCanvas2.drawImage(img, 0, 66, 33, 33);
+
+ offCanvas2.filter = 'opacity(25%)';
+ offCanvas2.drawImage(img, 33, 66, 33, 33);
+
+ offCanvas2.filter = 'saturate(30%)';
+ offCanvas2.drawImage(img, 66, 66, 33, 33);
+
+ offCanvas2.filter = 'sepia(60%)';
+ offCanvas2.drawImage(img, 0, 99, 33, 33);
+
+ offCanvas2.filter = 'contrast(200%)';
+ offCanvas2.drawImage(img, 33, 99, 33, 33);
+ var bitmap = offscreen.transferToImageBitmap();
+ ctx.transferFromImageBitmap(bitmap);
+ },
+
+ functionTouch1() {
+ const el =this.$refs.function1;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(0, 0, 100, 40);
+ ctx.clearRect(20, 10, 60, 20);
+ },
+ functionTouch2() {
+ const el =this.$refs.function2;
+ const ctx = el.getContext('2d');
+ ctx.font = '18px sans-serif';
+ ctx.strokeText("Hello World!", 0, 20);
+ },
+ functionTouch3() {
+ const el =this.$refs.function3;
+ const ctx = el.getContext('2d');
+ ctx.font = '14px sans-serif';
+ var txt = 'Hello World';
+ ctx.fillText("width:" + ctx.measureText(txt).width, 0, 10);
+ ctx.fillText(txt, 0, 25);
+ },
+ functionTouch4() {
+ const el =this.$refs.function4;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(5, 5);
+ ctx.lineTo(70, 5);
+ ctx.lineTo(40, 60);
+ ctx.closePath();
+ ctx.stroke();
+ },
+ functionTouch5() {
+ const el =this.$refs.function5;
+ const ctx = el.getContext('2d');
+ var img = new Image();
+ img.src = 'common/images/sun.png';
+ var pat = ctx.createPattern(img, 'repeat');
+ ctx.fillStyle = pat;
+ ctx.fillRect(20, 0, 60, 50);
+ },
+ functionTouch6() {
+ const el =this.$refs.function6;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(10, 10);
+ ctx.bezierCurveTo(20, 40, 80, 40, 100, 10);
+ ctx.stroke();
+ },
+ functionTouch7() {
+ const el =this.$refs.function7;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(10, 10);
+ ctx.quadraticCurveTo(50, 50, 100, 10);
+ ctx.stroke();
+ },
+ functionTouch8() {
+ const el =this.$refs.function8;
+ const ctx = el.getContext('2d');
+ ctx.moveTo(30, 20);
+ ctx.arcTo(70, 10, 70, 20, 30); // Create an arc
+ ctx.stroke();
+ },
+ functionTouch9() {
+ const el =this.$refs.function9;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.ellipse(50, 50, 30, 60, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
+ ctx.stroke();
+ },
+ functionTouch10() {
+ const el =this.$refs.function10;
+ const ctx = el.getContext('2d');
+ ctx.rect(10, 0, 60, 60); // Create a 100*100 rectangle at (20, 20)
+ ctx.fill(); // Draw it in default setting
+ },
+ functionTouch11() {
+ const el =this.$refs.function11;
+ const ctx = el.getContext('2d');
+ ctx.rect(10, 0, 50, 50);
+ ctx.stroke();
+ ctx.clip();
+ // Draw red rectangle after clip
+ ctx.fillStyle = "rgb(255,0,0)";
+ ctx.fillRect(0, 0, 40, 40);
+ },
+ functionTouch12() {
+ const el =this.$refs.function12;
+ const ctx = el.getContext('2d');
+ ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees
+ ctx.fillRect(20, 0, 20, 20);
+ },
+ functionTouch13() {
+ var canvas = this.$refs.function13.getContext('2d');
+ var offscreen = new OffscreenCanvas(100,40);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+
+ offscreenCanvasCtx.rect(10, 10, 40, 40);
+ offscreenCanvasCtx.fill();
+ this.textValue = offscreenCanvasCtx.isPointInPath(30, 20);
+
+ var bitmap = offscreen.transferToImageBitmap();
+ canvas.transferFromImageBitmap(bitmap);
+
+ prompt.showToast({
+ message: 'function success: textValue=' + this.textValue
+ });
+ },
+ functionTouch14() {
+ var canvas = this.$refs.function14.getContext('2d');
+ var offscreen = new OffscreenCanvas(100,40);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+
+ offscreenCanvasCtx.rect(10, 10, 30, 30);
+ offscreenCanvasCtx.stroke();
+ this.textValue2 = offscreenCanvasCtx.isPointInStroke(20, 10);
+
+ var bitmap = offscreen.transferToImageBitmap();
+ canvas.transferFromImageBitmap(bitmap);
+ prompt.showToast({
+ message: 'function success: textValue2=' + this.textValue2
+ });
+ },
+ functionTouch15() {
+ var canvas = this.$refs.function15.getContext('2d');
+ var offscreen = new OffscreenCanvas(100,50);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+
+ offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
+ offscreenCanvasCtx.fillStyle = 'gray';
+ offscreenCanvasCtx.fillRect(15, 10, 20, 10);
+ offscreenCanvasCtx.fillRect(15, 30, 20, 10);
+
+ // Non-skewed rectangles
+ offscreenCanvasCtx.resetTransform();
+ offscreenCanvasCtx.fillStyle = 'red';
+ offscreenCanvasCtx.fillRect(10, 10, 20, 10);
+ offscreenCanvasCtx.fillRect(10, 30, 20, 10);
+
+ var bitmap = offscreen.transferToImageBitmap();
+ canvas.transferFromImageBitmap(bitmap);
+ }
+
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ac9c500c4cd601b508b751c346cf853cf571c2b3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css
@@ -0,0 +1,471 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.prop_all-container {
+ flex-direction: row;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop1 {
+ color: #ad4e2a;
+ height: 30px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ height: 30px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ color: #456345;
+ height: 30px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ line-cap: square;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ width: 100%;
+ height: 20px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multiMode-container{
+ flex-direction: column;
+}
+
+.multiMode1{
+ background-color: #978666;
+ width: 100%;
+ height: 30px;
+ margin: 5px;
+}
+.flex-box {
+ justify-content: space-around;
+ align-items: center;
+ height: 50px;
+ background-color: #ffffff;
+}
+.flex-item {
+ width: 20px;
+ height: 20px;
+ border-radius: 16px;
+}
+.color-primary {
+ background-color: mediumpurple;
+}
+.color-warning {
+ background-color: pink;
+}
+.color-success {
+ background-color: cornflowerblue;
+}
+.dragContent{
+ width: 60px;
+ height: 60px;
+ background-color: red;
+}
+.flex-box2 {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ height: 100px;
+ background-color: #ffffff;
+}
+.common {
+ background-color: #ffffff;
+ align-items: center;
+ justify-content: center;
+}
+.grid-parent {
+ display: grid;
+ grid-template-columns: 20% 20%;
+ grid-columns-gap: 14px;
+ grid-rows-gap: 4px;
+ grid-template-rows: 15% 15%;
+}
+.grid-child {
+ width: 100%;
+/* height: 100%;*/
+ border-radius: 2px;
+}
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.event1{
+ width: 60%;
+ flex-weight: 1;
+}
+
+.event2{
+ width: 70%;
+ flex-weight: 1;
+}
+
+.event3{
+ width: 80%;
+ flex-weight: 1;
+}
+
+.function-container{
+ flex-direction: column;
+}
+.function {
+ height: 30px;
+ width: 100%;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..667e7728fd2adde262bed883737b0ef0555ba641
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+ Path2D对象的方法
+
+
+ 方法1
+
+
+
+
+ 方法2
+
+
+
+
+ 方法3
+
+
+
+
+ 方法4
+
+
+
+ 方法5
+
+
+
+
+
+
+
+
+
+
+
+ 方法6
+
+
+
+ 方法7
+
+
+
+ 方法8
+
+
+
+ 方法9
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..6a50fdfd3a0e57555fd308cd3843748b80899d09
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+export default {
+ data:{
+ left:0,
+ top:0,
+ },
+ onShow(){
+ // 方法
+ this.functionTouch1()
+ this.functionTouch2()
+ this.functionTouch3()
+ this.functionTouch4()
+ this.functionTouch5()
+ this.functionTouch6()
+ this.functionTouch7()
+ this.functionTouch8()
+ this.functionTouch9()
+ },
+
+ functionTouch1() {
+ const el =this.$refs.function1;
+ const ctx = el.getContext('2d');
+ var path1 = ctx.createPath2D("M80 20 L40 100 L120 100 Z");
+ var path2 = ctx.createPath2D();
+ path2.addPath(path1);
+ ctx.stroke(path2);
+ },
+ functionTouch2() {
+ const el =this.$refs.function2;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D("M80 20 L40 100 L120 100 Z");
+ path.setTransform(0.8, 0, 0, 0.4, 0, 0);
+ ctx.stroke(path);
+
+ },
+ functionTouch3() {
+ const el =this.$refs.function3;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.moveTo(80, 40);
+ path.lineTo(120, 40);
+ path.lineTo(80, 80);
+ path.closePath();
+ ctx.stroke(path);
+ },
+ functionTouch4() {
+ const el =this.$refs.function4;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.moveTo(10, 10);
+ path.bezierCurveTo(10, 50, 100, 50, 100, 10);
+ ctx.stroke(path);
+ },
+ functionTouch5() {
+ const el =this.$refs.function5;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.moveTo(10, 10);
+ path.quadraticCurveTo(50, 50, 100, 10);
+ ctx.stroke(path);
+ },
+ functionTouch6() {
+ const el =this.$refs.function6;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.arc(80, 50, 40, 0, 6.28);
+ ctx.stroke(path);
+ },
+ functionTouch7() {
+ const el =this.$refs.function7;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.arcTo(75, 10, 75, 35, 25);
+ ctx.stroke(path);
+ },
+ functionTouch8() {
+ const el =this.$refs.function8;
+ const ctx =el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.ellipse(50, 50, 25, 50, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
+ ctx.stroke(path);
+ },
+ functionTouch9() {
+ const el =this.$refs.function9;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.rect(20, 20, 100, 100);
+ ctx.stroke(path);
+ },
+
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/path/index.css b/ace/ace_standard/src/main/js/default/pages/path/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..be4d509ad814395e2cb838d477b1cf9329f9d391
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/path/index.css
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+#prop1 {
+ color: #ad4e2a;
+ stroke-width: 10px;
+ margin: 5px;
+}
+
+.prop2 {
+ color: #343524;
+ stroke-width: 15px;
+ margin: 5px;
+}
+
+.prop4 {
+ color: #456345;
+ stroke-width: 25px;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ margin: 5px;
+ height: 70px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ background-color: #72ac33;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ stroke-width: 30px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ color: #321124;
+ stroke-width: 30px;
+ margin: 5px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+ color: #978666;
+ stroke-width: 30px;
+ margin: 5px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/path/index.hml b/ace/ace_standard/src/main/js/default/pages/path/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..d407389d0c8de322f45e964edf891d29b7d84ab7
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/path/index.hml
@@ -0,0 +1,161 @@
+
+
+
+ 通用属性
+
+
+ path通用属性1
+
+
+
+
+
+
+ path通用属性2
+
+
+
+
+
+
+ path通用属性3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ path动画属性
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ path无障碍1
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ path多模输入1
+
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ path动画样式1
+
+
+
+
+
+
+ path动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ path渐变样式1
+
+
+
+
+
+
+ path渐变样式2
+
+
+
+
+
+
+ path渐变样式3
+
+
+
+
+
+
+ path渐变样式4
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/path/index.js b/ace/ace_standard/src/main/js/default/pages/path/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d2db94ec51fc888feecf2835afdfa2b417ef24a4
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/path/index.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+ data: {
+ title: ""
+ },
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element("prop1");
+ var name1 = prop1.dataSet.a
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.a
+ }
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/index.css b/ace/ace_standard/src/main/js/default/pages/polygon/index.css
similarity index 84%
rename from ace/ace_standard/src/main/js/default/pages/divider/index.css
rename to ace/ace_standard/src/main/js/default/pages/polygon/index.css
index 48d62f709ffaa11ce2642f05819314ac7f1e8586..46087d10479e4235877947cf136a67a4ac5736e2 100644
--- a/ace/ace_standard/src/main/js/default/pages/divider/index.css
+++ b/ace/ace_standard/src/main/js/default/pages/polygon/index.css
@@ -13,6 +13,7 @@
* limitations under the License.
*/
+/* xxx.css */
.container {
flex-direction:row;
width:100%;
@@ -50,12 +51,10 @@
}
.style1{
- width: 100%;
- height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
- max-height: 50px;
+ max-height: 100px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
@@ -91,8 +90,6 @@
}
.style2{
- width: 50px;
- height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
@@ -109,7 +106,6 @@
}
.style3{
- width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
@@ -127,8 +123,6 @@
}
.style4{
- width: 60%;
- height: 5%;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
@@ -141,8 +135,6 @@
}
.style5{
- width: 50%;
- height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
@@ -152,11 +144,11 @@
}
.style6{
- width: 70px;
- height: 30px;
+/* width: 70px;*/
+/* height: 30px;*/
position: absolute;
left: 10px;
- top: 35px;
+ top: 80px;
bottom: 5px;
right: 10px;
background-color: pink;
@@ -168,54 +160,58 @@
margin-top: 10px;
color: green;
stroke-width: 30px;
- line-cap: round;
}
.prop-container{
flex-direction: column;
height: 100%;
- flex-weight: 1;
+ flex-weight: 2;
}
-
#prop1 {
- color: #ad4e2a;
- stroke-width: 10px;
- line-cap: square;
- margin: 5px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 3px 5px;
}
-
.prop2 {
- color: #343524;
- stroke-width: 15px;
- line-cap: round;
- margin: 5px;
+ background-color: pink;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop3 {
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 3px 5px;
}
.prop4 {
- color: #456345;
- stroke-width: 25px;
- line-cap: round;
- margin: 5px;
+ background-color: yellowgreen;
+ width: 100%;
+ margin: 3px 5px;
}
.prop5 {
- color: #831834;
- stroke-width: 40px;
- line-cap: square;
- margin: 5px;
- height: 70px;
+ background-color: cornflowerblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop6 {
+ background-color: burlywood;
+ width: 100%;
+ margin: 3px 5px;
}
.ani-container{
flex-direction: column;
height: 100%;
- flex-weight: 1;
+ flex-weight: 0.5;
}
.ani1{
- color: #72ac33;
- stroke-width: 55px;
- line-cap: square;
+ background-color: #72ac33;
+ width: 55px;
+ height: 55px;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
@@ -228,7 +224,7 @@
opacity:0.3;
width:50px;
height: 50px;
- transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10%
}
30% {
@@ -237,7 +233,7 @@
width:70px;
height: 70px;
background-position:12% 12%;
- transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
}
to {
background-color: #6160f7;
@@ -250,40 +246,35 @@
}
.ani2{
- color: #ad4e2a;
- stroke-width: 55px;
- line-cap: square;
+ background-color: #ad4e2a;
+ width: 55px;
+ height: 55px;
margin: 5px;
}
-
.gradient-container{
flex-direction: column;
}
.gradient1{
stroke-width: 30px;
- line-cap: square;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
stroke-width: 30px;
- line-cap: square;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
stroke-width: 30px;
- line-cap: square;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
stroke-width: 30px;
- line-cap: square;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
@@ -295,7 +286,6 @@
.access1{
color: #321124;
stroke-width: 30px;
- line-cap: square;
margin: 5px;
}
@@ -310,6 +300,5 @@
.multimode1{
color: #978666;
stroke-width: 30px;
- line-cap: square;
margin: 5px;
}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/index.hml b/ace/ace_standard/src/main/js/default/pages/polygon/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..08ba4262b679371ab573818db94ae17249677a5c
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/polygon/index.hml
@@ -0,0 +1,222 @@
+
+
+
+ 通用样式
+
+
+ polygon通用样式1
+
+
+
+
+
+ polygon通用样式2
+
+
+
+
+
+
+ polygon通用样式3
+
+
+
+
+
+ polygon通用样式4
+
+
+
+
+
+ polygon通用样式5
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ polyline通用属性1
+
+
+
+
+
+ polyline通用属性2
+
+
+
+
+
+ polyline通用属性3
+
+
+
+
+
+
+ polyline通用属性4
+
+
+
+
+
+
+ polyline通用属性5
+
+
+
+
+
+
+ polyline通用属性6
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ polygon渐变样式1
+
+
+
+
+
+ polygon渐变样式2
+
+
+
+
+
+ polygon渐变样式3
+
+
+
+
+
+ polygon渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ polygon无障碍1
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ polygon多模输入1
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/index.js b/ace/ace_standard/src/main/js/default/pages/polygon/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d2db94ec51fc888feecf2835afdfa2b417ef24a4
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/polygon/index.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+ data: {
+ title: ""
+ },
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element("prop1");
+ var name1 = prop1.dataSet.a
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.a
+ }
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/polyline/index.css b/ace/ace_standard/src/main/js/default/pages/polyline/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..7513f1d3e275db2ffc366464b6606e134c0c1db9
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/polyline/index.css
@@ -0,0 +1,305 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* xxx.css */
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1.2;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 100px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ position: absolute;
+ left: 10px;
+ top: 80px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ margin-bottom: 50px;
+ margin-top: 10px;
+ color: green;
+ stroke-width: 30px;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 2.6;
+}
+
+#prop1 {
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop2 {
+ background-color: pink;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop3 {
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop4 {
+ background-color: yellowgreen;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop5 {
+ background-color: cornflowerblue;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.prop6 {
+ background-color: burlywood;
+ width: 100%;
+ margin: 3px 5px;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ background-color: #72ac33;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ stroke-width: 30px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ color: #321124;
+ stroke-width: 30px;
+ margin: 5px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+ color: #978666;
+ stroke-width: 30px;
+ margin: 5px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/polyline/index.hml b/ace/ace_standard/src/main/js/default/pages/polyline/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..7142c70769d49b03d90e224f1a58837d648c35a1
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/polyline/index.hml
@@ -0,0 +1,199 @@
+
+
+
+ 通用样式
+
+
+ polyline通用样式1
+
+
+
+
+
+ polyline通用样式2
+
+
+
+
+
+
+ polyline通用样式3
+
+
+
+
+
+ polyline通用样式4
+
+
+
+
+
+ polyline通用样式5
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ polyline通用属性1
+
+
+
+
+
+ polyline通用属性2
+
+
+
+
+
+ polyline通用属性3
+
+
+
+
+
+
+ polyline通用属性4
+
+
+
+
+
+
+ polyline通用属性5
+
+
+
+
+
+
+ polyline通用属性6
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ polyline动画样式1
+
+
+
+
+
+ path动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ polyline渐变样式1
+
+
+
+
+
+ polyline渐变样式2
+
+
+
+
+
+ polyline渐变样式3
+
+
+
+
+
+ polyline渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ polyline无障碍1
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ polyline多模输入1
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/polyline/index.js b/ace/ace_standard/src/main/js/default/pages/polyline/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..d2db94ec51fc888feecf2835afdfa2b417ef24a4
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/polyline/index.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+ data: {
+ title: ""
+ },
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element("prop1");
+ var name1 = prop1.dataSet.a
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.a
+ }
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.css b/ace/ace_standard/src/main/js/default/pages/rect/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..97964431d19581c78616a1da910f808fb881a38f
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/rect/index.css
@@ -0,0 +1,287 @@
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/bg-tv.jpg');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1.5;
+}
+
+/*#prop1 {*/
+/* margin: 5px;*/
+/*}*/
+
+/*.prop2 {*/
+/* color: #343524;*/
+/* stroke-width: 15px;*/
+/* margin: 5px;*/
+/*}*/
+/*.prop3{*/
+/* color: #679855;*/
+/* stroke-width: 15px;*/
+/* margin: 5px;*/
+/*}*/
+
+/*.prop4 {*/
+/* color: #456345;*/
+/* stroke-width: 25px;*/
+/* margin: 5px;*/
+/*}*/
+
+/*.prop5 {*/
+/* color: #831834;*/
+/* stroke-width: 40px;*/
+/* margin: 5px;*/
+/* height: 70px;*/
+/*}*/
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ background-color: #72ac33;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ stroke-width: 30px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ color: #321124;
+ stroke-width: 30px;
+ margin: 5px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+/* color: #978666;*/
+/* stroke-width: 30px;*/
+ margin: 5px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.hml b/ace/ace_standard/src/main/js/default/pages/rect/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..1ddc05a604a411435c5fb9bc7c1190b5aab6fd6c
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/rect/index.hml
@@ -0,0 +1,173 @@
+
+
+
+ 通用样式
+
+
+ rect通用样式1
+
+
+
+ rect通用样式2
+
+
+
+
+
+ rect通用样式3
+
+
+
+
+
+ rect通用样式4
+
+
+
+
+
+ rect通用样式5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ rect通用属性1
+
+
+
+
+
+
+
+ rect通用属性2
+
+
+
+
+
+
+
+ rect通用属性3
+
+
+
+
+
+
+
+
+ rect特有属性4
+
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ rect动画样式1
+
+
+
+
+
+
+
+ rect动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ rect渐变样式1
+
+
+
+
+
+ rect渐变样式2
+
+
+
+
+
+ rect渐变样式3
+
+
+
+
+
+ rect渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ rect无障碍1
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ rect多模输入1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.js b/ace/ace_standard/src/main/js/default/pages/rect/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/rect/index.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+ data: {
+ title: ""
+ },
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element("prop1");
+ var name1 = prop1.dataSet.a
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.a
+ }
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/span/index.css b/ace/ace_standard/src/main/js/default/pages/span/index.css
deleted file mode 100644
index 398440bb8b62ebb0a67e685e77a66a8dee0fa9ff..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/span/index.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.container {
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
-}
-
-.title {
- font-size: 30px;
- text-align: center;
- width: 100%;
- height: 10%;
-}
-
-.spanTxt1{
- text-color:red;
- font-size:30px;
- allow-scale:true;
- text-decoration:underline;
- letter-spacing:5px;
- font-style:normal;
- font-weight:200;
- font-family:sans-serif;
- min-width: 25px;
- min-height: 10px;
- max-width: 300px;
- max-height: 50px;
- padding-left: 10px;
- padding-top: 20px;
- padding-right: 15px;
- padding-bottom: 5px;
- margin-left: 10px;
- margin-top: 20px;
- margin-right: 15px;
- margin-bottom: 5px;
-}
-
-.spanTxt2{
- text-color:yellow;
- font-size:30px;
- allow-scale:false;
- text-decoration:line-through;
- text-decoration:none;
- letter-spacing:5px;
- font-style:italic;
- font-weight:300;
- font-family:sans-serif;
- margin: 5px;
-}
-
-.spanTxt3{
- text-color:beige;
- font-size:30px;
- allow-scale:true;
- letter-spacing:5px;
- font-style:normal;
- font-weight:200;
- font-family:sans-serif;
- margin: 5px;
-}
-
-.spanTxt4{
- text-color:aqua;
- font-size:30px;
- allow-scale:false;
- letter-spacing:5px;
- font-style:italic;
- font-weight:200;
- font-family:sans-serif;
- margin: 5px;
-}
-
-.contain1{
- width: 100%;
- height: 100px;
- margin-left: 28%;
- flex-direction: column;
-}
-
-.spanTxt5{
- text-color:saddlebrown;
- font-size:30px;
- allow-scale:true;
- letter-spacing:5px;
- font-style:normal;
- font-weight:300;
- font-family:sans-serif;
- margin: 5px;
-}
-
-.spanTxt6{
- text-color:darkcyan;
- font-size:30px;
- allow-scale:false;
- letter-spacing:5px;
- font-style:italic;
- font-weight:200;
- font-family:sans-serif;
- margin: 10px;
-}
-
-.spanTxt7 {
- text-color:navajowhite;
- font-size:30px;
- allow-scale:true;
- letter-spacing:10px;
- font-style:normal;
- font-weight:500;
- font-family:sans-serif;
- margin: 5px;
-}
diff --git a/ace/ace_standard/src/main/js/default/pages/span/index.hml b/ace/ace_standard/src/main/js/default/pages/span/index.hml
deleted file mode 100644
index 89f9f2de77a0b6defbf1b580e52d5ffc5cc29a7a..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/span/index.hml
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
-
- span1
-
-
-
- span2
-
-
-
- span3
-
-
-
- span4
-
-
-
-
- span5
-
- span6
-
-
-
- span7
-
-
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/span/prop/index.css b/ace/ace_standard/src/main/js/default/pages/span/prop/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..83c4a11e434fac5f11ffcc8ed865ac2381583452
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/span/prop/index.css
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.prop-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+.spanTextTitle {
+ height: 15px;
+ font-size: 10px;
+ margin-bottom: 2px;
+ background-color:#f00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..d961d71b2b4dc9963bf99197d388dbd53f15990a
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml
@@ -0,0 +1,211 @@
+
+
+
+
+
+ span通用属性
+
+
+
+ 通用属性 -- id
+
+
+
+ span
+
+
+
+
+
+ 通用属性 -- class
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+
+
+ 通用属性 -- style
+
+
+
+ span
+
+
+
+
+
+ 通用属性 -- ref
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ 通用属性 -- data-*
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ 通用属性 -- click-effect
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ 通用属性 -- dir
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ 渲染属性 -- for
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ 渲染属性 -- if
+
+
+
+ span
+
+
+
+
+
+ 渲染属性 -- show
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/span/prop/index.js b/ace/ace_standard/src/main/js/default/pages/span/prop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c8cbac48b78382d08788f256dac0243e0852f9f9
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/span/prop/index.js
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+
+ data:{
+ listOne:[{}],
+ listThree:[{},{},{}],
+ idProp : null,
+ classProp : null,
+ classPropNone : null,
+ styleProp : null,
+ refProp : null,
+ refPropNone : null,
+ dataProp : null,
+ dataPropNone : null,
+ clickEffectPropSmall : null,
+ clickEffectPropMedium : null,
+ clickEffectPropLarge : null,
+ clickEffectPropNone : null,
+ dirPropRtl : null,
+ dirPropAuto : null,
+ dirPropLtr : null,
+ dirPropNone : null,
+ forPropNull : null,
+ forPropOne : null,
+ forPropThree : null,
+ ifPropTrue : null,
+ showPropTrue : null,
+ showPropFalse : null,
+ showPropNone : null,
+ },
+ onShow(){
+ this.getCommonPropValues();
+ this.getSpecificPropValues();
+ globalThis.value = {
+ idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
+ styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
+ dataProp : this.dataProp, dataPropNone : this.dataPropNone,
+ clickEffectPropSmall : this.clickEffectPropSmall,
+ clickEffectPropMedium : this.clickEffectPropMedium,
+ clickEffectPropLarge : this.clickEffectPropLarge,
+ clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl,
+ dirPropAuto : this.dirPropAuto,
+ dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull,
+ forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue,
+ showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone,
+ }
+ },
+ getCommonPropValues(){
+ this.idProp = this.$element("idProp").getInspector()
+ this.classProp = this.$element("classProp").getInspector()
+ this.classPropNone = this.$element("classPropNone").getInspector()
+ this.styleProp = this.$element("styleProp").getInspector()
+ this.refProp = this.$element("refProp").getInspector()
+ this.refPropNone = this.$element("refPropNone").getInspector()
+ this.dataProp = this.$element("dataProp").getInspector()
+ this.dataPropNone = this.$element("dataPropNone").getInspector()
+ this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
+ this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
+ this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
+ this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
+ this.dirPropRtl = this.$element("dirPropRtl").getInspector()
+ this.dirPropAuto = this.$element("dirPropAuto").getInspector()
+ this.dirPropLtr = this.$element("dirPropLtr").getInspector()
+ this.dirPropNone = this.$element("dirPropNone").getInspector()
+ this.forPropNull = this.$element("forPropNull").getInspector()
+ this.forPropOne = this.$element("forPropOne").getInspector()
+ this.forPropThree = this.$element("forPropThree").getInspector()
+ this.ifPropTrue = this.$element("ifPropTrue").getInspector()
+ this.showPropTrue = this.$element("showPropTrue").getInspector()
+ this.showPropFalse = this.$element("showPropFalse").getInspector()
+ this.showPropNone = this.$element("showPropNone").getInspector()
+ },
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/span/router/index.css b/ace/ace_standard/src/main/js/default/pages/span/router/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..4de666365e97be615f37f42083740c82c20a6cad
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/span/router/index.css
@@ -0,0 +1,406 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+.contain1{
+ width: 100%;
+ height: 15%;
+ flex-direction: column;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 45%;
+ padding-left: 2px;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.function-container{
+ flex-direction: column;
+ height: 25%;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 15%;
+}
+
+.atom-container{
+ flex-direction: column;
+ height: 65%;
+}
+
+.multimode-container{
+ flex-direction: column;
+ height: 20%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+.sub-title{
+ width: 100%;
+ height: 25px;
+ font-size: 15px;
+ text-align: left;
+ margin-bottom: 1px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ mask-color:red;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 1px;
+ padding-right: 15px;
+ padding-bottom: 1px;
+ margin-left: 10px;
+ margin-top: 0px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 70%;
+ height: 12%;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 1px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ color:salmon;
+ font-size:25px;
+ font-style:normal;
+ font-weight:100;
+ allow-scale:true;
+ text-decoration:underline;
+ font-family:sans-serif;
+}
+
+.style8 {
+ color:chartreuse;
+ font-size:25px;
+ font-style:normal;
+ font-weight:200;
+ allow-scale:false;
+ text-decoration:line-through;
+ font-family:sans-serif;
+}
+.style9{
+ color:black;
+ font-size:30px;
+ font-style:italic;
+ font-weight:300;
+ allow-scale:false;
+ text-decoration:none;
+ font-family:sans-serif;
+}
+
+.event1{
+ width: 100%;
+ height: 40px;
+ background-color: salmon;
+}
+
+.event2{
+ width: 100%;
+ height: 40px;
+ background-color: darkorchid;
+}
+
+.event3{
+ width: 100%;
+ height: 40px;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+.event5{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+
+#prop1 {
+ background-color: mediumslateblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop2 {
+ background-color: salmon;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop4 {
+ background-color: skyblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop5 {
+ background-color: gold;
+ height: 40px;
+ width: 100%;
+ margin: 2px;
+}
+
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 100%;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient1{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ margin: 5px;
+ height: 40px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access1{
+ color: #321124;
+ height: 40px;
+ margin: 5px;
+ background-color: chartreuse;
+}
+
+.atom1{
+ background-color: saddlebrown;
+ width: 40px;
+ height: 40px;
+}
+.atom2{
+ background-color: blueviolet;
+ width: 40px;
+ height: 40px;
+}
+.atom3{
+ background-color: aquamarine;
+ width: 40px;
+ height: 40px;
+}
+
+.multimode1{
+ background-color: firebrick;
+ height: 40px;
+ width: 100%;
+ margin: 5px;
+}
+
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 30px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 30px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 30px;
+}
+
+.function4 {
+ flex-direction: row;
+ width: 60%;
+ height: 60px;
+ overflow: scroll;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/span/router/index.hml b/ace/ace_standard/src/main/js/default/pages/span/router/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..e45664fc94aafea3f7a7a7727139a7133ff8fba6
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/span/router/index.hml
@@ -0,0 +1,291 @@
+
+
+
+
+
+
+
+ 通用样式
+
+
+
+ span通用样式1
+
+
+
+
+ span
+
+
+
+
+ span通用样式2
+
+
+
+
+ span
+
+
+
+
+ span通用样式3
+
+
+
+ span
+
+
+
+
+ span通用样式4
+
+
+
+ span
+
+
+
+
+ span通用样式5
+
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+
+ span特有样式1
+
+
+
+ span
+
+
+
+
+ span特有样式2
+
+
+
+ span
+
+
+
+
+ span特有样式3
+
+
+
+ span
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ span通用属性1
+
+
+
+
+
+
+ span通用属性2
+
+
+
+
+
+
+ span通用属性3
+
+
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+
+ span通用事件1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ span无障碍1
+
+
+
+ span
+
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ span原子布局1
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span原子布局2
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span原子布局3
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+ span
+
+
+
+
+
+
+
+ 多模输入
+
+
+ span多模输入1
+
+
+
+ span
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/span/router/index.js b/ace/ace_standard/src/main/js/default/pages/span/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0f4eb3c6ac35f5a12cd0fcec52b5da74601f311
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/span/router/index.js
@@ -0,0 +1,489 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+export default {
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$element('function4');
+ var scrollOffset = function4.getScrollOffset();
+ var x = scrollOffset.x;
+ var y = scrollOffset.y;
+ var message = 'x--' + x + ',y--' + y;
+ prompt.showToast({
+ message: 'functionTest4 scrollOffset:\n' + message
+ });
+
+ var scrollParam = {
+ dx:60,
+ dy:0,
+ smooth:true
+ }
+ function4.scrollBy(scrollParam)
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/span/style/index.css b/ace/ace_standard/src/main/js/default/pages/span/style/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/span/style/index.hml b/ace/ace_standard/src/main/js/default/pages/span/style/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/span/style/index.js b/ace/ace_standard/src/main/js/default/pages/span/style/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/span/style/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.css b/ace/ace_standard/src/main/js/default/pages/svg/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..4584483607248aa5c847867c0ee6983ee662bcd0
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg/index.css
@@ -0,0 +1,288 @@
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.style1{
+/* width: 100%;*/
+/* height: 100%;*/
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 20px;
+ padding-right: 15px;
+ padding-bottom: 5px;
+ margin-left: 10px;
+ margin-top: 20px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 50px;
+ height: 20px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+
+}
+
+.style3{
+/* width: 100%;*/
+ height:150px;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+/* width: 60%;*/
+/* height: 5%;*/
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.style5{
+/* width: 50%;*/
+/* height: 30px;*/
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+/* width: 70px;*/
+/* height: 30px;*/
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1.5;
+}
+
+/*#prop1 {*/
+/* margin: 5px;*/
+/*}*/
+
+/*.prop2 {*/
+/* color: #343524;*/
+/* stroke-width: 15px;*/
+/* margin: 5px;*/
+/*}*/
+/*.prop3{*/
+/* color: #679855;*/
+/* stroke-width: 15px;*/
+/* margin: 5px;*/
+/*}*/
+
+/*.prop4 {*/
+/* color: #456345;*/
+/* stroke-width: 25px;*/
+/* margin: 5px;*/
+/*}*/
+
+/*.prop5 {*/
+/* color: #831834;*/
+/* stroke-width: 40px;*/
+/* margin: 5px;*/
+/* height: 70px;*/
+/*}*/
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ background-color: #72ac33;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ stroke-width: 30px;
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ stroke-width: 30px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ color: #321124;
+ stroke-width: 30px;
+ margin: 5px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+/* color: #978666;*/
+/* stroke-width: 30px;*/
+ margin: 5px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.hml b/ace/ace_standard/src/main/js/default/pages/svg/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..e6409e5b3288ab92c7ee0f7250ac9a4d8b9df6ea
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg/index.hml
@@ -0,0 +1,228 @@
+
+
+
+ 通用样式
+
+
+ svg通用样式1
+
+
+
+
+
+
+ svg通用样式2
+
+
+
+
+
+
+ svg通用样式3
+
+
+
+
+
+ svg通用样式4
+
+
+
+
+
+ svg通用样式5
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ svg通用属性1
+
+
+
+
+
+
+
+ svg通用属性2
+
+
+
+
+
+
+
+ svg通用属性3
+
+
+
+
+
+
+
+
+ svg特有属性4
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ svg动画样式1
+
+
+
+
+
+ svg动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ svg渐变样式1
+
+
+
+
+
+ svg渐变样式2
+
+
+
+
+
+ svg渐变样式3
+
+
+
+
+
+ svg渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ svg无障碍1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ svg多模输入1
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.js b/ace/ace_standard/src/main/js/default/pages/svg/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg/index.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+ data: {
+ title: ""
+ },
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element("prop1");
+ var name1 = prop1.dataSet.a
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.a
+ }
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/svg_text/index.css b/ace/ace_standard/src/main/js/default/pages/svg_text/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..a9d3a5a86a6c73d9d0f5bfd0b2edc0cba112e107
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg_text/index.css
@@ -0,0 +1,136 @@
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 2;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ background-color: #72ac33;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ stroke-width: 30px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ color: #321124;
+ background-color: #321124;
+ stroke-width: 30px;
+ margin: 5px;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+ background-color: #978666;
+ margin: 5px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/svg_text/index.hml b/ace/ace_standard/src/main/js/default/pages/svg_text/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..7449be8798ab22c943089ebe9804a73aa7293be1
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg_text/index.hml
@@ -0,0 +1,130 @@
+
+
+
+
+ 通用属性
+
+
+ svg_text通用属性1
+
+
+ x: 5% ; y: 20
+ dx: 10% ; dy: 10
+
+
+ svg_text通用属性2
+
+
+ rotate: 30
+ rotate: -30
+
+
+ svg_text通用属性3
+
+
+ font-size: 22px
+ fill: #00ff00
+
+
+ svg_text通用属性4
+
+
+ fill-opacity: 0.5
+ opacity: 0.7
+
+
+ svg_text通用属性5
+
+
+ stroke: black
+ stroke-width: 2
+ stroke-opacity: 0.5
+
+
+
+
+
+
+ 动画样式
+
+
+ svg_text动画样式1
+
+
+ svg_text
+
+
+ svg_text动画样式2
+
+
+ svg_text
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ svg_text渐变样式1
+
+
+ svg_text
+
+
+ svg_text渐变样式2
+
+
+ svg_text
+
+
+ svg_text渐变样式3
+
+
+ svg_text
+
+
+ svg_text渐变样式4
+
+
+ svg_text
+
+
+
+
+
+
+
+ 无障碍
+
+
+ svg_text无障碍1
+
+
+ svg_text
+
+
+
+
+
+
+
+ 多模输入
+
+
+ svg_text多模输入1
+
+
+ svg_text
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/svg_text/index.js b/ace/ace_standard/src/main/js/default/pages/svg_text/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..87eb2e4aa01893ea2e7816dc2c71ff94460b3415
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/svg_text/index.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element("prop1");
+ var name1 = prop1.dataSet.a
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.a
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/index.css b/ace/ace_standard/src/main/js/default/pages/switch/index.css
deleted file mode 100644
index 5bd7bb73ed2c153f39ce8de150c97b46a794535f..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/switch/index.css
+++ /dev/null
@@ -1,111 +0,0 @@
-.container {
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
-}
-
-switch{
- texton-color:#002aff;
- textoff-color:silver;
- text-padding:5px;
-}
-
-.switch1{
- text-color:red;
- font-size:20px;
- allow-scale:true;
- letter-spacing:5px;
- font-style:normal;
- font-weight:200;
- font-family:sans-serif;
- min-width: 25px;
- min-height: 10px;
- max-width: 600px;
- max-height: 50px;
- padding-left: 10px;
- padding-top: 5px;
- padding-right: 15px;
- padding-bottom: 5px;
- margin-left: 10px;
- margin-top: 3%;
- margin-right: 15px;
- margin-bottom: 3%;
- texton-color:red;
- textoff-color:blue;
-}
-
-.switch2{
- text-color:yellow;
- max-height: 50px;
- font-size:20px;
- allow-scale:false;
- letter-spacing:5px;
- font-style:italic;
- font-weight:300;
- font-family:sans-serif;
- margin: 3%;
- texton-color:yellow;
- textoff-color:aqua;
-}
-
-.switch3{
- text-color:beige;
- max-height: 50px;
- font-size:20px;
- allow-scale:true;
- letter-spacing:5px;
- font-style:normal;
- font-weight:200;
- font-family:sans-serif;
- margin: 3%;
-}
-
-.switch4{
- text-color:aqua;
- max-height: 50px;
- font-size:20px;
- allow-scale:false;
- letter-spacing:5px;
- font-style:italic;
- font-weight:200;
- font-family:sans-serif;
- margin: 3%;
-}
-
-.container1{
- height: 24%;
- flex-direction: column;
-}
-
-.switch5{
- text-color:saddlebrown;
- font-size:22px;
- allow-scale:true;
- letter-spacing:5px;
- font-style:normal;
- font-weight:300;
- font-family:sans-serif;
- margin: 3%;
-}
-
-.switch6{
- text-color:darkcyan;
- font-size:25px;
- allow-scale:false;
- letter-spacing:5px;
- font-style:italic;
- font-weight:200;
- font-family:sans-serif;
- margin-left: 8%;
-}
-
-.switch7 {
- text-color:navajowhite;
- font-size:30px;
- allow-scale:true;
- letter-spacing:10px;
- font-style:normal;
- font-weight:500;
- font-family:sans-serif;
- margin: 3%;
-}
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/index.hml b/ace/ace_standard/src/main/js/default/pages/switch/index.hml
deleted file mode 100644
index e497f0cd529f8a309c0ead29e741a26c015d9b20..0000000000000000000000000000000000000000
--- a/ace/ace_standard/src/main/js/default/pages/switch/index.hml
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/prop/index.css b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..b171d07a169edc8142e94c987205622372b9528a
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.css
@@ -0,0 +1,428 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.prop-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#idProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#f00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.classProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0f0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#classPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000e0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00f000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#refPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00000e;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000f00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000f0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#disabledPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#d00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00000f;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#ff0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#focusablePropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0d0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataProp {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0ff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dataPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00d000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropSmall {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00ff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropMedium {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000ff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropLarge {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#fff000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#clickEffectPropNone{
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000d00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropRtl {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0fff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropAuto {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00fff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropLtr {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000fff;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#dirPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0000d0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropNull {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#ffff00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropOne {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#00e000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#forPropThree {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#000e00;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#ifPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0ffff0;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropTrue {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#e00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropFalse {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#0e0000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+#showPropNone {
+ height: 15px;
+ margin-bottom: 2px;
+ background-color:#c00000;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+ padding-start: 10px;
+ padding-end: 10px;
+}
+
+.specific-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+#checkedTrue{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#checkedFalse{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#checkedNone{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#showTextTrue{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#showTextFalse{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#showTextNone{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#textOn{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#textOnNone{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#textOff{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+#textOffNone{
+ height: 40px;
+ margin-bottom: 20px;
+ width: 100%;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..29d5277145c8ab2f3f7f644f0e5f48f23f40c180
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.hml
@@ -0,0 +1,210 @@
+
+
+
+
+
+ switch通用属性
+
+
+
+ 通用属性 -- id
+
+
+
+
+
+ 通用属性 -- class
+
+
+
+
+
+
+
+ 通用属性 -- style
+
+
+
+
+
+ 通用属性 -- ref
+
+
+
+
+
+
+
+ 通用属性 -- disabled
+
+
+
+
+
+
+
+
+
+ 通用属性 -- focusable
+
+
+
+
+
+
+
+
+
+ 通用属性 -- data-*
+
+
+
+
+
+
+
+ 通用属性 -- click-effect
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性 -- dir
+
+
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- for
+
+
+
+
+
+
+
+
+
+ 渲染属性 -- if
+
+
+
+
+
+ 渲染属性 -- show
+
+
+
+
+
+
+
+
+
+
+
+
+
+ switch特有属性
+
+
+
+ 特有属性 -- checked
+
+
+
+
+
+
+
+
+
+ 特有属性 -- showtext
+
+
+
+
+
+
+
+
+
+ 特有属性 -- texton
+
+
+
+
+
+
+
+ 特有属性 -- textoff
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/prop/index.js b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..20fd2de35b59f3be25ad974c7a98dfd456ba592e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/switch/prop/index.js
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+export default {
+
+ data:{
+ listOne:[{}],
+ listThree:[{},{},{}],
+ idProp : null,
+ classProp : null,
+ classPropNone : null,
+ styleProp : null,
+ refProp : null,
+ refPropNone : null,
+ disabledPropTrue : null,
+ disabledPropFalse : null,
+ disabledPropNone : null,
+ focusablePropTrue : null,
+ focusablePropFalse : null,
+ focusablePropNone : null,
+ dataProp : null,
+ dataPropNone : null,
+ clickEffectPropSmall : null,
+ clickEffectPropMedium : null,
+ clickEffectPropLarge : null,
+ clickEffectPropNone : null,
+ dirPropRtl : null,
+ dirPropAuto : null,
+ dirPropLtr : null,
+ dirPropNone : null,
+ forPropNull : null,
+ forPropOne : null,
+ forPropThree : null,
+ ifPropTrue : null,
+ showPropTrue : null,
+ showPropFalse : null,
+ showPropNone : null,
+
+ checkedTrue : null,
+ checkedFalse : null,
+ checkedNone : null,
+ showTextTrue : null,
+ showTextFalse : null,
+ showTextNone : null,
+ textOn : null,
+ textOnNone : null,
+ textOff : null,
+ textOffNone : null
+ },
+ onShow(){
+ this.getCommonPropValues();
+ this.getSpecificPropValues();
+ globalThis.value = {
+ idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
+ styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
+ disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse,
+ disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue,
+ focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone,
+ dataProp : this.dataProp, dataPropNone : this.dataPropNone,
+ clickEffectPropSmall : this.clickEffectPropSmall,
+ clickEffectPropMedium : this.clickEffectPropMedium,
+ clickEffectPropLarge : this.clickEffectPropLarge,
+ clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl,
+ dirPropAuto : this.dirPropAuto,
+ dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull,
+ forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue,
+ showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse,
+ showPropNone : this.showPropNone,
+
+ checkedTrue : this.checkedTrue, checkedFalse : this.checkedFalse, checkedNone : this.checkedNone,
+ showTextTrue : this.showTextTrue, showTextFalse : this.showTextFalse, showTextNone : this.showTextNone,
+ textOn : this.textOn, textOnNone : this.textOnNone, textOff : this.textOff, textOffNone : this.textOffNone,
+ }
+ },
+ getCommonPropValues(){
+ this.idProp = this.$element("idProp").getInspector()
+ this.classProp = this.$element("classProp").getInspector()
+ this.classPropNone = this.$element("classPropNone").getInspector()
+ this.styleProp = this.$element("styleProp").getInspector()
+ this.refProp = this.$element("refProp").getInspector()
+ this.refPropNone = this.$element("refPropNone").getInspector()
+ this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
+ this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
+ this.disabledPropNone = this.$element("disabledPropNone").getInspector()
+ this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
+ this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
+ this.focusablePropNone = this.$element("focusablePropNone").getInspector()
+ this.dataProp = this.$element("dataProp").getInspector()
+ this.dataPropNone = this.$element("dataPropNone").getInspector()
+ this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
+ this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
+ this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
+ this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
+ this.dirPropRtl = this.$element("dirPropRtl").getInspector()
+ this.dirPropAuto = this.$element("dirPropAuto").getInspector()
+ this.dirPropLtr = this.$element("dirPropLtr").getInspector()
+ this.dirPropNone = this.$element("dirPropNone").getInspector()
+ this.forPropNull = this.$element("forPropNull").getInspector()
+ this.forPropOne = this.$element("forPropOne").getInspector()
+ this.forPropThree = this.$element("forPropThree").getInspector()
+ this.ifPropTrue = this.$element("ifPropTrue").getInspector()
+ this.showPropTrue = this.$element("showPropTrue").getInspector()
+ this.showPropFalse = this.$element("showPropFalse").getInspector()
+ this.showPropNone = this.$element("showPropNone").getInspector()
+ },
+ getSpecificPropValues(){
+ this.checkedTrue = this.$element("checkedTrue").getInspector()
+ this.checkedFalse = this.$element("checkedFalse").getInspector()
+ this.checkedNone = this.$element("checkedNone").getInspector()
+ this.showTextTrue = this.$element("showTextTrue").getInspector()
+ this.showTextFalse = this.$element("showTextFalse").getInspector()
+ this.showTextNone = this.$element("showTextNone").getInspector()
+ this.textOn = this.$element("textOn").getInspector()
+ this.textOnNone = this.$element("textOnNone").getInspector()
+ this.textOff = this.$element("textOff").getInspector()
+ this.textOffNone = this.$element("textOffNone").getInspector()
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/router/index.css b/ace/ace_standard/src/main/js/default/pages/switch/router/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..45c2216e7955972c6f21318aedde0680716456a1
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/switch/router/index.css
@@ -0,0 +1,408 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.style-container{
+ flex-direction: column;
+ height: 70%;
+}
+.contain1{
+ width: 100%;
+ height: 15%;
+ flex-direction: column;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 45%;
+ padding-left: 2px;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.function-container{
+ flex-direction: column;
+ height: 25%;
+}
+
+.gradient-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 15%;
+}
+
+.atom-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.multimode-container{
+ flex-direction: column;
+ height: 45%;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+.sub-title{
+ width: 100%;
+ height: 25px;
+ font-size: 15px;
+ text-align: left;
+ margin-bottom: 1px;
+ padding: 2px;
+}
+
+.style1{
+ width: 100%;
+ mask-color:red;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 50px;
+ padding-left: 10px;
+ padding-top: 1px;
+ padding-right: 15px;
+ padding-bottom: 1px;
+ margin-left: 10px;
+ margin-top: 0px;
+ margin-right: 15px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 70%;
+ height: 12%;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-basis: 10px;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 60%;
+ height: 5%;
+ padding: 1px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.style5{
+ width: 50%;
+ height: 30px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 70px;
+ height: 30px;
+ position: absolute;
+ left: 10px;
+ top: 35px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ height: 40px;
+ texton-color:sandybrown;
+ textoff-color:salmon;
+ text-padding:10px;
+ allow-scale:true;
+ font-style:normal;
+ font-family:sans-serif;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ background-color: navajowhite;
+}
+
+.style8 {
+ height: 40px;
+ margin-bottom: 5px;
+ margin-top: 5px;
+ texton-color:salmon;
+ textoff-color:sandybrown;
+ text-padding:5px;
+ allow-scale:false;
+ font-style:italic;
+ font-family:sans-serif;
+ background-color: sandybrown;
+}
+
+.event1{
+ width: 100%;
+ height: 40px;
+ background-color: salmon;
+}
+
+.event2{
+ width: 100%;
+ height: 40px;
+ background-color: darkorchid;
+}
+
+.event3{
+ width: 100%;
+ height: 40px;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+.event5{
+ width: 100%;
+ height: 40px;
+ background-color: blanchedalmond;
+}
+
+
+#prop1 {
+ background-color: mediumslateblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop2 {
+ background-color: salmon;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop4 {
+ background-color: skyblue;
+ height: 40px;
+ margin: 2px;
+}
+
+.prop5 {
+ background-color: gold;
+ height: 40px;
+ width: 100%;
+ margin: 2px;
+}
+
+
+.ani1{
+ color: #72ac33;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 100%;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient1{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ height: 40px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ margin: 5px;
+ height: 40px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access1{
+ color: #321124;
+ height: 40px;
+ margin: 5px;
+ background-color: chartreuse;
+}
+
+.atom1{
+ background-color: saddlebrown;
+ width: 40px;
+ height: 40px;
+}
+.atom2{
+ background-color: blueviolet;
+ width: 40px;
+ height: 40px;
+}
+.atom3{
+ background-color: aquamarine;
+ width: 40px;
+ height: 40px;
+}
+
+.multimode1{
+ background-color: firebrick;
+ height: 40px;
+ width: 100%;
+ margin: 5px;
+}
+
+
+.function1{
+ background-color: #ff0000;
+ width: 60%;
+ height: 30px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 60%;
+ height: 30px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 100%;
+ height: 30px;
+}
+
+.function4 {
+ flex-direction: row;
+ width: 60%;
+ height: 60px;
+ overflow: scroll;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/router/index.hml b/ace/ace_standard/src/main/js/default/pages/switch/router/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..c8962bd30019d60185ec5775d4ec58171a518a64
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/switch/router/index.hml
@@ -0,0 +1,358 @@
+
+
+
+
+
+
+
+ 通用样式
+
+
+
+ switch通用样式1
+
+
+
+
+
+ switch通用样式2
+
+
+
+
+
+ switch通用样式3
+
+
+
+
+
+ switch通用样式4
+
+
+
+
+
+ switch通用样式5
+
+
+
+
+
+
+
+
+
+ switch特有样式
+
+
+
+
+
+ switch特有样式
+
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+
+ switch动画样式1
+
+
+
+
+
+ switch动画样式2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ switch通用属性1
+
+
+
+
+
+ switch通用属性2
+
+
+
+
+
+ switch通用属性3
+
+
+
+
+
+ switch特有属性4
+
+
+
+
+
+ switch特有属性5
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+
+ switch通用事件1
+
+
+
+
+
+ switch通用事件2
+
+
+
+
+
+ switch通用事件3
+
+
+
+
+
+ switch特有事件1
+
+
+
+
+
+ switch特有事件2
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+
+ switch通用方法1
+
+
+
+
+
+ switch通用方法2
+
+
+
+
+
+ switch通用方法3
+
+
+
+
+
+ switch特有方法1
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+
+ switch渐变样式1
+
+
+
+
+
+ switch渐变样式2
+
+
+
+
+
+ switch渐变样式3
+
+
+
+
+
+ switch渐变样式4
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ switch无障碍1
+
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ switch原子布局1
+
+
+
+
+
+
+
+
+
+
+ switch原子布局2
+
+
+
+
+
+
+
+
+
+
+ switch原子布局3
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ switch多模输入1
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/router/index.js b/ace/ace_standard/src/main/js/default/pages/switch/router/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..ec5a73f60a119b9fd6f5af1db6f86749a1223bf6
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/switch/router/index.js
@@ -0,0 +1,505 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+export default {
+
+ data: {
+ title: 'World'
+ },
+ switchChange(e){
+ console.log(e.checked);
+ if(e.checked){
+ prompt.showToast({
+ message: "打开开关"
+ });
+ }else{
+ prompt.showToast({
+ message: "关闭开关"
+ });
+ }
+ },
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(event){
+ var function4 = this.$element('function4');
+ var scrollOffset = function4.getScrollOffset();
+ var x = scrollOffset.x;
+ var y = scrollOffset.y;
+ var message = 'x--' + x + ',y--' + y;
+ prompt.showToast({
+ message: 'functionTest4 scrollOffset:\n' + message
+ });
+
+ var scrollParam = {
+ dx:60,
+ dy:0,
+ smooth:true
+ }
+ function4.scrollBy(scrollParam)
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/style/index.css b/ace/ace_standard/src/main/js/default/pages/switch/style/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/style/index.hml b/ace/ace_standard/src/main/js/default/pages/switch/style/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ace/ace_standard/src/main/js/default/pages/switch/style/index.js b/ace/ace_standard/src/main/js/default/pages/switch/style/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4a45d3eb108b49649154e73122e0614943ed7f7e
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/switch/style/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/textPath/index.css b/ace/ace_standard/src/main/js/default/pages/textPath/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..6d86e3f7a430ef7e493b53488bfc7e1334e30bb0
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/textPath/index.css
@@ -0,0 +1,173 @@
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 2;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ color: #72ac33;
+ stroke-width: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+
+.ani2{
+ color: #ad4e2a;
+ stroke-width: 55px;
+ margin: 5px;
+ transform-origin: 2% 3%;
+ animation-name:ani2Go;
+ animation-delay:5s;
+ animation-duration:10s;
+ animation-iteration-count:4;
+ animation-timing-function:ease-out;
+ animation-direction:reverse;
+ animation-fill-mode:forwards;
+ animation-play-state:running;
+ transition:all 0 ease 0;
+}
+
+@keyframes ani2Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) translateZ(15px)
+ rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:translateX(30px) translateY(45px) translateZ(55px)
+ rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
+ }
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ stroke-width: 30px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+
+.access1{
+ background-color: #321124;
+ stroke-width: 30px;
+ margin: 5px;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+ background-color: #978666;
+ margin: 5px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/textPath/index.hml b/ace/ace_standard/src/main/js/default/pages/textPath/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..1ad329f55ecb794e6aabf57ffdde1cc49e91b5b0
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/textPath/index.hml
@@ -0,0 +1,199 @@
+
+
+
+
+ 通用属性
+
+
+ textPath通用属性1
+
+
+
+
+
+ textPath
+
+
+ textPath
+
+
+
+
+ textPath通用属性2
+
+
+
+
+
+ textPath
+
+
+ textPath
+
+
+ textPath
+
+
+
+
+
+ textPath通用属性3
+
+
+
+
+
+ textPath
+
+
+ textPath
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ textPath动画样式1
+
+
+
+
+ textPath
+
+
+ textPath
+
+
+
+
+ textPath动画样式2
+
+
+
+
+ textPath
+
+
+ textPath
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ textPath渐变样式1
+
+
+
+
+ textPath
+
+
+
+
+ textPath渐变样式2
+
+
+
+
+ textPath
+
+
+
+
+ textPath渐变样式3
+
+
+
+
+ textPath
+
+
+
+
+ textPath渐变样式4
+
+
+
+
+ textPath
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ textPath无障碍1
+
+
+
+
+ textPath
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ textPath多模输入1
+
+
+
+
+ textPath
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/span/index.js b/ace/ace_standard/src/main/js/default/pages/textPath/index.js
similarity index 99%
rename from ace/ace_standard/src/main/js/default/pages/span/index.js
rename to ace/ace_standard/src/main/js/default/pages/textPath/index.js
index 340173be1a6ec22fa90abccfc38e7ed7e99fc317..bb29005fc5c93670676d6debec44b80f964e4116 100644
--- a/ace/ace_standard/src/main/js/default/pages/span/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/textPath/index.js
@@ -15,4 +15,4 @@
export default {
-}
\ No newline at end of file
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/tspan/index.css b/ace/ace_standard/src/main/js/default/pages/tspan/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..ae4e406c73985e52b6ce575b41a00eb3e68e1311
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/tspan/index.css
@@ -0,0 +1,133 @@
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+
+.contain1{
+ width: 100%;
+ height: 70px;
+ flex-direction: column;
+}
+
+.prop-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 2;
+}
+
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.ani1{
+ background-color: #72ac33;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+ transform-origin: 0% 0%;
+ animation: ani1Go 3s infinite;
+}
+
+@keyframes ani1Go
+{
+ from {
+ background-color: #f76160;
+ opacity:0.3;
+ width:50px;
+ height: 50px;
+ transform:translate(20px) rotate(10deg) scale(0.2);
+ background-position:10% 10%
+ }
+ 30% {
+ background-color: #60f761;
+ opacity:0.5;
+ width:70px;
+ height: 70px;
+ background-position:12% 12%;
+ transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
+ }
+ to {
+ background-color: #6160f7;
+ opacity:1;
+ width:90px;
+ height: 90px;
+ background-position:22% 22%;
+ transform:rotate(180deg) scale(2)
+ }
+}
+
+.ani2{
+ background-color: #ad4e2a;
+ width: 55px;
+ height: 55px;
+ margin: 5px;
+}
+
+.gradient-container{
+ flex-direction: column;
+}
+
+.gradient1{
+ margin: 5px;
+ background: linear-gradient(red, #00ff00);
+}
+
+.gradient2{
+ margin: 5px;
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+}
+
+.gradient3{
+ margin: 5px;
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+}
+
+.gradient4{
+ stroke-width: 30px;
+ margin: 5px;
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+}
+
+.access-container{
+ flex-direction: column;
+}
+.access1{
+ background-color: #321124;
+ margin: 5px;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.multimode1{
+ margin: 5px;
+ background-color: #978666;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/tspan/index.hml b/ace/ace_standard/src/main/js/default/pages/tspan/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..9b6c3fa6747321b1e34bf5101de4278f6f59aee9
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/tspan/index.hml
@@ -0,0 +1,185 @@
+
+
+
+
+ 通用属性
+
+
+ tspan通用属性1
+
+
+
+
+ X: 0; Y: 60
+
+
+ dx: 10; dy: 40
+
+
+ font-size: 25px
+
+
+
+
+ tspan通用属性2
+
+
+
+
+ rotate: 30
+
+
+ rotate: -30
+
+
+ fill: red
+
+
+ fill: #ff00ff
+
+
+
+
+
+ tspan通用属性3
+
+
+
+
+ opacity: 0.5
+
+
+ fill-opacity: 0.8
+
+
+ stroke: red
+
+
+ stroke-width: 2
+
+
+ stroke-opacity: 0.5
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ tspan动画样式1
+
+
+
+
+ tspan
+
+
+
+
+ tspan动画样式2
+
+
+
+
+ tspan
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ tspan渐变样式1
+
+
+
+
+ tspan
+
+
+
+
+ tspan渐变样式2
+
+
+
+
+ tspan
+
+
+
+
+ tspan渐变样式3
+
+
+
+
+ tspan
+
+
+
+
+ tspan渐变样式4
+
+
+
+
+ tspan
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ tspan无障碍1
+
+
+
+
+ tspan
+
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ tspan多模输入1
+
+
+
+
+ tspan
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/tspan/index.js b/ace/ace_standard/src/main/js/default/pages/tspan/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..bb29005fc5c93670676d6debec44b80f964e4116
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/tspan/index.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+
+}
diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.css b/ace/ace_standard/src/main/js/default/pages/video/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..19cd84b30f2d2547b5cdc95259fd1884e3bd30c3
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/video/index.css
@@ -0,0 +1,376 @@
+/**
+ * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+ flex-direction:row;
+ width:100%;
+ height:100%;
+ padding: 1px;
+}
+
+.sub-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.title{
+ width: 100%;
+ height: 50px;
+ font-size: 18px;
+ margin: 2px;
+ padding: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+.title-style-2{
+ height: 30px;
+}
+
+.sub-title{
+ width: 100%;
+ height: 50px;
+ font-size: 14px;
+ text-align: left;
+ margin: 2px;
+ padding: 2px;
+}
+.sub-title-2{
+ height: 20px;
+}
+.sub-title-3{
+ font-size: 12px;
+}
+
+.style1{
+ width: 100%;
+ height: 100%;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 100px;
+ padding-left: 5px;
+ padding-top: 5px;
+ padding-right: 5px;
+ padding-bottom: 5px;
+ margin-left: 5px;
+ margin-top: 5px;
+ margin-right: 5px;
+ margin-bottom: 5px;
+ border-left-style: solid;
+ border-right-style: dashed;
+ border-top-style: dashed;
+ border-bottom-style: dotted;
+ border-left-width: 1px;
+ border-right-width: 2px;
+ border-top-width: 2px;
+ border-bottom-width: 1px;
+ border-left-color: #ff0000;
+ border-right-color: #00ff00;
+ border-top-color: #0000ff;
+ border-bottom-color: #fff000;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 15px;
+ border-top-left-radius: 8px;
+ border-top-right-radius: 12px;
+ background: linear-gradient(pink,#fff000);
+ box-shadow: 2px 4px 6px 8px #888888;
+ opacity: 0.5;
+ display: flex;
+ visibility: visible;
+ align-self: center;
+ image-fill: #000fff;
+ clip-path: margin-box;
+}
+
+.style2{
+ width: 300px;
+ height: 100px;
+ padding-start: 10px;
+ padding-end: 15px;
+ margin-start: 5px;
+ margin-end: 10px;
+ border-style: dotted;
+ border-width: 2px;
+ border-color:#000000;
+ border-radius:5px;
+ background-color:#ffaa00;
+ mask-image: url('common/images/icon.png');
+ mask-size: cover;
+ mask-position: center;
+}
+
+.style3{
+ width: 100%;
+ height: 100px;
+ padding: 10px;
+ margin: 5px;
+ border-left: 1px solid #000000;
+ border-right: 2px dashed #00ff00;
+ border-top: 1.5px dotted #0000ff;
+ border-bottom: 2.5px dotted #fff000;
+ background-image:url('common/images/image.png');
+ background-size:cover;
+ background-repeat: repeat-x;
+ background-position: center;
+ flex:1;
+ flex-grow: 2;
+ flex-shrink: 1;
+}
+
+.style4{
+ width: 100%;
+ height: 15%;
+ padding: 10px;
+ margin: 5px;
+ border: 2px solid #000000;
+}
+
+.contain1{
+ width: 100%;
+}
+
+.style5{
+ width: 90%;
+ height: 60px;
+ background-color: yellow;
+ border-image-source: url('/common/images/image.png');
+ border-image-slice: 1px 2px 3px 4px;
+ border-image-width: 2px 3px 4px 5px;
+ border-image-outset: 3px 4px 5px 6px;
+ border-image-repeat: repeat;
+}
+
+.style6{
+ width: 100px;
+ height: 70px;
+ position: absolute;
+ left: 10px;
+ top: 70px;
+ bottom: 5px;
+ right: 10px;
+ background-color: pink;
+ border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ width: 100px;
+ height: 100px;
+ border: 1px solid #000000;
+ object-fit: fill;
+}
+
+.color-primary {
+ background-color: mediumpurple;
+}
+
+.color-warning {
+ background-color: pink;
+}
+
+.color-success {
+ background-color: cornflowerblue;
+}
+
+.grid-child {
+ width: 100%;
+ border-radius: 2px;
+}
+
+.grid-left-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, purple);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 0;
+ grid-row-end: 0;
+ grid-column-end: 0;
+}
+
+.grid-left-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px solid plum;
+ background: linear-gradient(pink, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 1;
+ grid-column-start: 0;
+ grid-row-end: 1;
+ grid-column-end: 0;
+}
+
+.grid-right-top {
+ width: 20px;
+ height: 20px;
+ border-radius: 3px;
+ border: 1px dotted plum;
+ background: linear-gradient(mediumpurple, #00aaee);
+ box-shadow: 0px 0px 1px 1px pink;
+ grid-row-start: 0;
+ grid-column-start: 1;
+ grid-row-end: 0;
+ grid-column-end: 1;
+}
+
+.grid-right-bottom {
+ width: 20px;
+ height: 20px;
+ border-radius: 5px;
+ border: 1px dotted plum;
+ background: linear-gradient(pink, mediumpurple);
+ box-shadow: 0px 0px 2px 2px pink;
+ grid-row-start: 1;
+ grid-column-start: 1;
+ grid-row-end: 1;
+ grid-column-end: 1;
+}
+
+.event-container{
+ flex-direction: column;
+ flex-weight: 1;
+}
+
+.event1{
+ width: 90%;
+ flex-weight: 1;
+ background-color: yellow;
+}
+
+.event2{
+ width: 90%;
+ flex-weight: 1;
+ background-color: red;
+}
+
+.event3{
+ width: 90%;
+ flex-weight: 1;
+ background-color: #ad4e2a;
+}
+
+.event4{
+ flex-direction: row;
+ width: 90%;
+ flex-weight: 1;
+ overflow:scroll;
+}
+
+.event5{
+ flex-direction: column;
+ width: 100%;
+ height: 90px;
+ overflow:scroll;
+}
+
+.prop-container{
+ flex-direction: column;
+}
+
+#prop1 {
+ height: 20px;
+ background-color: mediumslateblue;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop2 {
+ height: 20px;
+ background-color: pink;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop3 {
+ height: 20px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop4 {
+ height: 50px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.prop5 {
+ height: 50px;
+ background-color: darkseagreen;
+ width: 100%;
+ margin: 5px;
+}
+
+.atom-container{
+ flex-direction: column;
+}
+
+.function-container{
+ flex-direction: column;
+}
+
+.function1{
+ background-color: #ff0000;
+ width: 90%;
+ height: 45px;
+}
+
+.function2{
+ background-color: #00ff00;
+ width: 90%;
+ height: 45px;
+}
+
+.function3{
+ background-color: #0000ff;
+ width: 90%;
+ height: 45px;
+}
+
+.function4{
+ flex-direction: row;
+ width: 90%;
+ height: 45px;
+}
+
+.function5{
+ flex-direction: row;
+ width: 90%;
+ height: 45px;
+}
+.function6{
+ flex-direction: row;
+ width: 90%;
+ height: 45px;
+}
+.function7{
+ flex-direction: row;
+ width: 90%;
+ height: 45px;
+}
+.function8{
+ flex-direction: row;
+ width: 90%;
+ height: 45px;
+}
+.function9{
+ flex-direction: row;
+ width: 90%;
+ height: 45px;
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.hml b/ace/ace_standard/src/main/js/default/pages/video/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..7a3b0aa7df79d565ca2ed791c12128e0478f63b0
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/video/index.hml
@@ -0,0 +1,183 @@
+
+
+
+ 通用样式
+
+
+ video通用样式1
+
+
+
+
+ video通用样式2
+
+
+
+
+ video通用样式3
+
+
+
+
+ video通用样式4
+
+
+
+
+ div通用样式5
+
+
+
+
+
+
+
+
+ video特有样式
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ video通用属性1
+
+
+
+
+ video通用属性2
+
+
+
+
+ video通用属性3
+
+
+
+
+ video特有属性
+
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ video通用事件1
+
+
+
+
+ video通用事件2
+
+
+
+
+ video通用事件3
+
+
+
+
+ video特有事件1
+
+
+
+
+
+
+
+
+
+
+
+
+ 特有方法
+
+
+ video特有方法1
+
+
+
+
+ video特有方法2
+
+
+
+
+ video特有方法3
+
+
+
+
+ video特有方法4
+
+
+
+
+ video特有方法5
+
+
+
+
+ video特有方法6
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ video通用方法1
+
+
+
+
+ div通用方法2
+
+
+
+
+ div通用方法3
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.js b/ace/ace_standard/src/main/js/default/pages/video/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8a9bb9ebed3e961064ffe44f3410e5cb231b0af
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/video/index.js
@@ -0,0 +1,610 @@
+// @ts-nocheck
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+
+var options = {
+ duration: 1500,
+ easing: 'friction',
+ delay: 100,
+ fill: 'forwards',
+ iterations: 2,
+ direction: 'normal',
+};
+var frames = [
+ {
+ transform: {
+ translate: '-120px',
+ rotate:'10deg',
+ scale:0.2,
+ skew:'40deg'
+ },
+ opacity: 0.1,
+ offset: 0.0,
+ width: '40%',
+ height:'20px',
+ backgroundColor:'#ff0000',
+ backgroundPosition:'10px 20px',
+ transformOrigin:'left top'
+ },
+ {
+ transform: {
+ translateX: '0px',
+ translateY: '5px',
+ rotateX:'10deg',
+ rotateY:'10deg',
+ scaleX:0.5,
+ scaleY:0.7,
+ skewX:'22deg',
+ skewY:'30deg'
+ },
+ opacity: 0.6,
+ offset: 2.0,
+ width: '60%',
+ height:'30px',
+ backgroundColor:'#ff00ff',
+ backgroundPosition:'15px 25px',
+ transformOrigin:'center top'
+ },
+ {
+ transform: {
+ translateX: '100px',
+ translateY: '0px',
+ translateZ: '20px',
+ rotateX:'0deg',
+ rotateY:'0deg',
+ rotateZ:'30deg',
+ scaleX:1,
+ scaleY:1,
+ scaleZ:2,
+ skewX:'0',
+ skewY:'0',
+ skewZ:'30deg'
+ },
+ opacity: 1,
+ offset: 0.0,
+ width: '100%',
+ height:'30px',
+ backgroundColor:'#ffff00',
+ backgroundPosition:'0px',
+ transformOrigin:'center center'
+ },
+];
+
+export default {
+
+ onShow(){
+ // 通用属性
+ var prop1 = this.$element('prop1');
+ var name1 = prop1.dataSet.name
+ var prop2 = this.$refs.prop2;
+ var name2 = prop2.dataSet.name
+ prompt.showToast({
+ message: 'prop1--' + name1 + '\nprop2--' + name2
+ });
+
+ var styleValues = this.getStyleValues();
+ var propsValues = this.getPropValues();
+
+ globalThis.value = {
+ styleValues:styleValues,
+ propsValues:propsValues
+ }
+ },
+
+ getStyleValues(){
+ var styleValue1 = this.$element("style1").getInspector()
+ var styleValue2 = this.$element("style2").getInspector()
+ var styleValue3 = this.$element("style3").getInspector()
+ var styleValue4 = this.$element("style4").getInspector()
+ var styleValue5 = this.$element("style5").getInspector()
+ var styleValue6 = this.$element("style6").getInspector()
+ var styleValue7 = this.$element("style7").getInspector()
+
+ return {
+ style1:styleValue1,
+ style2:styleValue2,
+ style3:styleValue3,
+ style4:styleValue4,
+ style5:styleValue5,
+ style6:styleValue6,
+ style7:styleValue7
+ }
+ },
+
+ getPropValues(){
+ var propValue1 = this.$element("prop1").getInspector()
+ var propValue2 = this.$element("prop2").getInspector()
+ var propValue3 = this.$element("prop3").getInspector()
+
+ return {
+ prop1:propValue1,
+ prop2:propValue2,
+ prop3:propValue3
+ }
+ },
+
+ touchStart(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchstart:\n' + message
+ });
+ },
+
+ touchMove(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchMove:\n' +message
+ });
+ },
+
+ touchEnd(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchEnd:\n' +message
+ });
+ },
+
+ touchCancel(event){
+ var globalX = event.touches[0].globalX
+ var globalY = event.touches[0].globalY
+ var localX = event.touches[0].localX
+ var localY = event.touches[0].localY
+ var size = event.touches[0].size
+ var force = event.touches[0].force
+ var changeGlobalX = event.changedTouches[0].globalX
+ var changeGlobalY = event.changedTouches[0].globalY
+ var changeLocalX = event.changedTouches[0].localX
+ var changeLocalY = event.changedTouches[0].localY
+ var changeSize = event.changedTouches[0].size
+ var changeForce = event.changedTouches[0].force
+ var message = 'globalX--' + globalX + ',globalY--' + globalY +
+ ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
+ ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
+ ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
+ ',changeSize--' + changeSize + ',changeForce--' + changeForce;
+ prompt.showToast({
+ message: 'touchCancel:\n' +message
+ });
+ },
+
+ click(){
+ prompt.showToast({
+ message: 'click'
+ });
+ },
+
+ doubleClick(){
+ prompt.showToast({
+ message: 'doubleClick'
+ });
+ },
+
+ longPress(){
+ prompt.showToast({
+ message: 'longPress'
+ });
+ },
+
+ focus(){
+ prompt.showToast({
+ message: 'focus'
+ });
+ },
+
+ blur(){
+ prompt.showToast({
+ message: 'blur'
+ });
+ },
+
+ key(event){
+ var code = event.code;
+ var action = event.action;
+ var repeatCount = event.repeatCount;
+ var timestampStart = event.timestampStart;
+ var message = 'code--' + code + ',action--' + action +
+ ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
+ prompt.showToast({
+ message: 'key:\n' + message
+ });
+ },
+
+ swipe(event){
+ var direction = event.direction;
+ var distance = event.distance;
+ var message = 'direction--' + direction + ',distance--' + distance;
+ prompt.showToast({
+ message: 'swipe:\n' + message
+ });
+ },
+
+ attached(){
+ prompt.showToast({
+ message: 'attached'
+ });
+ },
+
+ detached(){
+ prompt.showToast({
+ message: 'detached'
+ });
+ },
+
+ pinchStart(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchStart:\n' + message
+ });
+ },
+
+ pinchUpdate(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchEnd(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchUpdate:\n' + message
+ });
+ },
+
+ pinchCancel(event){
+ var scale = event.scale
+ var pinchCenterX = event.pinchCenterX
+ var pinchCenterY = event.pinchCenterY
+ var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
+ ',pinchCenterY--' + pinchCenterY;
+ prompt.showToast({
+ message: 'pinchCancel:\n' + message
+ });
+ },
+
+ dragStart(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragStart:\n' + message
+ });
+ },
+
+ drag(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drag:\n' + message
+ });
+ },
+
+ dragEnd(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnd:\n' + message
+ });
+ },
+
+ dragEnter(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragEnter:\n' + message
+ });
+ },
+
+ dragOver(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragOver:\n' + message
+ });
+ },
+
+ dragLeave(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'dragLeave:\n' + message
+ });
+ },
+
+ drop(event){
+ var type = event.type
+ var globalX = event.globalX
+ var globalY = event.globalY
+ var timestamp = event.timestamp
+ var message = 'type--' + type + ',globalX--' + globalX +
+ ',globalY--' + globalY + ',timestamp--' + timestamp;
+ prompt.showToast({
+ message: 'drop:\n' + message
+ });
+ },
+
+ functionTest1(event){
+ var function1 = this.$element('function1');
+ function1.focus(true)
+ var rect = function1.getBoundingClientRect();
+ var width = rect.width;
+ var height = rect.height;
+ var left = rect.left;
+ var top = rect.top;
+ var message = 'width--' + width + ',height--' + height +
+ ',left--' + left + ',top--' + top;
+ prompt.showToast({
+ message: 'function1 rect:\n' + message
+ });
+ },
+
+ functionTest2(event){
+ var function2 = this.$element('function2');
+ let observer = function2.createIntersectionObserver({
+ ratios: [0.2, 0], // number
+ });
+ observer.observe((isVisible, ratio)=> {
+ console.info('this element is ' + isVisible + 'ratio is ' + ratio)
+ prompt.showToast({
+ message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
+ });
+ })
+
+ observer.unobserve()
+ },
+
+ functionTest3(event){
+ var function3 = this.$element('function3');
+
+ var animation = function3.animate(frames, options);
+ animation.play()
+ animation.onfinish = function(){
+ prompt.showToast({
+ message: 'The animation is finished.'
+ });
+ };
+
+ animation.oncancel = function(){
+ prompt.showToast({
+ message: 'The animation is canceled.'
+ });
+ };
+
+ animation.onrepeat = function(){
+ prompt.showToast({
+ message: 'The animation is repeated.'
+ });
+ };
+
+ setTimeout(() => {
+ animation.reverse()
+ }, 500)
+
+ setTimeout(() => {
+ animation.pause()
+ }, 1000)
+
+ setTimeout(() => {
+ animation.cancel()
+ }, 1500)
+ },
+
+ functionTest4(){
+ var function4 = this.$element('function4');
+ function4.start();
+ prompt.showToast({
+ message: 'function4 video start.'
+ });
+ },
+ functionTest5(){
+ var function5 = this.$element('function5');
+ function5.pause();
+ prompt.showToast({
+ message: 'function5 video pause.'
+ })
+ },
+ functionTest6(){
+ var function6 = this.$element('function6');
+ function6.setCurrentTime({
+ currenttime: 2
+ });
+ prompt.showToast({
+ message: 'function6 video setCurrentTime.'
+ })
+ },
+ functionTest7(){
+ var function7 = this.$element('function7');
+ function7.requestFullscreen({
+ screenOrientation : "default"
+ });
+ prompt.showToast({
+ message: 'function7 video requestFullscreen.'
+ })
+
+ },
+ functionTest8(){
+ var function8 = this.$element('function8');
+ function8.exitFullscreen();
+ prompt.showToast({
+ message: 'function8 video exitFullscreen.'
+ })
+ },
+ functionTest9(){
+ var function9 = this.$element('function9');
+ function9.stop();
+ prompt.showToast({
+ message: 'function9 video stop.'
+ })
+ },
+
+ reachStart(){
+ prompt.showToast({
+ message: 'reachStart'
+ });
+ },
+
+ reachEnd(){
+ prompt.showToast({
+ message: 'reachEnd'
+ });
+ },
+
+ reachTop(){
+ prompt.showToast({
+ message: 'reachTop'
+ });
+ },
+
+ reachBottom(){
+ prompt.showToast({
+ message: 'reachBottom'
+ });
+ },
+ prepared() {
+ prompt.showToast({
+ message: 'prepared'
+ });
+ },
+ start() {
+ prompt.showToast({
+ message: 'start'
+ });
+ },
+ pause() {
+ prompt.showToast({
+ message: 'pause'
+ });
+ },
+ finish() {
+ prompt.showToast({
+ message: 'finish'
+ });
+ },
+ error() {
+ prompt.showToast({
+ message: 'error'
+ });
+ },
+ seeking() {
+ prompt.showToast({
+ message: 'seeking'
+ });
+ },
+ seeked() {
+ prompt.showToast({
+ message: 'seeked'
+ });
+ },
+ timeupdate() {
+ prompt.showToast({
+ message: 'timeupdate'
+ });
+ },
+ fullscreenchange() {
+ prompt.showToast({
+ message: 'fullscreenchange'
+ });
+ },
+ stop() {
+ prompt.showToast({
+ message: 'stop'
+ });
+ }
+}
diff --git a/ace/ace_standard/src/main/js/default/test/List.test.js b/ace/ace_standard/src/main/js/default/test/List.test.js
index b5203caf24c71cea4a41685282145f3900f2319a..25e919a152fc105c09786a93d6cbb8bf5ac6ba65 100755
--- a/ace/ace_standard/src/main/js/default/test/List.test.js
+++ b/ace/ace_standard/src/main/js/default/test/List.test.js
@@ -16,3 +16,11 @@
require('./basicabilityapi.test.js')
require('./mediaquery.test.js')
require('./commonComponentJsApi.test.js')
+require('./divProps.test.js')
+require('./buttonProps.test.js')
+require('./chartProps.test.js')
+require('./imageProps.test.js')
+require('./spanProps.test.js')
+require('./menuProps.test.js')
+require('./switchProps.test.js')
+
diff --git a/ace/ace_standard/src/main/js/default/test/buttonProps.test.js b/ace/ace_standard/src/main/js/default/test/buttonProps.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..2af88600eac0946acafdf608240451da0a6efab2
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/buttonProps.test.js
@@ -0,0 +1,986 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router';
+import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index';
+
+
+describe('buttonPropsJsTest', function () {
+
+ async function sleep(time) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve()
+ }, time)
+ }).then(() => {
+ console.info(`sleep ${time} over...`)
+ })
+ }
+ async function backToIndex() {
+ let backToIndexPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.back({
+ uri: 'pages/index/index'
+ });
+ resolve();
+ }, 500);
+ });
+ let clearPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.clear();
+ resolve();
+ }, 500);
+ });
+ await backToIndexPromise.then(() => {
+ return clearPromise;
+ });
+ }
+
+ /**
+ * run before testcase
+ */
+ beforeAll(async function (done) {
+ console.info('[buttonPropsJsTest] before each called')
+
+ let result;
+ let options = {
+ uri: 'pages/button/prop/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push buttonProps page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push buttonProps page error " + JSON.stringify(result));
+ }
+ await sleep(4000)
+ done()
+ });
+
+ /**
+ * run after testcase
+ */
+ afterAll(async function () {
+ console.info('[buttonPropsJsTest] after each called')
+ await backToIndex();
+ await sleep(1000)
+ });
+
+ // 通用属性
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonIdProp
+ * @tc.desc ACE
+ */
+ it('testButtonIdProp', 0, async function (done) {
+ console.info('testButtonIdProp START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.idProp);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('idProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonClassProp
+ * @tc.desc ACE
+ */
+ it('testButtonClassProp', 0, async function (done) {
+ console.info('testButtonClassProp START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classProp);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('classProp')
+ expect(obj.$attrs.className).assertEqual('classProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonClassPropNone
+ * @tc.desc ACE
+ */
+ it('testButtonClassPropNone', 0, async function (done) {
+ console.info('testButtonClassPropNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classPropNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('classPropNone')
+ expect(obj.$attrs.className).assertEqual(undefined)
+ console.info("[buttonProps] get className value is: " + JSON.stringify(obj.$attrs.className));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonRefProp
+ * @tc.desc ACE
+ */
+ it('testButtonRefProp', 0, async function (done) {
+ console.info('testButtonRefProp START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refProp);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('refProp')
+ expect(obj.$attrs.ref).assertEqual('refProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonRefPropNone
+ * @tc.desc ACE
+ */
+ it('testButtonRefPropNone', 0, async function (done) {
+ console.info('testButtonRefPropNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refPropNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('refPropNone')
+ expect(obj.$attrs.ref).assertEqual(undefined)
+ console.info("[buttonProps] get ref value is: " + JSON.stringify(obj.$attrs.ref));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonDisabledPropTrue
+ * @tc.desc ACE
+ */
+ it('testButtonDisabledPropTrue', 0, async function (done) {
+ console.info('testButtonDisabledPropTrue START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropTrue);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('disabledPropTrue')
+ expect(obj.$attrs.disabled).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonDisabledPropFalse
+ * @tc.desc ACE
+ */
+ it('testButtonDisabledPropFalse', 0, async function (done) {
+ console.info('testButtonDisabledPropFalse START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropFalse);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('disabledPropFalse')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonDisabledPropNone
+ * @tc.desc ACE
+ */
+ it('testButtonDisabledPropNone', 0, async function (done) {
+ console.info('testButtonDisabledPropNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('disabledPropNone')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonFocusablePropTrue
+ * @tc.desc ACE
+ */
+ it('testButtonFocusablePropTrue', 0, async function (done) {
+ console.info('testButtonFocusablePropTrue START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropTrue);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('focusablePropTrue')
+ expect(obj.$attrs.focusable).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonFocusablePropFalse
+ * @tc.desc ACE
+ */
+ it('testButtonFocusablePropFalse', 0, async function (done) {
+ console.info('testButtonFocusablePropFalse START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropFalse);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('focusablePropFalse')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonFocusablePropNone
+ * @tc.desc ACE
+ */
+ it('testButtonFocusablePropNone', 0, async function (done) {
+ console.info('testButtonFocusablePropNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('focusablePropNone')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonDataProp
+ * @tc.desc ACE
+ */
+ it('testButtonDataProp', 0, async function (done) {
+ console.info('testButtonDataProp START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataProp);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('dataProp')
+ expect(obj.$attrs.dataButton).assertEqual(undefined);
+ console.info("[buttonProps] get dataButton value is: " + JSON.stringify(obj.$attrs.dataButton));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonDataPropNone
+ * @tc.desc ACE
+ */
+ it('testButtonDataPropNone', 0, async function (done) {
+ console.info('testButtonDataPropNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataPropNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('dataPropNone')
+ expect(obj.$attrs.dataButton).assertEqual(undefined)
+ console.info("[buttonProps] get dataButton value is: " + JSON.stringify(obj.$attrs.dataButton));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonClickEffectPropSmall
+ * @tc.desc ACE
+ */
+ it('testButtonClickEffectPropSmall', 0, async function (done) {
+ console.info('testButtonClickEffectPropSmall START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropSmall);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropSmall')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-small')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonClickEffectPropMedium
+ * @tc.desc ACE
+ */
+ it('testButtonClickEffectPropMedium', 0, async function (done) {
+ console.info('testButtonClickEffectPropMedium START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropMedium);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropMedium')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-medium')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonClickEffectPropLarge
+ * @tc.desc ACE
+ */
+ it('testButtonClickEffectPropLarge', 0, async function (done) {
+ console.info('testButtonClickEffectPropLarge START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropLarge);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropLarge')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-large')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonClickEffectPropNone
+ * @tc.desc ACE
+ */
+ it('testButtonClickEffectPropNone', 0, async function (done) {
+ console.info('testButtonClickEffectPropNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropNone')
+ expect(obj.$attrs.clickEffect).assertEqual(undefined)
+ console.info("[buttonProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonDirPropRtl
+ * @tc.desc ACE
+ */
+ it('testButtonDirPropRtl', 0, async function (done) {
+ console.info('testButtonDirPropRtl START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropRtl);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('dirPropRtl')
+ expect(obj.$attrs.dir).assertEqual('rtl')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonDirPropLtr
+ * @tc.desc ACE
+ */
+ it('testButtonDirPropLtr', 0, async function (done) {
+ console.info('testButtonDirPropLtr START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropLtr);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('dirPropLtr')
+ expect(obj.$attrs.dir).assertEqual('ltr')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonDirPropAuto
+ * @tc.desc ACE
+ */
+ it('testButtonDirPropAuto', 0, async function (done) {
+ console.info('testButtonDirPropAuto START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropAuto);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('dirPropAuto')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonDirPropNone
+ * @tc.desc ACE
+ */
+ it('testButtonDirPropNone', 0, async function (done) {
+ console.info('testButtonDirPropNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('dirPropNone')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonForPropNull
+ * @tc.desc ACE
+ */
+ it('testButtonForPropNull', 0, async function (done) {
+ console.info('testButtonForPropNull START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropNull);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('forPropNull')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonForPropOne
+ * @tc.desc ACE
+ */
+ it('testButtonForPropOne', 0, async function (done) {
+ console.info('testButtonForPropOne START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropOne);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('forPropOne')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonForPropThree
+ * @tc.desc ACE
+ */
+ it('testButtonForPropThree', 0, async function (done) {
+ console.info('testButtonForPropThree START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropThree);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('forPropThree')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonIfPropTrue
+ * @tc.desc ACE
+ */
+ it('testButtonIfPropTrue', 0, async function (done) {
+ console.info('testButtonIfPropTrue START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.ifPropTrue);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('ifPropTrue')
+ expect(obj.$attrs.if).assertEqual(undefined)
+ console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.if));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonShowPropTrue
+ * @tc.desc ACE
+ */
+ it('testButtonShowPropTrue', 0, async function (done) {
+ console.info('testButtonShowPropTrue START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropTrue);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('showPropTrue')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[buttonProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonShowPropFalse
+ * @tc.desc ACE
+ */
+ it('testButtonShowPropFalse', 0, async function (done) {
+ console.info('testButtonShowPropFalse START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropFalse);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('showPropFalse')
+ expect(obj.$attrs.show).assertEqual('false')
+ console.info("[buttonProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonShowPropNone
+ * @tc.desc ACE
+ */
+ it('testButtonShowPropNone', 0, async function (done) {
+ console.info('testButtonShowPropNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('showPropNone')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[buttonProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ // 特有属性
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonTypeArc
+ * @tc.desc ACE
+ */
+ it('testButtonTypeArc', 0, async function (done) {
+ console.info('testButtonTypeArc START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeArc);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('typeArc')
+ expect(obj.$attrs.type).assertEqual('arc')
+ console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonTypeCapsule
+ * @tc.desc ACE
+ */
+ it('testButtonTypeCapsule', 0, async function (done) {
+ console.info('testButtonTypeCapsule START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeCapsule);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('typeCapsule')
+ expect(obj.$attrs.type).assertEqual('capsule')
+ console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonTypeCircle
+ * @tc.desc ACE
+ */
+ it('testButtonTypeCircle', 0, async function (done) {
+ console.info('testButtonTypeCircle START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeCircle);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('typeCircle')
+ expect(obj.$attrs.type).assertEqual('circle')
+ console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonTypeText
+ * @tc.desc ACE
+ */
+ it('testButtonTypeText', 0, async function (done) {
+ console.info('testButtonTypeText START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeText);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('typeText')
+ expect(obj.$attrs.type).assertEqual('text')
+ console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonTypeDownload
+ * @tc.desc ACE
+ */
+ it('testButtonTypeDownload', 0, async function (done) {
+ console.info('testButtonTypeDownload START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeDownload);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('typeDownload')
+ expect(obj.$attrs.type).assertEqual('download')
+ console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonTypeNone
+ * @tc.desc ACE
+ */
+ it('testButtonTypeNone', 0, async function (done) {
+ console.info('testButtonTypeNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('typeNone')
+ expect(obj.$attrs.type).assertEqual('capsule')
+ console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonValue
+ * @tc.desc ACE
+ */
+ it('testButtonValue', 0, async function (done) {
+ console.info('testButtonValue START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.value);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('value')
+ expect(obj.$attrs.value).assertEqual('按钮')
+ console.info("[buttonProps] get value value is: " + JSON.stringify(obj.$attrs.value));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonValueNone
+ * @tc.desc ACE
+ */
+ it('testButtonValueNone', 0, async function (done) {
+ console.info('testButtonValueNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.valueNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('valueNone')
+ expect(obj.$attrs.value).assertEqual(undefined)
+ console.info("[buttonProps] get value value is: " + JSON.stringify(obj.$attrs.value));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonIcon
+ * @tc.desc ACE
+ */
+ it('testButtonIcon', 0, async function (done) {
+ console.info('testButtonIcon START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.icon);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('icon')
+ expect(obj.$attrs.icon).assertEqual('common/images/image.png')
+ console.info("[buttonProps] get icon value is: " + JSON.stringify(obj.$attrs.icon));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonIconNone
+ * @tc.desc ACE
+ */
+ it('testButtonIconNone', 0, async function (done) {
+ console.info('testButtonIconNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.iconNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('iconNone')
+ expect(obj.$attrs.icon).assertEqual(undefined)
+ console.info("[buttonProps] get icon value is: " + JSON.stringify(obj.$attrs.icon));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonPlacementStart
+ * @tc.desc ACE
+ */
+ it('testButtonPlacementStart', 0, async function (done) {
+ console.info('testButtonPlacementStart START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.placementStart);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('placementStart')
+ expect(obj.$attrs.placement).assertEqual('start')
+ console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonPlacementEnd
+ * @tc.desc ACE
+ */
+ it('testButtonPlacementEnd', 0, async function (done) {
+ console.info('testButtonPlacementEnd START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.placementEnd);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('placementEnd')
+ expect(obj.$attrs.placement).assertEqual('end')
+ console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonPlacementTop
+ * @tc.desc ACE
+ */
+ it('testButtonPlacementTop', 0, async function (done) {
+ console.info('testButtonPlacementTop START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.placementTop);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('placementTop')
+ expect(obj.$attrs.placement).assertEqual('top')
+ console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonPlacementBottom
+ * @tc.desc ACE
+ */
+ it('testButtonPlacementBottom', 0, async function (done) {
+ console.info('testButtonPlacementBottom START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.placementBottom);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('placementBottom')
+ expect(obj.$attrs.placement).assertEqual('bottom')
+ console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonPlacementNone
+ * @tc.desc ACE
+ */
+ it('testButtonPlacementNone', 0, async function (done) {
+ console.info('testButtonPlacementNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.placementNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('placementNone')
+ expect(obj.$attrs.placement).assertEqual('end')
+ console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonWaitingTrue
+ * @tc.desc ACE
+ */
+ it('testButtonWaitingTrue', 0, async function (done) {
+ console.info('testButtonWaitingTrue START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.waitingTrue);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('waitingTrue')
+ expect(obj.$attrs.waiting).assertEqual('true')
+ console.info("[buttonProps] get waiting value is: " + JSON.stringify(obj.$attrs.waiting));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonWaitingFalse
+ * @tc.desc ACE
+ */
+ it('testButtonWaitingFalse', 0, async function (done) {
+ console.info('testButtonWaitingFalse START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.waitingFalse);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('waitingFalse')
+ expect(obj.$attrs.waiting).assertEqual('false')
+ console.info("[buttonProps] get waiting value is: " + JSON.stringify(obj.$attrs.waiting));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testButtonWaitingNone
+ * @tc.desc ACE
+ */
+ it('testButtonWaitingNone', 0, async function (done) {
+ console.info('testButtonWaitingNone START');
+ console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.waitingNone);
+ console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('button')
+ expect(obj.$attrs.id).assertEqual('waitingNone')
+ expect(obj.$attrs.waiting).assertEqual('false')
+ console.info("[buttonProps] get waiting value is: " + JSON.stringify(obj.$attrs.waiting));
+ done();
+ });
+});
diff --git a/ace/ace_standard/src/main/js/default/test/chartProps.test.js b/ace/ace_standard/src/main/js/default/test/chartProps.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..0e74c4ecd659fa6319324a5f7e8be7c62cd45d56
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/chartProps.test.js
@@ -0,0 +1,999 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router';
+import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index';
+
+
+describe('chartPropsJsTest', function () {
+
+ async function sleep(time) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve()
+ }, time)
+ }).then(() => {
+ console.info(`sleep ${time} over...`)
+ })
+ };
+ async function backToIndex() {
+ let backToIndexPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.back({
+ uri: 'pages/index/index'
+ });
+ resolve();
+ }, 500);
+ });
+ let clearPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.clear();
+ resolve();
+ }, 500);
+ });
+ await backToIndexPromise.then(() => {
+ return clearPromise;
+ });
+ }
+
+ /**
+ * run before testcase
+ */
+ beforeAll(async function (done) {
+ console.info('[chartPropsJsTest] before each called')
+
+ let result;
+ let options = {
+ uri: 'pages/chart/prop/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push chartProps page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push chartProps page error " + JSON.stringify(result));
+ }
+ await sleep(4000)
+ done()
+ });
+
+ /**
+ * run after testcase
+ */
+ afterAll(async function () {
+ console.info('[chartPropsJsTest] after each called')
+ await backToIndex();
+ await sleep(1000)
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartIdProp
+ * @tc.desc ACE
+ */
+ it('testChartIdProp', 0, async function (done) {
+ console.info('testChartIdProp START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.idProp);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('idProp')
+ done();
+ });
+
+ it('testChartClassProp', 0, async function (done) {
+ console.info('testChartClassProp START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classProp);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('classProp')
+ expect(obj.$attrs.className).assertEqual('classProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartClassPropNone
+ * @tc.desc ACE
+ */
+ it('testChartClassPropNone', 0, async function (done) {
+ console.info('testChartClassPropNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classPropNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('classPropNone')
+ expect(obj.$attrs.className).assertEqual(undefined)
+ console.info("[chartProps] get className value is: " + JSON.stringify(obj.$attrs.className));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartRefProp
+ * @tc.desc ACE
+ */
+ it('testChartRefProp', 0, async function (done) {
+ console.info('testChartRefProp START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refProp);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('refProp')
+ expect(obj.$attrs.ref).assertEqual('refProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartRefPropNone
+ * @tc.desc ACE
+ */
+ it('testChartRefPropNone', 0, async function (done) {
+ console.info('testChartRefPropNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refPropNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('refPropNone')
+ expect(obj.$attrs.ref).assertEqual(undefined)
+ console.info("[chartProps] get ref value is: " + JSON.stringify(obj.$attrs.ref));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDisabledPropTrue
+ * @tc.desc ACE
+ */
+ it('testChartDisabledPropTrue', 0, async function (done) {
+ console.info('testChartDisabledPropTrue START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropTrue);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('disabledPropTrue')
+ expect(obj.$attrs.disabled).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDisabledPropFalse
+ * @tc.desc ACE
+ */
+ it('testChartDisabledPropFalse', 0, async function (done) {
+ console.info('testChartDisabledPropFalse START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropFalse);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('disabledPropFalse')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDisabledPropNone
+ * @tc.desc ACE
+ */
+ it('testChartDisabledPropNone', 0, async function (done) {
+ console.info('testChartDisabledPropNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('disabledPropNone')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartFocusablePropTrue
+ * @tc.desc ACE
+ */
+ it('testChartFocusablePropTrue', 0, async function (done) {
+ console.info('testChartFocusablePropTrue START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropTrue);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('focusablePropTrue')
+ expect(obj.$attrs.focusable).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartFocusablePropFalse
+ * @tc.desc ACE
+ */
+ it('testChartFocusablePropFalse', 0, async function (done) {
+ console.info('testChartFocusablePropFalse START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropFalse);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('focusablePropFalse')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartFocusablePropNone
+ * @tc.desc ACE
+ */
+ it('testChartFocusablePropNone', 0, async function (done) {
+ console.info('testChartFocusablePropNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('focusablePropNone')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDataProp
+ * @tc.desc ACE
+ */
+ it('testChartDataProp', 0, async function (done) {
+ console.info('testChartDataProp START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataProp);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('dataProp')
+ expect(obj.$attrs.dataChart).assertEqual(undefined);
+ console.info("[chartProps] get dataChart value is: " + JSON.stringify(obj.$attrs.dataChart));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDataPropNone
+ * @tc.desc ACE
+ */
+ it('testChartDataPropNone', 0, async function (done) {
+ console.info('testChartDataPropNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataPropNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('dataPropNone')
+ expect(obj.$attrs.dataChart).assertEqual(undefined)
+ console.info("[chartProps] get dataChart value is: " + JSON.stringify(obj.$attrs.dataChart));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartClickEffectPropSmall
+ * @tc.desc ACE
+ */
+ it('testChartClickEffectPropSmall', 0, async function (done) {
+ console.info('testChartClickEffectPropSmall START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropSmall);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropSmall')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-small')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartClickEffectPropMedium
+ * @tc.desc ACE
+ */
+ it('testChartClickEffectPropMedium', 0, async function (done) {
+ console.info('testChartClickEffectPropMedium START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropMedium);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropMedium')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-medium')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartClickEffectPropLarge
+ * @tc.desc ACE
+ */
+ it('testChartClickEffectPropLarge', 0, async function (done) {
+ console.info('testChartClickEffectPropLarge START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropLarge);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropLarge')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-large')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartClickEffectPropNone
+ * @tc.desc ACE
+ */
+ it('testChartClickEffectPropNone', 0, async function (done) {
+ console.info('testChartClickEffectPropNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropNone')
+ expect(obj.$attrs.clickEffect).assertEqual(undefined)
+ console.info("[chartProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDirPropRtl
+ * @tc.desc ACE
+ */
+ it('testChartDirPropRtl', 0, async function (done) {
+ console.info('testChartDirPropRtl START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropRtl);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('dirPropRtl')
+ expect(obj.$attrs.dir).assertEqual('rtl')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDirPropLtr
+ * @tc.desc ACE
+ */
+ it('testChartDirPropLtr', 0, async function (done) {
+ console.info('testChartDirPropLtr START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropLtr);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('dirPropLtr')
+ expect(obj.$attrs.dir).assertEqual('ltr')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDirPropAuto
+ * @tc.desc ACE
+ */
+ it('testChartDirPropAuto', 0, async function (done) {
+ console.info('testChartDirPropAuto START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropAuto);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('dirPropAuto')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDirPropNone
+ * @tc.desc ACE
+ */
+ it('testChartDirPropNone', 0, async function (done) {
+ console.info('testChartDirPropNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('dirPropNone')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartForPropNull
+ * @tc.desc ACE
+ */
+ it('testChartForPropNull', 0, async function (done) {
+ console.info('testChartForPropNull START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropNull);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('forPropNull')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[chartProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartForPropOne
+ * @tc.desc ACE
+ */
+ it('testChartForPropOne', 0, async function (done) {
+ console.info('testChartForPropOne START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropOne);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('forPropOne')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[chartProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartForPropThree
+ * @tc.desc ACE
+ */
+ it('testChartForPropThree', 0, async function (done) {
+ console.info('testChartForPropThree START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropThree);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('forPropThree')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[chartProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartIfPropTrue
+ * @tc.desc ACE
+ */
+ it('testChartIfPropTrue', 0, async function (done) {
+ console.info('testChartIfPropTrue START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.ifPropTrue);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('ifPropTrue')
+ expect(obj.$attrs.if).assertEqual(undefined)
+ console.info("[chartProps] get for value is: " + JSON.stringify(obj.$attrs.if));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartShowPropTrue
+ * @tc.desc ACE
+ */
+ it('testChartShowPropTrue', 0, async function (done) {
+ console.info('testChartShowPropTrue START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropTrue);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('showPropTrue')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[chartProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartShowPropFalse
+ * @tc.desc ACE
+ */
+ it('testChartShowPropFalse', 0, async function (done) {
+ console.info('testChartShowPropFalse START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropFalse);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('showPropFalse')
+ expect(obj.$attrs.show).assertEqual('false')
+ console.info("[chartProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartShowPropNone
+ * @tc.desc ACE
+ */
+ it('testChartShowPropNone', 0, async function (done) {
+ console.info('testChartShowPropNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('showPropNone')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[chartProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ // 特有属性
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartTypeBar
+ * @tc.desc ACE
+ */
+ it('testChartTypeBar', 0, async function (done) {
+ console.info('testChartTypeBar START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeBar);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('typeBar')
+ expect(obj.$attrs.type).assertEqual('bar')
+ console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartTypeLine
+ * @tc.desc ACE
+ */
+ it('testChartTypeLine', 0, async function (done) {
+ console.info('testChartTypeLine START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeLine);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('typeLine')
+ expect(obj.$attrs.type).assertEqual('line')
+ console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartTypeGauge
+ * @tc.desc ACE
+ */
+ it('testChartTypeGauge', 0, async function (done) {
+ console.info('testChartTypeGauge START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeGauge);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('typeGauge')
+ expect(obj.$attrs.type).assertEqual('gauge')
+ console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartTypeProgress
+ * @tc.desc ACE
+ */
+ it('testChartTypeProgress', 0, async function (done) {
+ console.info('testChartTypeProgress START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeProgress);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('typeProgress')
+ expect(obj.$attrs.type).assertEqual('progress')
+ console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartTypeLoading
+ * @tc.desc ACE
+ */
+ it('testChartTypeLoading', 0, async function (done) {
+ console.info('testChartTypeLoading START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeLoading);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('typeLoading')
+ expect(obj.$attrs.type).assertEqual('loading')
+ console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartTypeRainbow
+ * @tc.desc ACE
+ */
+ it('testChartTypeRainbow', 0, async function (done) {
+ console.info('testChartTypeRainbow START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeRainbow);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('typeRainbow')
+ expect(obj.$attrs.type).assertEqual('rainbow')
+ console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartTypeNone
+ * @tc.desc ACE
+ */
+ it('testChartTypeNone', 0, async function (done) {
+ console.info('testChartTypeNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('typeNone')
+ expect(obj.$attrs.type).assertEqual('line')
+ console.info("[chartProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartOptions
+ * @tc.desc ACE
+ */
+ it('testChartOptions', 0, async function (done) {
+ console.info('testChartOptions START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.options);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('options')
+ expect(obj.$attrs.options).assertEqual(undefined)
+ console.info("[chartProps] get options value is: " + JSON.stringify(obj.$attrs.options));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartOptionsNone
+ * @tc.desc ACE
+ */
+ it('testChartOptionsNone', 0, async function (done) {
+ console.info('testChartOptionsNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.optionsNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('optionsNone')
+ expect(obj.$attrs.options).assertEqual(undefined)
+ console.info("[chartProps] get options value is: " + JSON.stringify(obj.$attrs.options));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDatasets
+ * @tc.desc ACE
+ */
+ it('testChartDatasets', 0, async function (done) {
+ console.info('testChartDatasets START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.datasets);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('datasets')
+ expect(obj.$attrs.datasets).assertEqual(undefined)
+ console.info("[chartProps] get datasets value is: " + JSON.stringify(obj.$attrs.datasets));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartDatasetsNone
+ * @tc.desc ACE
+ */
+ it('testChartDatasetsNone', 0, async function (done) {
+ console.info('testChartDatasetsNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.datasetsNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('datasetsNone')
+ expect(obj.$attrs.datasets).assertEqual(undefined)
+ console.info("[chartProps] get datasets value is: " + JSON.stringify(obj.$attrs.datasets));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartSegmentsSeg
+ * @tc.desc ACE
+ */
+ it('testChartSegmentsSeg', 0, async function (done) {
+ console.info('testChartSegmentsSeg START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.segmentsSeg);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('segmentsSeg')
+ expect(obj.$attrs.segments).assertEqual(undefined)
+ console.info("[chartProps] get segments value is: " + JSON.stringify(obj.$attrs.segments));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartSegmentsRain
+ * @tc.desc ACE
+ */
+ it('testChartSegmentsRain', 0, async function (done) {
+ console.info('testChartSegmentsRain START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.segmentsRain);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('segmentsRain')
+ expect(obj.$attrs.segments).assertEqual(undefined)
+ console.info("[chartProps] get segments value is: " + JSON.stringify(obj.$attrs.segments));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartSegmentsNone
+ * @tc.desc ACE
+ */
+ it('testChartSegmentsNone', 0, async function (done) {
+ console.info('testChartSegmentsNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.segmentsNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('segmentsNone')
+ expect(obj.$attrs.segments).assertEqual(undefined)
+ console.info("[chartProps] get segments value is: " + JSON.stringify(obj.$attrs.segments));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartEffectsTrue
+ * @tc.desc ACE
+ */
+ it('testChartEffectsTrue', 0, async function (done) {
+ console.info('testChartEffectsTrue START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.effectsTrue);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('effectsTrue')
+ expect(obj.$attrs.effects).assertEqual('true')
+ console.info("[chartProps] get effects value is: " + JSON.stringify(obj.$attrs.effects));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartEffectsFalse
+ * @tc.desc ACE
+ */
+ it('testChartEffectsFalse', 0, async function (done) {
+ console.info('testChartEffectsFalse START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.effectsFalse);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('effectsFalse')
+ expect(obj.$attrs.effects).assertEqual('false')
+ console.info("[chartProps] get effects value is: " + JSON.stringify(obj.$attrs.effects));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartEffectsNone
+ * @tc.desc ACE
+ */
+ it('testChartEffectsNone', 0, async function (done) {
+ console.info('testChartEffectsNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.effectsNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('effectsNone')
+ expect(obj.$attrs.effects).assertEqual('true')
+ console.info("[chartProps] get effects value is: " + JSON.stringify(obj.$attrs.effects));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartAnimationduration
+ * @tc.desc ACE
+ */
+ it('testChartAnimationduration', 0, async function (done) {
+ console.info('testChartAnimationduration START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.animationduration);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('animationduration')
+ expect(obj.$attrs.animationduration).assertEqual('3000')
+ console.info("[chartProps] get animationduration value is: " + JSON.stringify(obj.$attrs.animationduration));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testChartAnimationdurationNone
+ * @tc.desc ACE
+ */
+ it('testChartAnimationdurationNone', 0, async function (done) {
+ console.info('testChartAnimationdurationNone START');
+ console.info("[chartProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.animationdurationNone);
+ console.info("[chartProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[chartProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('chart')
+ expect(obj.$attrs.id).assertEqual('animationdurationNone')
+ expect(obj.$attrs.animationduration).assertEqual('3000')
+ console.info("[chartProps] get animationduration value is: " + JSON.stringify(obj.$attrs.animationduration));
+ done();
+ });
+});
diff --git a/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js b/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js
index be854384b4866cdf0f59a643796fa881e7e0e014..635d6d61915833fed5963a9bee0db266457ab844 100644
--- a/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js
+++ b/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js
@@ -89,7 +89,7 @@ describe('aceJsTest', function () {
console.info('testButtonComponent START');
let result;
let options = {
- uri: 'pages/button/index'
+ uri: 'pages/button/router/index'
}
try {
result = router.push(options)
@@ -100,7 +100,7 @@ describe('aceJsTest', function () {
await sleep(1000)
let pages = router.getState();
console.info("[router.button] getState" + JSON.stringify(pages));
- expect("pages/button/").assertEqual(pages.path);
+ expect("pages/button/router/").assertEqual(pages.path);
done();
});
@@ -110,21 +110,21 @@ describe('aceJsTest', function () {
* @tc.desc ACE
*/
it('testChartComponent', 0, async function (done) {
- console.info('testButtonComponent START');
+ console.info('testChartComponent START');
let result;
let options = {
- uri: 'pages/chart/index'
+ uri: 'pages/chart/router/index'
}
try {
result = router.push(options)
- console.info("push button page success " + JSON.stringify(result));
+ console.info("push chart page success " + JSON.stringify(result));
} catch (err) {
- console.error("push button page error " + JSON.stringify(result));
+ console.error("push chart page error " + JSON.stringify(result));
}
await sleep(1000)
let pages = router.getState();
console.info("[router.chart] getState" + JSON.stringify(pages));
- expect("pages/chart/").assertEqual(pages.path);
+ expect("pages/chart/router/").assertEqual(pages.path);
done();
});
@@ -227,7 +227,7 @@ describe('aceJsTest', function () {
it('testDividerComponent', 0, async function (done) {
let result;
let options = {
- uri: 'pages/divider/index'
+ uri: 'pages/divider/router/index'
}
try {
result = router.push(options)
@@ -236,7 +236,7 @@ describe('aceJsTest', function () {
}
await sleep(1000)
let pages = router.getState();
- expect("pages/divider/").assertEqual(pages.path);
+ expect("pages/divider/router/").assertEqual(pages.path);
done();
});
@@ -248,7 +248,7 @@ describe('aceJsTest', function () {
it('testGetImageComponent', 0, async function (done) {
let result;
let options = {
- uri: 'pages/image/index'
+ uri: 'pages/image/router/index'
}
try {
result = router.push(options)
@@ -257,7 +257,7 @@ describe('aceJsTest', function () {
}
await sleep(1000)
let pages = router.getState();
- expect("pages/image/").assertEqual(pages.path);
+ expect("pages/image/router/").assertEqual(pages.path);
done();
});
@@ -269,7 +269,7 @@ describe('aceJsTest', function () {
it('testGetMenuComponent', 0, async function (done) {
let result;
let options = {
- uri: 'pages/menu/index'
+ uri: 'pages/menu/router/index'
}
try {
result = router.push(options)
@@ -278,7 +278,7 @@ describe('aceJsTest', function () {
}
await sleep(1000)
let pages = router.getState();
- expect("pages/menu/").assertEqual(pages.path);
+ expect("pages/menu/router/").assertEqual(pages.path);
done();
});
@@ -374,7 +374,7 @@ describe('aceJsTest', function () {
it('testSpanComponent', 0, async function (done) {
let result;
let options = {
- uri: 'pages/span/index'
+ uri: 'pages/span/router/index'
}
try {
result = router.push(options)
@@ -383,7 +383,7 @@ describe('aceJsTest', function () {
}
await sleep(1000)
let pages = router.getState();
- expect("pages/span/").assertEqual(pages.path);
+ expect("pages/span/router/").assertEqual(pages.path);
done();
});
@@ -395,7 +395,7 @@ describe('aceJsTest', function () {
it('testSwitchComponent', 0, async function (done) {
let result;
let options = {
- uri: 'pages/switch/index'
+ uri: 'pages/switch/router/index'
}
try {
result = router.push(options)
@@ -404,7 +404,7 @@ describe('aceJsTest', function () {
}
await sleep(1000)
let pages = router.getState();
- expect("pages/switch/").assertEqual(pages.path);
+ expect("pages/switch/router/").assertEqual(pages.path);
done();
});
@@ -630,7 +630,7 @@ describe('aceJsTest', function () {
it('testDivComponent', 0, async function (done) {
let result;
let options = {
- uri: 'pages/div/index'
+ uri: 'pages/div/router/index'
}
try {
result = router.push(options)
@@ -641,7 +641,7 @@ describe('aceJsTest', function () {
await sleep(5000)
let pages = router.getState();
console.info("[router.div] getState" + JSON.stringify(pages));
- expect("pages/div/").assertEqual(pages.path);
+ expect("pages/div/router/").assertEqual(pages.path);
done();
});
@@ -966,4 +966,625 @@ describe('aceJsTest', function () {
expect("pages/tab-content/").assertEqual(pages.path);
done();
});
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testVideoComponent
+ * @tc.desc ACE
+ */
+ it('testVideoComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/video/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push video page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push video page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.video] getState" + JSON.stringify(pages));
+ expect("pages/video/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSvgTextComponent
+ * @tc.desc ACE
+ */
+ it('testSvgTextComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/svg_text/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push svg_text page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push svg_text page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.svg_text] getState" + JSON.stringify(pages));
+ expect("pages/svg_text/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testGridContainerComponent
+ * @tc.desc ACE
+ */
+ it('testGridContainerComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/gridContainer/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push gridContainer page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push gridContainer page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.gridContainer] getState" + JSON.stringify(pages));
+ expect("pages/gridContainer/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testGridRowComponent
+ * @tc.desc ACE
+ */
+ it('testGridRowComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/gridRow/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push gridRow page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push gridRow page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.gridRow] getState" + JSON.stringify(pages));
+ expect("pages/gridRow/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testGridColComponent
+ * @tc.desc ACE
+ */
+ it('testGridColComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/gridCol/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push gridCol page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push gridCol page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.gridCol] getState" + JSON.stringify(pages));
+ expect("pages/gridCol/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testCanvasComponent
+ * @tc.desc ACE
+ */
+ it('testCanvasComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/canvas/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push canvas page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push canvas page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.canvas] getState" + JSON.stringify(pages));
+ expect("pages/canvas/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testCanvasRenderingContext2DComponent
+ * @tc.desc ACE
+ */
+ it('testCanvasRenderingContext2DComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/obj_CanvasRenderingContext2D/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push obj_CanvasRenderingContext2D page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push obj_CanvasRenderingContext2D page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.obj_CanvasRenderingContext2D] getState" + JSON.stringify(pages));
+ expect("pages/obj_CanvasRenderingContext2D/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testObjImageComponent
+ * @tc.desc ACE
+ */
+ it('testObjImageComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/obj_Image/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push obj_Image page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push obj_Image page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.obj_Image] getState" + JSON.stringify(pages));
+ expect("pages/obj_Image/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testCanvasGradientComponent
+ * @tc.desc ACE
+ */
+ it('testCanvasGradientComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/obj_CanvasGradient/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push obj_CanvasGradient page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push obj_CanvasGradient page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.obj_CanvasGradient] getState" + JSON.stringify(pages));
+ expect("pages/obj_CanvasGradient/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDataComponent
+ * @tc.desc ACE
+ */
+ it('testImageDataComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/obj_ImageData/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push obj_ImageData page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push obj_ImageData page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.obj_ImageData] getState" + JSON.stringify(pages));
+ expect("pages/obj_ImageData/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testPath2DComponent
+ * @tc.desc ACE
+ */
+ it('testPath2DComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/obj_Path2D/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push obj_Path2D page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push obj_Path2D page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.obj_Path2D] getState" + JSON.stringify(pages));
+ expect("pages/obj_Path2D/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testOffCanvasRC2DComponent
+ * @tc.desc ACE
+ */
+ it('testOffCanvasRC2DComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/obj_OffscreenCanvasRenderingContext2D/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push obj_OffscreenCanvasRenderingContext2D page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push obj_OffscreenCanvasRenderingContext2D page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.obj_OffscreenCanvasRenderingContext2D] getState" + JSON.stringify(pages));
+ expect("pages/obj_OffscreenCanvasRenderingContext2D/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageBitmapComponent
+ * @tc.desc ACE
+ */
+ it('testImageBitmapComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/obj_ImageBitmap/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push obj_ImageBitmap page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push obj_ImageBitmap page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.obj_ImageBitmap] getState" + JSON.stringify(pages));
+ expect("pages/obj_ImageBitmap/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testOffScreenCanvasComponent
+ * @tc.desc ACE
+ */
+ it('testOffScreenCanvasComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/obj_OffscreenCanvas/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push obj_OffscreenCanvas page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push obj_OffscreenCanvas page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.obj_OffscreenCanvas] getState" + JSON.stringify(pages));
+ expect("pages/obj_OffscreenCanvas/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSvgComponent
+ * @tc.desc ACE
+ */
+ it('testSvgComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/svg/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push svg page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push svg page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.svg] getState" + JSON.stringify(pages));
+ expect("pages/svg/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testRectComponent
+ * @tc.desc ACE
+ */
+ it('testRectComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/rect/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push rect page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push rect page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.rect] getState" + JSON.stringify(pages));
+ expect("pages/rect/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testCircleComponent
+ * @tc.desc ACE
+ */
+ it('testCircleComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/circle/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push circle page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push circle page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.circle] getState" + JSON.stringify(pages));
+ expect("pages/circle/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testEllipseComponent
+ * @tc.desc ACE
+ */
+ it('testEllipseComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/ellipse/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push ellipse page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push ellipse page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.ellipse] getState" + JSON.stringify(pages));
+ expect("pages/ellipse/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testPathComponent
+ * @tc.desc ACE
+ */
+ it('testPathComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/path/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push path page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push path page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.path] getState" + JSON.stringify(pages));
+ expect("pages/path/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testLineComponent
+ * @tc.desc ACE
+ */
+ it('testLineComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/line/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push line page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push line page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.line] getState" + JSON.stringify(pages));
+ expect("pages/line/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testPolyLineComponent
+ * @tc.desc ACE
+ */
+ it('testPolyLineComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/polyline/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push polyline page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push polyline page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.polyline] getState" + JSON.stringify(pages));
+ expect("pages/polyline/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testPolygonComponent
+ * @tc.desc ACE
+ */
+ it('testPolygonComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/polygon/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push polygon page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push polygon page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.polygon] getState" + JSON.stringify(pages));
+ expect("pages/polygon/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testAnimateComponent
+ * @tc.desc ACE
+ */
+ it('testAnimateComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/animate/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push animate page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push animate page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.animate] getState" + JSON.stringify(pages));
+ expect("pages/animate/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testAnimateMotionComponent
+ * @tc.desc ACE
+ */
+ it('testAnimateMotionComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/animateMotion/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push animateMotion page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push animateMotion page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.animateMotion] getState" + JSON.stringify(pages));
+ expect("pages/animateMotion/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testAnimateTransformComponent
+ * @tc.desc ACE
+ */
+ it('testAnimateTransformComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/animateTransform/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push animateTransform page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push animateTransform page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.animateTransform] getState" + JSON.stringify(pages));
+ expect("pages/animateTransform/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testTextPathComponent
+ * @tc.desc ACE
+ */
+ it('testTextPathComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/textPath/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push textPath page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push textPath page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.textPath] getState" + JSON.stringify(pages));
+ expect("pages/textPath/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testTspanComponent
+ * @tc.desc ACE
+ */
+ it('testTspanComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/tspan/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push tspan page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push tspan page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.tspan] getState" + JSON.stringify(pages));
+ expect("pages/tspan/").assertEqual(pages.path);
+ done();
+ });
});
diff --git a/ace/ace_standard/src/main/js/default/test/divProps.test.js b/ace/ace_standard/src/main/js/default/test/divProps.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..2c9a720e087e45fc85f4bb8d23adfb436b234f0b
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/divProps.test.js
@@ -0,0 +1,687 @@
+/*
+ * Copyright (C) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router';
+import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index';
+
+
+describe('divPropsJsTest', function () {
+
+ async function sleep(time) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve()
+ }, time)
+ }).then(() => {
+ console.info(`sleep ${time} over...`)
+ })
+ }
+
+ async function backToIndex() {
+ let backToIndexPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.back({
+ uri: 'pages/index/index'
+ });
+ resolve();
+ }, 500);
+ });
+ let clearPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.clear();
+ resolve();
+ }, 500);
+ });
+ await backToIndexPromise.then(() => {
+ return clearPromise;
+ });
+ }
+
+ /**
+ * run before testcase
+ */
+ beforeAll(async function (done) {
+ console.info('[divPropsJsTest] before each called')
+
+ let result;
+ let options = {
+ uri: 'pages/div/prop/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push divProps page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push divProps page error " + JSON.stringify(result));
+ }
+ await sleep(4000)
+ done()
+ });
+
+ /**
+ * run after testcase
+ */
+ afterAll(async function () {
+ console.info('[divPropsJsTest] after each called')
+ await backToIndex()
+ await sleep(1000)
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivIdProp
+ * @tc.desc ACE
+ */
+ it('testDivIdProp', 0, async function (done) {
+ console.info('testDivIdProp START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.idProp);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('idProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivClassProp
+ * @tc.desc ACE
+ */
+ it('testDivClassProp', 0, async function (done) {
+ console.info('testDivClassProp START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classProp);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('classProp')
+ expect(obj.$attrs.className).assertEqual('classProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivClassPropNone
+ * @tc.desc ACE
+ */
+ it('testDivClassPropNone', 0, async function (done) {
+ console.info('testDivClassPropNone START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classPropNone);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('classPropNone')
+ expect(obj.$attrs.className).assertEqual(undefined)
+ console.info("[divProps] get className value is: " + JSON.stringify(obj.$attrs.className));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivStyleProp
+ * @tc.desc ACEs
+ */
+// it('testDivStyleProp', 0, async function (done) {
+// console.info('testDivStyleProp START');
+// console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+//
+// let obj = JSON.parse(globalThis.value.styleProp);
+// console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+// console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+//
+// expect(obj.$type).assertEqual('div')
+// expect(obj.$attrs.id).assertEqual('styleProp')
+// expect(obj.$attrs.style).assertEqual(undefined)
+// console.info("[divProps] get style value is: " + JSON.stringify(obj.$attrs.style));
+//
+// expect(obj.$styles.width).assertEqual(undefined);
+// console.info("[divProps] get style width value is: " + JSON.stringify(obj.$styles.width));
+// expect(obj.$styles.height).assertEqual(undefined);
+// console.info("[divProps] get style height value is: " + JSON.stringify(obj.$styles.height));
+// expect(obj.$styles.get('background-color')).assertEqual(undefined);
+// done();
+// });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivRefProp
+ * @tc.desc ACE
+ */
+ it('testDivRefProp', 0, async function (done) {
+ console.info('testDivRefProp START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refProp);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('refProp')
+ expect(obj.$attrs.ref).assertEqual('refProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivRefPropNone
+ * @tc.desc ACE
+ */
+ it('testDivRefPropNone', 0, async function (done) {
+ console.info('testDivRefPropNone START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refPropNone);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('refPropNone')
+ expect(obj.$attrs.ref).assertEqual(undefined)
+ console.info("[divProps] get ref value is: " + JSON.stringify(obj.$attrs.ref));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivDisabledPropTrue
+ * @tc.desc ACE
+ */
+ it('testDivDisabledPropTrue', 0, async function (done) {
+ console.info('testDivDisabledPropTrue START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropTrue);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('disabledPropTrue')
+ expect(obj.$attrs.disabled).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivDisabledPropFalse
+ * @tc.desc ACE
+ */
+ it('testDivDisabledPropFalse', 0, async function (done) {
+ console.info('testDivDisabledPropFalse START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropFalse);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('disabledPropFalse')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivDisabledPropNone
+ * @tc.desc ACE
+ */
+ it('testDivDisabledPropNone', 0, async function (done) {
+ console.info('testDivDisabledPropNone START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropNone);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('disabledPropNone')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivFocusablePropTrue
+ * @tc.desc ACE
+ */
+ it('testDivFocusablePropTrue', 0, async function (done) {
+ console.info('testDivFocusablePropTrue START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropTrue);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('focusablePropTrue')
+ expect(obj.$attrs.focusable).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivFocusablePropFalse
+ * @tc.desc ACE
+ */
+ it('testDivFocusablePropFalse', 0, async function (done) {
+ console.info('testDivFocusablePropFalse START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropFalse);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('focusablePropFalse')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivFocusablePropNone
+ * @tc.desc ACE
+ */
+ it('testDivFocusablePropNone', 0, async function (done) {
+ console.info('testDivFocusablePropNone START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropNone);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('focusablePropNone')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivDataProp
+ * @tc.desc ACE
+ */
+ it('testDivDataProp', 0, async function (done) {
+ console.info('testDivDataProp START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataProp);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('dataProp')
+ expect(obj.$attrs.dataDiv).assertEqual(undefined);
+ console.info("[divProps] get dataDiv value is: " + JSON.stringify(obj.$attrs.dataDiv));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivDataPropNone
+ * @tc.desc ACE
+ */
+ it('testDivDataPropNone', 0, async function (done) {
+ console.info('testDivDataPropNone START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataPropNone);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('dataPropNone')
+ expect(obj.$attrs.dataDiv).assertEqual(undefined)
+ console.info("[divProps] get dataDiv value is: " + JSON.stringify(obj.$attrs.dataDiv));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivClickEffectPropSmall
+ * @tc.desc ACE
+ */
+ it('testDivClickEffectPropSmall', 0, async function (done) {
+ console.info('testDivClickEffectPropSmall START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropSmall);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropSmall')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-small')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivClickEffectPropMedium
+ * @tc.desc ACE
+ */
+ it('testDivClickEffectPropMedium', 0, async function (done) {
+ console.info('testDivClickEffectPropMedium START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropMedium);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropMedium')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-medium')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivClickEffectPropLarge
+ * @tc.desc ACE
+ */
+ it('testDivClickEffectPropLarge', 0, async function (done) {
+ console.info('testDivClickEffectPropLarge START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropLarge);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropLarge')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-large')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivClickEffectPropNone
+ * @tc.desc ACE
+ */
+ it('testDivClickEffectPropNone', 0, async function (done) {
+ console.info('testDivClickEffectPropNone START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropNone);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropNone')
+ expect(obj.$attrs.clickEffect).assertEqual(undefined)
+ console.info("[divProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivDirPropRtl
+ * @tc.desc ACE
+ */
+ it('testDivDirPropRtl', 0, async function (done) {
+ console.info('testDivDirPropRtl START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropRtl);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('dirPropRtl')
+ expect(obj.$attrs.dir).assertEqual('rtl')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivDirPropLtr
+ * @tc.desc ACE
+ */
+ it('testDivDirPropLtr', 0, async function (done) {
+ console.info('testDivDirPropLtr START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropLtr);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('dirPropLtr')
+ expect(obj.$attrs.dir).assertEqual('ltr')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivDirPropAuto
+ * @tc.desc ACE
+ */
+ it('testDivDirPropAuto', 0, async function (done) {
+ console.info('testDivDirPropAuto START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropAuto);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('dirPropAuto')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivDirPropNone
+ * @tc.desc ACE
+ */
+ it('testDivDirPropNone', 0, async function (done) {
+ console.info('testDivDirPropNone START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropNone);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('dirPropNone')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivForPropNull
+ * @tc.desc ACE
+ */
+ it('testDivForPropNull', 0, async function (done) {
+ console.info('testDivForPropNull START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropNull);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('forPropNull')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[divProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivForPropOne
+ * @tc.desc ACE
+ */
+ it('testDivForPropOne', 0, async function (done) {
+ console.info('testDivForPropOne START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropOne);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('forPropOne')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[divProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivForPropThree
+ * @tc.desc ACE
+ */
+ it('testDivForPropThree', 0, async function (done) {
+ console.info('testDivForPropThree START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropThree);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('forPropThree')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[divProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivIfPropTrue
+ * @tc.desc ACE
+ */
+ it('testDivIfPropTrue', 0, async function (done) {
+ console.info('testDivIfPropTrue START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.ifPropTrue);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('ifPropTrue')
+ expect(obj.$attrs.if).assertEqual(undefined)
+ console.info("[divProps] get for value is: " + JSON.stringify(obj.$attrs.if));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivIfPropFalse
+ * @tc.desc ACE
+ */
+ // it('testDivIfPropFalse', 0, async function (done) {
+ // console.info('testDivIfPropFalse START');
+ // console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ //
+ // let obj = JSON.parse(globalThis.value.ifPropFalse);
+ // console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ // console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ //
+ // expect(obj.$type).assertEqual('div')
+ // expect(obj.$attrs.id).assertEqual('ifPropFalse')
+ // expect(obj.$attrs.if).assertEqual(false)
+ // done();
+ // });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivIfPropNone
+ * @tc.desc ACE
+ */
+ // it('testDivIfPropNone', 0, async function (done) {
+ // console.info('testDivIfPropNone START');
+ // console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+ //
+ // let obj = JSON.parse(globalThis.value.ifPropNone);
+ // console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ // console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+ //
+ // expect(obj.$type).assertEqual('div')
+ // expect(obj.$attrs.id).assertEqual('ifPropNone')
+ // expect(obj.$attrs.if).assertEqual(false)
+ // done();
+ // });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivShowPropTrue
+ * @tc.desc ACE
+ */
+ it('testDivShowPropTrue', 0, async function (done) {
+ console.info('testDivShowPropTrue START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropTrue);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('showPropTrue')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[divProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivShowPropFalse
+ * @tc.desc ACE
+ */
+ it('testDivShowPropFalse', 0, async function (done) {
+ console.info('testDivShowPropFalse START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropFalse);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('showPropFalse')
+ expect(obj.$attrs.show).assertEqual('false')
+ console.info("[divProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testDivShowPropNone
+ * @tc.desc ACE
+ */
+ it('testDivShowPropNone', 0, async function (done) {
+ console.info('testDivShowPropNone START');
+ console.info("[divProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropNone);
+ console.info("[divProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[divProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('div')
+ expect(obj.$attrs.id).assertEqual('showPropNone')
+ expect(obj.$attrs.show).assertEqual('false')
+ console.info("[divProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+});
diff --git a/ace/ace_standard/src/main/js/default/test/imageProps.test.js b/ace/ace_standard/src/main/js/default/test/imageProps.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..9eca22460fdafce64eda8e91d45767b92f60a88b
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/imageProps.test.js
@@ -0,0 +1,698 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router';
+import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index';
+
+
+describe('imagePropsJsTest', function () {
+
+ async function sleep(time) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve()
+ }, time)
+ }).then(() => {
+ console.info(`sleep ${time} over...`)
+ })
+ }
+ async function backToIndex() {
+ let backToIndexPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.back({
+ uri: 'pages/index/index'
+ });
+ resolve()
+ }, 500)
+ })
+ let clearPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.clear()
+ resolve()
+ }, 500)
+ })
+ await backToIndexPromise.then(() => {
+ return clearPromise;
+ })
+ }
+
+ /**
+ * run before testcase
+ */
+ beforeAll(async function (done) {
+ console.info('[imagePropsJsTest] before each called')
+
+ let result;
+ let options = {
+ uri: 'pages/image/prop/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push imageProps page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push imageProps page error " + JSON.stringify(result));
+ }
+ await sleep(4000)
+ done()
+ })
+
+ /**
+ * run after testcase
+ */
+ afterAll(async function () {
+ console.info('[imagePropsJsTest] after each called')
+ await backToIndex()
+ await sleep(1000)
+ })
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageIdProp
+ * @tc.desc ACE
+ */
+ it('testImageIdProp', 0, async function (done) {
+ console.info('testImageIdProp START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.idProp);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('idProp')
+ done();
+ });
+
+ it('testImageClassProp', 0, async function (done) {
+ console.info('testImageClassProp START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classProp);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('classProp')
+ expect(obj.$attrs.className).assertEqual('classProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageClassPropNone
+ * @tc.desc ACE
+ */
+ it('testImageClassPropNone', 0, async function (done) {
+ console.info('testImageClassPropNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classPropNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('classPropNone')
+ expect(obj.$attrs.className).assertEqual(undefined)
+ console.info("[imageProps] get className value is: " + JSON.stringify(obj.$attrs.className));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageRefProp
+ * @tc.desc ACE
+ */
+ it('testImageRefProp', 0, async function (done) {
+ console.info('testImageRefProp START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refProp);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('refProp')
+ expect(obj.$attrs.ref).assertEqual('refProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageRefPropNone
+ * @tc.desc ACE
+ */
+ it('testImageRefPropNone', 0, async function (done) {
+ console.info('testImageRefPropNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refPropNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('refPropNone')
+ expect(obj.$attrs.ref).assertEqual(undefined)
+ console.info("[imageProps] get ref value is: " + JSON.stringify(obj.$attrs.ref));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDisabledPropTrue
+ * @tc.desc ACE
+ */
+ it('testImageDisabledPropTrue', 0, async function (done) {
+ console.info('testImageDisabledPropTrue START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropTrue);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('disabledPropTrue')
+ expect(obj.$attrs.disabled).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDisabledPropFalse
+ * @tc.desc ACE
+ */
+ it('testImageDisabledPropFalse', 0, async function (done) {
+ console.info('testImageDisabledPropFalse START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropFalse);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('disabledPropFalse')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDisabledPropNone
+ * @tc.desc ACE
+ */
+ it('testImageDisabledPropNone', 0, async function (done) {
+ console.info('testImageDisabledPropNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('disabledPropNone')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageFocusablePropTrue
+ * @tc.desc ACE
+ */
+ it('testImageFocusablePropTrue', 0, async function (done) {
+ console.info('testImageFocusablePropTrue START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropTrue);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('focusablePropTrue')
+ expect(obj.$attrs.focusable).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageFocusablePropFalse
+ * @tc.desc ACE
+ */
+ it('testImageFocusablePropFalse', 0, async function (done) {
+ console.info('testImageFocusablePropFalse START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropFalse);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('focusablePropFalse')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageFocusablePropNone
+ * @tc.desc ACE
+ */
+ it('testImageFocusablePropNone', 0, async function (done) {
+ console.info('testImageFocusablePropNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('focusablePropNone')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDataProp
+ * @tc.desc ACE
+ */
+ it('testImageDataProp', 0, async function (done) {
+ console.info('testImageDataProp START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataProp);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('dataProp')
+ expect(obj.$attrs.dataImage).assertEqual(undefined);
+ console.info("[imageProps] get dataImage value is: " + JSON.stringify(obj.$attrs.dataImage));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDataPropNone
+ * @tc.desc ACE
+ */
+ it('testImageDataPropNone', 0, async function (done) {
+ console.info('testImageDataPropNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataPropNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('dataPropNone')
+ expect(obj.$attrs.dataImage).assertEqual(undefined)
+ console.info("[imageProps] get dataImage value is: " + JSON.stringify(obj.$attrs.dataImage));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageClickEffectPropSmall
+ * @tc.desc ACE
+ */
+ it('testImageClickEffectPropSmall', 0, async function (done) {
+ console.info('testImageClickEffectPropSmall START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropSmall);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropSmall')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-small')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageClickEffectPropMedium
+ * @tc.desc ACE
+ */
+ it('testImageClickEffectPropMedium', 0, async function (done) {
+ console.info('testImageClickEffectPropMedium START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropMedium);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropMedium')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-medium')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageClickEffectPropLarge
+ * @tc.desc ACE
+ */
+ it('testImageClickEffectPropLarge', 0, async function (done) {
+ console.info('testImageClickEffectPropLarge START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropLarge);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropLarge')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-large')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageClickEffectPropNone
+ * @tc.desc ACE
+ */
+ it('testImageClickEffectPropNone', 0, async function (done) {
+ console.info('testImageClickEffectPropNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropNone')
+ expect(obj.$attrs.clickEffect).assertEqual(undefined)
+ console.info("[imageProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDirPropRtl
+ * @tc.desc ACE
+ */
+ it('testImageDirPropRtl', 0, async function (done) {
+ console.info('testImageDirPropRtl START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropRtl);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('dirPropRtl')
+ expect(obj.$attrs.dir).assertEqual('rtl')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDirPropLtr
+ * @tc.desc ACE
+ */
+ it('testImageDirPropLtr', 0, async function (done) {
+ console.info('testImageDirPropLtr START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropLtr);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('dirPropLtr')
+ expect(obj.$attrs.dir).assertEqual('ltr')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDirPropAuto
+ * @tc.desc ACE
+ */
+ it('testImageDirPropAuto', 0, async function (done) {
+ console.info('testImageDirPropAuto START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropAuto);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('dirPropAuto')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageDirPropNone
+ * @tc.desc ACE
+ */
+ it('testImageDirPropNone', 0, async function (done) {
+ console.info('testImageDirPropNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('dirPropNone')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageForPropNull
+ * @tc.desc ACE
+ */
+ it('testImageForPropNull', 0, async function (done) {
+ console.info('testImageForPropNull START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropNull);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('forPropNull')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[imageProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageForPropOne
+ * @tc.desc ACE
+ */
+ it('testImageForPropOne', 0, async function (done) {
+ console.info('testImageForPropOne START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropOne);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('forPropOne')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[imageProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageForPropThree
+ * @tc.desc ACE
+ */
+ it('testImageForPropThree', 0, async function (done) {
+ console.info('testImageForPropThree START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropThree);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('forPropThree')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[imageProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageIfPropTrue
+ * @tc.desc ACE
+ */
+ it('testImageIfPropTrue', 0, async function (done) {
+ console.info('testImageIfPropTrue START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.ifPropTrue);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('ifPropTrue')
+ expect(obj.$attrs.if).assertEqual(undefined)
+ console.info("[imageProps] get for value is: " + JSON.stringify(obj.$attrs.if));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageShowPropTrue
+ * @tc.desc ACE
+ */
+ it('testImageShowPropTrue', 0, async function (done) {
+ console.info('testImageShowPropTrue START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropTrue);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('showPropTrue')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[imageProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageShowPropFalse
+ * @tc.desc ACE
+ */
+ it('testImageShowPropFalse', 0, async function (done) {
+ console.info('testImageShowPropFalse START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropFalse);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('showPropFalse')
+ expect(obj.$attrs.show).assertEqual('false')
+ console.info("[imageProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageShowPropNone
+ * @tc.desc ACE
+ */
+ it('testImageShowPropNone', 0, async function (done) {
+ console.info('testImageShowPropNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('showPropNone')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[imageProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ // 特有属性
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageImageSrc
+ * @tc.desc ACE
+ */
+ it('testImageImageSrc', 0, async function (done) {
+ console.info('testImageImageSrc START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.imageSrc);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('imageSrc')
+ expect(obj.$attrs.src).assertEqual('common/images/image.png')
+ console.info("[imageProps] get src value is: " + JSON.stringify(obj.$attrs.src));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageImageSrcNone
+ * @tc.desc ACE
+ */
+ it('testImageImageSrcNone', 0, async function (done) {
+ console.info('testImageImageSrcNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.imageSrcNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('imageSrcNone')
+ expect(obj.$attrs.src).assertEqual(undefined)
+ console.info("[imageProps] get src value is: " + JSON.stringify(obj.$attrs.src));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageImageAlt
+ * @tc.desc ACE
+ */
+ it('testImageImageAlt', 0, async function (done) {
+ console.info('testImageImageAlt START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.imageAlt);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('imageAlt')
+ expect(obj.$attrs.alt).assertEqual('common/images/image.png')
+ console.info("[imageProps] get alt value is: " + JSON.stringify(obj.$attrs.alt));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testImageImageAltNone
+ * @tc.desc ACE
+ */
+ it('testImageImageAltNone', 0, async function (done) {
+ console.info('testImageImageAltNone START');
+ console.info("[imageProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.imageAltNone);
+ console.info("[imageProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[imageProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('image')
+ expect(obj.$attrs.id).assertEqual('imageAltNone')
+ expect(obj.$attrs.alt).assertEqual(undefined)
+ console.info("[imageProps] get alt value is: " + JSON.stringify(obj.$attrs.alt));
+ done();
+ });
+});
diff --git a/ace/ace_standard/src/main/js/default/test/menuProps.test.js b/ace/ace_standard/src/main/js/default/test/menuProps.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..36b7cda8fdb100be40212f99f15326206e1b97fe
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/menuProps.test.js
@@ -0,0 +1,645 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router';
+import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index';
+
+
+describe('menuPropsJsTest', function () {
+
+ async function sleep(time) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve()
+ }, time)
+ }).then(() => {
+ console.info(`sleep ${time} over...`)
+ })
+ }
+ async function backToIndex() {
+ let backToIndexPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.back({
+ uri: 'pages/index/index'
+ })
+ resolve()
+ }, 500)
+ })
+ let clearPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.clear()
+ resolve()
+ }, 500)
+ })
+ await backToIndexPromise.then(() => {
+ return clearPromise
+ })
+ }
+
+ /**
+ * run before testcase
+ */
+ beforeAll(async function (done) {
+ console.info('[menuPropsJsTest] before each called')
+
+ let result;
+ let options = {
+ uri: 'pages/menu/prop/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push menuProps page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push menuProps page error " + JSON.stringify(result));
+ }
+ await sleep(4000)
+ done()
+ })
+
+ /**
+ * run after testcase
+ */
+ afterAll(async function () {
+ console.info('[menuPropsJsTest] after each called')
+ await backToIndex()
+ await sleep(1000)
+ })
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuIdProp
+ * @tc.desc ACE
+ */
+ it('testMenuIdProp', 0, async function (done) {
+ console.info('testMenuIdProp START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.idProp);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('idProp')
+ done();
+ });
+
+ it('testMenuClassProp', 0, async function (done) {
+ console.info('testMenuClassProp START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classProp);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('classProp')
+ expect(obj.$attrs.className).assertEqual('classProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuClassPropNone
+ * @tc.desc ACE
+ */
+ it('testMenuClassPropNone', 0, async function (done) {
+ console.info('testMenuClassPropNone START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classPropNone);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('classPropNone')
+ expect(obj.$attrs.className).assertEqual(undefined)
+ console.info("[menuProps] get className value is: " + JSON.stringify(obj.$attrs.className));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuRefProp
+ * @tc.desc ACE
+ */
+ it('testMenuRefProp', 0, async function (done) {
+ console.info('testMenuRefProp START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refProp);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('refProp')
+ expect(obj.$attrs.ref).assertEqual('refProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuRefPropNone
+ * @tc.desc ACE
+ */
+ it('testMenuRefPropNone', 0, async function (done) {
+ console.info('testMenuRefPropNone START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refPropNone);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('refPropNone')
+ expect(obj.$attrs.ref).assertEqual(undefined)
+ console.info("[menuProps] get ref value is: " + JSON.stringify(obj.$attrs.ref));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuDataProp
+ * @tc.desc ACE
+ */
+ it('testMenuDataProp', 0, async function (done) {
+ console.info('testMenuDataProp START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataProp);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('dataProp')
+ expect(obj.$attrs.dataMenu).assertEqual(undefined);
+ console.info("[menuProps] get dataMenu value is: " + JSON.stringify(obj.$attrs.dataMenu));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuDataPropNone
+ * @tc.desc ACE
+ */
+ it('testMenuDataPropNone', 0, async function (done) {
+ console.info('testMenuDataPropNone START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataPropNone);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('dataPropNone')
+ expect(obj.$attrs.dataMenu).assertEqual(undefined)
+ console.info("[menuProps] get dataMenu value is: " + JSON.stringify(obj.$attrs.dataMenu));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuClickEffectPropSmall
+ * @tc.desc ACE
+ */
+ it('testMenuClickEffectPropSmall', 0, async function (done) {
+ console.info('testMenuClickEffectPropSmall START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropSmall);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropSmall')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-small')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuClickEffectPropMedium
+ * @tc.desc ACE
+ */
+ it('testMenuClickEffectPropMedium', 0, async function (done) {
+ console.info('testMenuClickEffectPropMedium START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropMedium);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropMedium')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-medium')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuClickEffectPropLarge
+ * @tc.desc ACE
+ */
+ it('testMenuClickEffectPropLarge', 0, async function (done) {
+ console.info('testMenuClickEffectPropLarge START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropLarge);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropLarge')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-large')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuClickEffectPropNone
+ * @tc.desc ACE
+ */
+ it('testMenuClickEffectPropNone', 0, async function (done) {
+ console.info('testMenuClickEffectPropNone START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropNone);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropNone')
+ expect(obj.$attrs.clickEffect).assertEqual(undefined)
+ console.info("[menuProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuDirPropRtl
+ * @tc.desc ACE
+ */
+ it('testMenuDirPropRtl', 0, async function (done) {
+ console.info('testMenuDirPropRtl START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropRtl);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('dirPropRtl')
+ expect(obj.$attrs.dir).assertEqual('rtl')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuDirPropLtr
+ * @tc.desc ACE
+ */
+ it('testMenuDirPropLtr', 0, async function (done) {
+ console.info('testMenuDirPropLtr START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropLtr);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('dirPropLtr')
+ expect(obj.$attrs.dir).assertEqual('ltr')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuDirPropAuto
+ * @tc.desc ACE
+ */
+ it('testMenuDirPropAuto', 0, async function (done) {
+ console.info('testMenuDirPropAuto START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropAuto);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('dirPropAuto')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuDirPropNone
+ * @tc.desc ACE
+ */
+ it('testMenuDirPropNone', 0, async function (done) {
+ console.info('testMenuDirPropNone START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropNone);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('dirPropNone')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuForPropNull
+ * @tc.desc ACE
+ */
+ it('testMenuForPropNull', 0, async function (done) {
+ console.info('testMenuForPropNull START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropNull);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('forPropNull')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[menuProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuForPropOne
+ * @tc.desc ACE
+ */
+ it('testMenuForPropOne', 0, async function (done) {
+ console.info('testMenuForPropOne START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropOne);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('forPropOne')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[menuProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuForPropThree
+ * @tc.desc ACE
+ */
+ it('testMenuForPropThree', 0, async function (done) {
+ console.info('testMenuForPropThree START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropThree);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('forPropThree')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[menuProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuIfPropTrue
+ * @tc.desc ACE
+ */
+ it('testMenuIfPropTrue', 0, async function (done) {
+ console.info('testMenuIfPropTrue START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.ifPropTrue);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('ifPropTrue')
+ expect(obj.$attrs.if).assertEqual(undefined)
+ console.info("[menuProps] get for value is: " + JSON.stringify(obj.$attrs.if));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuShowPropTrue
+ * @tc.desc ACE
+ */
+ it('testMenuShowPropTrue', 0, async function (done) {
+ console.info('testMenuShowPropTrue START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropTrue);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('showPropTrue')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[menuProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuShowPropFalse
+ * @tc.desc ACE
+ */
+ it('testMenuShowPropFalse', 0, async function (done) {
+ console.info('testMenuShowPropFalse START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropFalse);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('showPropFalse')
+ expect(obj.$attrs.show).assertEqual('false')
+ console.info("[menuProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuShowPropNone
+ * @tc.desc ACE
+ */
+ it('testMenuShowPropNone', 0, async function (done) {
+ console.info('testMenuShowPropNone START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropNone);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('showPropNone')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[menuProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ // 特有属性
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuMenuTarget
+ * @tc.desc ACE
+ */
+ it('testMenuMenuTarget', 0, async function (done) {
+ console.info('testMenuMenuTarget START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.menuTarget);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('menuTarget')
+ expect(obj.$attrs.target).assertEqual('testTarget')
+ console.info("[menuProps] get target value is: " + JSON.stringify(obj.$attrs.target));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuMenuTargetNone
+ * @tc.desc ACE
+ */
+ it('testMenuMenuTargetNone', 0, async function (done) {
+ console.info('testMenuMenuTargetNone START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.menuTargetNone);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('menuTargetNone')
+ expect(obj.$attrs.target).assertEqual(undefined)
+ console.info("[menuProps] get target value is: " + JSON.stringify(obj.$attrs.target));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuTypeClick
+ * @tc.desc ACE
+ */
+ it('testMenuTypeClick', 0, async function (done) {
+ console.info('testMenuTypeClick START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeClick);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('typeClick')
+ expect(obj.$attrs.type).assertEqual('click')
+ console.info("[menuProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuTypeLongPress
+ * @tc.desc ACE
+ */
+ it('testMenuTypeLongPress', 0, async function (done) {
+ console.info('testMenuTypeLongPress START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeLongPress);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('typeLongPress')
+ expect(obj.$attrs.type).assertEqual('longpress')
+ console.info("[menuProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuTypeNone
+ * @tc.desc ACE
+ */
+ it('testMenuTypeNone', 0, async function (done) {
+ console.info('testMenuTypeNone START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.typeNone);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('typeNone')
+ expect(obj.$attrs.type).assertEqual('click')
+ console.info("[menuProps] get type value is: " + JSON.stringify(obj.$attrs.type));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuMenuTitle
+ * @tc.desc ACE
+ */
+ it('testMenuMenuTitle', 0, async function (done) {
+ console.info('testMenuMenuTitle START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.menuTitle);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('menuTitle')
+ expect(obj.$attrs.title).assertEqual('menu')
+ console.info("[menuProps] get title value is: " + JSON.stringify(obj.$attrs.title));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testMenuMenuTitleNone
+ * @tc.desc ACE
+ */
+ it('testMenuMenuTitleNone', 0, async function (done) {
+ console.info('testMenuMenuTitleNone START');
+ console.info("[menuProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.menuTitleNone);
+ console.info("[menuProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[menuProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('menu')
+ expect(obj.$attrs.id).assertEqual('menuTitleNone')
+ expect(obj.$attrs.title).assertEqual(undefined)
+ console.info("[menuProps] get title value is: " + JSON.stringify(obj.$attrs.title));
+ done();
+ });
+});
diff --git a/ace/ace_standard/src/main/js/default/test/spanProps.test.js b/ace/ace_standard/src/main/js/default/test/spanProps.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..384730a77c2581824f9d71851cf90b388429005d
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/spanProps.test.js
@@ -0,0 +1,503 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router';
+import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index';
+
+
+describe('spanPropsJsTest', function () {
+
+ async function sleep(time) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve()
+ }, time)
+ }).then(() => {
+ console.info(`sleep ${time} over...`)
+ })
+ }
+ async function backToIndex() {
+ let backToIndexPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.back({
+ uri: 'pages/index/index'
+ })
+ resolve()
+ }, 500)
+ })
+ let clearPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.clear()
+ resolve()
+ }, 500)
+ })
+ await backToIndexPromise.then(() => {
+ return clearPromise
+ })
+ }
+
+ /**
+ * run before testcase
+ */
+ beforeAll(async function (done) {
+ console.info('[spanPropsJsTest] before each called')
+
+ let result;
+ let options = {
+ uri: 'pages/span/prop/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push spanProps page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push spanProps page error " + JSON.stringify(result));
+ }
+ await sleep(4000)
+ done()
+ })
+
+ /**
+ * run after testcase
+ */
+ afterAll(async function () {
+ console.info('[spanPropsJsTest] after each called')
+ await backToIndex();
+ await sleep(1000)
+ })
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanIdProp
+ * @tc.desc ACE
+ */
+ it('testSpanIdProp', 0, async function (done) {
+ console.info('testSpanIdProp START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.idProp);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('idProp')
+ done();
+ });
+
+ it('testSpanClassProp', 0, async function (done) {
+ console.info('testSpanClassProp START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classProp);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('classProp')
+ expect(obj.$attrs.className).assertEqual('classProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanClassPropNone
+ * @tc.desc ACE
+ */
+ it('testSpanClassPropNone', 0, async function (done) {
+ console.info('testSpanClassPropNone START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classPropNone);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('classPropNone')
+ expect(obj.$attrs.className).assertEqual(undefined)
+ console.info("[spanProps] get className value is: " + JSON.stringify(obj.$attrs.className));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanRefProp
+ * @tc.desc ACE
+ */
+ it('testSpanRefProp', 0, async function (done) {
+ console.info('testSpanRefProp START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refProp);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('refProp')
+ expect(obj.$attrs.ref).assertEqual('refProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanRefPropNone
+ * @tc.desc ACE
+ */
+ it('testSpanRefPropNone', 0, async function (done) {
+ console.info('testSpanRefPropNone START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refPropNone);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('refPropNone')
+ expect(obj.$attrs.ref).assertEqual(undefined)
+ console.info("[spanProps] get ref value is: " + JSON.stringify(obj.$attrs.ref));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanDataProp
+ * @tc.desc ACE
+ */
+ it('testSpanDataProp', 0, async function (done) {
+ console.info('testSpanDataProp START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataProp);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('dataProp')
+ expect(obj.$attrs.dataSpan).assertEqual(undefined);
+ console.info("[spanProps] get dataSpan value is: " + JSON.stringify(obj.$attrs.dataSpan));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanDataPropNone
+ * @tc.desc ACE
+ */
+ it('testSpanDataPropNone', 0, async function (done) {
+ console.info('testSpanDataPropNone START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataPropNone);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('dataPropNone')
+ expect(obj.$attrs.dataSpan).assertEqual(undefined)
+ console.info("[spanProps] get dataSpan value is: " + JSON.stringify(obj.$attrs.dataSpan));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanClickEffectPropSmall
+ * @tc.desc ACE
+ */
+ it('testSpanClickEffectPropSmall', 0, async function (done) {
+ console.info('testSpanClickEffectPropSmall START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropSmall);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropSmall')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-small')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanClickEffectPropMedium
+ * @tc.desc ACE
+ */
+ it('testSpanClickEffectPropMedium', 0, async function (done) {
+ console.info('testSpanClickEffectPropMedium START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropMedium);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropMedium')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-medium')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanClickEffectPropLarge
+ * @tc.desc ACE
+ */
+ it('testSpanClickEffectPropLarge', 0, async function (done) {
+ console.info('testSpanClickEffectPropLarge START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropLarge);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropLarge')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-large')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanClickEffectPropNone
+ * @tc.desc ACE
+ */
+ it('testSpanClickEffectPropNone', 0, async function (done) {
+ console.info('testSpanClickEffectPropNone START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropNone);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropNone')
+ expect(obj.$attrs.clickEffect).assertEqual(undefined)
+ console.info("[spanProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanDirPropRtl
+ * @tc.desc ACE
+ */
+ it('testSpanDirPropRtl', 0, async function (done) {
+ console.info('testSpanDirPropRtl START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropRtl);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('dirPropRtl')
+ expect(obj.$attrs.dir).assertEqual('rtl')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanDirPropLtr
+ * @tc.desc ACE
+ */
+ it('testSpanDirPropLtr', 0, async function (done) {
+ console.info('testSpanDirPropLtr START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropLtr);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('dirPropLtr')
+ expect(obj.$attrs.dir).assertEqual('ltr')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanDirPropAuto
+ * @tc.desc ACE
+ */
+ it('testSpanDirPropAuto', 0, async function (done) {
+ console.info('testSpanDirPropAuto START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropAuto);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('dirPropAuto')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanDirPropNone
+ * @tc.desc ACE
+ */
+ it('testSpanDirPropNone', 0, async function (done) {
+ console.info('testSpanDirPropNone START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropNone);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('dirPropNone')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanForPropNull
+ * @tc.desc ACE
+ */
+ it('testSpanForPropNull', 0, async function (done) {
+ console.info('testSpanForPropNull START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropNull);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('forPropNull')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[spanProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanForPropOne
+ * @tc.desc ACE
+ */
+ it('testSpanForPropOne', 0, async function (done) {
+ console.info('testSpanForPropOne START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropOne);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('forPropOne')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[spanProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanForPropThree
+ * @tc.desc ACE
+ */
+ it('testSpanForPropThree', 0, async function (done) {
+ console.info('testSpanForPropThree START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropThree);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('forPropThree')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[spanProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanIfPropTrue
+ * @tc.desc ACE
+ */
+ it('testSpanIfPropTrue', 0, async function (done) {
+ console.info('testSpanIfPropTrue START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.ifPropTrue);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('ifPropTrue')
+ expect(obj.$attrs.if).assertEqual(undefined)
+ console.info("[spanProps] get for value is: " + JSON.stringify(obj.$attrs.if));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanShowPropTrue
+ * @tc.desc ACE
+ */
+ it('testSpanShowPropTrue', 0, async function (done) {
+ console.info('testSpanShowPropTrue START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropTrue);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('showPropTrue')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[spanProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanShowPropFalse
+ * @tc.desc ACE
+ */
+ it('testSpanShowPropFalse', 0, async function (done) {
+ console.info('testSpanShowPropFalse START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropFalse);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('showPropFalse')
+ expect(obj.$attrs.show).assertEqual('false')
+ console.info("[spanProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSpanShowPropNone
+ * @tc.desc ACE
+ */
+ it('testSpanShowPropNone', 0, async function (done) {
+ console.info('testSpanShowPropNone START');
+ console.info("[spanProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropNone);
+ console.info("[spanProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[spanProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('span')
+ expect(obj.$attrs.id).assertEqual('showPropNone')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[spanProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+});
diff --git a/ace/ace_standard/src/main/js/default/test/switchProps.test.js b/ace/ace_standard/src/main/js/default/test/switchProps.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..8d4c10089013a883ca801788cd2c0aacfd1f54b4
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/test/switchProps.test.js
@@ -0,0 +1,819 @@
+/**
+ * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import router from '@system.router';
+import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index';
+
+
+describe('switchPropsJsTest', function () {
+
+ async function sleep(time) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve()
+ }, time)
+ }).then(() => {
+ console.info(`sleep ${time} over...`)
+ })
+ }
+ async function backToIndex() {
+ let backToIndexPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.back({
+ uri: 'pages/index/index'
+ });
+ resolve()
+ }, 500)
+ })
+ let clearPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ router.clear()
+ resolve()
+ }, 500)
+ })
+ await backToIndexPromise.then(() => {
+ return clearPromise
+ })
+ }
+
+ /**
+ * run before testcase
+ */
+ beforeAll(async function (done) {
+ console.info('[switchPropsJsTest] before each called')
+
+ let result;
+ let options = {
+ uri: 'pages/switch/prop/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push switchProps page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push switchProps page error " + JSON.stringify(result));
+ }
+ await sleep(4000)
+ done()
+ })
+
+ /**
+ * run after testcase
+ */
+ afterAll(async function () {
+ console.info('[switchPropsJsTest] after each called')
+ await backToIndex()
+ await sleep(1000)
+ })
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchIdProp
+ * @tc.desc ACE
+ */
+ it('testSwitchIdProp', 0, async function (done) {
+ console.info('testSwitchIdProp START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.idProp);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('idProp')
+ done();
+ });
+
+ it('testSwitchClassProp', 0, async function (done) {
+ console.info('testSwitchClassProp START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classProp);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('classProp')
+ expect(obj.$attrs.className).assertEqual('classProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchClassPropNone
+ * @tc.desc ACE
+ */
+ it('testSwitchClassPropNone', 0, async function (done) {
+ console.info('testSwitchClassPropNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.classPropNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('classPropNone')
+ expect(obj.$attrs.className).assertEqual(undefined)
+ console.info("[switchProps] get className value is: " + JSON.stringify(obj.$attrs.className));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchRefProp
+ * @tc.desc ACE
+ */
+ it('testSwitchRefProp', 0, async function (done) {
+ console.info('testSwitchRefProp START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refProp);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('refProp')
+ expect(obj.$attrs.ref).assertEqual('refProp')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchRefPropNone
+ * @tc.desc ACE
+ */
+ it('testSwitchRefPropNone', 0, async function (done) {
+ console.info('testSwitchRefPropNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.refPropNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('refPropNone')
+ expect(obj.$attrs.ref).assertEqual(undefined)
+ console.info("[switchProps] get ref value is: " + JSON.stringify(obj.$attrs.ref));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchDisabledPropTrue
+ * @tc.desc ACE
+ */
+ it('testSwitchDisabledPropTrue', 0, async function (done) {
+ console.info('testSwitchDisabledPropTrue START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropTrue);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('disabledPropTrue')
+ expect(obj.$attrs.disabled).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchDisabledPropFalse
+ * @tc.desc ACE
+ */
+ it('testSwitchDisabledPropFalse', 0, async function (done) {
+ console.info('testSwitchDisabledPropFalse START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropFalse);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('disabledPropFalse')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchDisabledPropNone
+ * @tc.desc ACE
+ */
+ it('testSwitchDisabledPropNone', 0, async function (done) {
+ console.info('testSwitchDisabledPropNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.disabledPropNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('disabledPropNone')
+ expect(obj.$attrs.disabled).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchFocusablePropTrue
+ * @tc.desc ACE
+ */
+ it('testSwitchFocusablePropTrue', 0, async function (done) {
+ console.info('testSwitchFocusablePropTrue START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropTrue);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('focusablePropTrue')
+ expect(obj.$attrs.focusable).assertEqual('true')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchFocusablePropFalse
+ * @tc.desc ACE
+ */
+ it('testSwitchFocusablePropFalse', 0, async function (done) {
+ console.info('testSwitchFocusablePropFalse START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropFalse);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('focusablePropFalse')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchFocusablePropNone
+ * @tc.desc ACE
+ */
+ it('testSwitchFocusablePropNone', 0, async function (done) {
+ console.info('testSwitchFocusablePropNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.focusablePropNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('focusablePropNone')
+ expect(obj.$attrs.focusable).assertEqual('false')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchDataProp
+ * @tc.desc ACE
+ */
+ it('testSwitchDataProp', 0, async function (done) {
+ console.info('testSwitchDataProp START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataProp);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('dataProp')
+ expect(obj.$attrs.dataSwitch).assertEqual(undefined);
+ console.info("[switchProps] get dataSwitch value is: " + JSON.stringify(obj.$attrs.dataSwitch));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchDataPropNone
+ * @tc.desc ACE
+ */
+ it('testSwitchDataPropNone', 0, async function (done) {
+ console.info('testSwitchDataPropNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dataPropNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('dataPropNone')
+ expect(obj.$attrs.dataSwitch).assertEqual(undefined)
+ console.info("[switchProps] get dataSwitch value is: " + JSON.stringify(obj.$attrs.dataSwitch));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchClickEffectPropSmall
+ * @tc.desc ACE
+ */
+ it('testSwitchClickEffectPropSmall', 0, async function (done) {
+ console.info('testSwitchClickEffectPropSmall START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropSmall);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropSmall')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-small')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchClickEffectPropMedium
+ * @tc.desc ACE
+ */
+ it('testSwitchClickEffectPropMedium', 0, async function (done) {
+ console.info('testSwitchClickEffectPropMedium START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropMedium);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropMedium')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-medium')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchClickEffectPropLarge
+ * @tc.desc ACE
+ */
+ it('testSwitchClickEffectPropLarge', 0, async function (done) {
+ console.info('testSwitchClickEffectPropLarge START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropLarge);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropLarge')
+ expect(obj.$attrs.clickEffect).assertEqual('spring-large')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchClickEffectPropNone
+ * @tc.desc ACE
+ */
+ it('testSwitchClickEffectPropNone', 0, async function (done) {
+ console.info('testSwitchClickEffectPropNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.clickEffectPropNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('clickEffectPropNone')
+ expect(obj.$attrs.clickEffect).assertEqual(undefined)
+ console.info("[switchProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchDirPropRtl
+ * @tc.desc ACE
+ */
+ it('testSwitchDirPropRtl', 0, async function (done) {
+ console.info('testSwitchDirPropRtl START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropRtl);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('dirPropRtl')
+ expect(obj.$attrs.dir).assertEqual('rtl')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchDirPropLtr
+ * @tc.desc ACE
+ */
+ it('testSwitchDirPropLtr', 0, async function (done) {
+ console.info('testSwitchDirPropLtr START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropLtr);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('dirPropLtr')
+ expect(obj.$attrs.dir).assertEqual('ltr')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchDirPropAuto
+ * @tc.desc ACE
+ */
+ it('testSwitchDirPropAuto', 0, async function (done) {
+ console.info('testSwitchDirPropAuto START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropAuto);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('dirPropAuto')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchDirPropNone
+ * @tc.desc ACE
+ */
+ it('testSwitchDirPropNone', 0, async function (done) {
+ console.info('testSwitchDirPropNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.dirPropNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('dirPropNone')
+ expect(obj.$attrs.dir).assertEqual('auto')
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchForPropNull
+ * @tc.desc ACE
+ */
+ it('testSwitchForPropNull', 0, async function (done) {
+ console.info('testSwitchForPropNull START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropNull);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('forPropNull')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[switchProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchForPropOne
+ * @tc.desc ACE
+ */
+ it('testSwitchForPropOne', 0, async function (done) {
+ console.info('testSwitchForPropOne START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropOne);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('forPropOne')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[switchProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchForPropThree
+ * @tc.desc ACE
+ */
+ it('testSwitchForPropThree', 0, async function (done) {
+ console.info('testSwitchForPropThree START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.forPropThree);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('forPropThree')
+ expect(obj.$attrs.for).assertEqual(undefined)
+ console.info("[switchProps] get for value is: " + JSON.stringify(obj.$attrs.for));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchIfPropTrue
+ * @tc.desc ACE
+ */
+ it('testSwitchIfPropTrue', 0, async function (done) {
+ console.info('testSwitchIfPropTrue START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.ifPropTrue);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('ifPropTrue')
+ expect(obj.$attrs.if).assertEqual(undefined)
+ console.info("[switchProps] get for value is: " + JSON.stringify(obj.$attrs.if));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchShowPropTrue
+ * @tc.desc ACE
+ */
+ it('testSwitchShowPropTrue', 0, async function (done) {
+ console.info('testSwitchShowPropTrue START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropTrue);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('showPropTrue')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[switchProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchShowPropFalse
+ * @tc.desc ACE
+ */
+ it('testSwitchShowPropFalse', 0, async function (done) {
+ console.info('testSwitchShowPropFalse START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropFalse);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('showPropFalse')
+ expect(obj.$attrs.show).assertEqual('false')
+ console.info("[switchProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchShowPropNone
+ * @tc.desc ACE
+ */
+ it('testSwitchShowPropNone', 0, async function (done) {
+ console.info('testSwitchShowPropNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showPropNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('showPropNone')
+ expect(obj.$attrs.show).assertEqual('true')
+ console.info("[switchProps] get show value is: " + JSON.stringify(obj.$attrs.show));
+ done();
+ });
+
+ // 特有属性
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchCheckedTrue
+ * @tc.desc ACE
+ */
+ it('testSwitchCheckedTrue', 0, async function (done) {
+ console.info('testSwitchCheckedTrue START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.checkedTrue);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('checkedTrue')
+ expect(obj.$attrs.checked).assertEqual('true')
+ console.info("[switchProps] get checked value is: " + JSON.stringify(obj.$attrs.checked));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchCheckedFalse
+ * @tc.desc ACE
+ */
+ it('testSwitchCheckedFalse', 0, async function (done) {
+ console.info('testSwitchCheckedFalse START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.checkedFalse);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('checkedFalse')
+ expect(obj.$attrs.checked).assertEqual('false')
+ console.info("[switchProps] get checked value is: " + JSON.stringify(obj.$attrs.checked));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchCheckedNone
+ * @tc.desc ACE
+ */
+ it('testSwitchCheckedNone', 0, async function (done) {
+ console.info('testSwitchCheckedNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.checkedNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('checkedNone')
+ expect(obj.$attrs.checked).assertEqual('false')
+ console.info("[switchProps] get checked value is: " + JSON.stringify(obj.$attrs.checked));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchShowTextTrue
+ * @tc.desc ACE
+ */
+ it('testSwitchShowTextTrue', 0, async function (done) {
+ console.info('testSwitchShowTextTrue START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showTextTrue);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('showTextTrue')
+ expect(obj.$attrs.showtext).assertEqual("true")
+ console.info("[switchProps] get showtext value is: " + JSON.stringify(obj.$attrs.showtext));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchShowTextFalse
+ * @tc.desc ACE
+ */
+ it('testSwitchShowTextFalse', 0, async function (done) {
+ console.info('testSwitchShowTextFalse START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showTextFalse);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('showTextFalse')
+ expect(obj.$attrs.showtext).assertEqual("false")
+ console.info("[switchProps] get showtext value is: " + JSON.stringify(obj.$attrs.showtext));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchShowTextNone
+ * @tc.desc ACE
+ */
+ it('testSwitchShowTextNone', 0, async function (done) {
+ console.info('testSwitchShowTextNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.showTextNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('showTextNone')
+ expect(obj.$attrs.showtext).assertEqual('false')
+ console.info("[switchProps] get showtext value is: " + JSON.stringify(obj.$attrs.showtext));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchTextOn
+ * @tc.desc ACE
+ */
+ it('testSwitchTextOn', 0, async function (done) {
+ console.info('testSwitchTextOn START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.textOn);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('textOn')
+ expect(obj.$attrs.texton).assertEqual("开")
+ console.info("[switchProps] get texton value is: " + JSON.stringify(obj.$attrs.texton));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchTextOnNone
+ * @tc.desc ACE
+ */
+ it('testSwitchTextOnNone', 0, async function (done) {
+ console.info('testSwitchTextOnNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.textOnNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('textOnNone')
+ expect(obj.$attrs.texton).assertEqual('On')
+ console.info("[switchProps] get texton value is: " + JSON.stringify(obj.$attrs.texton));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchTextOff
+ * @tc.desc ACE
+ */
+ it('testSwitchTextOff', 0, async function (done) {
+ console.info('testSwitchTextOff START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.textOff);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('textOff')
+ expect(obj.$attrs.textoff).assertEqual("关")
+ console.info("[switchProps] get textoff value is: " + JSON.stringify(obj.$attrs.textoff));
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testSwitchTextOffNone
+ * @tc.desc ACE
+ */
+ it('testSwitchTextOffNone', 0, async function (done) {
+ console.info('testSwitchTextOffNone START');
+ console.info("[switchProps] get globalThis.value is: " + JSON.stringify(globalThis.value));
+
+ let obj = JSON.parse(globalThis.value.textOffNone);
+ console.info("[switchProps] get inspector value is: " + JSON.stringify(obj));
+ console.info("[switchProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs));
+
+ expect(obj.$type).assertEqual('switch')
+ expect(obj.$attrs.id).assertEqual('textOffNone')
+ expect(obj.$attrs.textoff).assertEqual('Off')
+ console.info("[switchProps] get textoff value is: " + JSON.stringify(obj.$attrs.textoff));
+ done();
+ });
+});