Skip to content

X
Xts Acts

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

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

!2014 add attrs testcase 

Merge pull request !2014 from bayanxing/master
上级 e0b04c64 6b798bc2
展开全部 隐藏空白更改
内联 并排
Showing with 37452 addition and 941 deletion
ace/ace_standard/src/main/config.json
浏览文件 @ ee9149d0
......@@ -53,21 +53,21 @@
"pages/index/index",
"pages/routerPush/index",
"pages/routerReplace/index",
"pages/button/index",
"pages/chart/index",
"pages/button/router/index",
"pages/chart/router/index",
"pages/input/index",
"pages/slider/index",
"pages/text/index",
"pages/divider/index",
"pages/image/index",
"pages/divider/router/index",
"pages/image/router/index",
"pages/label/index",
"pages/rating/index",
"pages/search/index",
"pages/toolbar/index",
"pages/textarea/index",
"pages/menu/index",
"pages/span/index",
"pages/switch/index",
"pages/menu/router/index",
"pages/span/router/index",
"pages/switch/router/index",
"pages/toggle/index",
"pages/option/index",
"pages/picker/index",
......@@ -76,7 +76,7 @@
"pages/progress/index",
"pages/qrcode/index",
"pages/select/index",
"pages/div/index",
"pages/div/router/index",
"pages/badge/index",
"pages/dialog/index",
"pages/form/index",
......@@ -93,7 +93,43 @@
"pages/swiper/index",
"pages/tabs/index",
"pages/tab-bar/index",
"pages/tab-content/index"
"pages/tab-content/index",
"pages/svg_text/index",
"pages/video/index",
"pages/gridContainer/index",
"pages/gridRow/index",
"pages/gridCol/index",
"pages/canvas/index",
"pages/obj_CanvasRenderingContext2D/index",
"pages/obj_Image/index",
"pages/obj_CanvasGradient/index",
"pages/obj_ImageData/index",
"pages/obj_Path2D/index",
"pages/obj_ImageBitmap/index",
"pages/obj_OffscreenCanvas/index",
"pages/obj_OffscreenCanvasRenderingContext2D/index",
"pages/svg/index",
"pages/rect/index",
"pages/circle/index",
"pages/ellipse/index",
"pages/path/index",
"pages/line/index",
"pages/polyline/index",
"pages/polygon/index",
"pages/animate/index",
"pages/animateMotion/index",
"pages/animateTransform/index",
"pages/textPath/index",
"pages/tspan/index",
"pages/div/prop/index",
"pages/div/style/index",
"pages/divider/prop/index",
"pages/button/prop/index",
"pages/chart/prop/index",
"pages/image/prop/index",
"pages/span/prop/index",
"pages/menu/prop/index",
"pages/switch/prop/index"
],
"name": "default",
"window": {
......
ace/ace_standard/src/main/js/default/pages/animate/index.css 0 → 100644
浏览文件 @ ee9149d0
.container {
width: 100%;
flex-direction: column;
align-items: center;
}
.title{
font-size: 18px;
color: grey;
padding: 5px;
text-align: center;
}
.svg-style{
border: 1px solid #000000;
}
.outerBox{
flex-direction: column;
}
ace/ace_standard/src/main/js/default/pages/animate/index.hml 0 → 100644
浏览文件 @ ee9149d0
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="600" height="600">
<circle cx="60" cy="70" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="r" from="0" to="50" dur="2000" repeatCount="indefinite"></animate>
<animate attributeName="cx" from="60" to="200" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="60" cy="200" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="stroke-width" from="4" to="10" calcMode="discrete" dur="2000" repeatCount="indefinite"></animate>
<animate attributeName="stroke" values="red;blue" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="180" cy="200" r="50" stroke-width="10" stroke="red" stroke-dasharray="60 10" stroke-dashoffset="3">
<animate attributeName="stroke-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate>
<animate attributeName="stroke-dashoffset" values="30;0;30" dur="500" repeatCount="indefinite"></animate>
<animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="180" cy="200" r="5" fill="blue">
<animate attributeName="cx" from="180" to="400" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="60" cy="380" r="50" fill="blue">
<animate attributeName="fill" values="red;blue" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="180" cy="380" r="50" fill="blue">
<animate attributeName="fill-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate>
</circle>
</svg>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml 0 → 100644
浏览文件 @ ee9149d0
<!-- xxx.hml -->
<div class="container">
<svg fill="white" width="400" height="400">
<path fill="none" stroke="blue" stroke-width="3" d="m40,60 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,130 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m40,60 c0,-100 160,160,100 160,0 c0,-100,-160,100 -160,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="m40,130 c0,-100 160,100 160,0 c0,-100,-160,100 -160,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="45"path="m40,200 c0,-100 160,100 160,0 c0,-100 -160,100 -160,0 z"></animateMotion>
</path>
</svg>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/switch/index.js → ace/ace_standard/src/main/js/default/pages/animateMotion/index.js
浏览文件 @ ee9149d0
......@@ -13,20 +13,8 @@
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data: {
title: 'World'
},
switchChange(e){
if(e.checked){
prompt.showToast({
message: "打开开关"
});
}else{
prompt.showToast({
message: "关闭开关"
});
}
}
}
\ No newline at end of file
}
ace/ace_standard/src/main/js/default/pages/animateTransform/index.css 0 → 100644
浏览文件 @ ee9149d0
/* xxx.css */
.container {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
background-color: #f8f8ff;
}
.back_container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1000px;
width: 1080px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml 0 → 100644
浏览文件 @ ee9149d0
<!-- xxx.hml -->
<div class="container">
<div class="back_container">
<svg>
<polygon points="60,30 90,90 30,90" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="green">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0; 5; 0; 10" keyTimes="0;
0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2"
keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0 0; 200 200; 400 0;
600 200" keyTimes="0; 0.4; 0.8;1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" values="1; 1.2; 1; 1.2"
keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="skewX" values="0; 10; 0; 10"
keyTimes="0; 0.4; 0.8; 1.0" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
</svg>
</div>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/animateTransform/index.js 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
title: 'World'
}
}
ace/ace_standard/src/main/js/default/pages/button/index.css 已删除 100644 → 0
浏览文件 @ e0b04c64
.div-button {
flex-direction: column;
width: 100%;
}
.circleall{
width: 90%;
flex-direction: row;
justify-content: space-around;
margin-left: 4%;
}
.circlealls{
flex-direction: row;
}
.buttons {
margin-top: 15px;
width: 45%;
height: 45px;
text-align: center;
font-size: 14px;
border-radius: 10px;
background-color: #317aff;
}
.title{
font-size: 13px;
margin-top: 60px;
margin-left: 20px;
color: grey;
}
.all{
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.oriage{
background-color: #ee8443;
}
.white{
opacity: 0.4;
}
.icon{
icon-height: 30px;
icon-width: 30px;
}
.warn{
background-color: #f55a42;
}
.circle {
radius: 30px;
icon-width: 30px;
icon-height: 30px;
margin-left: 20px;
margin-top: 20px;
background-color: #317aff;
}
.cir{
background-color: #f55a42;
}
.text {
text-color: #0a59f7;
font-size: 17px;
font-weight: 600;
font-family: sans-serif;
font-style: normal;
}
.text1{
text-color: #969696;
}
.text2{
text-color: #e84026;
}
.download {
margin-top: 15px;
width: 88%;
height: 45px;
border-radius: 50px;
text-color: white;
background-color: #007dff;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/button/index.hml 已删除 100644 → 0
浏览文件 @ e0b04c64
<div class="div-button">
<text class="title">普通按钮</text>
<div class="circleall">
<button class="buttons">确认按钮</button>
<button class="buttons" waiting="true">Loading</button>
</div>
<div class="circleall">
<button class="buttons icon" icon="/common/images/paobu.png" value="跑步" placement="start"></button>
<button class="buttons white">禁用按钮</button>
</div>
<div class="circleall">
<button class="buttons oriage">重置</button>
<button class="buttons warn">告警按钮</button>
</div>
<text class="title">胶囊按钮</text>
<div class="circleall">
<button class="buttons" type="capsule">确认按钮</button>
<button class="buttons" type="capsule" waiting="true">Loading</button>
</div>
<div class="circleall">
<button class="buttons" type="capsule">清除</button>
<button class="buttons white" type="capsule" >禁用按钮</button>
</div>
<div class="circleall">
<button class="buttons oriage" type="capsule">重置</button>
<button class="buttons warn" type="capsule">告警按钮</button>
</div>
<text class="title">圆形按钮</text>
<div class="circlealls">
<button class="circle" type="circle" icon="/common/images/fenleifuben.png">icon按钮</button>
<button class="circle cir" type="circle" icon="/common/images/rest-fill.png">icon按钮</button>
</div>
<text class="title">文本按钮</text>
<div class="circleall">
<button class="text" type="text">文本按钮1</button>
<button class="text text1" type="text">文本按钮2</button>
<button class="text text2" type="text">文本按钮3</button>
</div>
<text class="title">长胶囊按钮</text>
<div class="all">
<button class="download" type="download">下载按钮</button>
<button class="download white" type="download">禁止下载</button>
<button class="download" type="download" id="download-btn"
onclick="setProgress">{{downloadText}}</button>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/button/index.js 已删除 100644 → 0
浏览文件 @ e0b04c64
/*
* Copyright (C) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
progress: 10,
downloadText: "进度条按钮"
},
setProgress(e) {
var i=0
var set= setInterval(()=>{
i+=10
this.progress=i
this.downloadText = this.progress + "%";
this.$element('download-btn').setProgress({ progress: this.progress });
if(this.progress>=100){
clearInterval(set)
this.downloadText="完成"
}
},1000)
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/button/prop/index.css 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.prop-container{
flex-direction: column;
flex-weight: 1;
}
#idProp {
flex-weight: 1;
background-color:#f00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.classProp {
flex-weight: 1;
background-color:#0f0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#classPropNone {
flex-weight: 1;
background-color:#0000e0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refProp {
flex-weight: 1;
background-color:#00f000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refPropNone {
flex-weight: 1;
background-color:#00000e;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropTrue {
flex-weight: 1;
background-color:#000f00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropFalse {
flex-weight: 1;
background-color:#0000f0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropNone {
flex-weight: 1;
background-color:#d00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropTrue {
flex-weight: 1;
background-color:#00000f;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropFalse {
flex-weight: 1;
background-color:#ff0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropNone {
flex-weight: 1;
background-color:#0d0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataProp {
flex-weight: 1;
background-color:#0ff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataPropNone {
flex-weight: 1;
background-color:#00d000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropSmall {
height: 15px;
background-color:#00ff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropMedium {
height: 15px;
background-color:#000ff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropLarge {
height: 15px;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropNone{
height: 15px;
background-color:#000d00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropRtl {
flex-weight: 1;
background-color:#0fff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropAuto {
flex-weight: 1;
background-color:#00fff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropLtr {
flex-weight: 1;
background-color:#000fff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropNone {
flex-weight: 1;
background-color:#0000d0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropNull {
flex-weight: 1;
background-color:#ffff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropOne {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropThree {
flex-weight: 1;
background-color:#000e00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropTrue {
flex-weight: 1;
background-color:#0ffff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropTrue {
flex-weight: 1;
background-color:#e00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropFalse {
flex-weight: 1;
background-color:#0e0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
#typeArc{
height: 30px;
margin-bottom: 20px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
}
#typeCapsule{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeCircle{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeText{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeDownload{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#value{
height: 15px;
font-size: 10px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#valueNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#icon{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#iconNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#placementStart{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#placementEnd{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#placementTop{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#placementBottom{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#placementNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#waitingTrue{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#waitingFalse{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#waitingNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
ace/ace_standard/src/main/js/default/pages/button/prop/index.hml 0 → 100644
浏览文件 @ ee9149d0
<!--/**
* 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="prop-container">
<text class="title">
button通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<button id="idProp">
</button>
<text class="sub-title">
通用属性 -- class
</text>
<button id="classProp"
class="classProp">
</button>
<button id="classPropNone"
class="">
</button>
<text class="sub-title">
通用属性 -- style
</text>
<button id="styleProp"
style="width:10%;height:20px;background-color:red">
</button>
<text class="sub-title">
通用属性 -- ref
</text>
<button id="refProp"
ref="refProp">
</button>
<button id="refPropNone"
ref="">
</button>
<text class="sub-title">
通用属性 -- disabled
</text>
<button id="disabledPropTrue"
disabled="true">
</button>
<button id="disabledPropFalse"
disabled="false">
</button>
<button id="disabledPropNone"
disabled="">
</button>
<text class="sub-title">
通用属性 -- focusable
</text>
<button id="focusablePropTrue"
focusable="true">
</button>
<button id="focusablePropFalse"
focusable="false">
</button>
<button id="focusablePropNone"
focusable="">
</button>
<text class="sub-title">
通用属性 -- data-*
</text>
<button id="dataProp"
data-button="通用属性 -- data-*">
</button>
<button id="dataPropNone"
data-button="">
</button>
<text class="sub-title">
通用属性 -- click-effect
</text>
<button id="clickEffectPropSmall"
click-effect="spring-small">
</button>
<button id="clickEffectPropMedium"
click-effect="spring-medium">
</button>
<button id="clickEffectPropLarge"
click-effect="spring-large">
</button>
<button id="clickEffectPropNone"
click-effect="">
</button>
<text class="sub-title">
通用属性 -- dir
</text>
<button id="dirPropRtl"
dir="rtl">
</button>
<button id="dirPropAuto"
dir="auto">
</button>
<button id="dirPropLtr"
dir="ltr">
</button>
<button id="dirPropNone"
dir="">
</button>
<text class="sub-title">
渲染属性 -- for
</text>
<button id="forPropNull"
for="">
</button>
<button id="forPropOne"
for="{{listOne}}">
</button>
<button id="forPropThree"
for="{{listThree}}">
</button>
<text class="sub-title">
渲染属性 -- if
</text>
<button id="ifPropTrue"
if="true">
</button>
<text class="sub-title">
渲染属性 -- show
</text>
<button id="showPropTrue"
show="true">
</button>
<button id="showPropFalse"
show="false">
</button>
<button id="showPropNone"
show="">
</button>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
button特有属性
</text>
<text class="sub-title">
特有属性 -- type
</text>
<button id="typeArc"
type="arc">
</button>
<button id="typeCapsule"
type="capsule">
</button>
<button id="typeCircle"
type="circle">
</button>
<button id="typeText"
type="text">
</button>
<button id="typeDownload"
type="download">
</button>
<button id="typeNone"
type="">
</button>
<text class="sub-title">
特有属性 -- value
</text>
<button id="value"
value="按钮">
</button>
<button id="valueNone"
value="">
</button>
<text class="sub-title">
特有属性 -- icon
</text>
<button id="icon"
icon="common/images/image.png">
</button>
<button id="iconNone"
icon="">
</button>
<text class="sub-title">
特有属性 -- placement
</text>
<button id="placementStart"
placement="start">
</button>
<button id="placementEnd"
placement="end">
</button>
<button id="placementTop"
placement="top">
</button>
<button id="placementBottom"
placement="bottom">
</button>
<button id="placementNone"
placement="">
</button>
<text class="sub-title">
特有属性 -- waiting
</text>
<button id="waitingTrue"
waiting="true">
</button>
<button id="waitingFalse"
waiting="false">
</button>
<button id="waitingNone"
waiting="">
</button>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/button/prop/index.js 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data:{
listOne:[{}],
listThree:[{},{},{}],
idProp : null,
classProp : null,
classPropNone : null,
styleProp : null,
refProp : null,
refPropNone : null,
disabledPropTrue : null,
disabledPropFalse : null,
disabledPropNone : null,
focusablePropTrue : null,
focusablePropFalse : null,
focusablePropNone : null,
dataProp : null,
dataPropNone : null,
clickEffectPropSmall : null,
clickEffectPropMedium : null,
clickEffectPropLarge : null,
clickEffectPropNone : null,
dirPropRtl : null,
dirPropAuto : null,
dirPropLtr : null,
dirPropNone : null,
forPropNull : null,
forPropOne : null,
forPropThree : null,
ifPropTrue : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : null,
typeArc : null,
typeCapsule : null,
typeCircle : null,
typeText : null,
typeDownload : null,
typeNone : null,
value : null,
valueNone : null,
icon : null,
iconNone : null,
placementStart : null,
placementEnd : null,
placementTop : null,
placementBottom : null,
placementNone : null,
waitingTrue : null,
waitingFalse : null,
waitingNone : null
},
onShow(){
this.getCommonPropValues();
this.getSpecificPropValues();
globalThis.value = {
idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse,
disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue,
focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone,
dataProp : this.dataProp, dataPropNone : this.dataPropNone,
clickEffectPropSmall : this.clickEffectPropSmall,
clickEffectPropMedium : this.clickEffectPropMedium,
clickEffectPropLarge : this.clickEffectPropLarge,
clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl,
dirPropAuto : this.dirPropAuto,
dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull,
forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue,
showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone,
typeArc : this.typeArc, typeCapsule : this.typeCapsule, typeCircle : this.typeCircle,
typeText : this.typeText, typeDownload : this.typeDownload, typeNone : this.typeNone,
value : this.value, valueNone : this.valueNone, icon : this.icon, iconNone : this.iconNone,
placementStart : this.placementStart, placementEnd : this.placementEnd, placementTop : this.placementTop,
placementBottom : this.placementBottom, placementNone : this.placementNone,
waitingTrue : this.waitingTrue, waitingFalse : this.waitingFalse, waitingNone : this.waitingNone
}
},
getCommonPropValues(){
this.idProp = this.$element("idProp").getInspector()
this.classProp = this.$element("classProp").getInspector()
this.classPropNone = this.$element("classPropNone").getInspector()
this.styleProp = this.$element("styleProp").getInspector()
this.refProp = this.$element("refProp").getInspector()
this.refPropNone = this.$element("refPropNone").getInspector()
this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
this.disabledPropNone = this.$element("disabledPropNone").getInspector()
this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
this.focusablePropNone = this.$element("focusablePropNone").getInspector()
this.dataProp = this.$element("dataProp").getInspector()
this.dataPropNone = this.$element("dataPropNone").getInspector()
this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
this.dirPropRtl = this.$element("dirPropRtl").getInspector()
this.dirPropAuto = this.$element("dirPropAuto").getInspector()
this.dirPropLtr = this.$element("dirPropLtr").getInspector()
this.dirPropNone = this.$element("dirPropNone").getInspector()
this.forPropNull = this.$element("forPropNull").getInspector()
this.forPropOne = this.$element("forPropOne").getInspector()
this.forPropThree = this.$element("forPropThree").getInspector()
this.ifPropTrue = this.$element("ifPropTrue").getInspector()
this.showPropTrue = this.$element("showPropTrue").getInspector()
this.showPropFalse = this.$element("showPropFalse").getInspector()
this.showPropNone = this.$element("showPropNone").getInspector()
},
getSpecificPropValues(){
this.typeArc = this.$element("typeArc").getInspector()
this.typeCapsule = this.$element("typeCapsule").getInspector()
this.typeCircle = this.$element("typeCircle").getInspector()
this.typeText = this.$element("typeText").getInspector()
this.typeDownload = this.$element("typeDownload").getInspector()
this.typeNone = this.$element("typeNone").getInspector()
this.value = this.$element("value").getInspector()
this.valueNone = this.$element("valueNone").getInspector()
this.icon = this.$element("icon").getInspector()
this.iconNone = this.$element("iconNone").getInspector()
this.placementStart = this.$element("placementStart").getInspector()
this.placementEnd = this.$element("placementEnd").getInspector()
this.placementTop = this.$element("placementTop").getInspector()
this.placementBottom = this.$element("placementBottom").getInspector()
this.placementNone = this.$element("placementNone").getInspector()
this.waitingTrue = this.$element("waitingTrue").getInspector()
this.waitingFalse = this.$element("waitingFalse").getInspector()
this.waitingNone = this.$element("waitingNone").getInspector()
}
}
ace/ace_standard/src/main/js/default/pages/button/router/index.css 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
button{
width: 60%;
height: 20px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 70%;
}
.contain1{
width: 100%;
height: 15%;
flex-direction: column;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.prop-container{
flex-direction: column;
height: 60%;
padding-left: 2px;
}
.event-container{
flex-direction: column;
height: 20%;
}
.function-container{
flex-direction: column;
height: 20%;
}
.gradient-container{
flex-direction: column;
height: 40%;
}
.access-container{
flex-direction: column;
height: 15%;
}
.atom-container{
flex-direction: column;
height: 45%;
}
.multimode-container{
flex-direction: column;
height: 45%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
height: 25px;
font-size: 15px;
text-align: left;
margin-bottom: 1px;
padding: 2px;
}
.style1{
width: 100%;
mask-color:red;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 20px;
padding-left: 10px;
padding-top: 1px;
padding-right: 15px;
padding-bottom: 1px;
margin-left: 10px;
margin-top: 0px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 70%;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
height: 20px;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/image.png');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.style4{
height: 20px;
width: 60%;
padding: 1px;
margin: 5px;
border: 2px solid #000000;
}
.style5{
width: 50%;
height: 20px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 20px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
height: 20px;
text-color:salmon;
font-size:15px;
allow-scale:false;
font-style:normal;
font-weight:100;
font-family:sans-serif;
icon-width:60px;
icon-height:15px;
radius:10px;
}
.style8 {
height: 20px;
margin-bottom: 5px;
margin-top: 5px;
background-color: sandybrown;
}
.event1{
width: 100%;
height: 20px;
background-color: salmon;
}
.event2{
width: 100%;
height: 20px;
background-color: darkorchid;
}
.event3{
width: 100%;
height: 20px;
background-color: #ad4e2a;
}
.event4{
width: 100%;
height: 20px;
background-color: blanchedalmond;
}
.event5{
width: 100%;
height: 20px;
background-color: blanchedalmond;
}
#prop1 {
background-color: mediumslateblue;
height: 20px;
margin: 2px;
}
.prop2 {
background-color: salmon;
height: 20px;
margin: 2px;
}
.prop4 {
background-color: skyblue;
height: 20px;
margin: 2px;
text-color:skyblue;
font-size:15px;
allow-scale:true;
font-style:italic;
font-weight:200;
font-family:sans-serif;
}
.prop5 {
background-color: gold;
height: 20px;
width: 100%;
margin: 2px;
}
.prop6 {
background-color: gold;
height: 30px;
width: 100%;
margin: 2px;
}
.prop7 {
background-color: gold;
height: 20px;
width: 100%;
margin: 2px;
}
.prop8 {
background-color: gold;
height: 20px;
width: 100%;
margin: 2px;
}
.prop9 {
background-color: gold;
height: 20px;
width: 100%;
margin: 2px;
}
.ani1{
color: #72ac33;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
background-color: #ad4e2a;
width: 100%;
height: 55px;
margin: 5px;
}
.gradient1{
margin: 5px;
height: 20px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
margin: 5px;
height: 20px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
margin: 5px;
height: 20px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
margin: 5px;
height: 20px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access1{
color: #321124;
height: 20px;
margin: 5px;
background-color: chartreuse;
}
.atom1{
background-color: saddlebrown;
width: 40px;
height: 40px;
}
.atom2{
background-color: blueviolet;
width: 40px;
height: 40px;
}
.atom3{
background-color: aquamarine;
width: 40px;
height: 40px;
}
.multimode1{
background-color: firebrick;
height: 20px;
width: 100%;
margin: 5px;
}
.function1{
background-color: #ff0000;
width: 60%;
height: 30px;
}
.function2{
background-color: #00ff00;
width: 60%;
height: 30px;
}
.function3{
background-color: #0000ff;
width: 100%;
height: 30px;
}
.function4 {
flex-direction: row;
width: 60%;
height: 60px;
overflow: scroll;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/button/router/index.hml 0 → 100644
浏览文件 @ ee9149d0
<!--/**
* 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">
button通用样式1
</text>
<button id="style1" class="style1">
</button>
<text class="sub-title">
button通用样式2
</text>
<button id="style2" class="style2">
</button>
<text class="sub-title">
button通用样式3
</text>
<button id="style3" class="style3">
</button>
<text class="sub-title">
button通用样式4
</text>
<button id="style4" class="style4" >
</button>
<text class="sub-title">
button通用样式5
</text>
<div class="contain1">
<button id="style5" class="style5">
</button>
<button id="style6" class="style6">
</button>
</div>
<text class="sub-title">
button特有样式
</text>
<button id="style7" class="style7">
</button>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<!-- 动画 -->
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
button动画样式1
</text>
<button id="ani1" class="ani1" >
</button>
<text class="sub-title">
button动画样式2
</text>
<button id="ani2" class="ani2" >
</button>
</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">
button通用属性1
</text>
<button id="prop1"
class="prop1"
disabled = "true"
focusable ="true"
data-name ="prop1"
click-effect="spring-medium"
dir ="rtl"
placement="end">
</button>
<text class="sub-title">
button通用属性2
</text>
<button id="prop2"
class="prop2"
ref ="prop2"
disabled = "false"
focusable ="false"
data-name ="prop2"
click-effect="spring-large"
dir ="ltr"
placement="start">
</button>
<text class="sub-title">
button通用属性3
</text>
<button id="prop3" style="color: #679855; margin: 5px;width: 100%;height: 40px;"
placement="top">
</button>
<text class="sub-title">
arc按钮
</text>
<button id="prop4" class="prop4"
type="arc" value="1"
icon="common/images/image.png" waiting="false">
</button>
<text class="sub-title">
capsule按钮
</text>
<button id="prop5" class="prop5" type="capsule"
waiting="true" value="下载中" >
</button>
<text class="sub-title">
circle按钮
</text>
<button id="prop6" class="prop6" type="circle"
waiting="true" value="球">
</button>
<text class="sub-title">
text按钮
</text>
<button id="prop7" class="prop7" type="text"
waiting="false" value="嘿嘿嘿">
</button>
<text class="sub-title">
download按钮
</text>
<button id="prop8" class="prop8" type="download"
onclick="setProgress">{{downloadText}}>
</button>
<text class="sub-title">
普通按钮
</text>
<button id="prop9" class="prop9" waiting="true"
placement="bottom" value="嘿嘿嘿">
</button>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用事件 -->
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
button通用事件1
</text>
<button id="event1" class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel" >
</button>
<text class="sub-title">
button通用事件2
</text>
<button id="event2" class="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached" >
</button>
<text class="sub-title">
button通用事件3
</text>
<button id="event3" class="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop" >
</button>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用方法 -->
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
button通用方法1
</text>
<button id="function1" class="function1" ontouchstart="functionTest1" >
</button>
<text class="sub-title">
button通用方法2
</text>
<button id="function2" class="function2" ontouchstart="functionTest2" >
</button>
<text class="sub-title">
button通用方法3
</text>
<button id="function3" class="function3" ontouchstart="functionTest3" >
</button>
</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">
button渐变样式1
</text>
<button id="gradient1" class="gradient1" >
</button>
<text class="sub-title">
button渐变样式2
</text>
<button id="gradient2" class="gradient2" >
</button>
<text class="sub-title">
button渐变样式3
</text>
<button id="gradient3" class="gradient3" >
</button>
<text class="sub-title">
button渐变样式4
</text>
<button id="gradient4" class="gradient4" >
</button>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 无障碍 -->
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
button无障碍1
</text>
<button id="access1" class="access1"
accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"
>
</button>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 原子布局和多模输入 -->
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
button原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<button id="atomA1" >
</button>
<button id="atomA2" >
</button>
<button id="atomA3" >
</button>
</div>
<text class="sub-title">
button原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<button id="atomB1" >
</button>
<button id="atomB2" >
</button>
<button id="atomB3" >
</button>
</div>
<text class="sub-title">
button原子布局3
</text>
<div style="flex-direction: row;height:40px;width: 100%;">
<button id="atomC1" >
</button>
<button id="atomC2" >
</button>
<button id="atomC3" >
</button>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
button多模输入1
</text>
<button id="multiMode1"
class="multimode1"
voicelabel = "voice"
subscriptflag="on"
subscriptlabel="div"
scenelabel="common"
>
</button>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/button/router/index.js 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
var options = {
duration: 1500,
easing: 'friction',
delay: 100,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
translate: '-120px',
rotate:'10deg',
scale:0.2,
skew:'40deg'
},
opacity: 0.1,
offset: 0.0,
width: '40%',
height:'20px',
backgroundColor:'#ff0000',
backgroundPosition:'10px 20px',
transformOrigin:'left top'
},
{
transform: {
translateX: '0px',
translateY: '5px',
rotateX:'10deg',
rotateY:'10deg',
scaleX:0.5,
scaleY:0.7,
skewX:'22deg',
skewY:'30deg'
},
opacity: 0.6,
offset: 2.0,
width: '60%',
height:'30px',
backgroundColor:'#ff00ff',
backgroundPosition:'15px 25px',
transformOrigin:'center top'
},
{
transform: {
translateX: '100px',
translateY: '0px',
translateZ: '20px',
rotateX:'0deg',
rotateY:'0deg',
rotateZ:'30deg',
scaleX:1,
scaleY:1,
scaleZ:2,
skewX:'0',
skewY:'0',
skewZ:'30deg'
},
opacity: 1,
offset: 0.0,
width: '100%',
height:'30px',
backgroundColor:'#ffff00',
backgroundPosition:'0px',
transformOrigin:'center center'
},
];
export default {
data: {
progress: 10,
downloadText: "进度条按钮"
},
setProgress(e) {
var i=0
var set= setInterval(()=>{
i+=10
this.progress=i
this.downloadText = this.progress + "%";
this.$element('download-btn').setProgress({ progress: this.progress });
if(this.progress>=100){
clearInterval(set)
this.downloadText="完成"
}
},1000)
},
onShow(){
// 通用属性
var prop1 = this.$element('prop1');
var name1 = prop1.dataSet.name
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.name
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
},
touchStart(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchstart:\n' + message
});
},
touchMove(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchMove:\n' +message
});
},
touchEnd(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchEnd:\n' +message
});
},
touchCancel(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchCancel:\n' +message
});
},
click(){
prompt.showToast({
message: 'click'
});
},
doubleClick(){
prompt.showToast({
message: 'doubleClick'
});
},
longPress(){
prompt.showToast({
message: 'longPress'
});
},
focus(){
prompt.showToast({
message: 'focus'
});
},
blur(){
prompt.showToast({
message: 'blur'
});
},
key(event){
var code = event.code;
var action = event.action;
var repeatCount = event.repeatCount;
var timestampStart = event.timestampStart;
var message = 'code--' + code + ',action--' + action +
',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
prompt.showToast({
message: 'key:\n' + message
});
},
swipe(event){
var direction = event.direction;
var distance = event.distance;
var message = 'direction--' + direction + ',distance--' + distance;
prompt.showToast({
message: 'swipe:\n' + message
});
},
attached(){
prompt.showToast({
message: 'attached'
});
},
detached(){
prompt.showToast({
message: 'detached'
});
},
pinchStart(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchStart:\n' + message
});
},
pinchUpdate(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchEnd(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchCancel(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchCancel:\n' + message
});
},
dragStart(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragStart:\n' + message
});
},
drag(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drag:\n' + message
});
},
dragEnd(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnd:\n' + message
});
},
dragEnter(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnter:\n' + message
});
},
dragOver(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragOver:\n' + message
});
},
dragLeave(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragLeave:\n' + message
});
},
drop(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drop:\n' + message
});
},
functionTest1(event){
var function1 = this.$element('function1');
function1.focus(true)
var rect = function1.getBoundingClientRect();
var width = rect.width;
var height = rect.height;
var left = rect.left;
var top = rect.top;
var message = 'width--' + width + ',height--' + height +
',left--' + left + ',top--' + top;
prompt.showToast({
message: 'function1 rect:\n' + message
});
},
functionTest2(event){
var function2 = this.$element('function2');
let observer = function2.createIntersectionObserver({
ratios: [0.2, 0], // number
});
observer.observe((isVisible, ratio)=> {
console.info('this element is ' + isVisible + 'ratio is ' + ratio)
prompt.showToast({
message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
});
})
observer.unobserve()
},
functionTest3(event){
var function3 = this.$element('function3');
var animation = function3.animate(frames, options);
animation.play()
animation.onfinish = function(){
prompt.showToast({
message: 'The animation is finished.'
});
};
animation.oncancel = function(){
prompt.showToast({
message: 'The animation is canceled.'
});
};
animation.onrepeat = function(){
prompt.showToast({
message: 'The animation is repeated.'
});
};
setTimeout(() => {
animation.reverse()
}, 500)
setTimeout(() => {
animation.pause()
}, 1000)
setTimeout(() => {
animation.cancel()
}, 1500)
},
functionTest4(event){
var function4 = this.$element('function4');
var scrollOffset = function4.getScrollOffset();
var x = scrollOffset.x;
var y = scrollOffset.y;
var message = 'x--' + x + ',y--' + y;
prompt.showToast({
message: 'functionTest4 scrollOffset:\n' + message
});
var scrollParam = {
dx:60,
dy:0,
smooth:true
}
function4.scrollBy(scrollParam)
},
reachStart(){
prompt.showToast({
message: 'reachStart'
});
},
reachEnd(){
prompt.showToast({
message: 'reachEnd'
});
},
reachTop(){
prompt.showToast({
message: 'reachTop'
});
},
reachBottom(){
prompt.showToast({
message: 'reachBottom'
});
}
}
ace/ace_standard/src/main/js/default/pages/button/style/index.js 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/canvas/index.css 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 70%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 50px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/image.png');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.style4{
width: 60%;
height: 5%;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
flex-direction: column;
flex-wrap:wrap;
justify-content:flex-start;
align-items: flex-end;
align-content:space-around;
display: flex;
height: 40px;
}
.flex-item {
width: 20px;
height: 20px;
border-radius: 16px;
}
.color-primary {
background-color: mediumpurple;
}
.color-warning {
background-color: pink;
}
.color-success {
background-color: cornflowerblue;
}
.grid-child {
width: 100%;
border-radius: 2px;
}
.grid-left-top {
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid plum;
background: linear-gradient(pink, purple);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 0;
grid-row-end: 0;
grid-column-end: 0;
}
.grid-left-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px solid plum;
background: linear-gradient(pink, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 1;
grid-column-start: 0;
grid-row-end: 1;
grid-column-end: 0;
}
.grid-right-top {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px dotted plum;
background: linear-gradient(mediumpurple, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 1;
grid-row-end: 0;
grid-column-end: 1;
}
.grid-right-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px dotted plum;
background: linear-gradient(pink, mediumpurple);
box-shadow: 0px 0px 2px 2px pink;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 1;
grid-column-end: 1;
}
.event-container{
flex-direction: column;
flex-weight: 1;
}
.event1{
width: 60%;
flex-weight: 1;
background-color: yellow;
}
.event2{
width: 70%;
flex-weight: 1;
background-color: red;
}
.event3{
width: 80%;
flex-weight: 1;
background-color: #ad4e2a;
}
.event4{
flex-direction: row;
width: 90%;
flex-weight: 1;
overflow:scroll;
}
.event5{
flex-direction: column;
width: 100%;
height: 90px;
overflow:scroll;
}
.prop-container{
flex-direction: column;
}
#prop1 {
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
height: 30px;
background-color: pink;
width: 100%;
margin: 5px;
}
.prop3 {
height: 30px;
background-color: darkseagreen;
width: 100%;
margin: 5px;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
background-color: #72ac33;
width: 55px;
height: 55px;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
background-color: #ad4e2a;
width: 55px;
height: 55px;
margin: 5px;
}
.gradient-container{
flex-direction: column;
}
.gradient1{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
width: 100%;
height: 20px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
flex-direction: column;
}
.access1{
background-color: #321124;
margin: 5px;
width: 90%;
height: 30px;
}
.atom-container{
flex-direction: column;
}
.multiMode-container{
flex-direction: column;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
.function-container{
flex-direction: column;
}
.function1{
background-color: #ff0000;
width: 60%;
height: 20px;
}
.function2{
background-color: #00ff00;
width: 60%;
height: 20px;
}
.function3{
background-color: #0000ff;
width: 100%;
height: 20px;
}
ace/ace_standard/src/main/js/default/pages/canvas/index.hml 0 → 100644
浏览文件 @ ee9149d0
<!--/**
* 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">
canvas通用样式1
</text>
<canvas class="style1">
</canvas>
<text class="sub-title">
canvas通用样式2
</text>
<canvas class="style2">
</canvas>
<text class="sub-title">
canvas通用样式3
</text>
<canvas class="style3">
</canvas>
<text class="sub-title">
canvas通用样式4
</text>
<canvas class="style4">
</canvas>
<text class="sub-title">
canvas通用样式5
</text>
<div class="contain1">
<canvas class="style5">
</canvas>
<canvas class="style6">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
canvas通用事件1
</text>
<canvas class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</canvas>
<text class="sub-title">
canvas通用事件2
</text>
<canvas class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</canvas>
<text class="sub-title">
canvas通用事件3
</text>
<canvas class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
canvas通用属性1
</text>
<canvas id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1"
dir ="rtl">
</canvas>
<text class="sub-title">
canvas通用属性2
</text>
<canvas class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2"
dir ="ltr">
</canvas>
<text class="sub-title">
canvas通用属性3
</text>
<canvas style="color: #679855; margin: 5px;" class="prop3">
</canvas>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
canvas通用方法1
</text>
<canvas id="function1" ref="function1" class="function1" ontouchstart="functionTest1"></canvas>
<text class="sub-title">
canvas通用方法2
</text>
<canvas id="function2" ref="function2" class="function2" ontouchstart="functionTest2"></canvas>
<text class="sub-title">
canvas通用方法3
</text>
<canvas id="function3" ref="function3" class="function3" ontouchstart="functionTest3"></canvas>
<text class="sub-title">
canvas特有方法4
</text>
<canvas id="function4" ref="function4" style="width: 100%;height: 40px;background-color: #ffff00;" onclick="functionTest4"></canvas>
<text class="sub-title">
canvas特有方法5
</text>
<canvas id="function5" style="width:100%;height:30px;background-color: #ffff00; margin-bottom: 10px;" ref="function5" onclick="functionTest5"></canvas>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
canvas动画样式1
</text>
<canvas class="ani1" >
</canvas>
<text class="sub-title">
canvas动画样式2
</text>
<canvas class="ani2" >
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
canvas渐变样式1
</text>
<canvas class="gradient1">
</canvas>
<text class="sub-title">
canvas渐变样式2
</text>
<canvas class="gradient2">
</canvas>
<text class="sub-title">
canvas渐变样式3
</text>
<canvas class="gradient3">
</canvas>
<text class="sub-title">
canvas渐变样式4
</text>
<canvas class="gradient4">
</canvas>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
canvas无障碍1
</text>
<canvas class="access1" accessibilitygroup ="true"
accessibilitytext="这是canvas"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</canvas>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
canvas原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<canvas style="width:20px;height:20px;background-color: blue;display-index: 1;">
</canvas>
<canvas style="width:30px; height:20px;background-color: black;display-index: 5;">
</canvas>
<canvas style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</canvas>
<canvas style="width:10px; height:20px;background-color: red;display-index: 3;">
</canvas>
<canvas style="width:25px; height:20px;background-color:pink;display-index: 7;">
</canvas>
<canvas style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</canvas>
</div>
<text class="sub-title">
canvas原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<canvas style="height:20px;background-color: blue;flex-weight: 1;">
</canvas>
<canvas style="height:20px;background-color: black;flex-weight: 5;">
</canvas>
<canvas style="height:20px;background-color: yellow;flex-weight: 4;">
</canvas>
<canvas style="height:20px;background-color: red;flex-weight: 3;">
</canvas>
<canvas style="height:20px;background-color:pink;flex-weight: 7;">
</canvas>
<canvas style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</canvas>
</div>
<text class="sub-title">
canvas原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<canvas style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</canvas>
<canvas style="width:30px;background-color: black;aspect-ratio:0.5;">
</canvas>
<canvas style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</canvas>
<canvas style="width:30px;background-color: red;aspect-ratio: 1.3;">
</canvas>
<canvas style="width:30px;background-color:pink;aspect-ratio: 1;">
</canvas>
<canvas style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</canvas>
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
canvas多模输入1
</text>
<canvas class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/canvas/index.js 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
var options = {
duration: 1500,
easing: 'friction',
delay: 100,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
translate: '-120px',
rotate:'10deg',
scale:0.2,
skew:'40deg'
},
opacity: 0.1,
offset: 0.0,
width: '40%',
height:'20px',
backgroundColor:'#ff0000',
backgroundPosition:'10px 20px',
transformOrigin:'left top'
},
{
transform: {
translateX: '0px',
translateY: '5px',
rotateX:'10deg',
rotateY:'10deg',
scaleX:0.5,
scaleY:0.7,
skewX:'22deg',
skewY:'30deg'
},
opacity: 0.6,
offset: 2.0,
width: '60%',
height:'30px',
backgroundColor:'#ff00ff',
backgroundPosition:'15px 25px',
transformOrigin:'center top'
},
{
transform: {
translateX: '100px',
translateY: '0px',
translateZ: '20px',
rotateX:'0deg',
rotateY:'0deg',
rotateZ:'30deg',
scaleX:1,
scaleY:1,
scaleZ:2,
skewX:'0',
skewY:'0',
skewZ:'30deg'
},
opacity: 1,
offset: 0.0,
width: '100%',
height:'30px',
backgroundColor:'#ffff00',
backgroundPosition:'0px',
transformOrigin:'center center'
},
];
export default {
data:{
left:0,
top:0,
},
onShow(){
// 通用属性
var prop1 = this.$element('prop1');
var name1 = prop1.dataSet.name
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.name
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
},
touchStart(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchstart:\n' + message
});
},
touchMove(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchMove:\n' +message
});
},
touchEnd(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchEnd:\n' +message
});
},
touchCancel(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchCancel:\n' +message
});
},
click(){
prompt.showToast({
message: 'click'
});
},
doubleClick(){
prompt.showToast({
message: 'doubleClick'
});
},
longPress(){
prompt.showToast({
message: 'longPress'
});
},
focus(){
prompt.showToast({
message: 'focus'
});
},
blur(){
prompt.showToast({
message: 'blur'
});
},
key(event){
var code = event.code;
var action = event.action;
var repeatCount = event.repeatCount;
var timestampStart = event.timestampStart;
var message = 'code--' + code + ',action--' + action +
',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
prompt.showToast({
message: 'key:\n' + message
});
},
swipe(event){
var direction = event.direction;
var distance = event.distance;
var message = 'direction--' + direction + ',distance--' + distance;
prompt.showToast({
message: 'swipe:\n' + message
});
},
attached(){
prompt.showToast({
message: 'attached'
});
},
detached(){
prompt.showToast({
message: 'detached'
});
},
pinchStart(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchStart:\n' + message
});
},
pinchUpdate(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchEnd(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchCancel(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchCancel:\n' + message
});
},
dragStart(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragStart:\n' + message
});
},
drag(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drag:\n' + message
});
},
dragEnd(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnd:\n' + message
});
},
dragEnter(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnter:\n' + message
});
},
dragOver(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragOver:\n' + message
});
},
dragLeave(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragLeave:\n' + message
});
},
drop(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drop:\n' + message
});
},
functionTest1(event){
var function1 = this.$refs.function1;
function1.focus(true)
var rect = function1.getBoundingClientRect();
var width = rect.width;
var height = rect.height;
var left = rect.left;
var top = rect.top;
var message = 'width--' + width + ',height--' + height +
',left--' + left + ',top--' + top;
prompt.showToast({
message: 'function1 rect:\n' + message
});
},
functionTest2(event){
var function2 = this.$refs.function2;
let observer = function2.createIntersectionObserver({
ratios: [0.2, 0], // number
});
observer.observe((isVisible, ratio)=> {
console.info('this element is ' + isVisible + 'ratio is ' + ratio)
prompt.showToast({
message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
});
})
observer.unobserve()
},
functionTest3(event){
var function3 = this.$refs.function3;
var animation = function3.animate(frames, options);
animation.play()
animation.onfinish = function(){
prompt.showToast({
message: 'The animation is finished.'
});
};
animation.oncancel = function(){
prompt.showToast({
message: 'The animation is canceled.'
});
};
animation.onrepeat = function(){
prompt.showToast({
message: 'The animation is repeated.'
});
};
setTimeout(() => {
animation.reverse()
}, 500)
setTimeout(() => {
animation.pause()
}, 1000)
setTimeout(() => {
animation.cancel()
}, 1500)
},
functionTest4(event){
var function4 = this.$refs.function4;
let ctx = function4.getContext('2d', { antialias: true });
ctx.beginPath();
ctx.arc(50, 15, 15, 0, 6.28);
ctx.stroke();
},
functionTest5(event){
var function5 = this.$refs.function5;
let dataURL = function5.toDataURL({type: 'image/png'}, {quality: 0.92});
prompt.showToast({
message: 'function5 dataURL:' + dataURL
});
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/chart/index.css 已删除 100644 → 0
浏览文件 @ e0b04c64
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.chart-region {
height: 400px;
width: 700px;
}
.chart-background {
object-fit: fill;
}
.chart-data {
width: 700px;
height: 600px;
}
button {
width: 100%;
height: 50px;
background-color: #F4F2F1;
text-color: #0C81F3;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/chart/index.hml 已删除 100644 → 0
浏览文件 @ e0b04c64
<div class="container">
<stack class="chart-region">
<image class="chart-background" src="common/background.png"></image>
<chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</stack>
<button value="Add data" onclick="addData"></button>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/chart/index.js 已删除 100644 → 0
浏览文件 @ e0b04c64
/*
* Copyright (C) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
lineData: [
{
strokeColor: '#0081ff',
fillColor: '#cce5ff',
data: [763, 550, 551, 554, 731, 654, 525, 696,
595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
gradient: true,
}
],
lineOps: {
xAxis: {
min: 0,
max: 20,
display: false,
},
yAxis: {
min: 0,
max: 1000,
display: false,
},
series: {
lineStyle: {
width: "5px",
smooth: true,
},
headPoint: {
shape: "circle",
size: 20,
strokeWidth: 5,
fillColor: '#ffffff',
strokeColor: '#007aff',
display: true,
},
loop: {
margin: 2,
gradient: true,
}
}
},
},
addData() {
this.$refs.linechart.append({
serial: 0,
data: [Math.floor(Math.random() * 400) + 400]
})
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/chart/prop/index.css 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.prop-container{
flex-direction: column;
flex-weight: 1;
}
#idProp {
height: 15px;
margin-bottom: 2px;
background-color:#f00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.classProp {
height: 15px;
margin-bottom: 2px;
background-color:#0f0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#classPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#0000e0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refProp {
height: 15px;
margin-bottom: 2px;
background-color:#00f000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#00000e;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropTrue {
height: 15px;
margin-bottom: 2px;
background-color:#000f00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropFalse {
height: 15px;
margin-bottom: 2px;
background-color:#0000f0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#d00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropTrue {
height: 15px;
margin-bottom: 2px;
background-color:#00000f;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropFalse {
height: 15px;
margin-bottom: 2px;
background-color:#ff0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropNone {
height: 15px;
margin-bottom: 2px;
background-color:#0d0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataProp {
height: 15px;
margin-bottom: 2px;
background-color:#0ff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#00d000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropSmall {
height: 15px;
margin-bottom: 2px;
background-color:#00ff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropMedium {
height: 15px;
margin-bottom: 2px;
background-color:#000ff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropLarge {
height: 15px;
margin-bottom: 2px;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropNone{
height: 15px;
margin-bottom: 2px;
background-color:#000d00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropRtl {
height: 15px;
margin-bottom: 2px;
background-color:#0fff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropAuto {
height: 15px;
margin-bottom: 2px;
background-color:#00fff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropLtr {
height: 15px;
margin-bottom: 2px;
background-color:#000fff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#0000d0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropNull {
height: 15px;
margin-bottom: 2px;
background-color:#ffff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropOne {
height: 15px;
margin-bottom: 2px;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropThree {
height: 15px;
margin-bottom: 2px;
background-color:#000e00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropTrue {
height: 15px;
margin-bottom: 2px;
background-color:#0ffff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropTrue {
height: 15px;
margin-bottom: 2px;
background-color:#e00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropFalse {
height: 15px;
margin-bottom: 2px;
background-color:#0e0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
#typeBar{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
}
#typeLine{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeGauge{
height: 50px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeProgress{
height: 50px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeLoading{
height: 50px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeRainbow{
height: 50px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeNone{
height: 15px;
font-size: 10px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#options{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#optionsNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#datasets{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#datasetsNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#segmentsSeg{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#segmentsRain{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#segmentsNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#effectsTrue{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#effectsFalse{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#effectsNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#animationduration{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#animationdurationNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
ace/ace_standard/src/main/js/default/pages/chart/prop/index.hml 0 → 100644
浏览文件 @ ee9149d0
<!--/**
* 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="prop-container">
<text class="title">
chart通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<chart id="idProp">
</chart>
<text class="sub-title">
通用属性 -- class
</text>
<chart id="classProp"
class="classProp">
</chart>
<chart id="classPropNone"
class="">
</chart>
<text class="sub-title">
通用属性 -- style
</text>
<chart id="styleProp"
style="width:80%;height:20px;background-color:red">
</chart>
<text class="sub-title">
通用属性 -- ref
</text>
<chart id="refProp"
ref="refProp">
</chart>
<chart id="refPropNone"
ref="">
</chart>
<text class="sub-title">
通用属性 -- disabled
</text>
<chart id="disabledPropTrue"
disabled="true">
</chart>
<chart id="disabledPropFalse"
disabled="false">
</chart>
<chart id="disabledPropNone"
disabled="">
</chart>
<text class="sub-title">
通用属性 -- focusable
</text>
<chart id="focusablePropTrue"
focusable="true">
</chart>
<chart id="focusablePropFalse"
focusable="false">
</chart>
<chart id="focusablePropNone"
focusable="">
</chart>
<text class="sub-title">
通用属性 -- data-*
</text>
<chart id="dataProp"
data-chart="通用属性 -- data-chart">
</chart>
<chart id="dataPropNone"
data-chart="">
</chart>
<text class="sub-title">
通用属性 -- click-effect
</text>
<chart id="clickEffectPropSmall"
click-effect="spring-small">
</chart>
<chart id="clickEffectPropMedium"
click-effect="spring-medium">
</chart>
<chart id="clickEffectPropLarge"
click-effect="spring-large">
</chart>
<chart id="clickEffectPropNone"
click-effect="">
</chart>
<text class="sub-title">
通用属性 -- dir
</text>
<chart id="dirPropRtl"
dir="rtl">
</chart>
<chart id="dirPropAuto"
dir="auto">
</chart>
<chart id="dirPropLtr"
dir="ltr">
</chart>
<chart id="dirPropNone"
dir="">
</chart>
<text class="sub-title">
渲染属性 -- for
</text>
<chart id="forPropNull"
for="">
</chart>
<chart id="forPropOne"
for="{{listOne}}">
</chart>
<chart id="forPropThree"
for="{{listThree}}">
</chart>
<text class="sub-title">
渲染属性 -- if
</text>
<chart id="ifPropTrue"
if="true">
</chart>
<text class="sub-title">
渲染属性 -- show
</text>
<chart id="showPropTrue"
show="true">
</chart>
<chart id="showPropFalse"
show="false">
</chart>
<chart id="showPropNone"
show="">
</chart>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
chart特有属性
</text>
<text class="sub-title">
特有属性 -- type
</text>
<chart id="typeBar"
type="bar">
</chart>
<chart id="typeLine"
type="line">
</chart>
<chart id="typeGauge"
type="gauge">
</chart>
<chart id="typeProgress"
type="progress">
</chart>
<chart id="typeLoading"
type="loading">
</chart>
<chart id="typeRainbow"
type="rainbow">
</chart>
<chart id="typeNone"
type="">
</chart>
<text class="sub-title">
特有属性 -- options
</text>
<chart id="options"
options="{{lineOps}}">
</chart>
<chart id="optionsNone"
options="">
</chart>
<text class="sub-title">
特有属性 -- datasets
</text>
<chart id="datasets"
datasets="{{lineData}}">
</chart>
<chart id="datasetsNone"
datasets="">
</chart>
<text class="sub-title">
特有属性 -- segments
</text>
<chart id="segmentsSeg"
segments="{{lineSeg}}">
</chart>
<chart id="segmentsRain"
segments="{{lineRain}}">
</chart>
<chart id="segmentsNone"
segments="">
</chart>
<text class="sub-title">
特有属性 -- waiting
</text>
<chart id="effectsTrue"
effects="true">
</chart>
<chart id="effectsFalse"
effects="false">
</chart>
<chart id="effectsNone"
effects="">
</chart>
<text class="sub-title">
特有属性 -- animationduration
</text>
<chart id="animationduration"
animationduration="3000">
</chart>
<chart id="animationdurationNone"
animationduration="">
</chart>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/chart/prop/index.js 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data:{
lineData: [
{
strokeColor: '#0081ff',
fillColor: '#cce5ff',
data: [763, 550, 551, 554, 731, 654, 525, 696,
595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
gradient: true,
}
],
lineOps: {
xAxis: {
min: 0,
max: 20,
display: false,
},
yAxis: {
min: 0,
max: 1000,
display: false,
},
series: {
lineStyle: {
width: "5px",
smooth: true,
},
headPoint: {
shape: "circle",
size: 20,
strokeWidth: 5,
fillColor: '#ffffff',
strokeColor: '#007aff',
display: true,
},
loop: {
margin: 2,
gradient: true,
}
}
},
lineSeg:{
startColor:'#f7ce00',
endColor:'#d9542b',
value:50,
name:'蔬菜'
},
lineRain:[
{
startColor:'#f7ce00',
endColor:'#d9542b',
value:50,
name:'蔬菜'
},
{
startColor:'#f7ce00',
endColor:'#d9542b',
value:50,
name:'水果'
}
],
listOne:[{}],
listThree:[{},{},{}],
idProp : null,
classProp : null,
classPropNone : null,
styleProp : null,
refProp : null,
refPropNone : null,
disabledPropTrue : null,
disabledPropFalse : null,
disabledPropNone : null,
focusablePropTrue : null,
focusablePropFalse : null,
focusablePropNone : null,
dataProp : null,
dataPropNone : null,
clickEffectPropSmall : null,
clickEffectPropMedium : null,
clickEffectPropLarge : null,
clickEffectPropNone : null,
dirPropRtl : null,
dirPropAuto : null,
dirPropLtr : null,
dirPropNone : null,
forPropNull : null,
forPropOne : null,
forPropThree : null,
ifPropTrue : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : null,
typeBar : null,
typeLine : null,
typeGauge : null,
typeProgress : null,
typeLoading : null,
typeRainbow : null,
typeNone : null,
options : null,
optionsNone : null,
datasets : null,
datasetsNone : null,
segmentsSeg : null,
segmentsRain : null,
segmentsNone : null,
effectsTrue : null,
effectsFalse : null,
effectsNone : null,
animationduration : null,
animationdurationNone : null,
},
onShow(){
this.getCommonPropValues();
this.getSpecificPropValues();
globalThis.value = {
idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse,
disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue,
focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone,
dataProp : this.dataProp, dataPropNone : this.dataPropNone,
clickEffectPropSmall : this.clickEffectPropSmall,
clickEffectPropMedium : this.clickEffectPropMedium,
clickEffectPropLarge : this.clickEffectPropLarge,
clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl,
dirPropAuto : this.dirPropAuto,
dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull,
forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue,
showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone,
typeBar : this.typeBar, typeLine : this.typeLine, typeGauge : this.typeGauge,
typeProgress : this.typeProgress, typeLoading : this.typeLoading, typeRainbow : this.typeRainbow,
typeNone : this.typeNone, options : this.options,
optionsNone : this.optionsNone, datasets : this.datasets, datasetsNone : this.datasetsNone,
segmentsSeg : this.segmentsSeg, segmentsRain : this.segmentsRain, segmentsNone : this.segmentsNone,
effectsTrue : this.effectsTrue, effectsFalse : this.effectsFalse, effectsNone : this.effectsNone,
animationduration : this.animationduration, animationdurationNone : this.animationdurationNone
}
},
getCommonPropValues(){
this.idProp = this.$element("idProp").getInspector()
this.classProp = this.$element("classProp").getInspector()
this.classPropNone = this.$element("classPropNone").getInspector()
this.styleProp = this.$element("styleProp").getInspector()
this.refProp = this.$element("refProp").getInspector()
this.refPropNone = this.$element("refPropNone").getInspector()
this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
this.disabledPropNone = this.$element("disabledPropNone").getInspector()
this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
this.focusablePropNone = this.$element("focusablePropNone").getInspector()
this.dataProp = this.$element("dataProp").getInspector()
this.dataPropNone = this.$element("dataPropNone").getInspector()
this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
this.dirPropRtl = this.$element("dirPropRtl").getInspector()
this.dirPropAuto = this.$element("dirPropAuto").getInspector()
this.dirPropLtr = this.$element("dirPropLtr").getInspector()
this.dirPropNone = this.$element("dirPropNone").getInspector()
this.forPropNull = this.$element("forPropNull").getInspector()
this.forPropOne = this.$element("forPropOne").getInspector()
this.forPropThree = this.$element("forPropThree").getInspector()
this.ifPropTrue = this.$element("ifPropTrue").getInspector()
this.showPropTrue = this.$element("showPropTrue").getInspector()
this.showPropFalse = this.$element("showPropFalse").getInspector()
this.showPropNone = this.$element("showPropNone").getInspector()
},
getSpecificPropValues(){
this.typeBar = this.$element("typeBar").getInspector()
this.typeLine = this.$element("typeLine").getInspector()
this.typeGauge = this.$element("typeGauge").getInspector()
this.typeProgress = this.$element("typeProgress").getInspector()
this.typeLoading = this.$element("typeLoading").getInspector()
this.typeRainbow = this.$element("typeRainbow").getInspector()
this.typeNone = this.$element("typeNone").getInspector()
this.options = this.$element("options").getInspector()
this.optionsNone = this.$element("optionsNone").getInspector()
this.datasets = this.$element("datasets").getInspector()
this.datasetsNone = this.$element("datasetsNone").getInspector()
this.segmentsSeg = this.$element("segmentsSeg").getInspector()
this.segmentsRain = this.$element("segmentsRain").getInspector()
this.segmentsNone = this.$element("segmentsNone").getInspector()
this.effectsTrue = this.$element("effectsTrue").getInspector()
this.effectsFalse = this.$element("effectsFalse").getInspector()
this.effectsNone = this.$element("effectsNone").getInspector()
this.animationduration = this.$element("animationduration").getInspector()
this.animationdurationNone = this.$element("animationdurationNone").getInspector()
}
}
ace/ace_standard/src/main/js/default/pages/chart/style/index.js 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/circle/index.js 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
title: ""
},
onShow(){
// 通用属性
var prop1 = this.$element("prop1");
var name1 = prop1.dataSet.a
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.a
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/divider/index.js → ace/ace_standard/src/main/js/default/pages/div/style/index.js
浏览文件 @ ee9149d0
......@@ -13,20 +13,7 @@
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data: {
title: 'World'
},
onShow(){
// 通用属性
var prop1 = this.$element("prop1");
var name1 = prop1.dataSet.name
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.name
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
}
}
\ No newline at end of file
}
ace/ace_standard/src/main/js/default/pages/image/style/index.js 0 → 100644
浏览文件 @ ee9149d0
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/svg/index.js 0 → 100644
浏览文件 @ ee9149d0
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或