Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
大约 1 年 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 bfa07e98 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!1965 optimize test cases 

Merge pull request !1965 from bayanxing/master
上级 f426e14b 5f460e4f
展开全部 显示空白变更内容
内联 并排
Showing with 3998 addition and 2476 deletion
ace/ace_standard/src/main/config.json
浏览文件 @ bfa07e98
......@@ -91,7 +91,9 @@
"pages/stack/index",
"pages/stepper/index",
"pages/swiper/index",
"pages/tabs/index"
"pages/tabs/index",
"pages/tab-bar/index",
"pages/tab-content/index"
],
"name": "default",
"window": {
......
ace/ace_standard/src/main/js/default/pages/div/index.hml
浏览文件 @ bfa07e98
......@@ -202,22 +202,22 @@
<text class="sub-title">
div通用方法1
</text>
<div id="function1" class="function1" onattached="functionTest1">
<div id="function1" class="function1" ontouchstart="functionTest1">
</div>
<text class="sub-title">
div通用方法2
</text>
<div id="function2" class="function2" onattached="functionTest2">
<div id="function2" class="function2" ontouchstart="functionTest2">
</div>
<text class="sub-title">
div通用方法3
</text>
<div id="function3" class="function3" onattached="functionTest3">
<div id="function3" class="function3" ontouchstart="functionTest3">
</div>
<text class="sub-title">
div特有方法
</text>
<div id="function4" class="function4" onattached="functionTest4">
<div id="function4" class="function4" ontouchstart="functionTest4">
<div style="height: 100%; width: 40px; background-color: red; margin-left: 10px;"></div>
<div style="height: 100%; width: 40px;background-color: red; margin-left: 10px;"></div>
<div style="height: 100%; width: 40px;background-color: red; margin-left: 10px;"></div>
......
ace/ace_standard/src/main/js/default/pages/listItem/index.css
浏览文件 @ bfa07e98
/**
* 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%;
......@@ -173,7 +157,7 @@
height: 30px;
position: absolute;
left: 5px;
top: 5px;
top: 50px;
bottom: 5px;
right: 10px;
background-color: pink;
......
ace/ace_standard/src/main/js/default/pages/listItem/index.hml
浏览文件 @ bfa07e98
<!--/**
* 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.
*/-->
<div class="container">
<div class="style-container">
<text class="title">
......@@ -21,54 +6,37 @@
<text class="sub-title">
listItem通用样式1
</text>
<list style="height: 150px;">
<list-item class="style1" for="{{array}}">
<text class="text">{{$item.value}}</text>
</list-item>
</list>
<text class="sub-title">
list-item通用样式2
</text>
<list style="height: 80px;">
<list-item class="style2" for="{{array}}" style="height: 20px; margin-top: 5px;">
<text class="text">{{$item.value}}</text>
</list-item>
</list>
<text class="sub-title">
list-item通用样式3
</text>
<list style="height: 200px;">
<list-item class="style3">
<text class="text">通用样式3</text>
</list-item>
</list>
<text class="sub-title">
list-item通用样式4
</text>
<list style="height: 100px;">
<list-item class="style4">
<text class="text"></text>
</list-item>
</list>
<text class="sub-title">
list-item通用样式5
</text>
<div class="contain1">
<list style="height: 100px;">
<div class="contain1" style="height: 100px;">
<list-item class="style5">
<text class="text"></text>
</list-item>
<list-item class="style6">
<text class="text"></text>
</list-item>
</list>
</div>
<text class="sub-title">
list-item特有样式
</text>
<list class="list">
<list-item class="list-item1" for="{{array2}}">
<text class="text" style="font-size: 16px;">{{$item.value}}</text>
</list-item>
</list>
</div>
......@@ -78,79 +46,26 @@
<div class="sub-container">
<text class="title">
通用属性
通用&特有属性
</text>
<list class="prop-container">
<list-item-group>
<list-item id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
<text class="sub-title">
list-item通用属性1
</text>
</list-item>
<list-item class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
<text class="sub-title">
list-item通用属性2
</text>
</list-item>
<list-item style="color: #679855; margin: 5px;" class="prop3">
<text class="sub-title">
div通用属性3
</text>
</list-item>
<list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
clickeffect="true">
<text class="sub-title">
list-item特有属性
</text>
</list-item>
<list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
clickeffect="true" primary="true" section="item">
<text class="sub-title">
list-item特有属性2
</text>
</list-item>
</list-item-group>
</list>
<list class="prop-container">
<list-item id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
<text class="sub-title">
list-item通用属性1
</text>
</list-item>
<list-item class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
<text class="sub-title">
list-item通用属性2
</text>
</list-item>
<list-item style="color: #679855; margin: 5px;" class="prop3">
<text class="sub-title">
list-item通用属性3
</text>
</list-item>
<list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
clickeffect="true">
<text class="sub-title">
list-item特有属性
</text>
</list-item>
<list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
clickeffect="true" sticky="normal">
<text class="sub-title">
list-item特有属性2
</text>
</list-item>
</list>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -200,11 +115,9 @@
list-item动画样式1
</text>
<div class="ani1" >
<list divider="true">
<list-item for="{{array}}" class="listItem">
<text class="text" style="font-size: 16px;">{{$item.value}}</text>
</list-item>
</list>
</div>
</div>
</div>
......@@ -219,24 +132,12 @@
</text>
<list style="height: 200px;">
<list-item class="gradient1">
<text class="sub-title">
list-item渐变样式1
</text>
</list-item>
<list-item class="gradient2">
<text class="sub-title">
list-item渐变样式1
</text>
</list-item>
<list-item class="gradient3">
<text class="sub-title">
list-item渐变样式1
</text>
</list-item>
<list-item class="gradient4">
<text class="sub-title">
list-item渐变样式1
</text>
</list-item>
</list>
</div>
......@@ -253,7 +154,7 @@
accessibilitytext="这是list"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
<list-item class="style2" for="{{array2}}" style="height: 20px; margin-top: 5px;">
<list-item class="style2" for="{{array}}" style="height: 20px; margin-top: 5px;">
<text class="text" style="font-size: 16px;">{{$item.value}}</text>
</list-item>
</list>
......@@ -274,12 +175,6 @@
</list-item>
<list-item style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</list-item>
<list-item style="width:10px; height:20px;background-color: red;display-index: 3;">
</list-item>
<list-item style="width:25px; height:20px;background-color:pink;display-index: 7;">
</list-item>
<list-item style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</list-item>
</list>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
......
ace/ace_standard/src/main/js/default/pages/listItemGroup/index.hml
浏览文件 @ bfa07e98
/**
* 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.
*/
<div class="container">
<div class="style-container">
<text class="title">
......@@ -20,68 +6,33 @@
<text class="sub-title">
listItemGroup样式1
</text>
<list style="height: 150px;">
<list-item-group>
<list-item class="style1" for="{{array}}">
<text class="text">{{$item.value}}</text>
</list-item>
<list-item-group class="style1">
</list-item-group>
</list>
<text class="sub-title">
listItemGroup样式2
</text>
<list style="height: 80px; width: 100%;">
<list-item-group>
<list-item class="style2" for="{{array}}" style="height: 25px; margin-top: 5px; width: 100%;">
<text class="text">{{$item.value}}</text>
</list-item>
<list-item-group class="style2">
</list-item-group>
</list>
<text class="sub-title">
listItemGroup样式3
</text>
<list style="height: 150px;">
<list-item-group>
<list-item class="style3">
<text class="text">通用样式3</text>
</list-item>
<list-item-group class="style3">
</list-item-group>
</list>
<text class="sub-title">
listItemGroup样式4
</text>
<list style="height: 50px;">
<list-item-group>
<list-item class="style4">
<text class="text"></text>
</list-item>
<list-item-group class="style4">
</list-item-group>
</list>
<text class="sub-title">
listItemGroup样式5
</text>
<div class="contain1" style="width: 100%;">
<list style="height: 100px;">
<list-item-group>
<list-item class="style5" style="width: 90%;">
<text class="text"></text>
</list-item>
<list-item class="style6">
<text class="text"></text>
</list-item>
<list-item-group class="style5">
</list-item-group>
</list>
</div>
<text class="sub-title">
listItemGroup样式
</text>
<list class="list">
<list-item-group>
<list-item class="list-item1" for="{{array2}}">
<text class="text" style="font-size: 16px;">{{$item.value}}</text>
</list-item>
<list-item-group class="list-item1">
</list-item-group>
</list>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
......@@ -92,76 +43,26 @@
通用属性
</text>
<list class="prop-container">
<list-item-group>
<list-item id="prop1" class="prop1"
<list-item-group id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
<text class="sub-title">
listGroup属性1
</text>
</list-item>
<list-item class="prop2" ref ="prop2"
</list-item-group>
<list-item-group class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
<text class="sub-title">
listGroup属性2
</text>
</list-item>
<list-item style="color: #679855; margin: 5px;" class="prop3">
<text class="sub-title">
listGroup属性3
</text>
</list-item>
<list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
</list-item-group>
<list-item-group style="color: #679855; margin: 5px;" class="prop3">
</list-item-group>
<list-item-group style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
clickeffect="true">
<text class="sub-title">
listGroup属性
</text>
</list-item>
<list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
clickeffect="true" primary="true" section="item">
<text class="sub-title">
listGroup属性2
</text>
</list-item>
</list-item-group>
</list>
<list class="prop-container">
<list-item-group>
<list-item id="prop1" class="prop1"
disabled = "false" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
<text class="sub-title">
listGroup属性1
</text>
</list-item>
<list-item class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
<text class="sub-title">
listGroup属性2
</text>
</list-item>
<list-item style="color: #679855; margin: 5px;" class="prop3" primary="true" section="item">
<text class="sub-title">
listGroup属性3
</text>
</list-item>
<list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
clickeffect="true">
<text class="sub-title">
listGroup特有属性
</text>
</list-item>
<list-item style="color: deeppink; margin: 5px; background-color: pink" class="prop3"
clickeffect="true" sticky="normal">
clickeffect="true" primary="true" section="item">
<text class="sub-title">
listGroup特有属性
listGroup属性2
</text>
</list-item>
</list-item-group>
......@@ -173,33 +74,24 @@
通用特有事件
</text>
<list style="width: 100%;">
<list-item-group style="width: 100%;" id="groupId" @groupclick="groupClick"
@groupcollapse="groupCollapse" @groupexpand="groupExpand">
<list-item class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
<list-item-group class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel" style="height: 40px;">
<text class="sub-title" >
listItemGroup通用事件1
</text>
</list-item>
<list-item class ="event2" onclick="click" ondoubleclick="doubleClick"
</list-item-group>
<list-item-group class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached" style="height: 40px;">
<text class="sub-title" >
listItemGroup通用事件2
</text>
</list-item>
<list-item class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
</list-item-group>
<list-item-group class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop" style="height: 40px;">
<text class="sub-title" >
listItemGroup通用事件3
</text>
</list-item>
</list-item-group>
<list-item-group style="width: 100%; height: 40px; background-color: deeppink;" id="groupId" @groupclick="groupClick"
@groupcollapse="groupCollapse" @groupexpand="groupExpand">
<list-item style="height: 40px; width: 100%;"></list-item>
</list-item-group>
</list>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -212,13 +104,8 @@
listItemGroup动画1
</text>
<div class="ani1" >
<list divider="true">
<list-item-group>
<list-item for="{{array}}" class="listItem">
<text class="text" style="font-size: 16px;">{{$item.value}}</text>
</list-item>
</list-item-group>
</list>
</div>
</div>
</div>
......@@ -232,27 +119,13 @@
渐变样式
</text>
<list style="height: 200px;">
<list-item-group>
<list-item class="gradient1">
<text class="sub-title">
listGroup渐变1
</text>
</list-item>
<list-item class="gradient2">
<text class="sub-title">
listGroup渐变2
</text>
</list-item>
<list-item class="gradient3">
<text class="sub-title">
listGroup渐变3
</text>
</list-item>
<list-item class="gradient4">
<text class="sub-title">
listGroup渐变4
</text>
</list-item>
<list-item-group class="gradient1">
</list-item-group>
<list-item-group class="gradient2">
</list-item-group>
<list-item-group class="gradient3">
</list-item-group>
<list-item-group class="gradient4">
</list-item-group>
</list>
</div>
......@@ -265,16 +138,12 @@
<text class="sub-title" style="height: 30px;">
listGroup无障碍1
</text>
<list class="access1" accessibilitygroup ="true" style="height: 100%; width: 100%;"
accessibilitytext="这是list"
<list-item-group class="access1"style="height: 100%; width: 100%; background-color: deeppink;"
accessibilitygroup ="true"
accessibilitytext="这是listItemGroup"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
<list-item-group>
<list-item class="style2" for="{{array2}}" style="height: 20px; margin-top: 5px; width: 100%;">
<text class="text" style="font-size: 16px;">{{$item.value}}</text>
</list-item>
</list-item-group>
</list>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
......@@ -286,19 +155,11 @@
listGroup原子布局1
</text>
<list style="flex-direction: row;height: 30px;width: 100%;">
<list-item-group>
<list-item style="width:20px;height:20px;background-color: blue;display-index: 1;">
</list-item>
<list-item style="width:30px; height:20px;background-color: black;display-index: 5;">
</list-item>
<list-item style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</list-item>
<list-item style="width:10px; height:20px;background-color: red;display-index: 3;">
</list-item>
<list-item style="width:25px; height:20px;background-color:pink;display-index: 7;">
</list-item>
<list-item style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</list-item>
<list-item-group style="width:20px;height:20px;background-color: blue;display-index: 1;">
</list-item-group>
<list-item-group style="width:30px; height:20px;background-color: black;display-index: 5;">
</list-item-group>
<list-item-group style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</list-item-group>
</list>
<div style="background-color: #000000; width: 100%; height: 2px;">
......
ace/ace_standard/src/main/js/default/pages/marquee/index.css
浏览文件 @ bfa07e98
......@@ -335,7 +335,6 @@
.prop5 {
color: #831834;
stroke-width: 40px;
line-cap: square;
margin: 5px;
height: 70px;
......@@ -349,7 +348,6 @@
.ani1{
color: #72ac33;
stroke-width: 55px;
line-cap: square;
margin: 5px;
transform-origin: 0% 0%;
......
ace/ace_standard/src/main/js/default/pages/marquee/index.hml
浏览文件 @ bfa07e98
......@@ -20,52 +20,43 @@
通用样式
</text>
<text class="sub-title">
marque通用样式1
通用样式1
</text>
<marquee class="style1">
文字1
</marquee>
<text class="sub-title">
marque通用样式2
通用样式2
</text>
<marquee class="style2">
文字2
</marquee>
<text class="sub-title">
marque通用样式3
通用样式3
</text>
<marquee class="style3">
文字3
</marquee>
<text class="sub-title">
marque通用样式4
通用样式4
</text>
<marquee class="style4">
文字4
</marquee>
<text class="sub-title">
marque通用样式5
通用样式5
</text>
<div class="contain1">
<marquee class="style5">
文字5
</marquee>
<marquee class="style6">
文字6
</marquee>
</div>
<text class="sub-title">
marque特有样式
特有样式
</text>
<div class="style7">
<marquee class="flex-item color-primary">
样式
</marquee>
<marquee class="flex-item color-warning">
样式
</marquee>
<marquee class="flex-item color-success">
样式
</marquee>
</div>
</div>
......@@ -76,16 +67,14 @@
动画样式
</text>
<text class="sub-title">
div动画样式1
动画样式1
</text>
<marquee class="ani1" >
动画1
</marquee>
<text class="sub-title">
div动画样式2
动画样式2
</text>
<marquee class="ani2" >
动画2
</marquee>
</div>
</div>
......@@ -99,35 +88,32 @@
通用属性
</text>
<text class="sub-title">
mar通用属性1
通用属性1
</text>
<marquee id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
属性1----
</marquee>
<text class="sub-title">
mar通用属性2
通用属性2
</text>
<marquee class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
属性2----
</marquee>
<text class="sub-title">
mar通用属性3
通用属性3
</text>
<marquee style="color: #679855; margin: 2px;" class="prop3">
属性3----
</marquee>
<text class="sub-title">
marque特有属性
特有属性
</text>
<marquee style="color: #679855; margin: 5px;" class="prop3"
crollamount="10" loop="-1" direction="right">
属性4----
特有属性
</marquee>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -137,22 +123,20 @@
通用事件
</text>
<text class="sub-title">
mar通用事件1
通用事件1
</text>
<marquee class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
事件1----
</marquee>
<text class="sub-title">
mar通用事件2
通用事件2
</text>
<marquee class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
事件2----
</marquee>
<text class="sub-title">
mar通用事件3
通用事件3
</text>
<marquee class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
......@@ -160,10 +144,9 @@
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
事件3----
</marquee>
<text class="sub-title">
mar特有事件1
特有事件1
</text>
<div class ="event4" onreachstart="reachStart" onreachend="reachEnd">
<marquee id="customMarquee" loop="4" onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish" style="height: 100%; width: 100%; background-color: red; margin-left: 10px;">
......@@ -177,25 +160,22 @@
通用方法
</text>
<text class="sub-title">
marque通用方法1
通用方法1
</text>
<marquee id="function1" class="function1" ontouchstart="functionTest1">
方法1----
</marquee>
<text class="sub-title">
marque通用方法2
通用方法2
</text>
<marquee id="function2" class="function2" ontouchstart="functionTest2">
方法2----
</marquee>
<text class="sub-title">
marque通用方法3
通用方法3
</text>
<marquee id="function3" class="function3" ontouchstart="functionTest3">
方法3----
</marquee>
<text class="sub-title">
marque特有方法
特有方法
</text>
<div class="flex-class">
<button onclick="onStartClick">
......@@ -218,36 +198,36 @@
渐变样式
</text>
<text class="sub-title">
marque渐变样式1
渐变样式1
</text>
<marquee class="gradient1">
</marquee>
<text class="sub-title">
marque渐变样式2
渐变样式2
</text>
<marquee class="gradient2">
</marquee>
<text class="sub-title">
marque渐变样式3
渐变样式3
</text>
<marquee class="gradient3">
</marquee>
<text class="sub-title">
marque渐变样式4
渐变样式4
</text>
<marquee class="gradient4">
</marquee>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<div class="accessibility-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
marque无障碍1
无障碍1
</text>
<marquee class="access1" accessibilitygroup ="true"
<marquee class="accessibility1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
......@@ -260,7 +240,7 @@
原子布局
</text>
<text class="sub-title">
marque原子布局1
原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<marquee style="width:20px;height:20px;background-color: blue;display-index: 1;">
......@@ -277,7 +257,7 @@
</marquee>
</div>
<text class="sub-title">
marque原子布局2
原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<marquee style="height:20px;background-color: blue;flex-weight: 1;">
......@@ -294,7 +274,7 @@
</marquee>
</div>
<text class="sub-title">
marque原子布局3
原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<marquee style="width:30px;background-color: blue;aspect-ratio: 0.6;">
......@@ -317,7 +297,7 @@
多模输入
</text>
<text class="sub-title">
marque多模输入1
多模输入1
</text>
<marquee class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
......
ace/ace_standard/src/main/js/default/pages/marquee/index.js
浏览文件 @ bfa07e98
......@@ -444,6 +444,7 @@ export default {
functionTest3(event){
var function3 = this.$element('function3');
var animation = function3.animate(frames, options);
animation.play()
animation.onfinish = function(){
......
ace/ace_standard/src/main/js/default/pages/panel/index.css
浏览文件 @ bfa07e98
......@@ -50,10 +50,6 @@
flex-direction: column;
}
.multimode-container{
flex-direction: column;
}
.title{
width: 100%;
font-size: 18px;
......@@ -167,7 +163,6 @@
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
......@@ -188,48 +183,6 @@
flex-shrink: 1;
}
.style4{
width: 60%;
height: 5%;
padding: 10px;
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 {
margin-bottom: 10px;
margin-top: 10px;
color: green;
stroke-width: 30px;
line-cap: round;
}
.event1{
width: 60%;
flex-weight: 1;
......@@ -264,12 +217,13 @@
#prop1 {
.prop1 {
color: #ad4e2a;
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
......@@ -381,16 +335,6 @@
margin: 5px;
}
.multimode1{
color: #978666;
stroke-width: 30px;
line-cap: square;
margin: 5px;
}
.function1{
background-color: #ff0000;
width: 60%;
......
ace/ace_standard/src/main/js/default/pages/panel/index.js
浏览文件 @ bfa07e98
......@@ -89,52 +89,52 @@ export default {
},
// 样式
showPanel1() {
this.$element('simplepanel1').show()
this.$element('simplePanel1').show()
},
closePanel1() {
this.$element('simplepanel1').close()
this.$element('simplePanel1').close()
},
showPanel2() {
this.$element('simplepanel2').show()
this.$element('simplePanel2').show()
},
closePanel2() {
this.$element('simplepanel2').close()
this.$element('simplePanel2').close()
},
showPanel3() {
this.$element('simplepanel3').show()
this.$element('simplePanel3').show()
},
closePanel3() {
this.$element('simplepanel3').close()
this.$element('simplePanel3').close()
},
showPanel4() {
this.$element('simplepanel4').show()
this.$element('simplePanel4').show()
},
closePanel4() {
this.$element('simplepanel4').close()
this.$element('simplePanel4').close()
},
showPanel5() {
this.$element('simplepanel5').show()
this.$element('simplePanel5').show()
},
closePanel5() {
this.$element('simplepanel5').close()
this.$element('simplePanel5').close()
},
showPanel6() {
this.$element('simplepanel6').show()
this.$element('simplePanel6').show()
},
closePanel6() {
this.$element('simplepanel6').close()
this.$element('simplePanel6').close()
},
showPanel7() {
this.$element('simplepanel7').show()
this.$element('simplePanel7').show()
},
closePanel7() {
this.$element('simplepanel7').close()
this.$element('simplePanel7').close()
},
showPanel() {
this.$element('simplepanel').show()
this.$element('simplePanel').show()
},
closePanel() {
this.$element('simplepanel').close()
this.$element('simplePanel').close()
},
// 属性
showPanelPro1() {
......@@ -150,28 +150,28 @@ export default {
this.$element('prop2').close()
},
showPanelPro3() {
this.$element('simplepanelPro3').show()
this.$element('simplePanelPro3').show()
},
closePanelPro3() {
this.$element('simplepanelPro3').close()
this.$element('simplePanelPro3').close()
},
showPanelPro4() {
this.$element('simplepanelPro4').show()
this.$element('simplePanelPro4').show()
},
closePanelPro4() {
this.$element('simplepanelPro4').close()
this.$element('simplePanelPro4').close()
},
showPanelPro5() {
this.$element('simplepanelPro5').show()
this.$element('simplePanelPro5').show()
},
closePanelPro5() {
this.$element('simplepanelPro5').close()
this.$element('simplePanelPro5').close()
},
showPanelPro6() {
this.$element('simplepanelPro6').show()
this.$element('simplePanelPro6').show()
},
closePanelPro6() {
this.$element('simplepanelPro6').close()
this.$element('simplePanelPro6').close()
},
//事件
showOne() {
......@@ -200,55 +200,55 @@ export default {
},
// 渐变
showPanelA() {
this.$element('simplepanelA1').show()
this.$element('simplePanelA1').show()
},
closePanelA() {
this.$element('simplepanelA1').close()
this.$element('simplePanelA1').close()
},
showPanelB() {
this.$element('simplepanelB1').show()
this.$element('simplePanelB1').show()
},
closePanelB() {
this.$element('simplepanelB1').close()
this.$element('simplePanelB1').close()
},
showPanelC() {
this.$element('simplepanelC1').show()
this.$element('simplePanelC1').show()
},
closePanelC() {
this.$element('simplepanelC1').close()
this.$element('simplePanelC1').close()
},
showPanelD() {
this.$element('simplepanelD1').show()
this.$element('simplePanelD1').show()
},
closePanelD() {
this.$element('simplepanelD1').close()
this.$element('simplePanelD1').close()
},
// 动画
showPanelAni1() {
this.$element('simplepanelAni1').show()
this.$element('simplePanelAni1').show()
},
closePanelAni1() {
this.$element('simplepanelAni1').close()
this.$element('simplePanelAni1').close()
},
showPanelAni2() {
this.$element('simplepanelAni2').show()
this.$element('simplePanelAni2').show()
},
closePanelAni2() {
this.$element('simplepanelAni2').close()
this.$element('simplePanelAni2').close()
},
// 无障碍
showPanelNo() {
this.$element('simplepanelNo').show()
this.$element('simplePanelNo').show()
},
closePanelNo() {
this.$element('simplepanelNo').close()
this.$element('simplePanelNo').close()
},
// 多模输入
showPanelMore() {
this.$element('simplepanelMore').show()
this.$element('simplePanelMore').show()
},
closePanelMore() {
this.$element('simplepanelMore').close()
this.$element('simplePanelMore').close()
},
changeMode(e) {
this.modeFlag = e.mode
......
ace/ace_standard/src/main/js/default/pages/popup/index.css
浏览文件 @ bfa07e98
......@@ -336,18 +336,16 @@
}
.access1{
color: #321124;
stroke-width: 30px;
line-cap: square;
background-color: #321124;
margin: 5px;
width: 90%;
height: 30px;
}
.multimode1{
color: #978666;
stroke-width: 30px;
line-cap: square;
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
......
ace/ace_standard/src/main/js/default/pages/popup/index.hml
浏览文件 @ bfa07e98
<div class="container">
<popup id="popup1"
class="popup1 style1"
class="style1"
target="text1"
placement="top"
style="mask-color:blue;"
......@@ -14,7 +14,7 @@
</popup>
<popup id="popup2"
class="popup2 style2"
class="style2"
target="text2"
placement="left"
keepalive="true"
......@@ -26,7 +26,7 @@
</popup>
<popup id="popup3"
class="popup3 style3"
class="style3"
target="text3"
placement="top"
keepalive="true"
......@@ -38,7 +38,7 @@
</popup>
<popup id="popup4"
class="popup4 style4"
class="style4"
target="text4"
placement="top"
keepalive="true"
......@@ -50,7 +50,7 @@
</popup>
<popup id="popup5"
class="popup5 style5"
class="style5"
target="text5"
placement="top"
keepalive="true"
......@@ -62,7 +62,7 @@
</popup>
<popup id="popup6"
class="popup6 style6"
class="style6"
target="text6"
placement="top"
keepalive="true"
......@@ -74,7 +74,7 @@
</popup>
<popup id="popup7"
class="popup7 style7"
class="style7"
target="text7"
placement="top"
keepalive="true"
......@@ -86,7 +86,6 @@
</popup>
<popup id="prop1"
class="pro"
target="textPro1"
disabled = "true"
data-name ="prop1"
......@@ -110,7 +109,6 @@
</popup>
<popup id="prop3"
class="prop3"
style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;"
target="textPro3"
placement="top"
......@@ -147,7 +145,6 @@
</popup>
<popup id="prop6"
class="pro6"
target="textPro6"
placement="top"
keepalive="true"
......@@ -158,7 +155,6 @@
</popup>
<popup id="prop7"
class="pro7"
target="textPro7"
placement="bottom"
keepalive="true"
......@@ -170,7 +166,6 @@
</popup>
<popup id="prop8"
class="pro8"
target="textPro8"
placement="topLeft"
keepalive="false"
......@@ -182,7 +177,6 @@
</popup>
<popup id="prop9"
class="pro9"
target="textPro9"
placement="topRight"
keepalive="false"
......@@ -194,7 +188,6 @@
</popup>
<popup id="prop10"
class="pro10"
target="textPro10"
placement="bottomLeft"
keepalive="false"
......@@ -206,7 +199,6 @@
</popup>
<popup id="prop11"
class="pro11"
target="textPro11"
placement="bottomRight"
keepalive="false"
......@@ -599,7 +591,6 @@
<text id="gradient4" class="sub-title">
popup渐变样式4
</text>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
......@@ -607,10 +598,9 @@
<text class="title">
无障碍
</text>
<text id="access1" id="access1" class="sub-title">
<text id="access1" class="sub-title">
popup无障碍1
</text>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
......@@ -618,10 +608,9 @@
<text class="title">
多模输入
</text>
<text id="mul" class="sub-title multimode1">
<text id="mul" class="sub-title">
popup多模输入1
</text>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/refresh/index.css
浏览文件 @ bfa07e98
......@@ -225,6 +225,7 @@ refresh{
}
.style5{
background: linear-gradient(pink,#fff000);
width: 50%;
margin-bottom: 5px;
height: 40%;
......@@ -246,7 +247,8 @@ refresh{
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;
background: linear-gradient(pink,#fff000);
border-image: url('common/images/image.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
......@@ -259,6 +261,7 @@ refresh{
line-cap: round;
height: 12%;
background-color:darkorchid;
background: linear-gradient(gray,#fff000);
progress-color:skyblue;
}
......
ace/ace_standard/src/main/js/default/pages/refresh/index.hml
浏览文件 @ bfa07e98
......@@ -28,13 +28,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -44,13 +37,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -60,13 +46,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text3 text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -76,13 +55,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -93,25 +65,11 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<refresh class="style6"
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
<text class="sub-title">
......@@ -121,13 +79,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
......@@ -144,13 +95,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -160,13 +104,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
......@@ -192,13 +129,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -214,13 +144,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -231,13 +154,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -248,16 +164,9 @@
type="auto"
lasttime="true"
friction="42"
timeoffset="10"
timeoffset="2px"
refreshing="true"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -271,13 +180,6 @@
timeoffset="5px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -298,13 +200,6 @@
timeoffset="5px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -318,13 +213,6 @@
timeoffset="5px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -338,13 +226,6 @@
timeoffset="5px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -358,13 +239,6 @@
timeoffset="5px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -378,6 +252,7 @@
refresh通用方法1
</text>
<refresh class="style7 function1"
id="function1"
offset="10px"
lasttime="false"
friction="52"
......@@ -385,13 +260,6 @@
timeoffset="5px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
</div>
......@@ -412,13 +280,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -428,13 +289,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -444,13 +298,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<text class="sub-title">
......@@ -460,13 +307,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
......@@ -488,13 +328,6 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -512,37 +345,16 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<refresh class="atstyle"
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<refresh class="atstyle"
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
<text class="sub-title">
......@@ -553,37 +365,16 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<refresh class="atstyle"
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<refresh class="atstyle"
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
<text class="sub-title">
......@@ -594,37 +385,16 @@
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<refresh class="atstyle"
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
<refresh class="atstyle"
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -637,16 +407,13 @@
refresh多模输入1
</text>
<refresh class="mstyle multimode1"
voicelabel = "voice"
subscriptflag="on"
subscriptlabel="div"
scenelabel="common"
offset="10px"
refreshing="{{fresh}}"
onrefresh="refresh">
<list class="list" scrolleffect="no">
<list-item class="listitem" for="list">
<div class="content">
<text class="text">{{$item}}</text>
</div>
</list-item>
</list>
</refresh>
</div>
</div>
......
ace/ace_standard/src/main/js/default/pages/refresh/index.js
浏览文件 @ bfa07e98
......@@ -82,7 +82,6 @@ var frames = [
transformOrigin:'center center'
},
];
export default {
data: {
list:[],
......@@ -437,6 +436,7 @@ export default {
functionTest3(event){
var function3 = this.$element('function3');
var animation = function3.animate(frames, options);
animation.play()
animation.onfinish = function(){
......
ace/ace_standard/src/main/js/default/pages/stack/index.css
浏览文件 @ bfa07e98
/**
* 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.
*/
.back-child {
width: 100%;
height: 100%;
background-color: #3f56ea;
}
.front-child {
width: 50%;
height: 50%;
background-color: #00bfc9;
}
.positioned-child {
width: 50%;
height: 50%;
left: 30%;
top: 20%;
background-color: #47cc47;
}
.bd-radius {
border-radius: 16px;
}
/* xxx.css */
.container {
flex-direction:row;
width:100%;
......@@ -38,82 +30,37 @@
flex-direction: column;
height: 70%;
}
.contain1{
width: 100%;
height: 15%;
flex-direction: column;
}
.event-container{
flex-direction: column;
height: 45%;
}
.prop-container{
flex-direction: column;
padding-left: 2px;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.gradient-container{
flex-direction: column;
height: 40%;
}
.function-container{
flex-direction: column;
height: 35%;
}
.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;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
height: 25px;
font-size: 15px;
font-size: 14px;
text-align: left;
margin-bottom: 1px;
margin: 2px;
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-top: 20px;
padding-right: 15px;
padding-bottom: 1px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 0px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
......@@ -143,8 +90,8 @@
}
.style2{
width: 70%;
height: 12%;
width: 50px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
......@@ -157,7 +104,6 @@
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
......@@ -181,11 +127,17 @@
.style4{
width: 60%;
height: 5%;
padding: 1px;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
}
.style5{
width: 50%;
height: 30px;
......@@ -209,37 +161,21 @@
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;
stroke-width: 20px;
mask-color:lightblue;
line-cap: round;
}
.pstyle {
height: 10%;
margin-bottom: 1px;
margin-top: 1px;
color: green;
stroke-width: 20px;
mask-color:lightblue;
line-cap: round;
.event-container{
flex-direction: column;
flex-weight: 1;
}
.event1{
width: 60%;
flex-weight: 1;
background-color: salmon;
background-color: yellow;
}
.event2{
width: 70%;
flex-weight: 1;
background-color: darkorchid;
background-color: red;
}
.event3{
......@@ -262,41 +198,41 @@
overflow:scroll;
}
.prop-container{
flex-direction: column;
}
#prop1 {
height: 50px;
color: #ad4e2a;
stroke-width: 10px;
line-cap: square;
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
height: 50px;
color: #343524;
stroke-width: 15px;
line-cap: round;
height: 30px;
background-color: pink;
width: 100%;
margin: 5px;
}
.prop4 {
color: #456345;
stroke-width: 25px;
line-cap: round;
.prop3 {
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;
background-color: #72ac33;
width: 55px;
height: 55px;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
......@@ -309,7 +245,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% {
......@@ -318,7 +254,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;
......@@ -332,75 +268,94 @@
.ani2{
background-color: #ad4e2a;
width: 100%;
width: 55px;
height: 55px;
margin: 5px;
}
.gradient-container{
flex-direction: column;
}
.gradient1{
stroke-width: 30px;
line-cap: square;
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
stroke-width: 30px;
line-cap: square;
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
stroke-width: 30px;
line-cap: square;
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
stroke-width: 30px;
line-cap: square;
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{
color: #321124;
stroke-width: 30px;
line-cap: square;
background-color: #321124;
margin: 5px;
width: 90%;
height: 30px;
}
.multimode1{
color: #978666;
stroke-width: 30px;
line-cap: square;
.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: 30px;
height: 20px;
}
.function2{
background-color: #00ff00;
width: 60%;
height: 30px;
height: 20px;
}
.function3{
background-color: #0000ff;
width: 100%;
height: 30px;
height: 20px;
}
.function4 {
.function4{
flex-direction: row;
width: 60%;
height: 60px;
overflow: scroll;
height: 20px;
overflow:scroll;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/stack/index.hml
浏览文件 @ bfa07e98
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* 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
......@@ -15,7 +15,6 @@
<div class="container">
<div class="sub-container">
<!-- 通用样式 -->
<div class="style-container">
<text class="title">
通用样式
......@@ -24,65 +23,34 @@
stack通用样式1
</text>
<stack class="style1">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<text class="sub-title">
stack通用样式2
</text>
<stack class="style2">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<text class="sub-title">
stack通用样式3
</text>
<stack class="style3">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<text class="sub-title">
stack通用样式4
</text>
<stack class="style4">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<text class="sub-title">
stack通用样式5
</text>
<div class="contain1">
<stack class="style5">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<stack class="style6">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
</div>
<text class="sub-title">
stack特有样式
</text>
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<!-- 动画 -->
<div class="ani-container">
<text class="title">
动画样式
......@@ -90,19 +58,12 @@
<text class="sub-title">
stack动画样式1
</text>
<stack class="style7 ani1">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack class="ani1" >
</stack>
<text class="sub-title">
stack动画样式2
</text>
<stack class="style7 ani2">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack class="ani2" >
</stack>
</div>
</div>
......@@ -111,7 +72,6 @@
</div>
<div class="sub-container">
<!-- 通用属性 -->
<div class="prop-container">
<text class="title">
通用属性
......@@ -119,63 +79,27 @@
<text class="sub-title">
stack通用属性1
</text>
<stack id="prop1"
disabled = "true"
focusable ="true"
data-name ="prop1"
click-effect="spring-medium"
<stack id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<text class="sub-title">
stack通用属性2
</text>
<stack class="prop2"
ref ="prop2"
disabled = "false"
focusable ="false"
data-name ="prop2"
click-effect="spring-large"
<stack class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<text class="sub-title">
stack通用属性3
</text>
<stack style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;height: 50px;">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<text class="sub-title">
stack特有属性4
</text>
<stack class="prop4"
style="height: 50px;">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<text class="sub-title">
stack特有属性5
</text>
<stack class="prop5" style="height: 50px;">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack style="color: #679855; margin: 5px;" class="prop3">
</stack>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用事件 -->
<div class="event-container" >
<text class="title">
通用事件
......@@ -183,68 +107,30 @@
<text class="sub-title">
stack通用事件1
</text>
<stack class="pstyle event1"
ontouchstart="touchStart"
ontouchmove="touchMove"
ontouchend="touchEnd"
ontouchcancel="touchCancel">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</stack>
<text class="sub-title">
stack通用事件2
</text>
<stack class="pstyle event2"
onclick="click"
ondoubleclick="doubleClick"
onlongpress="longPress"
onfocus="focus"
onblur="blur"
onkey="key"
onswipe="swipe"
onattached="attached"
ondetached="detached"
>
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</stack>
<text class="sub-title">
stack通用事件3
</text>
<stack class="pstyle event3"
ontouchstart="functionTest1"
onpinchstart="pinchStart"
onpinchupdate="pinchUpdate"
onpinchend="pinchEnd"
onpinchcancel="pinchCancel"
ondragstart="dragStart"
ondrag="drag"
ondragend="dragEnd"
ondragenter="dragEnter"
ondragover="dragOver"
ondragleave="dragLeave"
<stack class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
<text class="sub-title">
stack通用事件4
</text>
<stack class="pstyle event4">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用方法 -->
<div class="function-container">
<text class="title">
通用方法
......@@ -252,34 +138,17 @@
<text class="sub-title">
stack通用方法1
</text>
<stack class="pstyle function1"
id="function1"
ontouchstart="functionTest1">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack id="function1" class="function1" ontouchstart="functionTest1">
</stack>
<text class="sub-title">
stack通用方法2
</text>
<stack class="pstyle function2"
id="function2"
ontouchstart="functionTest2">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack id="function2" class="function2" ontouchstart="functionTest2">
</stack>
<text class="sub-title">
stack通用方法3
</text>
<stack class="pstyle function3"
id="function3"
ontouchstart="functionTest3">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack id="function3" class="function3" ontouchstart="functionTest3">
</stack>
</div>
</div>
......@@ -288,7 +157,6 @@
</div>
<div class="sub-container">
<!-- 渐变样式 -->
<div class="gradient-container">
<text class="title">
渐变样式
......@@ -296,43 +164,26 @@
<text class="sub-title">
stack渐变样式1
</text>
<stack class="style7 gradient1">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack class="gradient1">
</stack>
<text class="sub-title">
stack渐变样式2
</text>
<stack class="style7 gradient2">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack class="gradient2">
</stack>
<text class="sub-title">
stack渐变样式3
</text>
<stack class="style7 gradient3">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack class="gradient3">
</stack>
<text class="sub-title">
stack渐变样式4
</text>
<stack class="style7 gradient4">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack class="gradient4">
</stack>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 无障碍 -->
<div class="access-container">
<text class="title">
无障碍
......@@ -340,20 +191,14 @@
<text class="sub-title">
stack无障碍1
</text>
<stack class="access1"
accessibilitygroup ="true"
<stack class="access1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
</stack>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 原子布局和多模输入 -->
<div class="atom-container">
<text class="title">
原子布局
......@@ -362,81 +207,48 @@
stack原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack style="width:20px;height:20px;background-color: blue;display-index: 1;">
</stack>
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack style="width:30px; height:20px;background-color: black;display-index: 5;">
</stack>
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</stack>
</div>
<text class="sub-title">
stack原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack style="height:20px;background-color: blue;flex-weight: 1;">
</stack>
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack style="height:20px;background-color: black;flex-weight: 5;">
</stack>
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack style="height:20px;background-color: yellow;flex-weight: 4;">
</stack>
</div>
<text class="sub-title">
stack原子布局3
</text>
<div style="flex-direction: row;height:40px;width: 100%;">
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<div style="flex-direction: row;height:60px;width: 100%;">
<stack style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</stack>
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack style="width:30px;background-color: black;aspect-ratio:0.5;">
</stack>
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</stack>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multimode-container">
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
stack多模输入1
</text>
<stack class="style7">
<div class="back-child bd-radius"></div>
<div class="positioned-child bd-radius"></div>
<div class="front-child bd-radius"></div>
<stack class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</stack>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/stack/index.js
浏览文件 @ bfa07e98
......@@ -84,6 +84,7 @@ var frames = [
];
export default {
onShow(){
// 通用属性
var prop1 = this.$element('prop1');
......@@ -410,6 +411,7 @@ export default {
functionTest3(event){
var function3 = this.$element('function3');
var animation = function3.animate(frames, options);
animation.play()
animation.onfinish = function(){
......
ace/ace_standard/src/main/js/default/pages/stepper/index.hml
浏览文件 @ bfa07e98
......@@ -22,7 +22,7 @@
<text class="sub-title">
stepper通用样式1
</text>
<stepper class="style1" id="mystepper" index="0" onnext="next" onback="back">
<stepper class="style1" id="style1" index="0" onnext="next" onback="back">
<stepper-item class ="stepperItem istyle1" label="{{label1}}">
<div class = "stepperItemContent" >
<text class = "text">First</text>
......@@ -46,7 +46,7 @@
<text class="sub-title">
stepper通用样式2
</text>
<stepper class="style2" id="mystepper" index="0" onnext="next" onback="back">
<stepper class="style2" id="style2" index="0" onnext="next" onback="back">
<stepper-item class ="stepperItem istyle4" label="{{label1}}">
<div class = "stepperItemContent" >
<text class = "text">First</text>
......@@ -70,7 +70,7 @@
<text class="sub-title">
stepper通用样式3
</text>
<stepper class="style3" id="mystepper" index="0" onnext="next" onback="back">
<stepper class="style3" id="style3" index="0" onnext="next" onback="back">
<stepper-item class ="stepperItem" label="{{label1}}">
<div class = "stepperItemContent" >
<text class = "text">First</text>
......@@ -94,7 +94,7 @@
<text class="sub-title">
stepper通用样式4
</text>
<stepper class="style4" id="mystepper" index="0" onnext="next" onback="back">
<stepper class="style4" id="style4" index="0" onnext="next" onback="back">
<stepper-item class ="stepperItem istyle7" label="{{label1}}">
<div class = "stepperItemContent" >
<text class = "text">First</text>
......@@ -118,7 +118,7 @@
stepper通用样式5
</text>
<div class="contain1">
<stepper class="style5" id="mystepper" index="0" onnext="next" onback="back">
<stepper class="style5" id="style5" index="0" onnext="next" onback="back">
<stepper-item class ="stepperItem" label="{{label1}}">
<div class = "stepperItemContent" >
<text class = "text">First</text>
......@@ -138,7 +138,7 @@
<button type="capsule" class ="button" value="stepper1" onclick="setRightButton"></button>
</stepper-item>
</stepper>
<stepper class="style6" id="mystepper" index="0" onnext="next" onback="back">
<stepper class="style6" id="style6" index="0" onnext="next" onback="back">
<stepper-item class ="stepperItem" label="{{label1}}">
<div class = "stepperItemContent" >
<text class = "text">First</text>
......@@ -162,7 +162,7 @@
<text class="sub-title">
stepper特有样式
</text>
<stepper class="style7" id="mystepper" index="0" onnext="next" onback="back">
<stepper class="style7" id="style7" index="0" onnext="next" onback="back">
<stepper-item class ="stepperItem" label="{{label1}}">
<div class = "stepperItemContent" >
<text class = "text">First</text>
......@@ -194,7 +194,7 @@
stepper动画样式1
</text>
<stepper class="stylePro ani1"
id="mystepper"
id="ani1"
index="0"
onnext="next"
onback="back">
......@@ -222,7 +222,7 @@
stepper动画样式2
</text>
<stepper class="stylePro ani2"
id="mystepper"
id="ani2"
index="0"
onnext="next"
onback="back">
......@@ -290,7 +290,7 @@
<text class="sub-title">
stepper通用属性2
</text>
<stepper class="stylePro" id="prop2"
<stepper class="stylePro" ref="prop2"
data-name ="prop2"
dir ="rtl" index="0" onnext="next" onback="back">
<stepper-item class ="stepperItem gradient4" label="{{label1}}">
......@@ -341,7 +341,7 @@
<text class="sub-title">
stepper特有属性4
</text>
<stepper class="stylePro" id="mystepper" index="1" onnext="next" onback="back">
<stepper class="stylePro" id="prop4" index="1" onnext="next" onback="back">
<stepper-item class ="stepperItem" label="{{label1}}">
<div class = "stepperItemContent" >
<text class = "text">First</text>
......@@ -373,7 +373,7 @@
stepper通用事件1
</text>
<stepper class="stylePro event1"
id="mystepper"
id="event1"
finish = "finishTest"
skip = "skipTest"
change = "changeTest"
......@@ -416,7 +416,7 @@
</text>
<stepper class="stylePro event2"
ontouchstart="functionTest3"
id="mystepper"
id="event2"
index="1"
onnext="next"
onback="back"
......@@ -486,7 +486,7 @@
stepper通用方法1
</text>
<stepper class="stylePro function1"
id="mystepper1" index="1"
id="function1" index="1"
onnext="next"
onback="back"
ontouchstart="functionTest1">
......@@ -520,7 +520,7 @@
</text>
<stepper class="stylePro function2"
ontouchstart="functionTest2"
id="mystepper2"
id="function2"
index="1"
onnext="next"
onback="back"
......@@ -570,7 +570,7 @@
stepper渐变样式1
</text>
<stepper class="stylePro gradient1"
id="mystepper"
id="gradient1"
index="0"
onnext="next"
onback="back">
......@@ -598,7 +598,7 @@
stepper渐变样式2
</text>
<stepper class="stylePro gradient2"
id="mystepper"
id="gradient2"
index="0"
onnext="next"
onback="back">
......@@ -626,7 +626,7 @@
stepper渐变样式3
</text>
<stepper class="stylePro gradient3"
id="mystepper"
id="gradient3"
index="0"
onnext="next"
onback="back">
......@@ -654,7 +654,7 @@
stepper渐变样式4
</text>
<stepper class="stylePro gradient4"
id="mystepper"
id="gradient4"
index="0"
onnext="next"
onback="back">
......@@ -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 @@
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<stepper class="stylePro"
id="mystepper"
id="ato1"
index="0"
onnext="next"
onback="back">
......@@ -755,7 +755,7 @@
</stepper-item>
</stepper>
<stepper class="stylePro"
id="mystepper"
id="ato2"
index="0"
onnext="next"
onback="back">
......@@ -779,7 +779,7 @@
</stepper-item>
</stepper>
<stepper class="stylePro"
id="mystepper"
id="ato3"
index="0"
onnext="next"
onback="back">
......@@ -809,7 +809,7 @@
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<stepper class="stylePro"
id="mystepper"
id="atom1"
index="0"
onnext="next"
onback="back">
......@@ -833,7 +833,7 @@
</stepper-item>
</stepper>
<stepper class="stylePro"
id="mystepper"
id="atom2"
index="0"
onnext="next"
onback="back">
......@@ -857,7 +857,7 @@
</stepper-item>
</stepper>
<stepper class="stylePro"
id="mystepper"
id="atom3"
index="0"
onnext="next"
onback="back">
......@@ -886,7 +886,7 @@
</text>
<div style="flex-direction: row;height:30px;width: 100%;">
<stepper class="stylePro"
id="mystepper"
id="atomA1"
index="0"
onnext="next"
onback="back">
......@@ -910,7 +910,7 @@
</stepper-item>
</stepper>
<stepper class="stylePro"
id="mystepper"
id="atomA2"
index="0"
onnext="next"
onback="back">
......@@ -934,7 +934,7 @@
</stepper-item>
</stepper>
<stepper class="stylePro"
id="mystepper"
id="atomA3"
index="0"
onnext="next"
onback="back">
......@@ -968,7 +968,7 @@
stepper多模输入1
</text>
<stepper class="stylePro"
id="mystepper"
id="mul1"
index="0"
onnext="next"
onback="back">
......
ace/ace_standard/src/main/js/default/pages/stepper/index.js
浏览文件 @ bfa07e98
......@@ -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
});
......
ace/ace_standard/src/main/js/default/pages/tab-bar/index.css 0 → 100644
浏览文件 @ bfa07e98
/**
* 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
ace/ace_standard/src/main/js/default/pages/tabs/index.css
浏览文件 @ bfa07e98
......@@ -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;
}
......
ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js
浏览文件 @ bfa07e98
......@@ -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();
});
});
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或