Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
1 年多 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts
未验证 提交 b06c4348 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!1953 JS Ui组件路由测试用例 

Merge pull request !1953 from bayanxing/master
上级 8d459382 b6592279
展开全部 隐藏空白更改
内联 并排
Showing with 23367 addition and 385 deletion
ace/ace_standard/Test.json
浏览文件 @ b06c4348
......@@ -2,9 +2,9 @@
"description": "Configuration for aceceshi Tests",
"driver": {
"type": "JSUnitTest",
"test-timeout": "100000",
"test-timeout": "250000",
"package": "com.example.aceceshi",
"shell-timeout": "100000"
"shell-timeout": "250000"
},
"kits": [
{
......
ace/ace_standard/src/main/config.json
浏览文件 @ b06c4348
......@@ -43,7 +43,8 @@
"label": "$string:entry_MainAbility",
"type": "page",
"launchType": "standard",
"visible": true
"visible": true,
"configChanges": ["orientation"]
}
],
"js": [
......@@ -74,7 +75,23 @@
"pages/piece/index",
"pages/progress/index",
"pages/qrcode/index",
"pages/select/index"
"pages/select/index",
"pages/div/index",
"pages/badge/index",
"pages/dialog/index",
"pages/form/index",
"pages/list/index",
"pages/listItem/index",
"pages/listItemGroup/index",
"pages/marquee/index",
"pages/imageAnimator/index",
"pages/panel/index",
"pages/popup/index",
"pages/refresh/index",
"pages/stack/index",
"pages/stepper/index",
"pages/swiper/index",
"pages/tabs/index"
],
"name": "default",
"window": {
......
ace/ace_standard/src/main/js/default/pages/badge/index.css 0 → 100644
浏览文件 @ b06c4348
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.text1 {
background-color: #f9a01e;
font-size: 16px;
}
.text2 {
background-color: #46b1e3;
font-size: 18px;
}
.style1{
width: 100%;
height: 50px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 100%;
height: 80px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
height: 50px;
margin-top: 10px;
min-width: 40%;
min-height: 70px;
max-width: 100%;
max-height: 100px;
color: green;
padding: -20px;
border: 6px solid rebeccapurple;
border-radius: 20px;
box-shadow: 5px 5px 0px 5px #123456;
background-image:url('common/images/image.png');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
opacity: 0.5;
z-index: 20;
}
.style4{
width: 60%;
height: 80px;
padding: 1px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 200px;
flex-direction: column;
}
.style5{
width: 100%;
height: 80px;
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: 80px;
position: absolute;
left: 0px;
top: 90px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.prop-container{
flex-direction: column;
height: 400px;
}
.prop1 {
color: #ad4e2a;
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
color: #343524;
height: 30px;
background-color: pink;
width: 100%;
margin: 5px;
}
.prop3 {
color: #456345;
height: 30px;
background-color: darkseagreen;
width: 100%;
margin: 5px;
}
.event-container{
flex-direction: column;
height: 200px;
}
.event1{
height: 30px;
width: 60%;
flex-weight: 1;
background-color: yellow;
}
.event2{
width: 70%;
flex-weight: 1;
background-color: red;
}
.event3{
width: 80%;
flex-weight: 1;
background-color: #ad4e2a;
}
.ani-container{
flex-direction: column;
height: 150px;
}
.ani1{
background-color: #72ac33;
width: 100px;
height: 50px;
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)
}
}
.gradient-container{
flex-direction: column;
}
.gradient1{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
width: 100%;
height: 20px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
flex-direction: column;
}
.access1{
width: 100%;
height: 50px;
margin-top: 10px;
min-width: 40%;
min-height: 70px;
max-width: 100%;
max-height: 100px;
color: green;
padding: -20px;
border: 6px solid rebeccapurple;
border-radius: 20px;
box-shadow: 5px 5px 0px 5px #123456;
background-size:cover;
background-repeat: repeat-x;
background-position: center;
opacity: 0.5;
z-index: 20;
}
.atom-container{
display: flex;
flex-direction: column;
}
.multiMode-container{
flex-direction: column;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/badge/index.hml 0 → 100644
浏览文件 @ b06c4348
<!--/**
* 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="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
badge通用样式1
</text>
<badge class="style1" config="{{badgeConfig}}" visible="true" count="100" maxcount="99">
<text class="text1">example1</text>
</badge>
<text class="sub-title">
badge通用样式2
</text>
<badge class="style2" visible="true" count="20" placement="right">
<text class="text2">example2</text>
</badge>
<text class="sub-title">
badge通用样式3
</text>
<badge class="style3" visible="true" count="20" placement="right">
<text class="text2">example3</text>
</badge>
<text class="sub-title">
badge通用样式4
</text>
<badge class="style4" visible="true" count="20" placement="right">
<text class="text2">example4</text>
</badge>
<text class="sub-title">
badge通用样式5
</text>
<div class="contain1">
<badge class="style5" visible="true" count="20" placement="right">
<text class="text2">example5.1</text>
</badge>
<badge class="style6" visible="true" count="20" placement="right">
<text class="text2">example5.2</text>
</badge>
</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">
badge通用属性1
</text>
<badge id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
<text class="text2">example1</text>
</badge>
<text class="sub-title">
badge通用属性2
</text>
<badge class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
<text class="text2">example2</text>
</badge>
<text class="sub-title">
badge通用属性3
</text>
<badge style="color: #679855; margin: 5px;" class="prop3">
<text class="text2">example3</text>
</badge>
<text class="sub-title">
badge特有属性1
</text>
<badge style="color: #679855; margin: 5px;" class="prop3" visible="true"
placement="right" count="2" config="{{badgeConfig}}">
<text class="text2">example3</text>
</badge>
<text class="sub-title">
badge特有属性2
</text>
<badge style="color: #679855; margin: 5px;" maxcount="99"
class="prop3" visible="true" placement="left" count="12">
<text class="text2">example3</text>
</badge>
<text class="sub-title">
badge特有属性3
</text>
<badge style="color: #679855; margin: 5px;" label="test"
class="prop3" visible="true" placement="rightTop">
<text class="text2">example3</text>
</badge>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
badge通用事件1
</text>
<badge class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel" style="height: 20px;">
</badge>
<text class="sub-title">
badge通用事件2
</text>
<badge class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</badge>
<text class="sub-title">
badge通用事件3
</text>
<badge class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</badge>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
badge动画样式1
</text>
<badge class="ani1" >
<text class="sub-title">
badge动画样式1
</text>
</badge>
</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">
badge渐变样式1
</text>
<badge class="gradient1">
</badge>
<text class="sub-title">
badge渐变样式2
</text>
<badge class="gradient2">
</badge>
<text class="sub-title">
badge渐变样式3
</text>
<badge class="gradient3">
</badge>
<text class="sub-title">
badge渐变样式4
</text>
<badge class="gradient4">
</badge>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
badge无障碍
</text>
<badge class="access1" accessibilitygroup ="true"
accessibilitytext="这是badge"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</badge>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
badge多模输入1
</text>
<badge class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</badge>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/badge/index.js 0 → 100644
浏览文件 @ b06c4348
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data:{
badgeConfig:{
badgeColor:"#0a59f7",
textColor:"#ffffff",
}
},
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
});
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/dialog/index.css 0 → 100644
浏览文件 @ b06c4348
.doc-page {
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.btn-div {
width: 100%;
height: 200px;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn {
background-color: brown;
margin: 10px;
}
.txt {
font-weight: bold;
font-size: 39px;
}
.dialog-main {
width: 500px;
height: 300px;
margin: 30px;
}
.dialog-div {
flex-direction: column;
align-items: center;
}
.inner-txt {
width: 400px;
height: 160px;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.inner-btn {
width: 400px;
height: 120px;
justify-content: space-around;
align-items: center;
}
.btn-txt {
background-color: brown;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/dialog/index.hml 0 → 100644
浏览文件 @ b06c4348
<div class="doc-page">
<div class="btn-div">
<button type="capsule" value="Click show 样式" class="btn" onclick="showDialog1"></button>
<button type="capsule" value="Click show 通用属性1" class="btn" onclick="showDialog2"></button>
<button type="capsule" value="Click show 通用属性2" class="btn" onclick="showDialog3"></button>
<button type="capsule" value="Click show 特有属性" class="btn" onclick="showDialog4"></button>
<button type="capsule" value="Click show 无障碍dialog" class="btn" onclick="showDialog5"></button>
</div>
<dialog id="simpleDialog1" dragable="true" class="dialog-main" oncancel="cancelDialog">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">Simple dialog</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
<dialog id="simpleDialog2" dragable="false" class="dialog-main" oncancel="cancelDialog"
focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl"
style="width: 100%; height: 300px;">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">dialog通用属性1</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
<dialog id="simpleDialog3" dragable="false" class="dialog-main" oncancel="cancelDialog"
ref ="prop2"
focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr"
style="width: 100%; height: 300px;">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">dialog通用属性2</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
<dialog id="simpleDialog4" dragable="true" class="dialog-main" oncancel="cancelDialog">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">dialog特有属性</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
<dialog id="simpleDialog5" dragable="true" class="dialog-main" oncancel="cancelDialog"
accessibilitygroup ="true"
accessibilitytext="这是dialog"
accessibilitydescription="此处是dialog"
accessibilityimportance="no-hide-descendants">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">dialog无障碍</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/dialog/index.js 0 → 100644
浏览文件 @ b06c4348
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
showDialog1() {
this.$element('simpleDialog1').show()
},
showDialog2() {
this.$element('simpleDialog2').show()
},
showDialog3() {
this.$element('simpleDialog3').show()
},
showDialog4() {
this.$element('simpleDialog3').show()
},
showDialog5() {
this.$element('simpleDialog5').show()
},
cancelDialog() {
prompt.showToast({
message: 'Dialog cancelled'
})
},
cancelSchedule() {
this.$element('simpleDialog1').close()
this.$element('simpleDialog2').close()
this.$element('simpleDialog3').close()
this.$element('simpleDialog4').close()
this.$element('simpleDialog5').close()
prompt.showToast({
message: 'Successfully cancelled'
})
},
setSchedule() {
this.$element('simpleDialog1').close()
this.$element('simpleDialog2').close()
this.$element('simpleDialog3').close()
this.$element('simpleDialog4').close()
this.$element('simpleDialog5').close()
prompt.showToast({
message: 'Successfully confirmed'
})
},
doubleClick(){
prompt.showToast({
message: 'doubleClick'
})
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/div/index.css 0 → 100644
浏览文件 @ b06c4348
/**
* Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 70%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 50px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/image.png');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.style4{
width: 60%;
height: 5%;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
flex-direction: column;
flex-wrap:wrap;
justify-content:flex-start;
align-items: flex-end;
align-content:space-around;
display: flex;
height: 40px;
}
.flex-item {
width: 20px;
height: 20px;
border-radius: 16px;
}
.style8{
flex-direction: row;
flex-wrap:nowrap;
scrollbar-color: yellow;
scrollbar-width: 10px;
overscroll-effect:spring;
height: 20px;
overflow:scroll;
}
.style9{
display: grid;
height: 20px;
grid-template-columns: 20% 20%;
grid-columns-gap: 14px;
grid-rows-gap: 4px;
grid-template-rows: 15% 15%;
}
.color-primary {
background-color: mediumpurple;
}
.color-warning {
background-color: pink;
}
.color-success {
background-color: cornflowerblue;
}
.grid-child {
width: 100%;
border-radius: 2px;
}
.grid-left-top {
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid plum;
background: linear-gradient(pink, purple);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 0;
grid-row-end: 0;
grid-column-end: 0;
}
.grid-left-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px solid plum;
background: linear-gradient(pink, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 1;
grid-column-start: 0;
grid-row-end: 1;
grid-column-end: 0;
}
.grid-right-top {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px dotted plum;
background: linear-gradient(mediumpurple, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 1;
grid-row-end: 0;
grid-column-end: 1;
}
.grid-right-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px dotted plum;
background: linear-gradient(pink, mediumpurple);
box-shadow: 0px 0px 2px 2px pink;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 1;
grid-column-end: 1;
}
.event-container{
flex-direction: column;
flex-weight: 1;
}
.event1{
width: 60%;
flex-weight: 1;
background-color: yellow;
}
.event2{
width: 70%;
flex-weight: 1;
background-color: red;
}
.event3{
width: 80%;
flex-weight: 1;
background-color: #ad4e2a;
}
.event4{
flex-direction: row;
width: 90%;
flex-weight: 1;
overflow:scroll;
}
.event5{
flex-direction: column;
width: 100%;
height: 90px;
overflow:scroll;
}
.prop-container{
flex-direction: column;
}
#prop1 {
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
height: 30px;
background-color: pink;
width: 100%;
margin: 5px;
}
.prop3 {
height: 30px;
background-color: darkseagreen;
width: 100%;
margin: 5px;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
background-color: #72ac33;
width: 55px;
height: 55px;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
background-color: #ad4e2a;
width: 55px;
height: 55px;
margin: 5px;
}
.gradient-container{
flex-direction: column;
}
.gradient1{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
width: 100%;
height: 20px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
flex-direction: column;
}
.access1{
background-color: #321124;
margin: 5px;
width: 90%;
height: 30px;
}
.atom-container{
flex-direction: column;
}
.multiMode-container{
flex-direction: column;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
.function-container{
flex-direction: column;
}
.function1{
background-color: #ff0000;
width: 60%;
height: 20px;
}
.function2{
background-color: #00ff00;
width: 60%;
height: 20px;
}
.function3{
background-color: #0000ff;
width: 100%;
height: 20px;
}
.function4{
flex-direction: row;
width: 60%;
height: 20px;
overflow:scroll;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/div/index.hml 0 → 100644
浏览文件 @ b06c4348
<!--/**
* 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">
div通用样式1
</text>
<div class="style1">
</div>
<text class="sub-title">
div通用样式2
</text>
<div class="style2">
</div>
<text class="sub-title">
div通用样式3
</text>
<div class="style3">
</div>
<text class="sub-title">
div通用样式4
</text>
<div class="style4">
</div>
<text class="sub-title">
div通用样式5
</text>
<div class="contain1">
<div class="style5">
</div>
<div class="style6">
</div>
</div>
<text class="sub-title">
div特有样式
</text>
<div class="style7">
<div class="flex-item color-primary">
</div>
<div class="flex-item color-warning">
</div>
<div class="flex-item color-success">
</div>
</div>
<text class="sub-title">
div特有样式1
</text>
<div class="style8">
<div class="flex-item color-primary">
</div>
<div class="flex-item color-warning">
</div>
<div class="flex-item color-success">
</div>
<div class="flex-item color-primary">
</div>
<div class="flex-item color-warning">
</div>
<div class="flex-item color-success">
</div>
<div class="flex-item color-primary">
</div>
<div class="flex-item color-warning">
</div>
<div class="flex-item color-success">
</div>
</div>
<text class="sub-title">
div特有样式2
</text>
<div class="style9">
<div class="grid-child grid-left-top"></div>
<div class="grid-child grid-left-bottom"></div>
<div class="grid-child grid-right-top"></div>
<div class="grid-child grid-right-bottom"></div>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
div动画样式1
</text>
<div class="ani1" >
</div>
<text class="sub-title">
div动画样式2
</text>
<div class="ani2" >
</div>
</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">
div通用属性1
</text>
<div id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</div>
<text class="sub-title">
div通用属性2
</text>
<div class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</div>
<text class="sub-title">
div通用属性3
</text>
<div style="color: #679855; margin: 5px;" class="prop3">
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
div通用事件1
</text>
<div class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</div>
<text class="sub-title">
div通用事件2
</text>
<div class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</div>
<text class="sub-title">
div通用事件3
</text>
<div 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>
<text class="sub-title">
div特有事件1
</text>
<div class ="event4" onreachstart="reachStart" onreachend="reachEnd">
<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>
<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>
</div>
<text class="sub-title">
div特有事件2
</text>
<div class ="event5" onreachtop="reachTop" onreachbottom="reachBottom">
<div style="height: 20px; width: 40px; background-color: red; margin-top: 2px;"></div>
<div style="height: 20px; width: 40px;background-color: red; margin-top: 2px;"></div>
<div style="height: 20px; width: 40px;background-color: red; margin-top: 2px;"></div>
<div style="height: 20px; width: 40px;background-color: red; margin-top: 2px;"></div>
<div style="height: 20px; width: 40px;background-color: red; margin-top: 2px;"></div>
<div style="height: 20px; width: 40px;background-color: red; margin-top: 2px;"></div>
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
div通用方法1
</text>
<div id="function1" class="function1" onattached="functionTest1">
</div>
<text class="sub-title">
div通用方法2
</text>
<div id="function2" class="function2" onattached="functionTest2">
</div>
<text class="sub-title">
div通用方法3
</text>
<div id="function3" class="function3" onattached="functionTest3">
</div>
<text class="sub-title">
div特有方法
</text>
<div id="function4" class="function4" onattached="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>
<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>
</div>
</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">
div渐变样式1
</text>
<div class="gradient1">
</div>
<text class="sub-title">
div渐变样式2
</text>
<div class="gradient2">
</div>
<text class="sub-title">
div渐变样式3
</text>
<div class="gradient3">
</div>
<text class="sub-title">
div渐变样式4
</text>
<div class="gradient4">
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
div无障碍1
</text>
<div class="access1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
div原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<div style="width:20px;height:20px;background-color: blue;display-index: 1;">
</div>
<div style="width:30px; height:20px;background-color: black;display-index: 5;">
</div>
<div style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</div>
<div style="width:10px; height:20px;background-color: red;display-index: 3;">
</div>
<div style="width:25px; height:20px;background-color:pink;display-index: 7;">
</div>
<div style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</div>
</div>
<text class="sub-title">
div原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<div style="height:20px;background-color: blue;flex-weight: 1;">
</div>
<div style="height:20px;background-color: black;flex-weight: 5;">
</div>
<div style="height:20px;background-color: yellow;flex-weight: 4;">
</div>
<div style="height:20px;background-color: red;flex-weight: 3;">
</div>
<div style="height:20px;background-color:pink;flex-weight: 7;">
</div>
<div style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</div>
</div>
<text class="sub-title">
div原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<div style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</div>
<div style="width:30px;background-color: black;aspect-ratio:0.5;">
</div>
<div style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</div>
<div style="width:30px;background-color: red;aspect-ratio: 1.3;">
</div>
<div style="width:30px;background-color:pink;aspect-ratio: 1;">
</div>
<div style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
div多模输入1
</text>
<div class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</div>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/div/index.js 0 → 100644
浏览文件 @ b06c4348
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
var options = {
duration: 1500,
easing: 'friction',
delay: 100,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
translate: '-120px',
rotate:'10deg',
scale:0.2,
skew:'40deg'
},
opacity: 0.1,
offset: 0.0,
width: '40%',
height:'20px',
backgroundColor:'#ff0000',
backgroundPosition:'10px 20px',
transformOrigin:'left top'
},
{
transform: {
translateX: '0px',
translateY: '5px',
rotateX:'10deg',
rotateY:'10deg',
scaleX:0.5,
scaleY:0.7,
skewX:'22deg',
skewY:'30deg'
},
opacity: 0.6,
offset: 2.0,
width: '60%',
height:'30px',
backgroundColor:'#ff00ff',
backgroundPosition:'15px 25px',
transformOrigin:'center top'
},
{
transform: {
translateX: '100px',
translateY: '0px',
translateZ: '20px',
rotateX:'0deg',
rotateY:'0deg',
rotateZ:'30deg',
scaleX:1,
scaleY:1,
scaleZ:2,
skewX:'0',
skewY:'0',
skewZ:'30deg'
},
opacity: 1,
offset: 0.0,
width: '100%',
height:'30px',
backgroundColor:'#ffff00',
backgroundPosition:'0px',
transformOrigin:'center center'
},
];
export default {
onShow(){
// 通用属性
var prop1 = this.$element('prop1');
var name1 = prop1.dataSet.name
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.name
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
},
touchStart(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchstart:\n' + message
});
},
touchMove(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchMove:\n' +message
});
},
touchEnd(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchEnd:\n' +message
});
},
touchCancel(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchCancel:\n' +message
});
},
click(){
prompt.showToast({
message: 'click'
});
},
doubleClick(){
prompt.showToast({
message: 'doubleClick'
});
},
longPress(){
prompt.showToast({
message: 'longPress'
});
},
focus(){
prompt.showToast({
message: 'focus'
});
},
blur(){
prompt.showToast({
message: 'blur'
});
},
key(event){
var code = event.code;
var action = event.action;
var repeatCount = event.repeatCount;
var timestampStart = event.timestampStart;
var message = 'code--' + code + ',action--' + action +
',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
prompt.showToast({
message: 'key:\n' + message
});
},
swipe(event){
var direction = event.direction;
var distance = event.distance;
var message = 'direction--' + direction + ',distance--' + distance;
prompt.showToast({
message: 'swipe:\n' + message
});
},
attached(){
prompt.showToast({
message: 'attached'
});
},
detached(){
prompt.showToast({
message: 'detached'
});
},
pinchStart(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchStart:\n' + message
});
},
pinchUpdate(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchEnd(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchCancel(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchCancel:\n' + message
});
},
dragStart(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragStart:\n' + message
});
},
drag(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drag:\n' + message
});
},
dragEnd(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnd:\n' + message
});
},
dragEnter(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnter:\n' + message
});
},
dragOver(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragOver:\n' + message
});
},
dragLeave(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragLeave:\n' + message
});
},
drop(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drop:\n' + message
});
},
functionTest1(event){
var function1 = this.$element('function1');
function1.focus(true)
var rect = function1.getBoundingClientRect();
var width = rect.width;
var height = rect.height;
var left = rect.left;
var top = rect.top;
var message = 'width--' + width + ',height--' + height +
',left--' + left + ',top--' + top;
prompt.showToast({
message: 'function1 rect:\n' + message
});
},
functionTest2(event){
var function2 = this.$element('function2');
let observer = function2.createIntersectionObserver({
ratios: [0.2, 0], // number
});
observer.observe((isVisible, ratio)=> {
console.info('this element is ' + isVisible + 'ratio is ' + ratio)
prompt.showToast({
message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
});
})
observer.unobserve()
},
functionTest3(event){
var function3 = this.$element('function3');
var animation = function3.animate(frames, options);
animation.play()
animation.onfinish = function(){
prompt.showToast({
message: 'The animation is finished.'
});
};
animation.oncancel = function(){
prompt.showToast({
message: 'The animation is canceled.'
});
};
animation.onrepeat = function(){
prompt.showToast({
message: 'The animation is repeated.'
});
};
setTimeout(() => {
animation.reverse()
}, 500)
setTimeout(() => {
animation.pause()
}, 1000)
setTimeout(() => {
animation.cancel()
}, 1500)
},
functionTest4(event){
var function4 = this.$element('function4');
var scrollOffset = function4.getScrollOffset();
var x = scrollOffset.x;
var y = scrollOffset.y;
var message = 'x--' + x + ',y--' + y;
prompt.showToast({
message: 'functionTest4 scrollOffset:\n' + message
});
var scrollParam = {
dx:60,
dy:0,
smooth:true
}
function4.scrollBy(scrollParam)
},
reachStart(){
prompt.showToast({
message: 'reachStart'
});
},
reachEnd(){
prompt.showToast({
message: 'reachEnd'
});
},
reachTop(){
prompt.showToast({
message: 'reachTop'
});
},
reachBottom(){
prompt.showToast({
message: 'reachBottom'
});
}
}
ace/ace_standard/src/main/js/default/pages/divider/index.css
浏览文件 @ b06c4348
......@@ -13,24 +13,43 @@
* limitations under the License.
*/
/* xxx.css */
.container {
margin: 20px;
flex-direction:column;
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.title{
font-size: 16px;
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
color: grey;
font-weight: bold;
text-align: center;
}
.divider1{
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
......@@ -49,10 +68,10 @@
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 5px;
border-right-width: 10px;
border-top-width: 15px;
border-bottom-width: 20px;
border-left-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;
......@@ -71,9 +90,9 @@
clip-path: margin-box;
}
.divider2{
.style2{
width: 50px;
height: 100px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
......@@ -86,15 +105,11 @@
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.divider3{
width: 100px;
height: 50px;
.style3{
width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
......@@ -102,27 +117,31 @@
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/image.png');
background-size:contain;
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.divider4{
width: 150px;
height: 50px;
.style4{
width: 60%;
height: 5%;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 150px;
width: 100%;
height: 70px;
flex-direction: column;
}
.divider5{
width: 120px;
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
......@@ -132,8 +151,8 @@
border-image-repeat: repeat;
}
.divider6{
width: 120px;
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
......@@ -144,10 +163,153 @@
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.divider7 {
.style7 {
margin-bottom: 50px;
margin-top: 10px;
color: green;
stroke-width: 30px;
line-cap: round;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
#prop1 {
color: #ad4e2a;
stroke-width: 10px;
line-cap: square;
margin: 5px;
}
.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;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
color: #72ac33;
stroke-width: 55px;
line-cap: square;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
color: #ad4e2a;
stroke-width: 55px;
line-cap: square;
margin: 5px;
}
.gradient-container{
flex-direction: column;
}
.gradient1{
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
flex-direction: column;
}
.access1{
color: #321124;
stroke-width: 30px;
line-cap: square;
margin: 5px;
}
.atom-container{
flex-direction: column;
}
.multimode-container{
flex-direction: column;
}
.multimode1{
color: #978666;
stroke-width: 30px;
line-cap: square;
margin: 5px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/divider/index.hml
浏览文件 @ b06c4348
......@@ -14,38 +14,222 @@
*/-->
<div class="container">
<text class="title">
divider通用样式1
</text>
<divider class="divider1" vertical="false">
</divider>
<text class="title">
divider通用样式2
</text>
<divider class="divider2" vertical="true">
</divider>
<text class="title">
divider通用样式3
</text>
<divider class="divider3" vertical="false">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
divider通用样式1
</text>
<divider class="style1" vertical="false">
</divider>
<text class="sub-title">
divider通用样式2
</text>
<divider class="style2" vertical="true">
</divider>
<text class="sub-title">
divider通用样式3
</text>
<divider class="style3" vertical="false">
</divider>
<text class="sub-title">
divider通用样式4
</text>
<divider class="style4" vertical="false">
</divider>
<text class="sub-title">
divider通用样式5
</text>
<div class="contain1">
<divider class="style5" vertical="false">
</divider>
<divider class="style6" vertical="false">
</divider>
</div>
<text class="sub-title">
divider特有样式
</text>
<divider class="style7" vertical="false">
</divider>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<text class="title">
divider通用样式4
</text>
<divider class="divider4" vertical="false">
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
divider通用属性1
</text>
<divider id="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</divider>
<text class="sub-title">
divider通用属性2
</text>
<divider class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</divider>
<text class="sub-title">
divider通用属性3
</text>
<divider style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;">
</divider>
<text class="sub-title">
divider特有属性4
</text>
<divider class="prop4" vertical="false">
</divider>
<text class="sub-title">
divider特有属性5
</text>
<divider class="prop5" vertical="true">
</divider>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
divider动画样式1
</text>
<divider class="ani1" >
</divider>
<text class="sub-title">
divider动画样式2
</text>
<divider class="ani2" >
</divider>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<text class="title">
divider通用样式5
</text>
<div class="contain1">
<divider class="divider5" vertical="false">
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
divider渐变样式1
</text>
<divider class="gradient1">
</divider>
<text class="sub-title">
divider渐变样式2
</text>
<divider class="gradient2">
</divider>
<text class="sub-title">
divider渐变样式3
</text>
<divider class="gradient3">
</divider>
<text class="sub-title">
divider渐变样式4
</text>
<divider class="gradient4">
</divider>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<divider class="divider6" vertical="false">
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
divider无障碍1
</text>
<divider class="access1" accessibilitygroup ="true"
accessibilitytext="这是divider"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</divider>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
divider原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<divider vertical="true" style="width:20px;background-color: blue;display-index: 1;">
</divider>
<divider vertical="true" style="width:30px;background-color: black;display-index: 5;">
</divider>
<divider vertical="true" style="width:40px;background-color: yellow;display-index: 4;">
</divider>
<divider vertical="true" style="width:10px;background-color: red;display-index: 3;">
</divider>
<divider vertical="true" style="width:25px;background-color:pink;display-index: 7;">
</divider>
<divider vertical="true" style="width:15px;background-color: palegoldenrod;display-index: 2;">
</divider>
</div>
<text class="sub-title">
divider原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<divider vertical="true" style="background-color: blue;flex-weight: 1;">
</divider>
<divider vertical="true" style="background-color: black;flex-weight: 5;">
</divider>
<divider vertical="true" style="background-color: yellow;flex-weight: 4;">
</divider>
<divider vertical="true" style="background-color: red;flex-weight: 3;">
</divider>
<divider vertical="true" style="background-color:pink;flex-weight: 7;">
</divider>
<divider vertical="true" style="background-color: palegoldenrod;flex-weight: 2;">
</divider>
</div>
<text class="sub-title">
divider原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<divider vertical="true" style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</divider>
<divider vertical="true" style="width:30px;background-color: black;aspect-ratio:0.5;">
</divider>
<divider vertical="true" style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</divider>
<divider vertical="true" style="width:30px;background-color: red;aspect-ratio: 1.3;">
</divider>
<divider vertical="true" style="width:30px;background-color:pink;aspect-ratio: 1;">
</divider>
<divider vertical="true" style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</divider>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
divider多模输入1
</text>
<divider class="multimode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
</divider>
</div>
</div>
<text class="title">
divider特有样式
</text>
<divider class="divider7" vertical="false">
</divider>
</div>
ace/ace_standard/src/main/js/default/pages/divider/index.js
浏览文件 @ b06c4348
......@@ -13,8 +13,20 @@
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data: {
title: 'World'
},
onShow(){
// 通用属性
var prop1 = this.$element("prop1");
var name1 = prop1.dataSet.name
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.name
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
}
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/form/index.css 0 → 100644
浏览文件 @ b06c4348
.form-content {
flex-direction: column;
justify-content: center;
align-items: center;
}
.form1 {
/* margin: 20px;*/
width: 100%;
/* height: 50px;*/
/* min-width: 80%;*/
/* min-height: 280px;*/
/* max-height: 400px;*/
/* max-width: 100%;*/
padding: 5px;
background: linear-gradient(pink, mediumpurple);
opacity: 0.7;
border: 6px solid pink;
border-radius: 24px;
box-shadow: 0px 0px 5px 5px mediumpurple;
z-index: 2;
}
.form2 {
min-width: 80%;
min-height: 200px;
max-height: 400px;
max-width: 100%;
width: 90%;
margin: 20px;
height: 280px;
padding: 5px;
opacity: 1;
border: 10px dashed pink;
border-radius: 24px;
box-shadow: 0px 0px 5px 5px mediumpurple;
z-index: 4;
background-color: pink;
}
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 50px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/image.png');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.style4{
width: 60%;
height: 5%;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.prop-container{
flex-direction: column;
height: 45%;
}
.prop1 {
color: #ad4e2a;
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
color: #343524;
height: 30px;
background-color: pink;
width: 100%;
margin: 5px;
}
.prop3 {
color: #456345;
height: 30px;
background-color: darkseagreen;
width: 100%;
margin: 5px;
}
.event-container{
flex-direction: column;
height: 30%;
}
.event1{
height: 30px;
width: 60%;
flex-weight: 1;
background-color: yellow;
}
.event2{
width: 70%;
flex-weight: 1;
background-color: red;
}
.event3{
width: 80%;
flex-weight: 1;
background-color: #ad4e2a;
}
.ani-container{
flex-direction: column;
height: 20%;
}
.ani1{
background-color: #72ac33;
width: 100px;
height: 55px;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) 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)
}
}
.gradient-container{
flex-direction: column;
}
.gradient1{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
width: 100%;
height: 20px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
flex-direction: column;
}
.access1{
color: #321124;
width: 100%;
height: 30px;
margin: 5px;
}
.atom-container{
flex-direction: column;
}
.multiMode-container{
flex-direction: column;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/form/index.hml 0 → 100644
浏览文件 @ b06c4348
<!--/**
* 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">
通用样式
</text>
<text class="sub-title">
form通用样式1
</text>
<form class="style1">
</form>
<text class="sub-title">
form通用样式2
</text>
<form class="style2">
</form>
<text class="sub-title">
form通用样式3
</text>
<form class="style3">
</form>
<text class="sub-title">
form通用样式4
</text>
<form class="style4">
</form>
<text class="sub-title">
form通用样式5
</text>
<div class="contain1">
<form class="style5">
</form>
<form class="style6">
</form>
</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">
form通用属性1
</text>
<form id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</form>
<text class="sub-title">
form通用属性2
</text>
<form class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</form>
<text class="sub-title">
form通用属性3
</text>
<form style="color: #679855; margin: 1px;" class="prop3">
</form>
<text class="title">
特有事件 submit & rest
</text>
<form onsubmit='onSubmit' onreset='onReset' class="form1" style="height: 100px;">
<div style="width: 100%;height: 20px;flex-direction: row;justify-content: space-around;">
<label style="font-size: 16px;">一</label>
<input type='radio' name='radioGroup' value='radio1'></input>
<label style="font-size: 16px;">二</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<text style="margin-left: 10px;margin-bottom: 5px; font-size: 16px;">输入文本</text>
<input type='text' name='user' style="height: 10px"></input>
<div style="width: 100%;height: 50px;margin-top: 5px;flex-direction: row;justify-content: space-around;">
<input type='submit' style="font-size: 8px; width: 40%; height: 15px;">Submit</input>
<input type='reset' style="font-size: 8px; width: 40%; height: 15px;">Reset</input>
</div>
</form>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
form通用事件1
</text>
<form class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel" style="height: 20px;">
</form>
<text class="sub-title">
form通用事件2
</text>
<form class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</form>
<text class="sub-title">
form通用事件3
</text>
<form class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</form>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
form动画样式1
</text>
<form class="ani1" >
</form>
</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">
form渐变样式1
</text>
<form class="gradient1">
</form>
<text class="sub-title">
form渐变样式2
</text>
<form class="gradient2">
</form>
<text class="sub-title">
form渐变样式3
</text>
<form class="gradient3">
</form>
<text class="sub-title">
form渐变样式4
</text>
<form class="gradient4">
</form>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
form无障碍1
</text>
<form class="access1" accessibilitygroup ="true"
accessibilitytext="这是form"
accessibilitydescription="this is form"
accessibilityimportance="no-hide-descendants">
</form>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
form原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<form style="width:20px;height:20px;background-color: blue;display-index: 1;">
</form>
<form style="width:30px; height:20px;background-color: black;display-index: 5;">
</form>
<form style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</form>
<form style="width:10px; height:20px;background-color: red;display-index: 3;">
</form>
<form style="width:25px; height:20px;background-color:pink;display-index: 7;">
</form>
<form style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</form>
</div>
<text class="sub-title">
form原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<form style="height:20px;background-color: blue;flex-weight: 1;">
</form>
<form style="height:20px;background-color: black;flex-weight: 5;">
</form>
<form style="height:20px;background-color: yellow;flex-weight: 4;">
</form>
<form style="height:20px;background-color: red;flex-weight: 3;">
</form>
<form style="height:20px;background-color:pink;flex-weight: 7;">
</form>
<form style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</form>
</div>
<text class="sub-title">
form原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<form style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</form>
<form style="width:30px;background-color: black;aspect-ratio:0.5;">
</form>
<form style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</form>
<form style="width:30px;background-color: red;aspect-ratio: 1.3;">
</form>
<form style="width:30px;background-color:pink;aspect-ratio: 1;">
</form>
<form style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</form>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
form多模输入1
</text>
<form class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</form>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/form/index.js 0 → 100644
浏览文件 @ b06c4348
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default{
onSubmit(result) {
console.log(result.value.radioGroup) // radio1 or radio2
console.log(result.value.user) // text input value
},
onReset() {
console.log('reset all value')
},
onShow(){
// 通用属性
var prop1 = this.$element('prop1');
var name1 = prop1.dataSet.name
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.name
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
},
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
});
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/imageAnimator/index.css 0 → 100644
浏览文件 @ b06c4348
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 100%;
flex-weight: 2;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 60px;
height: 30px;
padding-start: 2px;
padding-end: 2px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
height:10%;
padding: 0px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/bg-tv.jpg');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis:50px;
flex-shrink: 1;
}
.style4{
width: 60%;
height: 6%;
padding: 2px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 150px;
flex-direction: column;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
height:120px;
margin-top: 10px;
color: green;
stroke-width: 30px;
line-cap: round;
}
.flex-item {
width: 20px;
height: 20px;
border-radius: 16px;
}
.style8{
flex-direction: row;
flex-wrap:nowrap;
scrollbar-color: yellow;
scrollbar-width: 10px;
overscroll-effect:spring;
height: 40px;
overflow:scroll;
}
.style9{
display: grid;
height: 40px;
grid-template-columns: 20% 20%;
grid-columns-gap: 14px;
grid-rows-gap: 4px;
grid-template-rows: 15% 15%;
}
.color-primary {
background-color: mediumpurple;
}
.color-warning {
background-color: pink;
}
.color-success {
background-color: cornflowerblue;
}
.grid-child {
width: 100%;
border-radius: 2px;
}
.grid-left-top {
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid plum;
background: linear-gradient(pink, purple);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 0;
grid-row-end: 0;
grid-column-end: 0;
}
.grid-left-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px solid plum;
background: linear-gradient(pink, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 1;
grid-column-start: 0;
grid-row-end: 1;
grid-column-end: 0;
}
.grid-right-top {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px dotted plum;
background: linear-gradient(mediumpurple, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 1;
grid-row-end: 0;
grid-column-end: 1;
}
.grid-right-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px dotted plum;
background: linear-gradient(pink, mediumpurple);
box-shadow: 0px 0px 2px 2px pink;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 1;
grid-column-end: 1;
}
.event-container{
flex-direction: column;
flex-weight: 1;
}
.event1{
width: 60%;
flex-weight: 1;
background-color: yellow;
}
.event2{
width: 70%;
flex-weight: 1;
background-color: red;
}
.event3{
width: 80%;
flex-weight: 1;
background-color: #ad4e2a;
}
.event4{
flex-direction: row;
width: 90%;
flex-weight: 1;
overflow:scroll;
}
.event5{
width: 100%;
height: 30px;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
#prop1 {
height:30px;
color: #ad4e2a;
stroke-width: 10px;
line-cap: square;
margin: 5px;
}
.prop2 {
height:30px;
color: #343524;
stroke-width: 15px;
line-cap: round;
margin: 5px;
}
.prop4 {
height:30px;
color: #456345;
stroke-width: 25px;
line-cap: round;
margin: 5px;
}
.prop5 {
color: #831834;
stroke-width: 40px;
line-cap: square;
margin: 5px;
height: 70px;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
color: #72ac33;
stroke-width: 55px;
line-cap: square;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
color: #ad4e2a;
width: 55px;
height: 55px;
margin: 5px;
}
.gradient-container{
flex-direction: column;
}
.gradient1{
height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
height:20px;
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);
}
.access-container{
flex-direction: column;
}
.access1{
height:20px;
background-color: #321124;
stroke-width: 30px;
line-cap: square;
margin: 5px;
}
.atom-container{
flex-direction: column;
}
.multimode-container{
flex-direction: column;
}
.multimode1{
color: #978666;
stroke-width: 30px;
line-cap: square;
margin: 5px;
}
.function-container{
flex-direction: column;
}
.function1{
background-color: #ff0000;
width: 60%;
height: 20px;
}
.function2{
background-color: #00ff00;
width: 60%;
height: 20px;
}
.function3{
background-color: #0000ff;
width: 100%;
height: 20px;
}
.function4{
flex-direction: row;
width: 60%;
height: 20px;
overflow:scroll;
}
.flex-class{
margin-top: 5px;
width: 100%;
height: 30px;
display: flex;
/* background-color: #ee6363;*/
justify-content: center;
align-items: center;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/imageAnimator/index.hml 0 → 100644
浏览文件 @ b06c4348
<!--/**
* 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">
image-animator通用样式1
</text>
<image-animator images="{{images}}" duration="6s" class="style1">
</image-animator>
<text class="sub-title">
image-animator通用样式2
</text>
<image-animator images="{{images}}" duration="6s" class="style2">
</image-animator>
<text class="sub-title">
image-animator通用样式3
</text>
<image-animator images="{{images}}" duration="6s" class="style3">
</image-animator>
<text class="sub-title">
image-animator通用样式4
</text>
<image-animator images="{{images}}" duration="6s" class="style4">
</image-animator>
<text class="sub-title">
image-animator通用样式5
</text>
<div class="contain1">
<image-animator images="{{images}}" duration="6s" class="style5">
</image-animator>
<image-animator images="{{images}}" duration="6s" class="style6">
</image-animator>
</div>
<text class="sub-title">
image-animator特有样式
</text>
<div class="style7">
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
</div>
<text class="sub-title">
image-animator特有样式1
</text>
<div class="style8">
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
</div>
<text class="sub-title">
image-animator 特有样式2
</text>
<div class="style9">
<image-animator images="" duration="" class="grid-child grid-left-top"></image-animator>
<image-animator images="" duration="" class="grid-child grid-left-bottom"></image-animator>
<image-animator images="" duration="" class="grid-child grid-right-top"></image-animator>
<image-animator images="" duration="" class="grid-child grid-right-bottom"></image-animator>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
image-animator动画样式1
</text>
<image-animator images="" duration="" class="ani1" >
</image-animator>
<text class="sub-title">
image-animator动画样式2
</text>
<image-animator images="" duration="" class="ani2" >
</image-animator>
</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">
image-animator通用属性1
</text>
<image-animator images="{{images}}" duration="6s" id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</image-animator>
<text class="sub-title">
image-animator通用属性2
</text>
<image-animator images="{{images}}" duration="6s" class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</image-animator>
<text class="sub-title">
image-animator通用属性3
</text>
<image-animator images="{{images}}" duration="6s" style="height:30px; color: #679855; margin: 5px;" class="prop3">
</image-animator>
<text class="sub-title">
image-animator特有属性
</text>
<image-animator images="{{images}}" duration="8s" style="height:30px; color: #679855; margin: 5px;"
class="prop3" predecode="0" iteration="3"
reverse="true" fixedsize="false">
</image-animator>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
div通用事件1
</text>
<image-animator images="{{images}}" duration="8s" class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</image-animator>
<text class="sub-title">
div通用事件2
</text>
<image-animator images="{{images}}" duration="8s" class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</image-animator>
<text class="sub-title">
div通用事件3
</text>
<image-animator images="{{images}}" duration="8s" class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</image-animator>
<text class="sub-title">
div特有事件1
</text>
<image-animator ref="animator" fixedsize="true" images="{{images}}" duration="1s" @resume='resume' @start="start" @stop='stop' @pause='pause' class ="event5" >
</image-animator>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
div通用方法1
</text>
<image-animator images="{{images}}" duration="8s" id="function1" class="function1" ontouchstart="functionTest1">
</image-animator>
<text class="sub-title">
div通用方法2
</text>
<image-animator images="{{images}}" duration="8s" id="function2" class="function2" ontouchstart="functionTest2">
</image-animator>
<text class="sub-title">
div通用方法3
</text>
<image-animator images="{{images}}" duration="8s" id="function3" class="function3" ontouchstart="functionTest3">
</image-animator>
<text class="sub-title">
div特有方法
</text>
<div class="flex-class">
<button onclick="handleStart">
开始
</button>
<button onclick="handleStop">
停止
</button>
<button onclick="handlePause">
暂停
</button>
<button onclick="handleResume">
回复
</button>
</div>
</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">
div渐变样式1
</text>
<image-animator images="" duration="" class="gradient1">
</image-animator>
<text class="sub-title">
div渐变样式2
</text>
<image-animator images="" duration="" class="gradient2">
</image-animator>
<text class="sub-title">
div渐变样式3
</text>
<image-animator images="" duration="" class="gradient3">
</image-animator>
<text class="sub-title">
div渐变样式4
</text>
<image-animator images="" duration="" class="gradient4">
</image-animator>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
div无障碍1
</text>
<image-animator images="" duration="" class="access1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</image-animator>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
div原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<image-animator images="" duration="" style="width:20px;height:20px;background-color: blue;display-index: 1;">
</image-animator>
<image-animator images="" duration="" style="width:30px; height:20px;background-color: black;display-index: 5;">
</image-animator>
<image-animator images="" duration="" style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</image-animator>
<image-animator images="" duration="" style="width:10px; height:20px;background-color: red;display-index: 3;">
</image-animator>
<image-animator images="" duration="" style="width:25px; height:20px;background-color:pink;display-index: 7;">
</image-animator>
<image-animator images="" duration="" style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</image-animator>
</div>
<text class="sub-title">
div原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<image-animator images="" duration="" style="height:20px;background-color: blue;flex-weight: 1;">
</image-animator>
<image-animator images="" duration="" style="height:20px;background-color: black;flex-weight: 5;">
</image-animator>
<image-animator images="" duration="" style="height:20px;background-color: yellow;flex-weight: 4;">
</image-animator>
<image-animator images="" duration="" style="height:20px;background-color: red;flex-weight: 3;">
</image-animator>
<image-animator images="" duration="" style="height:20px;background-color:pink;flex-weight: 7;">
</image-animator>
<image-animator images="" duration="" style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</image-animator>
</div>
<text class="sub-title">
div原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<image-animator images="" duration="" style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</image-animator>
<image-animator images="" duration="" style="width:30px;background-color: black;aspect-ratio:0.5;">
</image-animator>
<image-animator images="" duration="" style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</image-animator>
<image-animator images="" duration="" style="width:30px;background-color: red;aspect-ratio: 1.3;">
</image-animator>
<image-animator images="" duration="" style="width:30px;background-color:pink;aspect-ratio: 1;">
</image-animator>
<image-animator images="" duration="" style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</image-animator>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
div多模输入1
</text>
<image-animator images="" duration="" class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</image-animator>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/list/index.hml 0 → 100644
浏览文件 @ b06c4348
/**
* 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">
通用样式
</text>
<text class="sub-title">
list通用样式1
</text>
<list class="style1">
</list>
<text class="sub-title">
list通用样式2
</text>
<list class="style2">
</list>
<text class="sub-title">
list通用样式3
</text>
<list class="style3">
</list>
<text class="sub-title">
list通用样式4
</text>
<list class="style4">
</list>
<text class="sub-title">
list特有样式1
</text>
<list class="listG" divider="true">
<list-item-group>
<list-item><text class="group" style="font-size: 14px;">分组列表</text></list-item>
<list-item><text class="groupValue" style="font-size: 12px;">文本内容</text></list-item>
<list-item><text class="groupValue" style="font-size: 12px;">文本内容</text></list-item>
<list-item><text class="groupValue" style="font-size: 12px;">文本内容</text></list-item>
</list-item-group>
<list-item-group>
<list-item><text class="group" style="font-size: 14px;">分组列表</text></list-item>
<list-item><text class="groupValue" style="font-size: 12px;">文本内容</text></list-item>
<list-item><text class="groupValue" style="font-size: 12px;">文本内容</text></list-item>
<list-item><text class="groupValue" style="font-size: 12px;">文本内容</text></list-item>
</list-item-group>
</list>
<text class="sub-title">
list特有样式2
</text>
<div>
<list class="list" divider="true">
<list-item for="{{array}}" class="listItem">
<text class="text">{{$item.value}}</text>
</list-item>
</list>
</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">
list通用属性1
</text>
<list id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</list>
<text class="sub-title">
list特有属性1
</text>
<list ref ="prop2" class="list1" divider="true" scrollpage="false"
scrollbar="auto" scrolleffect="fade" indexer="true" data-name ="prop2"
shapemode="rect" updateeffect="true" scrollvibrate="true">
<list-item for="{{array}}" class="listItem">
<text class="text">{{$item.value}}</text>
</list-item>
</list>
<text class="sub-title">
list特有属性2
</text>
<list class="list" divider="true">
<list-item for="{{array}}" class="listItem">
<text class="text">{{$item.value}}</text>
</list-item>
</list>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
list通用事件1
</text>
<list class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel" style="height: 20px;">
</list>
<text class="sub-title">
list通用事件2
</text>
<list class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</list>
<text class="sub-title">
list通用事件3
</text>
<list class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</list>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
list动画样式1
</text>
<div class="ani1" >
<list divider="true">
<list-item for="{{array}}" class="listItem">
<text class="text">{{$item.value}}</text>
</list-item>
</list>
</div>
</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">
list渐变样式1
</text>
<list class="gradient1">
</list>
<text class="sub-title">
list渐变样式2
</text>
<list class="gradient2">
</list>
<text class="sub-title">
list渐变样式3
</text>
<list class="gradient3">
</list>
<text class="sub-title">
list渐变样式4
</text>
<list class="gradient4">
</list>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
list无障碍1
</text>
<list class="access1" accessibilitygroup ="true"
accessibilitytext="这是list"
accessibilitydescription="list"
accessibilityimportance="no-hide-descendants">
</list>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
list原子布局1
</text>
<list style="flex-direction: row;height: 30px;width: 100%;">
<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>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="special-event-container">
<text class="title" style="height: 11%;">
list特有事件1
</text>
<list style="height: 40%;"
@scroll="scroll" @scrollbottom="scrollBottom" @indexerchange="indexerChange"
@scrolltop="scrollTop" @scrollend="scrollEnd" @scrolltouchup="scrollTouchUp"
@requestitem="requestItem" @rotate="rotate">
<list-item-group>
<list-item for="{{eventArray}}">
<text class="text">{{$item.value}}</text>
</list-item>
</list-item-group>
</list>
<text class="title" style="height: 11%;">
list特有事件2
</text>
<list>
<list-item for="{{eventArray}}">
<text class="text">{{$item.value}}</text>
</list-item>
</list>
</div>
</div>
</div>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或