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.hml
浏览文件 @ bfa07e98
......@@ -4,272 +4,57 @@
<!-- 通用样式 -->
<div class="style-container">
<text class="title">
通用样式
样式
</text>
<text class="sub-title">
panel通用样式1
panel样式1
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanel1">
</button>
</div>
<panel id="simplepanel1"
class="style1"
type="foldable"
dragbar="true"
mode="mini"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in mini mode</text>
</div>
<panel id="simplePanel1"
class="style1" type="foldable">
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanel1">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel通用样式2
panel样式2
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanel2">
</button>
</div>
<panel id="simplepanel2"
class="style2"
type="foldable"
dragbar="false"
mode="half"
halfheight="400px"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in half mode</text>
</div>
<panel id="simplePanel2" type="foldable"
class="style2">
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanel2">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel通用样式3
panel样式3
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanel3">
</button>
</div>
<panel id="simplepanel3"
class="style3"
type="foldable"
mode="full"
fullheight="800px"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in full mode</text>
</div>
<panel id="simplePanel3" type="foldable"
class="style3">
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanel3">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel通用样式4
</text>
<div class="btn-div">
<button type="capsule"
value="Click here"
onclick="showPanel4">
</button>
</div>
<panel id="simplepanel4"
class="style4"
type="foldable"
mode="half"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanel4">
</button>
</div>
</div>
</panel>
<div class="contain1">
<text class="sub-title">
panel通用样式5
</text>
<div class="btn-div1">
<button type="capsule"
value="Click here"
onclick="showPanel5">
</button>
</div>
<panel id="simplepanel5"
class="style5"
type="foldable"
mode="half"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanel5">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel通用样式6
</text>
<div class="btn-div1">
<button type="capsule"
value="Click here"
onclick="showPanel6">
</button>
</div>
<panel id="simplepanel6"
class="style6"
type="foldable"
mode="half"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanel6">
</button>
</div>
</div>
</panel>
</div>
<text class="sub-title">
panel特有样式7
</text>
<div class="btn-div">
<button type="capsule"
value="Click here"
onclick="showPanel7">
</button>
</div>
<panel id="simplepanel7"
class="style7"
type="foldable"
mode="half"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanel7">
</button>
</div>
</div>
</panel>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<!-- 动画样式 -->
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
panel动画样式1
</text>
<div class="btn-div">
<button type="capsule"
value="Click here"
onclick="showPanel4">
</button>
</div>
<panel id="simplepanel4"
class="style4 ani1"
type="foldable"
mode="half"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanel4">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel动画样式2
</text>
<div class="btn-div">
<button type="capsule"
value="Click here"
onclick="showPanel4">
</button>
</div>
<panel id="simplepanel4"
class="style4 ani2"
type="foldable"
mode="half"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanel4">
</button>
</div>
</div>
</panel>
</div>
</div>
......@@ -285,12 +70,10 @@
<text class="sub-title">
panel通用属性1
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelPro1">
</button>
</div>
<panel id = "prop1"
class="prop1"
type="foldable"
......@@ -299,110 +82,76 @@
data-name ="prop1"
click-effect="spring-medium"
dir ="rtl">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<div class="btn-div">
<button type="capsule"
value="Close"
onclick="closePanelPro1">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel通用属性2
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelPro2">
</button>
</div>
<panel id="prop2" class="prop2" ref ="prop2"
<panel class="prop2" ref ="prop2" type="foldable"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr"
type="foldable"
dragbar="true"
mode="mini"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
dir ="ltr">
<div class="btn-div">
<button type="capsule"
value="Close"
onclick="closePanelPro2">
onclick="closePanelPro1">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel通用属性3
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelPro3">
</button>
</div>
<panel id="simplepanelPro3" type="foldable"
style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<panel id="simplePanelPro3" style="color: #679855; margin: 5px;" class="prop3" type="foldable">
<div class="btn-div">
<button type="capsule"
value="Close"
onclick="closePanelPro3">
onclick="closePanelPro1">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel特有属性4
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelPro4">
</button>
</div>
<panel id="simplepanelPro4"
<panel id="simplePanelPro4"
class="style1"
type="foldable"
dragbar="true"
mode="mini"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in mini mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanelPro4">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel特有属性5
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelPro5">
</button>
</div>
<panel id="simplepanelPro5"
<panel id="simplePanelPro5"
class="style2"
type="minibar"
dragbar="false"
......@@ -410,49 +159,36 @@
halfheight="400px"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in half mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanelPro5">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel特有属性6
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelPro6">
</button>
</div>
<panel id="simplepanelPro6"
<panel id="simplePanelPro6"
class="style3"
type="temporary"
mode="full"
fullheight="800px"
onsizechange="changeMode"
miniheight="200px">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in full mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanelPro6">
</button>
</div>
</div>
</panel>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
......@@ -467,98 +203,70 @@
<text class="sub-title">
panel渐变样式1
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelA">
</button>
</div>
<panel id="simplepanelA1"
<panel id="simplePanelA1"
type="foldable"
class="gradient1">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanelA">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel渐变样式2
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelB">
</button>
</div>
<panel id="simplepanelB1"
<panel id="simplePanelB1"
type="foldable"
class="gradient2">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanelB">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel渐变样式3
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelC">
</button>
</div>
<panel id="simplepanelC1"
<panel id="simplePanelC1"
type="foldable"
class="gradient3">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanelC">
</button>
</div>
</div>
</panel>
<text class="sub-title">
panel渐变样式4
</text>
<div class="btn-div">
<button type="capsule"
<button class="btn-div" type="capsule"
value="Click here"
onclick="showPanelD">
</button>
</div>
<panel id="simplepanelD1"
<panel id="simplePanelD1"
type="foldable"
class="gradient4">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanelD">
</button>
</div>
</div>
</panel>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -568,70 +276,26 @@
<text class="title">
无障碍
</text>
<text class="sub-title">
panel无障碍1
</text>
<div class="btn-div1">
<button type="capsule"
<button class="btn-div" type="capsule" style="height: 30px;"
value="Click here"
onclick="showPanelNo">
</button>
</div>
<panel id="simplepanelNo"
<panel id="simplePanelNo"
type="foldable"
class="access1" accessibilitygroup ="true"
accessibilitytext="这是panel"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanelNo">
</button>
</div>
</div>
</panel>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 多模输入 -->
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
panel多模输入1
</text>
<div class="btn-div1">
<button type="capsule"
value="Click here"
onclick="showPanelMore">
</button>
</div>
<panel id="simplepanelMore"
type="foldable"
class="multimode1"
voicelabel = "voice"
subscriptflag="on"
subscriptlabel="panel"
scenelabel="common">
<div class="panel-div">
<div class="inner-txt">
<text class="txt">Simple panel in {{modeFlag}} mode</text>
</div>
<div class="inner-btn">
<button type="capsule"
value="Close"
onclick="closePanelMore">
</button>
</div>
</div>
</panel>
</div>
</div>
</div>
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/tab-bar/index.hml 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.
*/-->
<div class="container">
<div class="sub-container">
<!-- 通用样式 -->
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
tabs通用样式1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar style1" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs通用样式2
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar style2" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs通用样式3
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar style3" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs通用样式4
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar style4" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs通用样式5
</text>
<div class="contain1">
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar style5" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<tabs class = "tabs"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar style6" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
<text class="sub-title">
tabs特有样式
</text>
<tabs class = "tabs"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar barStyle7"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<!-- 动画 -->
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
tabs动画样式1
</text>
<tabs class = "tabs"
index="0"
vertical="true"
onchange="change">
<tab-bar class="tab-bar ani1" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs动画样式2
</text>
<tabs class = "tabs"
index="0"
vertical="true"
onchange="change">
<tab-bar class="tab-bar ani2" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<!-- 通用属性 -->
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
tabs通用属性1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar id="prop1"
class="prop1"
disabled = "true"
focusable ="true"
data-name ="prop1"
click-effect="spring-medium"
dir ="rtl"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs通用属性2
</text>
<tabs class="tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr"
class="tab-bar prop2"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs通用属性3
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;"
class="tab-bar"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs特有属性4
</text>
<tabs class = "tabs"
index="1"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="scrollable">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs特有属性5
</text>
<tabs class = "tabs"
index="0"
vertical="true"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用事件 -->
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
tabs通用事件1
</text>
<tabs class = "tabs"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar event1"
ontouchstart="touchStart"
ontouchmove="touchMove"
ontouchend="touchEnd"
ontouchcancel="touchCancel"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs通用事件2
</text>
<tabs class = "tabs"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar event2"
onclick="click"
ondoubleclick="doubleClick"
onlongpress="longPress"
onfocus="focus"
onblur="blur"
onkey="key"
onswipe="swipe"
onattached="attached"
ondetached="detached"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs通用事件3
</text>
<tabs class = "tabs"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar event3"
onpinchstart="pinchStart"
onpinchupdate="pinchUpdate"
onpinchend="pinchEnd"
onpinchcancel="pinchCancel"
ondragstart="dragStart"
ondrag="drag"
ondragend="dragEnd"
ondragenter="dragEnter"
ondragover="dragOver"
ondragleave="dragLeave"
ondrop="drop"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用方法 -->
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
tabs通用方法1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar id="function1"
class="function1 tab-bar"
ontouchstart="functionTest1"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tab-bar通用方法2
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar function2"
id="function2"
ontouchstart="functionTest2"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs通用方法3
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar function3"
mode="fixed"
id="function3"
ontouchstart="functionTest3">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<!-- 渐变样式 -->
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
tabs渐变样式1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar gradient1" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs渐变样式2
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar gradient2" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs渐变样式3
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar gradient3" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<text class="sub-title">
tabs渐变样式4
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar gradient4" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 无障碍 -->
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
tabs无障碍1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar access1"
accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 原子布局和多模输入 -->
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
tabs原子布局1
</text>
<div style="flex-direction: row;height: 50px;width: 100%;">
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
<text class="sub-title">
tabs原子布局2
</text>
<div style="flex-direction: row;height: 50px;width: 100%;">
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
<text class="sub-title">
tabs原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
tabs多模输入1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar multimode1"
mode="fixed"
voicelabel = "voice"
subscriptflag="on"
subscriptlabel="div"
scenelabel="common">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
</tabs>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/tab-bar/index.js 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.
*/
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
ace/ace_standard/src/main/js/default/pages/tab-content/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: 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
ace/ace_standard/src/main/js/default/pages/tab-content/index.hml 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.
*/-->
<div class="container">
<div class="sub-container">
<!-- 通用样式 -->
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
tab-content通用样式1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent style1" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用样式2
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent style2" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用样式3
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent style3" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用样式4
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent style4" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用样式5
</text>
<div class="contain1">
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent style5" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs"
index="0" vertical="false"
onchange="change">
<tab-content class="tabcontent style6" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<!-- 动画 -->
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
tabs动画样式1
</text>
<tabs class = "tabs"
index="0"
vertical="true"
onchange="change">
<tab-content class="tabcontent ani1" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs动画样式2
</text>
<tabs class = "tabs"
index="0"
vertical="true"
onchange="change">
<tab-content class="tabcontent ani2" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<!-- 通用属性 -->
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
tab-content通用属性1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content id="prop1"
class="prop1 tabcontent"
disabled = "true"
focusable ="true"
data-name ="prop1"
click-effect="spring-medium"
dir ="rtl"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用属性2
</text>
<tabs class = "tabs prop2"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent prop2"
scrollable="true"
ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr"
>
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用属性3
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent"
scrollable="true"
style="color: #679855; height: 100%;width: 100%; margin: 5px;">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs特有属性4
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs特有属性5
</text>
<tabs class = "tabs"
index="0"
vertical="true"
onchange="change">
<tab-content class="tabcontent"
scrollable="false">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用事件 -->
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
tab-content通用事件1
</text>
<tabs class = "tabs"
index="0" vertical="false"
onchange="change">
<tab-content class="tabcontent event1"
ontouchstart="touchStart"
ontouchmove="touchMove"
ontouchend="touchEnd"
ontouchcancel="touchCancel"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用事件2
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent event2"
onclick="click"
ondoubleclick="doubleClick"
onlongpress="longPress"
onfocus="focus"
onblur="blur"
onkey="key"
onswipe="swipe"
onattached="attached"
ondetached="detached"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用事件3
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent"
onpinchstart="pinchStart"
onpinchupdate="pinchUpdate"
onpinchend="pinchEnd"
onpinchcancel="pinchCancel"
ondragstart="dragStart"
ondrag="drag"
ondragend="dragEnd"
ondragenter="dragEnter"
ondragover="dragOver"
ondragleave="dragLeave"
ondrop="drop"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用方法 -->
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
tab-content通用方法1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent function1"
id="function1"
ontouchstart="functionTest1"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用方法2
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent function2"
id="function2"
ontouchstart="functionTest2"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tab-content通用方法3
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent function3"
id="function3"
ontouchstart="functionTest3"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<!-- 渐变样式 -->
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
tabs渐变样式1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent gradient1" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs渐变样式2
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent gradient2" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs渐变样式3
</text>
<tabs class = "tabs gradient3"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent gradient3" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs渐变样式4
</text>
<tabs class = "tabs gradient4"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent gradient4" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 无障碍 -->
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
tabs无障碍1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent access1"
accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 原子布局和多模输入 -->
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
tabs原子布局1
</text>
<div style="flex-direction: row;height: 50px;width: 100%;">
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<text class="sub-title">
tabs原子布局2
</text>
<div style="flex-direction: row;height: 50px;width: 100%;">
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<text class="sub-title">
tabs原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
tabs多模输入1
</text>
<tabs class = "tabs"
index="0"
vertical="false"
onchange="change">
<tab-content class="tabcontent multimode1"
voicelabel = "voice"
subscriptflag="on"
subscriptlabel="div"
scenelabel="common"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/tab-content/index.js 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.
*/
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
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/pages/tabs/index.hml
浏览文件 @ bfa07e98
......@@ -27,18 +27,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar style1" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent style1" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
......@@ -48,18 +36,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar style2" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent style2" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
......@@ -69,18 +45,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar style3" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent style3" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
......@@ -90,18 +54,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar barStyle4" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent style4" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
......@@ -112,34 +64,10 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar style5" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent style5" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs style6"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar barStyle6" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent barStyle6" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<text class="sub-title">
......@@ -148,20 +76,6 @@
<tabs class = "tabs style7"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar barStyle7"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent barStyle7"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
......@@ -178,18 +92,6 @@
index="0"
vertical="true"
onchange="change">
<tab-bar class="tab-bar ani1" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent ani1" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
......@@ -199,18 +101,6 @@
index="0"
vertical="true"
onchange="change">
<tab-bar class="tab-bar ani2" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent ani2" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
......@@ -238,32 +128,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar id="prop1"
disabled = "true"
focusable ="true"
data-name ="prop1"
click-effect="spring-medium"
dir ="rtl"
class="tab-bar"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content id="prop1"
disabled = "true"
focusable ="true"
data-name ="prop1"
click-effect="spring-medium"
dir ="rtl"
class="tabcontent"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
......@@ -275,101 +139,38 @@
click-effect="spring-large"
dir ="ltr"
class = "tabs style7 prop2"
ref="prop2"
index="0"
vertical="false"
onchange="change">
<tab-bar disabled = "false"
focusable ="false"
data-name ="prop2"
click-effect="spring-large"
dir ="ltr"
class="tab-bar"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent"
scrollable="true"
disabled = "false"
focusable ="false"
data-name ="prop2"
click-effect="spring-large"
dir ="ltr">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs通用属性3
</text>
<tabs style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;"
<tabs style="background-color: seagreen; margin: 5px;"
class = "tabs style7"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent"
scrollable="true"
style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs特有属性4
</text>
<tabs class = "tabs style7"
<tabs class = "tabs style7 prop4"
index="1"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="scrollable">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs特有属性5
</text>
<tabs class = "tabs style7"
<tabs class = "tabs style7 prop5"
index="0"
vertical="true"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent"
scrollable="false">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -382,41 +183,19 @@
<text class="sub-title">
tabs通用事件1
</text>
<tabs class = "tabs style7 event1"
<tabs class = "tabs tstyle event1"
ontouchstart="touchStart"
ontouchmove="touchMove"
ontouchend="touchEnd"
ontouchcancel="touchCancel"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar barStyle7 event1"
ontouchstart="touchStart"
ontouchmove="touchMove"
ontouchend="touchEnd"
ontouchcancel="touchCancel"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent barStyle7 event2"
ontouchstart="touchStart"
ontouchmove="touchMove"
ontouchend="touchEnd"
ontouchcancel="touchCancel"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs通用事件2
</text>
<tabs class = "tabs style7 event2"
<tabs class = "tabs tstyle event2"
onclick="click"
ondoubleclick="doubleClick"
onlongpress="longPress"
......@@ -428,43 +207,11 @@
ondetached="detached"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar barStyle7 event2"
onclick="click"
ondoubleclick="doubleClick"
onlongpress="longPress"
onfocus="focus"
onblur="blur"
onkey="key"
onswipe="swipe"
onattached="attached"
ondetached="detached"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent barStyle7 event2"
onclick="click"
ondoubleclick="doubleClick"
onlongpress="longPress"
onfocus="focus"
onblur="blur"
onkey="key"
onswipe="swipe"
onattached="attached"
ondetached="detached"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs通用事件3
</text>
<tabs class = "tabs style7"
<tabs class = "tabs tstyle event3"
ontouchstart="functionTest1"
onpinchstart="pinchStart"
onpinchupdate="pinchUpdate"
......@@ -477,66 +224,14 @@
ondragover="dragOver"
ondragleave="dragLeave"
ondrop="drop">
<tab-bar class="tab-bar barStyle7"
ontouchstart="functionTest1"
onpinchstart="pinchStart"
onpinchupdate="pinchUpdate"
onpinchend="pinchEnd"
onpinchcancel="pinchCancel"
ondragstart="dragStart"
ondrag="drag"
ondragend="dragEnd"
ondragenter="dragEnter"
ondragover="dragOver"
ondragleave="dragLeave"
ondrop="drop"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent barStyle7"
ontouchstart="functionTest1"
onpinchstart="pinchStart"
onpinchupdate="pinchUpdate"
onpinchend="pinchEnd"
onpinchcancel="pinchCancel"
ondragstart="dragStart"
ondrag="drag"
ondragend="dragEnd"
ondragenter="dragEnter"
ondragover="dragOver"
ondragleave="dragLeave"
ondrop="drop"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs特有事件1
</text>
<tabs class = "tabs style7"
<tabs class = "tabs tstyle event4"
index="0" vertical="false"
onchange="change">
<tab-bar class="tab-bar barStyle7"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent barStyle7"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
......@@ -550,87 +245,33 @@
<text class="sub-title">
tabs通用方法1
</text>
<tabs class = "tabs style7"
<tabs class = "tabs tstyle event1"
id="function1"
index="0"
vertical="false"
ontouchstart="functionTest1"
onchange="change">
<tab-bar class="tab-bar barStyle7"
id="bar1"
ontouchstart="functionTestA1"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent barStyle7"
id="con1"
ontouchstart="functionTestB1"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs通用方法2
</text>
<tabs class = "tabs style7"
<tabs class = "tabs tstyle event2"
id="function2"
index="0"
vertical="false"
ontouchstart="functionTest2"
onchange="change">
<tab-bar class="tab-bar barStyle7"
id="bar2"
ontouchstart="functionTestA2"
mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent barStyle7"
id="con2"
ontouchstart="functionTestB2"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
tabs通用方法3
</text>
<tabs class = "tabs style7"
<tabs class = "tabs tstyle event3"
index="0"
vertical="false"
ontouchstart="functionTest3"
onchange="change">
<tab-bar class="tab-bar barStyle7"
mode="fixed"
id="bar3"
ontouchstart="functionTestA3">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent barStyle7"
id="con3"
ontouchstart="functionTestB3"
scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
......@@ -654,18 +295,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar gradient1" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent gradient1" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
......@@ -675,18 +304,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar gradient2" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent gradient2" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
......@@ -696,18 +313,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar gradient3" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent gradient3" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<text class="sub-title">
......@@ -717,18 +322,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar gradient4" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent gradient4" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
......@@ -742,7 +335,7 @@
<text class="sub-title">
tabs无障碍1
</text>
<tabs class = "tabs style7 access1"
<tabs class = "tabs access1 event3"
accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
......@@ -750,18 +343,6 @@
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar access1" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent access1" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -775,56 +356,20 @@
tabs原子布局1
</text>
<div style="flex-direction: row;height: 50px;width: 100%;">
<tabs class = "tabs style7"
<tabs class = "tabs style7 event2"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs style7"
<tabs class = "tabs style7 event1"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs style7"
<tabs class = "tabs style7 event4"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
......@@ -832,112 +377,40 @@
tabs原子布局2
</text>
<div style="flex-direction: row;height: 50px;width: 100%;">
<tabs class = "tabs style7"
<tabs class = "tabs style7 event1"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs style7"
<tabs class = "tabs style7 event2"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs style7"
<tabs class = "tabs style7 event1"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<text class="sub-title">
tabs原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<tabs class = "tabs style7"
<tabs class = "tabs style7 event2"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs style7"
<tabs class = "tabs style7 event4"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
<tabs class = "tabs style7"
<tabs class = "tabs style7 event3"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......@@ -950,23 +423,12 @@
tabs多模输入1
</text>
<tabs class = "tabs style7 multimode1"
voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common"
index="0"
vertical="false"
onchange="change">
<tab-bar class="tab-bar multimode1" mode="fixed">
<text class="tab-text">Home</text>
<text class="tab-text">Index</text>
</tab-bar>
<tab-content class="tabcontent multimode1" scrollable="true">
<div class="item-content" >
<text class="item-title">First</text>
</div>
<div class="item-content" >
<text class="item-title">Second</text>
</div>
</tab-content>
</tabs>
</div>
</div>
</div>
......
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.
先完成此消息的编辑！
想要评论请 注册 或