Skip to content

X
Xts Acts

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

通知 9
Star 22
Fork 0
X
Xts Acts
提交 4b3eede7 编写于 作者: B bayanxing
浏览文件
操作

add tabs testcase 

Signed-off-by: Nbayanxing <bayanxing@kaihongdigi.com>
上级 d5c02fda
展开全部 隐藏空白更改
内联 并排
Showing with 11633 addition and 485 deletion
ace/ace_standard/src/main/config.json
浏览文件 @ 4b3eede7
......@@ -69,11 +69,15 @@
"pages/span/router/index",
"pages/switch/router/index",
"pages/toggle/index",
"pages/option/index",
"pages/picker/index",
"pages/pickerView/index",
"pages/option/router/index",
"pages/option/prop/index",
"pages/picker/router/index",
"pages/picker/prop/index",
"pages/pickerView/router/index",
"pages/pickerView/prop/index",
"pages/piece/index",
"pages/progress/index",
"pages/progress/router/index",
"pages/progress/prop/index",
"pages/qrcode/index",
"pages/select/index",
"pages/div/router/index",
......
ace/ace_standard/src/main/js/default/pages/divider/router/index.js
浏览文件 @ 4b3eede7
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
......
ace/ace_standard/src/main/js/default/pages/option/index.css 已删除 100644 → 0
浏览文件 @ d5c02fda
.container {
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.title-text {
margin: 20px;
}
.menu-option1 {
color:red;
font-size:40px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 100px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: line-through;
}
.menu-option2 {
color:pink;
font-size:30px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: underline;
}
.menu-option3 {
color:cadetblue;
font-size:20px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: none;
}
.select-option1 {
color:red;
font-size:40px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: line-through;
}
.select-option2 {
color:yellow;
font-size:40px;
allow-scale:true;
letter-spacing:5px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
font-style:normal;
font-weight:200;
font-family:sans-serif;
text-decoration: underline;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/option/index.hml 已删除 100644 → 0
浏览文件 @ d5c02fda
<div class="container">
<text onclick="onTextClick" class="title-text">Click show popup menu1.</text>
<menu id="apiMenu" onselected="onMenuSelected" show="true">
<option class="menu-option1" icon="common/images/icon.png" value="menu option 1">Item 1</option>
<option class="menu-option2" icon="common/images/icon.png" value="menu option 2">Item 2</option>
<option class="menu-option3" icon="common/images/icon.png" value="menu option 3">Item 3</option>
</menu>
<text class="title-text">Select Option</text>
<select @change="changeFruit" style="background-color: pink; margin-left: 20px; height: 50px; width: 200px;">
<option class="select-option1" value="bananaValue" icon="common/images/icon.png">
Banana
</option>
<option value="appleValue" class="select-option2" selected="true" icon="common/images/icon.png">
Apple
</option>
<option show="true" class="select-option3" value="pearValue" icon="common/images/icon.png">
Pear
</option>
</select>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/option/index.js 已删除 100644 → 0
浏览文件 @ d5c02fda
/**
* 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: {
testArray:['item1', 'item2', 'item3']
},
onMenuSelected(e) {
prompt.showToast({
message: e.value
})
},
onTextClick() {
this.$element("apiMenu").show({x:280,y:120});
},
changeFruit(e) {
prompt.showToast({
message: e.newValue
})
}
}
ace/ace_standard/src/main/js/default/pages/option/prop/index.css 0 → 100644
浏览文件 @ 4b3eede7
/**
* 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%;
}
divider {
color: #0d0000;
}
.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;
}
#ifPropFalse {
flex-weight: 1;
background-color:#00ffff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropNone {
flex-weight: 1;
background-color:#00000d;
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;
}
#selectedTrue {
color: #0d0000;
background-color: skyblue;
height: 40px;
margin: 2px;
}
#selectedFalse {
background-color: skyblue;
height: 40px;
margin: 2px;
}
#optionValue {
background-color: skyblue;
height: 40px;
margin: 2px;
}
ace/ace_standard/src/main/js/default/pages/option/prop/index.hml 0 → 100644
浏览文件 @ 4b3eede7
<!--/**
* 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">
option通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<option value="选项1" id="idProp">
</option>
<text class="sub-title">
通用属性 -- class
</text>
<option value="选项1" id="classProp"
class="classProp">
</option>
<option value="选项1" id="classPropNone"
class="">
</option>
<text class="sub-title">
通用属性 -- style
</text>
<option value="选项1" id="styleProp"
style="width:10%;height:20px;background-color:red">
</option>
<text class="sub-title">
通用属性 -- ref
</text>
<option value="选项1" id="refProp"
ref="refProp">
</option>
<option value="选项1" id="refPropNone"
ref="">
</option>
<text class="sub-title">
通用属性 -- disabled
</text>
<option value="选项1" id="disabledPropTrue"
disabled="true">
</option>
<option value="选项1" id="disabledPropFalse"
disabled="false">
</option>
<option value="选项1" id="disabledPropNone"
disabled="">
</option>
<text class="sub-title">
通用属性 -- focusable
</text>
<option value="选项1" id="focusablePropTrue"
focusable="true">
</option>
<option value="选项1" id="focusablePropFalse"
focusable="false">
</option>
<option value="选项1" id="focusablePropNone"
focusable="">
</option>
<text class="sub-title">
通用属性 -- data-*
</text>
<option value="选项1" id="dataProp"
data-option="通用属性 -- data-*">
</option>
<option value="选项1" id="dataPropNone"
data-option="">
</option>
<text class="sub-title">
通用属性 -- click-effect
</text>
<option value="选项1" id="clickEffectPropSmall"
click-effect="spring-small">
</option>
<option value="选项1" id="clickEffectPropMedium"
click-effect="spring-medium">
</option>
<option value="选项1" id="clickEffectPropLarge"
click-effect="spring-large">
</option>
<option value="选项1" id="clickEffectPropNone"
click-effect="">
</option>
<text class="sub-title">
通用属性 -- dir
</text>
<option value="选项1" id="dirPropRtl"
dir="rtl">
</option>
<option value="选项1" id="dirPropAuto"
dir="auto">
</option>
<option value="选项1" id="dirPropLtr"
dir="ltr">
</option>
<option value="选项1" id="dirPropNone"
dir="">
</option>
<text class="sub-title">
渲染属性 -- for
</text>
<option value="选项1" id="forPropNull"
for="">
</option>
<option value="选项1" id="forPropOne"
for="{{listOne}}">
</option>
<option value="选项1" id="forPropThree"
for="{{listThree}}">
</option>
<text class="sub-title">
渲染属性 -- if
</text>
<option value="选项1" id="ifPropTrue"
if="true">
</option>
<text class="sub-title">
渲染属性 -- show
</text>
<option value="选项1" id="showPropTrue"
show="true">
</option>
<option value="选项1" id="showPropFalse"
show="false">
</option>
<option value="选项1" id="showPropNone"
show="none">
</option>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
option特有属性
</text>
<text class="sub-title">
option特有属性 -- selected
</text>
<select>
<option value="选项1" value="选项1" id="selectedTrue" selected="true">optionVal1</option>
<option value="选项1" value="选项2" id="selectedFalse" selected="false">optionVal2</option>
</select>
<text class="sub-title">
option特有属性 -- value
</text>
<option value="optionValue" id="optionValue">optionVal</option>
<text class="sub-title">
option特有属性 -- icon
</text>
<option value="optionIcon" icon="common/images/icon.png" id="optionIcon">optionVal</option>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/option/prop/index.js 0 → 100644
浏览文件 @ 4b3eede7
/**
* 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,
selectedTrue: null,
selectedFalse: null,
optionValue: null,
optionIcon: false
},
onCreate(){
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,
selectedTrue: this.selectedTrue,
selectedFalse: this.selectedFalse,
optionValue: this.optionValue,
optionIcon: this.optionIcon
}
},
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.selectedTrue = this.$element("selectedTrue").getInspector()
this.selectedFalse = this.$element("selectedFalse").getInspector()
this.optionValue = this.$element("optionValue").getInspector()
this.optionIcon = this.$element("optionIcon").getInspector()
}
}
ace/ace_standard/src/main/js/default/pages/option/router/index.css 0 → 100644
浏览文件 @ 4b3eede7
/**
* 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%;
}
.contain1{
width: 100%;
height: 15%;
flex-direction: column;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.prop-container{
flex-direction: column;
height: 45%;
padding-left: 2px;
}
.event-container{
flex-direction: column;
height: 40%;
}
.function-container{
flex-direction: column;
height: 25%;
}
.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: 50px;
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: 12%;
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: 1px;
margin: 5px;
border: 2px solid #000000;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
color: red;
font-size: 20px;
allow-scale: true;
font-weight: 700;
text-decoration: underline;
font-family: HYQiHei-65S;
}
.event1{
width: 100%;
height: 40px;
background-color: salmon;
}
.event2{
width: 100%;
height: 40px;
background-color: darkorchid;
}
.event3{
width: 100%;
height: 40px;
background-color: #ad4e2a;
}
.event4{
width: 100%;
height: 40px;
background-color: blanchedalmond;
}
.event5{
width: 100%;
height: 40px;
background-color: blanchedalmond;
}
#prop1 {
background-color: mediumslateblue;
height: 40px;
margin: 2px;
}
.prop2 {
background-color: salmon;
height: 40px;
margin: 2px;
}
.prop4 {
background-color: skyblue;
height: 40px;
margin: 2px;
}
.prop5 {
background-color: gold;
height: 40px;
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: 40px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
margin: 5px;
height: 40px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
margin: 5px;
height: 40px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
margin: 5px;
height: 40px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access1{
color: #321124;
height: 40px;
margin: 5px;
}
.multimode1{
background-color: firebrick;
height: 40px;
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/option/router/index.hml 0 → 100644
浏览文件 @ 4b3eede7
<!--/**
* 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">
option通用样式1
</text>
<option value="optionValue" id="style1" class="style1">
optionValue
</option>
<text class="sub-title">
option通用样式2
</text>
<select>
<option value="val1" id="style2" class="style2" selected="true">
val1
</option>
<option value="val2" id="style2" class="style2">
val2
</option>
</select>
<text class="sub-title">
option通用样式3
</text>
<option value="optionValue" id="style3" class="style3">
</option>
<text class="sub-title">
option通用样式4
</text>
<option value="optionValue" id="style4" class="style4">
</option>
<text class="sub-title">
option通用样式5
</text>
<div class="contain1">
<option value="optionValue" id="style5" class="style5">
</option>
<option value="optionValue" id="style6" class="style6">
</option>
</div>
<text class="sub-title">
option特有样式
</text>
<option value="optionValue" id="style7" class="style7">
option
</option>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<!-- 动画 -->
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
option动画样式1
</text>
<option value="optionValue" id="ani1" class="ani1">
optionValue
</option>
<text class="sub-title">
option动画样式2
</text>
<option value="optionValue" id="ani2" class="ani2">
optionValue
</option>
</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">
option通用属性1
</text>
<option value="optionValue" id="prop1"
class="prop1"
disabled = "true"
focusable ="true"
data-name ="prop1"
click-effect="spring-medium"
dir ="rtl">
</option>
<text class="sub-title">
option通用属性2
</text>
<option value="optionValue" class="prop2"
ref ="prop2"
disabled = "false"
focusable ="false"
data-name ="prop2"
click-effect="spring-large"
dir ="ltr">
</option>
<text class="sub-title">
option通用属性3
</text>
<option value="optionValue" id="prop3" style="color: #679855; margin: 5px;width: 100%;height: 40px;" class="prop3" >
</option>
<text class="sub-title">
option特有属性4
</text>
<option value="optionValue" icon="common/images/icon.png" selected="false" id="prop4" class="prop4">
未选中
</option>
<text class="sub-title">
option特有属性5
</text>
<option value="optionValue" selected="true" id="prop4" class="prop4">
选中
</option>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</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">
option渐变样式1
</text>
<option value="optionValue" id="gradient1" class="gradient1">
</option>
<text class="sub-title">
option渐变样式2
</text>
<option value="optionValue" id="gradient2" class="gradient2">
</option>
<text class="sub-title">
option渐变样式3
</text>
<option value="optionValue" id="gradient3" class="gradient3">
</option>
<text class="sub-title">
option渐变样式4
</text>
<option value="optionValue" id="gradient4" class="gradient4">
</option>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 无障碍 -->
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
option无障碍1
</text>
<option value="optionValue" id="access1" class="access1"
accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"
>
</option>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 原子布局和多模输入 -->
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
option原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<option value="optionValue" id="atomA1">
</option>
<option value="optionValue" id="atomA2">
</option>
<option value="optionValue" id="atomA3">
</option>
</div>
<text class="sub-title">
option原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<option value="optionValue" id="atomB1">
</option>
<option value="optionValue" id="atomB2">
</option>
<option value="optionValue" id="atomB3">
</option>
</div>
<text class="sub-title">
option原子布局3
</text>
<div style="flex-direction: row;height:40px;width: 100%;">
<option value="optionValue" id="atomC1">
</option>
<option value="optionValue" id="atomC2">
</option>
<option value="optionValue" id="atomC3">
</option>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
option多模输入1
</text>
<option value="optionValue" id="multiMode1"
class="multiMode1"
voicelabel = "voice"
subscriptflag="on"
subscriptlabel="div"
scenelabel="common">
option
</option>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/option/router/index.js 0 → 100644
浏览文件 @ 4b3eede7
/**
* 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 {
onMenuSelected(e) {
prompt.showToast({
message: e.value
})
},
onTextClick1() {
this.$element('apiMenu1').show({x:120,y:10});
},
onTextClick2() {
this.$element('apiMenu2').show({x:120,y:80});
},
onTextClick3() {
this.$element('apiMenu3').show({x:120,y:150});
},
onTextClick4() {
this.$element('apiMenu4').show({x:120,y:220});
},
onTextClick5() {
this.$element('apiMenu5').show({x:120,y:290});
},
onTextClick6() {
this.$element('apiMenu6').show({x:120,y:360});
},
onTextClick7() {
this.$element('apiMenu7').show({x:120,y:650});
},
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/picker/index.css 已删除 100644 → 0
浏览文件 @ d5c02fda
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
picker{
width:60%;
height:80px;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 100px;
margin: 10px;
padding: 20px;
border-radius:20px;
text-color:white;
font-size:15px;
margin-left:20%;
background-color: pink;
}
select{
background-color: #efecec;
height: 50px;
width: 60%;
margin-left: 20%;
margin-top: 30px;
margin-bottom: 50px;
font-size: 22px;
}
#picker0{
text-color: plum;
font-size: 30px;
allow-scale: true;
letter-spacing: 2px;
text-decoration: underline;
font-style: normal;
font-family: sans-serif;
line-height: 30px;
column-height: 300px;
background-color:#4747e3;
border: 3px dotted brown;
}
#picker1{
text-color: pink;
font-size: 30px;
allow-scale: true;
letter-spacing: 5px;
text-decoration: line-through;
font-style: normal;
font-family: sans-serif;
line-height: 30px;
column-height: 300px;
border: 3px solid brown;
background-color:deepskyblue;
}
#picker2{
text-color: gray;
font-size: 20px;
allow-scale: true;
letter-spacing: 10px;
text-decoration: underline;
font-style: normal;
font-family: sans-serif;
line-height: 30px;
column-height: 300px;
background-color: orange;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/picker/index.hml 已删除 100644 → 0
浏览文件 @ d5c02fda
<!-- xxx.hml -->
<div class="container">
<select @change="selectChange">
<option value="{{ item }}" for="item in selectList">
{{ item }}
</option>
</select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textOnCancel" class="pickertext"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
onchange="dateOnchange" oncancel="dateOnCancel" class="pickerdate" show="true"></picker>
<picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12"
onchange="timeOnchange" oncancel="timeOnCancel" class="pickertime" show="true"></picker>
<picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true"
onchange="datetimeOnchange" oncancel="datetimeOnCancel" class="pickerdatetime" show="true"></picker>
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}"
onchange="multiTextOnchange" oncancel="multiTextOnCancel" class="pickermuitl" show="true"></picker>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/picker/index.js 已删除 100644 → 0
浏览文件 @ d5c02fda
/**
* 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: {
selectList:["text","data","time","datetime","multitext"],
rangetext:['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'default textvalue',
datevalue:'default datevalue',
timevalue:'default timevalue',
datetimevalue:'default datetimevalue',
multitextvalue:'default multitextvalue',
containsecond:true,
multitextselect:[1,2,0],
datetimeselect:'2012-5-6-11-25',
timeselect:'11:22:30',
dateselect:'2021-3-2',
textselect:'2'
},
selectChange(e){
for(let i = 0;i<this.selectList.length;i++){
if(e.newValue == this.selectList[i]){
this.$element("picker"+i).show();
}
}
},
textonchange(e) {
this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected })
},
textOnCancel(e) {
prompt.showToast({ message:"text: textOnCancel" })
},
dateOnchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day })
},
dateOnCancel() {
prompt.showToast({ message:"date: dateOnCancel" })
},
timeOnchange(e) {
if(this.containsecond){
this.timevalue=e.hour+":"+e.minute+":"+e.second;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second })
} else {
this.timevalue=e.hour+":"+e.minute;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute })
}},
timeOnCancel() {
prompt.showToast({ message:"timeOnCancel" })
},
datetimeOnchange(e) {
this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute;
prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute })
},
datetimeOnCancel() {
prompt.showToast({ message:"datetimeOnCancel" })
},
multiTextOnchange(e) {
this.multitextvalue=e.newValue;
prompt.showToast({ message:"Multi-column text change" + e.newValue })
},
multiTextOnCancel() {
prompt.showToast({ message:"multiTextOnCancel" })
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/picker/prop/index.css 0 → 100644
浏览文件 @ 4b3eede7
/**
* 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%;
}
picker {
font-size: 12px;
}
.title{
width: 100%;
font-size: 16px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 12px;
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:#00ff00;
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:#000eff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropTrue {
flex-weight: 1;
background-color:#00ff0f;
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:#00ff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropFalse {
flex-weight: 1;
background-color:#0000f0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropNone {
flex-weight: 1;
background-color:#d00000;
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:#0000f0;
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:#fff000;
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;
}
#ifPropFalse {
flex-weight: 1;
background-color:#00ffff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropNone {
flex-weight: 1;
background-color:#00000d;
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;
}
#verticalTrue {
height: 10px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#verticalFalse {
height: 10px;
background-color:#e00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#pickerText {
width: 100%;
height: 20px;
background-color: #c00000;
}
#pickerDate {
width: 100%;
height: 20px;
background-color: #00ffff;
}
#pickerTime {
width: 100%;
height: 20px;
background-color: #00ff00;
}
#pickerDatetime {
width: 100%;
height: 20px;
background-color: #0000f0;
}
#pickerMultiText {
width: 100%;
height: 20px;
background-color: red;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/picker/prop/index.hml 0 → 100644
浏览文件 @ 4b3eede7
<!--/**
* 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">
picker通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<picker type="text" id="idProp">
picker</picker>
<text class="sub-title">
通用属性 -- class
</text>
<picker type="text" id="classProp"
class="classProp">
picker</picker>
<picker type="text" id="classPropNone"
class="">
picker</picker>
<text class="sub-title">
通用属性 -- style
</text>
<picker type="text" id="styleProp"
style="width:10%;height:20px;background-color:red">
picker</picker>
<text class="sub-title">
通用属性 -- ref
</text>
<picker type="text" id="refProp"
ref="refProp">
picker</picker>
<picker type="text" id="refPropNone"
ref="">
picker</picker>
<text class="sub-title">
通用属性 -- disabled
</text>
<picker type="text" id="disabledPropTrue"
disabled="true">
picker</picker>
<picker type="text" id="disabledPropFalse"
disabled="false">
picker</picker>
<picker type="text" id="disabledPropNone"
disabled="">
picker</picker>
<text class="sub-title">
通用属性 -- focusable
</text>
<picker type="text" id="focusablePropTrue"
focusable="true">
picker</picker>
<picker type="text" id="focusablePropFalse"
focusable="false">
picker</picker>
<picker type="text" id="focusablePropNone"
focusable="">
picker</picker>
<text class="sub-title">
通用属性 -- data-*
</text>
<picker type="text" id="dataProp"
data-picker="通用属性 -- data-*">
picker</picker>
<picker type="text" id="dataPropNone"
data-picker="">
picker</picker>
<text class="sub-title">
通用属性 -- click-effect
</text>
<picker type="text" id="clickEffectPropSmall"
click-effect="spring-small">
picker</picker>
<picker type="text" id="clickEffectPropMedium"
click-effect="spring-medium">
picker</picker>
<picker type="text" id="clickEffectPropLarge"
click-effect="spring-large">
picker</picker>
<picker type="text" id="clickEffectPropNone"
click-effect="">
picker</picker>
<text class="sub-title">
通用属性 -- dir
</text>
<picker type="text" id="dirPropRtl"
dir="rtl">
picker</picker>
<picker type="text" id="dirPropAuto"
dir="auto">
picker</picker>
<picker type="text" id="dirPropLtr"
dir="ltr">
picker</picker>
<picker type="text" id="dirPropNone"
dir="">
picker</picker>
<text class="sub-title">
渲染属性 -- for
</text>
<picker type="text" id="forPropNull"
for="">
picker</picker>
<picker type="text" id="forPropOne"
for="{{listOne}}">
picker</picker>
<picker type="text" id="forPropThree"
for="{{listThree}}">
picker</picker>
<text class="sub-title">
渲染属性 -- if
</text>
<picker type="text" id="ifPropTrue"
if="true">
picker</picker>
<text class="sub-title">
渲染属性 -- show
</text>
<picker type="text" id="showPropTrue"
show="true">
picker</picker>
<picker type="text" id="showPropFalse"
show="false">
picker</picker>
<picker type="text" id="showPropNone"
show="none">
picker</picker>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
picker特有属性
</text>
<text class="sub-title">
picker特有属性 -- type
</text>
<picker
id="pickerText"
type="text"
value="{{textvalue}}"
selected="0"
range="{{rangetext}}"
onchange="textonchange"
></picker>
<picker
id="pickerDate"
type="date"
value="{{datevalue}}"
start="2002-2-5"
end="2030-6-5"
selected="{{dateselect}}"
lunarswitch="true"
></picker>
<picker
id="pickerTime"
type="time"
value="{{timevalue}}"
containsecond="{{containsecond}}"
selected="{{timeselect}}"
hours="12"
></picker>
<picker
id="pickerDatetime"
type="datetime"
value="{{datetimevalue}}"
selected="{{datetimeselect}}"
hours="24"
lunarswitch="true"
></picker>
<picker
id="pickerMultiText"
type="multi-text"
value="{{multitextvalue}}"
columns="3"
range="{{multitext}}"
selected="{{multitextselect}}"
></picker>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/picker/prop/index.js 0 → 100644
浏览文件 @ 4b3eede7
/**
* 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,
verticalTrue: null,
verticalFalse: null,
rangetext:['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'textvalue',
datevalue:'datevalue',
timevalue:'timevalue',
datetimevalue:'datetimevalue',
multitextvalue:'multitextvalue',
containsecond:true,
multitextselect:[1,2,0],
datetimeselect:'2012-5-6-11-25',
timeselect:'11:22:30',
dateselect:'2021-3-2',
textselect:'2',
pickerText: null,
pickerDate: null,
pickerTime: null,
pickerDatetime: null,
pickerMultiText: null
},
onCreate(){
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,
pickerText: this.pickerText,
pickerDate: this.pickerDate,
pickerTime: this.pickerTime,
pickerDatetime: this.pickerDatetime,
pickerMultiText: this.pickerMultiText
}
},
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.pickerText = this.$element("pickerText").getInspector()
this.pickerDate = this.$element("pickerDate").getInspector()
this.pickerTime = this.$element("pickerTime").getInspector()
this.pickerDatetime = this.$element("pickerDatetime").getInspector()
this.pickerMultiText = this.$element("pickerMultiText").getInspector()
}
}
ace/ace_standard/src/main/js/default/pages/picker/router/index.css 0 → 100644
浏览文件 @ 4b3eede7
/**
* 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%;
}
.contain1{
width: 100%;
height: 15%;
flex-direction: column;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.prop-container{
flex-direction: column;
padding-left: 2px;
}
.event-container{
flex-direction: column;
}
.function-container{
flex-direction: column;
}
.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: 50px;
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: 12%;
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: 1px;
margin: 5px;
border: 2px solid #000000;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
text-color: red;
font-size: 16px;
allow-scale: true;
letter-spacing: 4px;
text-decoration: underline;
font-style: normal;
font-weight: 700;
font-family: HYQiHei-65S;
line-height: 20px;
column-height: 50px;
}
picker {
font-size: 12px;
}
.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;
}
.prop5 {
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: 40px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
margin: 5px;
height: 40px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
margin: 5px;
height: 40px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
margin: 5px;
height: 40px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access1{
color: #321124;
height: 40px;
margin: 5px;
}
.multimode1{
background-color: firebrick;
height: 40px;
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/picker/router/index.hml 0 → 100644
浏览文件 @ 4b3eede7
<!--/**
* 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">
picker通用样式1
</text>
<picker id="style1" class="style1" value="{{textvalue}}" ></picker>
<text class="sub-title">
picker通用样式2
</text>
<picker id="style2" class="style2" value="{{textvalue}}" ></picker>
<text class="sub-title">
picker通用样式3
</text>
<picker id="style3" class="style3" value="{{textvalue}}" >
</picker>
<text class="sub-title">
picker通用样式4
</text>
<picker id="style4" class="style4" value="{{textvalue}}" >
</picker>
<text class="sub-title">
picker通用样式5
</text>
<div class="contain1">
<picker id="style5" class="style5" value="{{textvalue}}" >
</picker>
<picker id="style6" class="style6" value="{{textvalue}}" >
</picker>
</div>
<text class="sub-title">
picker特有样式
</text>
<picker id="style7" class="style7" value="{{textvalue}}">
</picker>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
</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">
picker通用属性1
</text>
<picker id="prop1"
class="prop1"
disabled = "true"
focusable ="true"
data-name ="prop1"
click-effect="spring-medium"
dir ="rtl"
value="{{textvalue}}">
</picker>
<text class="sub-title">
picker通用属性2
</text>
<picker class="prop2"
ref ="prop2"
disabled = "false"
focusable ="false"
data-name ="prop2"
click-effect="spring-large"
dir ="ltr"
value="{{textvalue}}">
</picker>
<text class="sub-title">
picker通用属性3
</text>
<picker id="prop3" value="textvalue" style="color: #679855; margin: 5px;width: 100%;height: 40px;" class="prop3" >
</picker>
<text class="sub-title">
picker特有属性4
</text>
<picker id="prop4" class="prop4" type="text" value="普通选择器" selected="{{textselect}}" range="{{rangetext}}" >
</picker>
<text class="sub-title">
picker特有属性5
</text>
<picker id="prop4" class="prop4" type="datetime" value="时间日期选择器">
</picker>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用事件 -->
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
picker通用事件1
</text>
<picker id="event1" class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel"
value="通用事件1" range="{{ rangetext }}" >
</picker>
<text class="sub-title">
picker通用事件2
</text>
<picker id="event2" class="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached"
value="通用事件2" range="{{ rangetext }}">
</picker>
<text class="sub-title">
picker通用事件3
</text>
<picker 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"
value="通用事件3" range="{{ rangetext }}">
</picker>
<text class="sub-title">
picker特有事件1
</text>
<picker id="event4" class="event4" type="text" value="特有事件1" range="{{ rangetext }}"
onchange="textonchange" oncancel="textoncancel">
</picker>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用方法 -->
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
picker通用方法1
</text>
<picker id="function1" value="通用方法1" class="function1" ontouchstart="functionTest1">
</picker>
<text class="sub-title">
picker通用方法2
</text>
<picker id="function2" value="通用方法2" class="function2" ontouchstart="functionTest2">
</picker>
<text class="sub-title">
picker通用方法3
</text>
<picker id="function3" value="通用方法3" class="function3" ontouchstart="functionTest3">
</picker>
<text class="sub-title">
picker特有方法1
</text>
<picker id="function4" show="true" value="特有方法1" range="{{rangetext}}" class="function4">
</picker>
</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">
picker渐变样式1
</text>
<picker id="gradient1" class="gradient1" value="渐变样式1" range="{{ rangetext }}">
</picker>
<text class="sub-title">
picker渐变样式2
</text>
<picker id="gradient2" class="gradient2" value="渐变样式2" range="{{ rangetext }}">
</picker>
<text class="sub-title">
picker渐变样式3
</text>
<picker id="gradient3" class="gradient3" value="渐变样式3" range="{{ rangetext }}">
</picker>
<text class="sub-title">
picker渐变样式4
</text>
<picker id="gradient4" class="gradient4">
</picker>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 无障碍 -->
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
picker无障碍1
</text>
<picker class="access1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</picker>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
picker原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<div style="width:20px;height:20px;background-color: blue;display-index: 1;">
</div>
<div style="width:30px; height:20px;background-color: black;display-index: 5;">
</div>
<div style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</div>
<div style="width:10px; height:20px;background-color: red;display-index: 3;">
</div>
<div style="width:25px; height:20px;background-color:pink;display-index: 7;">
</div>
<div style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</div>
</div>
<text class="sub-title">
picker原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<picker style="height:20px;background-color: blue;flex-weight: 1;">
</picker>
<picker style="height:20px;background-color: black;flex-weight: 5;">
</picker>
<picker style="height:20px;background-color: yellow;flex-weight: 4;">
</picker>
<picker style="height:20px;background-color: red;flex-weight: 3;">
</picker>
<picker style="height:20px;background-color:pink;flex-weight: 7;">
</picker>
<picker style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</picker>
</div>
<text class="sub-title">
picker原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<picker style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</picker>
<picker style="width:30px;background-color: black;aspect-ratio:0.5;">
</picker>
<picker style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</picker>
<picker style="width:30px;background-color: red;aspect-ratio: 1.3;">
</picker>
<picker style="width:30px;background-color:pink;aspect-ratio: 1;">
</picker>
<picker style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</picker>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
menu多模输入1
</text>
<picker id="multiMode1"
class="multiMode1"
value="picker"
voicelabel = "voice"
subscriptflag="on"
subscriptlabel="div"
scenelabel="common">
</picker>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/picker/router/index.js 0 → 100644
浏览文件 @ 4b3eede7
/**
* 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 router from '@system.router';
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: {
selectList:["text","data","time","datetime","multitext"],
rangetext:['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'default textvalue',
datevalue:'default datevalue',
timevalue:'default timevalue',
datetimevalue:'default datetimevalue',
multitextvalue:'default multitextvalue',
containsecond:true,
multitextselect:[1,2,0],
datetimeselect:'2012-5-6-11-25',
timeselect:'11:22:30',
dateselect:'2021-3-2',
textselect:'2'
},
onMenuSelected(e) {
prompt.showToast({
message: e.value
})
},
onTextClick1() {
this.$element('apiMenu1').show({x:120,y:10});
},
onTextClick2() {
this.$element('apiMenu2').show({x:120,y:80});
},
onTextClick3() {
this.$element('apiMenu3').show({x:120,y:150});
},
onTextClick4() {
this.$element('apiMenu4').show({x:120,y:220});
},
onTextClick5() {
this.$element('apiMenu5').show({x:120,y:290});
},
onTextClick6() {
this.$element('apiMenu6').show({x:120,y:360});
},
onTextClick7() {
this.$element('apiMenu7').show({x:120,y:650});
},
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'
});
},
selectChange(e){
for(let i = 0;i<this.selectList.length;i++){
if(e.newValue == this.selectList[i]){
this.$element("picker"+i).show();
}
}
},
textonchange(e) {
this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected })
},
textoncancel(e) {
prompt.showToast({ message:"text: textoncancel" })
},
dateonchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day })
},
dateoncancel() {
prompt.showToast({ message:"date: dateoncancel" })
},
timeonchange(e) {
if(this.containsecond){
this.timevalue=e.hour+":"+e.minute+":"+e.second;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second })
} else {
this.timevalue=e.hour+":"+e.minute;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute })
}},
timeoncancel() {
prompt.showToast({ message:"timeoncancel" })
},
datetimeonchange(e) {
this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute;
prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute })
},
datetimeoncancel() {
prompt.showToast({ message:"datetimeoncancel" })
},
multitextonchange(e) {
this.multitextvalue=e.newValue;
prompt.showToast({ message:"Multi-column text change" + e.newValue })
},
multitextoncancel() {
prompt.showToast({ message:"multitextoncancel" })
},
popup_picker() {
this.$element("picker_text").show();
},
}
ace/ace_standard/src/main/js/default/pages/pickerView/index.css 已删除 100644 → 0
浏览文件 @ d5c02fda
.container {
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title {
font-size: 30px;
text-align: center;
}
.time-picker1 {
width: 500px;
height: 200px;
min-width: 25px;
min-height: 10px;
max-width: 600px;
max-height: 250px;
padding: 5px;
margin-top: 10px;
color: pink;
font-size: 30px;
selected-color: cornflowerblue;
selected-font-size: 46px;
focus-color: brown;
focus-font-size: 40px;
disappear-color: pink;
disappear-font-size: 16px;
font-family: sans-serif;
box-shadow :10px 5px 5px 10px #888888;
border: 3px solid brown;
opacity: 0.5;
}
.time-picker2 {
width: 500px;
height: 200px;
min-width: 25px;
min-height: 10px;
max-width: 600px;
max-height: 250px;
padding: 20px;
margin-top: 50px;
color: pink;
font-size: 20px;
selected-color: blueviolet;
selected-font-size: 46px;
focus-color: brown;
focus-font-size: 40px;
disappear-color: pink;
disappear-font-size: 16px;
font-family: sans-serif;
box-shadow : 2px 2px 5px 2px pink;
opacity: 1;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/pickerView/index.hml 已删除 100644 → 0
浏览文件 @ d5c02fda
<div class="container" @swipe="handleSwipe">
<text class="title">
Selected：{{time}}
</text>
<picker-view class="time-picker1" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
<picker-view class="time-picker2" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/pickerView/index.js 已删除 100644 → 0
浏览文件 @ d5c02fda
/**
* 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: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/pickerView/prop/index.css 0 → 100644
浏览文件 @ 4b3eede7
/**
* 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%;
}
divider {
color: #0d0000;
}
.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;
}
#ifPropFalse {
flex-weight: 1;
background-color:#00ffff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropNone {
flex-weight: 1;
background-color:#00000d;
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;
}
picker-view {
font-size: 12px;
selected-font-size: 12px;
height: 60px;
disappear-font-size: 12px;
}
#pickerViewText {
background-color: deeppink;
}
#pickerViewTime {
background-color: pink;
}
#pickerViewDate {
background-color: yellow;
}
#pickerViewDatetime {
background-color: greenyellow;
}
#pickerViewMultiText {
background-color: skyblue;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/pickerView/prop/index.hml 0 → 100644
浏览文件 @ 4b3eede7
<!--/**
* 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">
picker-view通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<picker-view id="idProp">
</picker-view>
<text class="sub-title">
通用属性 -- class
</text>
<picker-view id="classProp"
class="classProp">
</picker-view>
<picker-view id="classPropNone"
class="">
</picker-view>
<text class="sub-title">
通用属性 -- style
</text>
<picker-view id="styleProp"
style="width:10%;height:20px;background-color:red">
</picker-view>
<text class="sub-title">
通用属性 -- ref
</text>
<picker-view id="refProp"
ref="refProp">
</picker-view>
<picker-view id="refPropNone"
ref="">
</picker-view>
<text class="sub-title">
通用属性 -- disabled
</text>
<picker-view id="disabledPropTrue"
disabled="true">
</picker-view>
<picker-view id="disabledPropFalse"
disabled="false">
</picker-view>
<picker-view id="disabledPropNone"
disabled="">
</picker-view>
<text class="sub-title">
通用属性 -- focusable
</text>
<picker-view id="focusablePropTrue"
focusable="true">
</picker-view>
<picker-view id="focusablePropFalse"
focusable="false">
</picker-view>
<picker-view id="focusablePropNone"
focusable="">
</picker-view>
<text class="sub-title">
通用属性 -- data-*
</text>
<picker-view id="dataProp"
data-picker-view="通用属性 -- data-*">
</picker-view>
<picker-view id="dataPropNone"
data-picker-view="">
</picker-view>
<text class="sub-title">
通用属性 -- click-effect
</text>
<picker-view id="clickEffectPropSmall"
click-effect="spring-small">
</picker-view>
<picker-view id="clickEffectPropMedium"
click-effect="spring-medium">
</picker-view>
<picker-view id="clickEffectPropLarge"
click-effect="spring-large">
</picker-view>
<picker-view id="clickEffectPropNone"
click-effect="">
</picker-view>
<text class="sub-title">
通用属性 -- dir
</text>
<picker-view id="dirPropRtl"
dir="rtl">
</picker-view>
<picker-view id="dirPropAuto"
dir="auto">
</picker-view>
<picker-view id="dirPropLtr"
dir="ltr">
</picker-view>
<picker-view id="dirPropNone"
dir="">
</picker-view>
<text class="sub-title">
渲染属性 -- for
</text>
<picker-view id="forPropNull"
for="">
</picker-view>
<picker-view id="forPropOne"
for="{{listOne}}">
</picker-view>
<picker-view id="forPropThree"
for="{{listThree}}">
</picker-view>
<text class="sub-title">
渲染属性 -- if
</text>
<picker-view id="ifPropTrue"
if="true">
</picker-view>
<text class="sub-title">
渲染属性 -- show
</text>
<picker-view id="showPropTrue"
show="true">
</picker-view>
<picker-view id="showPropFalse"
show="false">
</picker-view>
<picker-view id="showPropNone"
show="none">
</picker-view>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
picker-view特有属性
</text>
<text class="sub-title">
picker-view特有属性 -- type
</text>
<picker-view
id="pickerViewText"
type="text"
selected="0"
range="{{rangetext}}"
indicatorprefix="前缀"
indicatorsuffix="后缀"
></picker-view>
<picker-view
id="pickerViewTime"
type="time"
containsecond="true"
selected="11:22:30"
hours="12"
></picker-view>
<picker-view
id="pickerViewDate"
type="date"
start="2002-2-5"
end="2030-6-5"
selected="2022-2-22"
lunar="false"
lunarswitch="true"
></picker-view>
<picker-view
id="pickerViewDatetime"
type="datetime"
selected=""
hours="12"
lunar="false"
lunarswitch="true"
></picker-view>
<picker-view
id="pickerViewMultiText"
type="multi-text"
columns="3"
range="{{multitext}}"
selected="{{multitextselect}}"
></picker-view>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/progress/index.css 已删除 100644 → 0
浏览文件 @ d5c02fda
.container {
flex-direction: column;
/* height: 100%;*/
width: 100%;
align-items: center;
}
.min-progress {
width: 250px;
height: 250px;
}
.progress2{
color:red;
secondary-color:red;
scale-width:20;
scale-number:60;
}
.progress4{
color: red;
stroke-width:10px;
secondary-color:red
}
.arc1{
color:red;
stroke-width:30px;
}
.arc2{
color:yellow;
stroke-width:30px;
total-angle:360;
/* center-x：10;*/
/* center-y：10;*/
/* radius：5;*/
}
.eclipse{
color:crimson;
background-color: antiquewhite;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/progress/index.hml 已删除 100644 → 0
浏览文件 @ d5c02fda
<div class="container">
<progress class="min-progress progress1" type="scale-ring" percent= "10" secondarypercent="50" clockwise="false" ></progress>
<progress class="min-progress progress2" type="scale-ring" percent= "10" secondarypercent="50" clockwise="true"></progress>
<progress class="min-progress " type="horizontal" percent= "10" secondarypercent="50"></progress>
<progress class="min-progress progress4" type="horizontal" percent= "10" secondarypercent="50"></progress>
<progress class="min-progress " type="ring" percent= "10" secondarypercent="50" stroke-width="10"></progress>
<progress class="min-progress arc1" type="arc" percent= "10" ></progress>
<progress class="min-progress arc2" type="arc" percent= "10" ></progress>
<progress class="min-progress " type="eclipse" percent= "10" ></progress>
<progress class="min-progress eclipse" type="eclipse" percent= "10" ></progress>
<progress class="min-progress " type="circular" percent= "10" ></progress>
<progress class="min-progress " type="circular" percent= "10" style="color:red"></progress>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/progress/index.js 已删除 100644 → 0
浏览文件 @ d5c02fda
/**
* 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"
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/test/List.test.js
浏览文件 @ 4b3eede7
......@@ -26,4 +26,8 @@ require('./switchProps.test.js')
require('./tabsProps.test.js')
require('./tabBarProps.test.js')
require('./tabContentProps.test.js')
require('./progressProps.test.js')
require('./dividerProps.test.js')
require('./optionProps.test.js')
require('./pickerProps.test.js')
require('./pickerViewProps.test.js')
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或