First
@@ -118,7 +118,7 @@
stepper通用样式5
-
+
First
@@ -138,7 +138,7 @@
-
+
First
@@ -162,7 +162,7 @@
stepper特有样式
-
+
First
@@ -194,7 +194,7 @@
stepper动画样式1
@@ -222,7 +222,7 @@
stepper动画样式2
@@ -290,7 +290,7 @@
stepper通用属性2
-
@@ -341,7 +341,7 @@
stepper特有属性4
-
+
First
@@ -373,7 +373,7 @@
stepper通用事件1
@@ -520,7 +520,7 @@
@@ -598,7 +598,7 @@
stepper渐变样式2
@@ -626,7 +626,7 @@
stepper渐变样式3
@@ -654,7 +654,7 @@
stepper渐变样式4
@@ -694,7 +694,7 @@
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"
- id="mystepper"
+ id="access1"
index="0"
onnext="next"
onback="back">
@@ -731,7 +731,7 @@
@@ -755,7 +755,7 @@
@@ -779,7 +779,7 @@
@@ -809,7 +809,7 @@
@@ -833,7 +833,7 @@
@@ -857,7 +857,7 @@
@@ -886,7 +886,7 @@
@@ -910,7 +910,7 @@
@@ -934,7 +934,7 @@
@@ -968,7 +968,7 @@
stepper多模输入1
diff --git a/ace/ace_standard/src/main/js/default/pages/stepper/index.js b/ace/ace_standard/src/main/js/default/pages/stepper/index.js
index 73fe1715c7af019abc40f42484527eea5ad5c5a1..58095131b767d33d087606729d22f908b14dc51d 100644
--- a/ace/ace_standard/src/main/js/default/pages/stepper/index.js
+++ b/ace/ace_standard/src/main/js/default/pages/stepper/index.js
@@ -106,10 +106,39 @@ export default {
},
setRightButton(e) {
this.$element('mystepper').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('style1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('style2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('style2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('style3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('style4').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('style5').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('style6').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('style7').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('ani1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('ani2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
this.$element('prop1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
this.$element('prop2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
- this.$element('mystepper1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
- this.$element('mystepper2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('prop3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('prop4').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('event1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('event2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('function1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('function2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('gradient1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('gradient2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('gradient3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('gradient4').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('access1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('ato1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('ato2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('ato3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('atom1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('atom2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('atom3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('atomA1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('atomA2').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('atomA3').setNextButtonStatus({status: 'skip', label: 'SKIP'});
+ this.$element('mul1').setNextButtonStatus({status: 'skip', label: 'SKIP'});
},
next(e) {
var index = {
@@ -447,7 +476,7 @@ export default {
},
functionTest1(event){
- var function1 = this.$element('mystepper1');
+ var function1 = this.$element('function1');
function1.focus(true)
var rect = function1.getBoundingClientRect();
var width = rect.width;
@@ -462,7 +491,7 @@ export default {
},
functionTest2(event){
- var function2 = this.$element('mystepper2');
+ var function2 = this.$element('function2');
let observer = function2.createIntersectionObserver({
ratios: [0.2, 0], // number
});
diff --git a/ace/ace_standard/src/main/js/default/pages/tab-bar/index.css b/ace/ace_standard/src/main/js/default/pages/tab-bar/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..d9879947b50cc371672b207e6e6e14d7ce3e06f2
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/tab-bar/index.css
@@ -0,0 +1,443 @@
+/**
+ * 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 */
+.tabs {
+ width: 100%;
+ height: 40px;
+}
+.tabcontent {
+ width: 100%;
+ height: 20%;
+ justify-content: center;
+}
+.item-content {
+ height: 100%;
+ justify-content: center;
+}
+.item-title {
+ font-size: 12px;
+}
+.tab-bar {
+ margin: 1px;
+ width: 100%;
+ height: 60%;
+ border-color: #007dff;
+ border-width: 1px;
+}
+.tab-text {
+ font-size: 9px;
+ width: 100%;
+ text-align: center;
+}
+
+.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: 20%;
+ flex-direction: column;
+}
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ height: 70%;
+ flex-direction: column;
+ padding-left: 2px;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.function-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.gradient-container{
+ flex-direction: column;
+ height: 40%;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 20%;
+}
+
+.atom-container{
+ flex-direction: column;
+ height: 60%;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 13px;
+ text-align: center;
+ margin-top: 1px;
+}
+
+.style1{
+ width: 100%;
+ height: 40px;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 60px;
+ padding-left: 1px;
+ padding-top: 1px;
+ padding-right: 1px;
+ padding-bottom: 1px;
+ margin-left: 1px;
+ margin-top: 1px;
+ margin-right: 1px;
+ margin-bottom: 1px;
+ 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: 100%;
+ height: 40px;
+ padding-start: 1px;
+ padding-end: 1px;
+ margin-start: 2px;
+ margin-end: 1px;
+ 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-top: 30%;
+ padding-left: 10%;
+ padding-right: 10%;
+ padding-bottom: 30%;
+ margin: 1px;
+ 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: 40px;
+ padding: 1px;
+ margin: 2px;
+ border: 2px solid #000000;
+}
+
+.style5{
+ width: 100%;
+ 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: 100%;
+ height: 60px;
+ position: absolute;
+ left: -57;
+ top: 15px;
+ bottom: 5px;
+ right: 2px;
+ background-color: pink;
+ border-image: url('common/images/image.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.barStyle6{
+ width: 100%;
+ height: 35%;
+ background-color: pink;
+ border-image: url('common/images/image.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ width: 100%;
+ height: 60px;
+ margin-bottom: 2px;
+ margin-top: 2px;
+ color: green;
+ stroke-width: 40px;
+ line-cap: round;
+}
+
+.tstyle {
+ width: 100%;
+ height: 30px;
+ margin-bottom: 2px;
+ margin-top: 2px;
+ color: green;
+ stroke-width: 40px;
+ line-cap: round;
+}
+
+.barStyle7{
+ width: 100%;
+ height: 60px;
+ margin-bottom: 2px;
+ margin-top: 6px;
+ color: green;
+}
+
+.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{
+ flex-direction: row;
+ width: 100%;
+ height: 40px;
+ overflow:scroll;
+}
+
+.event5{
+ flex-direction: column;
+ width: 100%;
+ height: 90px;
+ overflow:scroll;
+}
+
+#prop1 {
+ color: #ad4e2a;
+ width: 100%;
+ height: 40px;
+ margin: 1px;
+ border-color: #007dff;
+ border-width: 1px;
+}
+
+.prop2 {
+ color: #343524;
+ stroke-width: 15px;
+ line-cap: round;
+ margin: 5px;
+}
+
+.prop4 {
+ color: #456345;
+ stroke-width: 25px;
+ line-cap: round;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+
+.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{
+ background-color: #ad4e2a;
+ width: 100%;
+ height: 55px;
+ margin: 5px;
+}
+
+.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);
+}
+
+.access1{
+ color: #321124;
+ stroke-width: 30px;
+ line-cap: square;
+ margin: 5px;
+}
+
+.multimode1{
+ color: #978666;
+ stroke-width: 30px;
+ line-cap: square;
+ 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/tab-bar/index.hml b/ace/ace_standard/src/main/js/default/pages/tab-bar/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..18b85e016b365d2abce7a49b46379073e8dce0ff
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/tab-bar/index.hml
@@ -0,0 +1,580 @@
+
+
+
+
+
+
+
+ 通用样式
+
+
+ tabs通用样式1
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs通用样式2
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs通用样式3
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs通用样式4
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs通用样式5
+
+
+
+
+ Home
+ Index
+
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs特有样式
+
+
+
+ Home
+ Index
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ tabs动画样式1
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs动画样式2
+
+
+
+ Home
+ Index
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ tabs通用属性1
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs通用属性2
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs通用属性3
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs特有属性4
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs特有属性5
+
+
+
+ Home
+ Index
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ tabs通用事件1
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs通用事件2
+
+
+
+ Home
+ Index
+
+
+
+ tabs通用事件3
+
+
+
+ Home
+ Index
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ tabs通用方法1
+
+
+
+ Home
+ Index
+
+
+
+
+ tab-bar通用方法2
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs通用方法3
+
+
+
+ Home
+ Index
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ tabs渐变样式1
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs渐变样式2
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs渐变样式3
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs渐变样式4
+
+
+
+ Home
+ Index
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ tabs无障碍1
+
+
+
+ Home
+ Index
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ tabs原子布局1
+
+
+
+
+ Home
+ Index
+
+
+
+
+ Home
+ Index
+
+
+
+
+ Home
+ Index
+
+
+
+
+
+ tabs原子布局2
+
+
+
+
+ Home
+ Index
+
+
+
+
+ Home
+ Index
+
+
+
+
+ Home
+ Index
+
+
+
+
+ tabs原子布局3
+
+
+
+
+ Home
+ Index
+
+
+
+
+ Home
+ Index
+
+
+
+
+ Home
+ Index
+
+
+
+
+
+
+
+ 多模输入
+
+
+ tabs多模输入1
+
+
+
+ Home
+ Index
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/tab-bar/index.js b/ace/ace_standard/src/main/js/default/pages/tab-bar/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4bd702c40097d26363cf66834eb5835317a9b058
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/tab-bar/index.js
@@ -0,0 +1,492 @@
+/**
+ * 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 {
+ change: function(e) {
+ console.log("Tab index: " + e.index);
+ },
+
+ 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'
+ });
+ }
+
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/tab-content/index.css b/ace/ace_standard/src/main/js/default/pages/tab-content/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..f6bccdaa3abd6ea7ed3c76790db4c9307156e1a6
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/tab-content/index.css
@@ -0,0 +1,420 @@
+/**
+ * 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 */
+.tabs {
+ width: 100%;
+ height: 40px;
+}
+.tabcontent {
+ width: 100%;
+ height: 28%;
+ justify-content: center;
+}
+.item-content {
+ height: 100%;
+ justify-content: center;
+}
+.item-title {
+ font-size: 12px;
+}
+.tab-bar {
+ margin: 1px;
+ width: 100%;
+ height: 60%;
+ border-color: #007dff;
+ border-width: 1px;
+}
+.tab-text {
+ font-size: 9px;
+ width: 100%;
+ text-align: center;
+}
+
+.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: 60%;
+}
+.contain1{
+ width: 100%;
+ height: 23%;
+ flex-direction: column;
+}
+.ani-container{
+ flex-direction: column;
+ height: 100%;
+ flex-weight: 1;
+}
+
+.prop-container{
+ height: 55%;
+ flex-direction: column;
+ padding-left: 2px;
+}
+
+.event-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.function-container{
+ flex-direction: column;
+ height: 30%;
+}
+
+.gradient-container{
+ flex-direction: column;
+ height: 50%;
+}
+
+.access-container{
+ flex-direction: column;
+ height: 20%;
+}
+
+.atom-container{
+ flex-direction: column;
+ height: 60%;
+}
+
+.multimode-container{
+ flex-direction: column;
+}
+
+.title{
+ width: 100%;
+ font-size: 18px;
+ margin: 2px;
+ font-weight: bold;
+ text-align: center;
+}
+
+.sub-title{
+ width: 100%;
+ font-size: 10px;
+ text-align: center;
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+.style1{
+ width: 100%;
+ height: 40px;
+ min-width: 25px;
+ min-height: 10px;
+ max-width: 300px;
+ max-height: 60px;
+ padding-left: 1px;
+ padding-top: 1px;
+ padding-right: 1px;
+ padding-bottom: 1px;
+ margin-left: 1px;
+ margin-top: 1px;
+ margin-right: 1px;
+ margin-bottom: 1px;
+ 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: 100%;
+ height: 40px;
+ padding-start: 1px;
+ padding-end: 1px;
+ margin-start: 2px;
+ margin-end: 1px;
+ 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-top: 30%;
+ padding-left: 10%;
+ padding-right: 10%;
+ padding-bottom: 30%;
+ margin: 1px;
+ 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: 40px;
+ padding: 1px;
+ margin: 2px;
+ border: 2px solid #000000;
+}
+
+.style5{
+ width: 100%;
+ height: 60px;
+ margin-top: 2px;
+ 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: 100%;
+ height: 60px;
+ position: absolute;
+ left: -57;
+ top: 10px;
+ bottom: 10px;
+ right: 2px;
+ background-color: pink;
+ border-image: url('common/images/image.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
+}
+
+.style7 {
+ width: 100%;
+ height: 60px;
+ margin-bottom: 2px;
+ margin-top: 2px;
+ color: green;
+ stroke-width: 40px;
+ 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{
+ flex-direction: row;
+ width: 100%;
+ height: 40px;
+ overflow:scroll;
+}
+
+.event5{
+ flex-direction: column;
+ width: 100%;
+ height: 90px;
+ overflow:scroll;
+}
+
+#prop1 {
+ color: #ad4e2a;
+ width: 100%;
+ height: 40px;
+ margin: 1px;
+ border-color: #007dff;
+ border-width: 1px;
+}
+
+.prop2 {
+ color: #343524;
+ width: 100%;
+ height: 40px;
+ margin: 5px;
+}
+
+.prop4 {
+ color: #456345;
+ stroke-width: 25px;
+ line-cap: round;
+ margin: 5px;
+}
+
+.prop5 {
+ color: #831834;
+ stroke-width: 40px;
+ line-cap: square;
+ margin: 5px;
+ height: 70px;
+}
+
+
+.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{
+ background-color: #ad4e2a;
+ width: 100%;
+ height: 55px;
+ margin: 5px;
+}
+
+.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);
+}
+
+.access1{
+ color: #321124;
+ stroke-width: 30px;
+ line-cap: square;
+ margin: 5px;
+}
+
+.multimode1{
+ color: #978666;
+ stroke-width: 30px;
+ line-cap: square;
+ 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/tab-content/index.hml b/ace/ace_standard/src/main/js/default/pages/tab-content/index.hml
new file mode 100644
index 0000000000000000000000000000000000000000..884078ed68dd8fcab2a5e9657501fa86ada9c15d
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/tab-content/index.hml
@@ -0,0 +1,709 @@
+
+
+
+
+
+
+
+ 通用样式
+
+
+ tab-content通用样式1
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tab-content通用样式2
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tab-content通用样式3
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tab-content通用样式4
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tab-content通用样式5
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+
+
+
+
+ 动画样式
+
+
+ tabs动画样式1
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tabs动画样式2
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 通用属性
+
+
+ tab-content通用属性1
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tab-content通用属性2
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tab-content通用属性3
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tabs特有属性4
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tabs特有属性5
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+
+
+
+ 通用事件
+
+
+ tab-content通用事件1
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tab-content通用事件2
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+ tab-content通用事件3
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+
+
+
+
+
+ 通用方法
+
+
+ tab-content通用方法1
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tab-content通用方法2
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tab-content通用方法3
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 渐变样式
+
+
+ tabs渐变样式1
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tabs渐变样式2
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tabs渐变样式3
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tabs渐变样式4
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+
+
+
+
+ 无障碍
+
+
+ tabs无障碍1
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+
+
+
+ 原子布局
+
+
+ tabs原子布局1
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+ tabs原子布局2
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+ tabs原子布局3
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+
+
+ 多模输入
+
+
+ tabs多模输入1
+
+
+
+
+ First
+
+
+ Second
+
+
+
+
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/tab-content/index.js b/ace/ace_standard/src/main/js/default/pages/tab-content/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..4bd702c40097d26363cf66834eb5835317a9b058
--- /dev/null
+++ b/ace/ace_standard/src/main/js/default/pages/tab-content/index.js
@@ -0,0 +1,492 @@
+/**
+ * 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 {
+ change: function(e) {
+ console.log("Tab index: " + e.index);
+ },
+
+ 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'
+ });
+ }
+
+}
\ No newline at end of file
diff --git a/ace/ace_standard/src/main/js/default/pages/tabs/index.css b/ace/ace_standard/src/main/js/default/pages/tabs/index.css
index 2998b93c6bb699d9642873fc5044555c31ccc775..06b41a39a11d8d3084224e27097c49fab8bc2e4d 100644
--- a/ace/ace_standard/src/main/js/default/pages/tabs/index.css
+++ b/ace/ace_standard/src/main/js/default/pages/tabs/index.css
@@ -72,7 +72,7 @@
}
.prop-container{
- height: 60%;
+ height: 70%;
flex-direction: column;
padding-left: 2px;
}
@@ -84,7 +84,7 @@
.function-container{
flex-direction: column;
- height: 40%;
+ height: 30%;
}
.gradient-container{
@@ -263,6 +263,17 @@
stroke-width: 40px;
line-cap: round;
}
+
+.tstyle {
+ width: 100%;
+ height: 30px;
+ margin-bottom: 2px;
+ margin-top: 2px;
+ color: green;
+ stroke-width: 40px;
+ line-cap: round;
+}
+
.barStyle7{
width: 100%;
height: 60px;
@@ -290,44 +301,29 @@
}
.event4{
- flex-direction: row;
width: 100%;
height: 40px;
- overflow:scroll;
+ background-color: blanchedalmond;
}
-.event5{
- flex-direction: column;
- width: 100%;
- height: 90px;
- overflow:scroll;
-}
#prop1 {
- color: #ad4e2a;
- stroke-width: 10px;
- line-cap: square;
+ background-color: mediumslateblue;
margin: 5px;
}
.prop2 {
- color: #343524;
- stroke-width: 15px;
- line-cap: round;
+ background-color: salmon;
margin: 5px;
}
.prop4 {
- color: #456345;
- stroke-width: 25px;
- line-cap: round;
+ background-color: skyblue;
margin: 5px;
}
.prop5 {
- color: #831834;
- stroke-width: 40px;
- line-cap: square;
+ background-color: gold;
margin: 5px;
height: 70px;
}
@@ -413,9 +409,7 @@
}
.multimode1{
- color: #978666;
- stroke-width: 30px;
- line-cap: square;
+ background-color: firebrick;
margin: 5px;
}
diff --git a/ace/ace_standard/src/main/js/default/pages/tabs/index.hml b/ace/ace_standard/src/main/js/default/pages/tabs/index.hml
index 7a63ba835bb6c01b7966e307460c8f8058ac0bda..2fbe7a7c21d84ec50b79bfa7aeca20bf8b0f2692 100644
--- a/ace/ace_standard/src/main/js/default/pages/tabs/index.hml
+++ b/ace/ace_standard/src/main/js/default/pages/tabs/index.hml
@@ -27,18 +27,6 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -48,18 +36,6 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -69,18 +45,6 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -90,18 +54,6 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -112,34 +64,10 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -148,20 +76,6 @@
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -178,18 +92,6 @@
index="0"
vertical="true"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -199,18 +101,6 @@
index="0"
vertical="true"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -238,32 +128,6 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -275,101 +139,38 @@
click-effect="spring-large"
dir ="ltr"
class = "tabs style7 prop2"
+ ref="prop2"
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
tabs通用属性3
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
tabs特有属性4
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
tabs特有属性5
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -382,41 +183,19 @@
tabs通用事件1
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
tabs通用事件2
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
tabs通用事件3
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
tabs特有事件1
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -550,87 +245,33 @@
tabs通用方法1
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
tabs通用方法2
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
tabs通用方法3
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -654,18 +295,6 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -675,18 +304,6 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -696,18 +313,6 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -717,18 +322,6 @@
index="0"
vertical="false"
onchange="change">
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -742,7 +335,7 @@
tabs无障碍1
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -775,56 +356,20 @@
tabs原子布局1
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -832,112 +377,40 @@
tabs原子布局2
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
tabs原子布局3
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
-
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
@@ -950,23 +423,12 @@
tabs多模输入1
-
- Home
- Index
-
-
-
- First
-
-
- Second
-
-
-
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 6118164d5d49b50feda3ad464b7db07b552f800b..be854384b4866cdf0f59a643796fa881e7e0e014 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
@@ -54,7 +54,30 @@ describe('aceJsTest', function () {
afterEach(async function () {
console.info('[aceJsTest] after each called')
await backToIndex();
- await sleep(1000)
+ await sleep(5000)
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testStepperComponent
+ * @tc.desc ACE
+ */
+ it('testStepperComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/stepper/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push stepper page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push stepper page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.stepper] getState" + JSON.stringify(pages));
+ expect("pages/stepper/").assertEqual(pages.path);
+ done();
});
/**
@@ -829,29 +852,6 @@ describe('aceJsTest', function () {
done();
});
- /**
- * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
- * @tc.name testStepperComponent
- * @tc.desc ACE
- */
- it('testStepperComponent', 0, async function (done) {
- let result;
- let options = {
- uri: 'pages/stepper/index'
- }
- try {
- result = router.push(options)
- console.info("push stepper page success " + JSON.stringify(result));
- } catch (err) {
- console.error("push stepper page error " + JSON.stringify(result));
- }
- await sleep(5000)
- let pages = router.getState();
- console.info("[router.stepper] getState" + JSON.stringify(pages));
- expect("pages/stepper/").assertEqual(pages.path);
- done();
- });
-
/**
* @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
* @tc.name testRefreshComponent
@@ -920,4 +920,50 @@ describe('aceJsTest', function () {
expect("pages/tabs/").assertEqual(pages.path);
done();
});
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testTabBarComponent
+ * @tc.desc ACE
+ */
+ it('testTabBarComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/tab-bar/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push tab-bar page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push tab-bar page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.tab-bar] getState" + JSON.stringify(pages));
+ expect("pages/tab-bar/").assertEqual(pages.path);
+ done();
+ });
+
+ /**
+ * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100
+ * @tc.name testTabContentComponent
+ * @tc.desc ACE
+ */
+ it('testTabContentComponent', 0, async function (done) {
+ let result;
+ let options = {
+ uri: 'pages/tab-content/index'
+ }
+ try {
+ result = router.push(options)
+ console.info("push tab-content page success " + JSON.stringify(result));
+ } catch (err) {
+ console.error("push tab-content page error " + JSON.stringify(result));
+ }
+ await sleep(5000)
+ let pages = router.getState();
+ console.info("[router.tab-content] getState" + JSON.stringify(pages));
+ expect("pages/tab-content/").assertEqual(pages.path);
+ done();
+ });
});