diff --git a/ace/ace_standard/src/main/config.json b/ace/ace_standard/src/main/config.json index 1dfb4a8b416623b9c20cba4e5d2694738369ca98..ee01c510a57b76eceb6cc6d90108ecc3f1f5e3c2 100755 --- a/ace/ace_standard/src/main/config.json +++ b/ace/ace_standard/src/main/config.json @@ -53,12 +53,12 @@ "pages/index/index", "pages/routerPush/index", "pages/routerReplace/index", - "pages/button/index", + "pages/button/router/index", "pages/chart/index", "pages/input/index", "pages/slider/index", "pages/text/index", - "pages/divider/index", + "pages/divider/router/index", "pages/image/index", "pages/label/index", "pages/rating/index", @@ -122,7 +122,9 @@ "pages/textPath/index", "pages/tspan/index", "pages/div/prop/index", - "pages/div/style/index" + "pages/div/style/index", + "pages/divider/prop/index", + "pages/button/prop/index" ], "name": "default", "window": { diff --git a/ace/ace_standard/src/main/js/default/pages/button/index.css b/ace/ace_standard/src/main/js/default/pages/button/index.css deleted file mode 100644 index a5e022f0593895148202bf9957530e113dae86c2..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/button/index.css +++ /dev/null @@ -1,78 +0,0 @@ -.div-button { - flex-direction: column; - width: 100%; -} -.circleall{ - width: 90%; - flex-direction: row; - justify-content: space-around; - margin-left: 4%; -} -.circlealls{ - flex-direction: row; -} -.buttons { - margin-top: 15px; - width: 45%; - height: 45px; - text-align: center; - font-size: 14px; - border-radius: 10px; - background-color: #317aff; -} -.title{ - font-size: 13px; - margin-top: 60px; - margin-left: 20px; - color: grey; -} -.all{ - flex-direction: column; - align-items: center; - margin-bottom: 20px; -} -.oriage{ - background-color: #ee8443; -} -.white{ - opacity: 0.4; -} -.icon{ - icon-height: 30px; - icon-width: 30px; -} -.warn{ - background-color: #f55a42; -} -.circle { - radius: 30px; - icon-width: 30px; - icon-height: 30px; - margin-left: 20px; - margin-top: 20px; - background-color: #317aff; -} -.cir{ - background-color: #f55a42; -} -.text { - text-color: #0a59f7; - font-size: 17px; - font-weight: 600; - font-family: sans-serif; - font-style: normal; -} -.text1{ - text-color: #969696; -} -.text2{ - text-color: #e84026; -} -.download { - margin-top: 15px; - width: 88%; - height: 45px; - border-radius: 50px; - text-color: white; - background-color: #007dff; -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/button/index.hml b/ace/ace_standard/src/main/js/default/pages/button/index.hml deleted file mode 100644 index ba8548a1acccca9334e0a80674faf141b095985d..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/button/index.hml +++ /dev/null @@ -1,46 +0,0 @@ -
- 普通按钮 -
- - -
-
- - -
-
- - -
- 胶囊按钮 -
- - -
-
- - -
-
- - -
- 圆形按钮 -
- - -
- 文本按钮 -
- - - -
- 长胶囊按钮 -
- - - -
-
diff --git a/ace/ace_standard/src/main/js/default/pages/button/index.js b/ace/ace_standard/src/main/js/default/pages/button/index.js deleted file mode 100644 index f093e003d376a12f448ec78359c591680d0dd7be..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/button/index.js +++ /dev/null @@ -1,34 +0,0 @@ -/* - * Copyright (C) 2021 Huawei Device Co., Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -export default { - data: { - progress: 10, - downloadText: "进度条按钮" - }, - setProgress(e) { - var i=0 - var set= setInterval(()=>{ - i+=10 - this.progress=i - this.downloadText = this.progress + "%"; - this.$element('download-btn').setProgress({ progress: this.progress }); - if(this.progress>=100){ - clearInterval(set) - this.downloadText="完成" - } - },1000) - }, -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/button/prop/index.css b/ace/ace_standard/src/main/js/default/pages/button/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..43c222fb8a0a6e7c686a7a50c8e49b271fb6d4b1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/prop/index.css @@ -0,0 +1,519 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + flex-weight: 1; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + flex-weight: 1; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + flex-weight: 1; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + flex-weight: 1; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + flex-weight: 1; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + flex-weight: 1; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + flex-weight: 1; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + flex-weight: 1; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + flex-weight: 1; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + flex-weight: 1; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + flex-weight: 1; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + flex-weight: 1; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + flex-weight: 1; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + flex-weight: 1; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + flex-weight: 1; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + flex-weight: 1; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + flex-weight: 1; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + flex-weight: 1; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + flex-weight: 1; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + flex-weight: 1; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + flex-weight: 1; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + flex-weight: 1; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + flex-weight: 1; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#typeArc{ + height: 30px; + margin-bottom: 20px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} + +#typeCapsule{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeCircle{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeText{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeDownload{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#value{ + height: 15px; + font-size: 10px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#valueNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#icon{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#iconNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementStart{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementEnd{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementTop{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementBottom{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#placementNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#waitingTrue{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#waitingFalse{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#waitingNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/button/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/button/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..48343c8de1956769b71813a89260035cecc8bf21 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/prop/index.hml @@ -0,0 +1,238 @@ + + +
+
+ + button通用属性 + + + + 通用属性 -- id + + + + + 通用属性 -- class + + + + + + 通用属性 -- style + + + + + 通用属性 -- ref + + + + + + 通用属性 -- disabled + + + + + + + 通用属性 -- focusable + + + + + + + 通用属性 -- data-* + + + + + + 通用属性 -- click-effect + + + + + + + + 通用属性 -- dir + + + + + + + + 渲染属性 -- for + + + + + + + 渲染属性 -- if + + + + + 渲染属性 -- show + + + + +
+ +
+
+
+ + button特有属性 + + + + 特有属性 -- type + + + + + + + + + + 特有属性 -- value + + + + + + 特有属性 -- icon + + + + + + 特有属性 -- placement + + + + + + + + + 特有属性 -- waiting + + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/button/prop/index.js b/ace/ace_standard/src/main/js/default/pages/button/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..3ffec89a8980898ea860dad7994a9e8679acdafd --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/prop/index.js @@ -0,0 +1,176 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; + +export default { + data:{ + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + forPropNull : null, + forPropOne : null, + forPropThree : null, + ifPropTrue : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + + typeArc : null, + typeCapsule : null, + typeCircle : null, + typeText : null, + typeDownload : null, + typeNone : null, + value : null, + valueNone : null, + icon : null, + iconNone : null, + placementStart : null, + placementEnd : null, + placementTop : null, + placementBottom : null, + placementNone : null, + waitingTrue : null, + waitingFalse : null, + waitingNone : null + }, + onShow(){ + this.getCommonPropValues(); + this.getSpecificPropValues(); + globalThis.value = { + idProp : this.idProp, + classProp : this.classProp, + classPropNone : this.classPropNone, + styleProp : this.styleProp, + refProp : this.refProp, + refPropNone : this.refPropNone, + disabledPropTrue : this.disabledPropTrue, + disabledPropFalse : this.disabledPropFalse, + disabledPropNone : this.disabledPropNone, + focusablePropTrue : this.focusablePropTrue, + focusablePropFalse : this.focusablePropFalse, + focusablePropNone : this.focusablePropNone, + dataProp : this.dataProp, + dataPropNone : this.dataPropNone, + clickEffectPropSmall : this.clickEffectPropSmall, + clickEffectPropMedium : this.clickEffectPropMedium, + clickEffectPropLarge : this.clickEffectPropLarge, + clickEffectPropNone : this.clickEffectPropNone, + dirPropRtl : this.dirPropRtl, + dirPropAuto : this.dirPropAuto, + dirPropLtr : this.dirPropLtr, + dirPropNone : this.dirPropNone, + forPropNull : this.forPropNull, + forPropOne : this.forPropOne, + forPropThree : this.forPropThree, + ifPropTrue : this.ifPropTrue, + showPropTrue : this.showPropTrue, + showPropFalse : this.showPropFalse, + showPropNone : this.showPropNone, + + typeArc : this.typeArc, + typeCapsule : this.typeCapsule, + typeCircle : this.typeCircle, + typeText : this.typeText, + typeDownload : this.typeDownload, + typeNone : this.typeNone, + value : this.value, + valueNone : this.valueNone, + icon : this.icon, + iconNone : this.iconNone, + placementStart : this.placementStart, + placementEnd : this.placementEnd, + placementTop : this.placementTop, + placementBottom : this.placementBottom, + placementNone : this.placementNone, + waitingTrue : this.waitingTrue, + waitingFalse : this.waitingFalse, + waitingNone : this.waitingNone + } + }, + getCommonPropValues(){ + this.idProp = this.$element("idProp").getInspector() + this.classProp = this.$element("classProp").getInspector() + this.classPropNone = this.$element("classPropNone").getInspector() + this.styleProp = this.$element("styleProp").getInspector() + this.refProp = this.$element("refProp").getInspector() + this.refPropNone = this.$element("refPropNone").getInspector() + this.disabledPropTrue = this.$element("disabledPropTrue").getInspector() + this.disabledPropFalse = this.$element("disabledPropFalse").getInspector() + this.disabledPropNone = this.$element("disabledPropNone").getInspector() + this.focusablePropTrue = this.$element("focusablePropTrue").getInspector() + this.focusablePropFalse = this.$element("focusablePropFalse").getInspector() + this.focusablePropNone = this.$element("focusablePropNone").getInspector() + this.dataProp = this.$element("dataProp").getInspector() + this.dataPropNone = this.$element("dataPropNone").getInspector() + this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector() + this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector() + this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector() + this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector() + this.dirPropRtl = this.$element("dirPropRtl").getInspector() + this.dirPropAuto = this.$element("dirPropAuto").getInspector() + this.dirPropLtr = this.$element("dirPropLtr").getInspector() + this.dirPropNone = this.$element("dirPropNone").getInspector() + this.forPropNull = this.$element("forPropNull").getInspector() + this.forPropOne = this.$element("forPropOne").getInspector() + this.forPropThree = this.$element("forPropThree").getInspector() + this.ifPropTrue = this.$element("ifPropTrue").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + }, + getSpecificPropValues(){ + this.typeArc = this.$element("typeArc").getInspector() + this.typeCapsule = this.$element("typeCapsule").getInspector() + this.typeCircle = this.$element("typeCircle").getInspector() + this.typeText = this.$element("typeText").getInspector() + this.typeDownload = this.$element("typeDownload").getInspector() + this.typeNone = this.$element("typeNone").getInspector() + this.value = this.$element("value").getInspector() + this.valueNone = this.$element("valueNone").getInspector() + this.icon = this.$element("icon").getInspector() + this.iconNone = this.$element("iconNone").getInspector() + this.placementStart = this.$element("placementStart").getInspector() + this.placementEnd = this.$element("placementEnd").getInspector() + this.placementTop = this.$element("placementTop").getInspector() + this.placementBottom = this.$element("placementBottom").getInspector() + this.placementNone = this.$element("placementNone").getInspector() + this.waitingTrue = this.$element("waitingTrue").getInspector() + this.waitingFalse = this.$element("waitingFalse").getInspector() + this.waitingNone = this.$element("waitingNone").getInspector() + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/divider/index.css b/ace/ace_standard/src/main/js/default/pages/button/router/index.css similarity index 64% rename from ace/ace_standard/src/main/js/default/pages/divider/index.css rename to ace/ace_standard/src/main/js/default/pages/button/router/index.css index 48d62f709ffaa11ce2642f05819314ac7f1e8586..9ddb2a97656b072b75aa2d8d787cb7896a46d0e8 100644 --- a/ace/ace_standard/src/main/js/default/pages/divider/index.css +++ b/ace/ace_standard/src/main/js/default/pages/button/router/index.css @@ -20,6 +20,10 @@ padding: 1px; } +button{ + width: 60%; + height: 20px; +} .sub-container{ flex-direction: column; height: 100%; @@ -27,41 +31,87 @@ } .style-container{ + flex-direction: column; + height: 70%; +} +.contain1{ + width: 100%; + height: 15%; + flex-direction: column; +} + +.ani-container{ flex-direction: column; height: 100%; flex-weight: 1; } +.prop-container{ + flex-direction: column; + height: 60%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 20%; +} + +.function-container{ + flex-direction: column; + height: 20%; +} + +.gradient-container{ + flex-direction: column; + height: 40%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 45%; +} + +.multimode-container{ + flex-direction: column; + height: 45%; +} + .title{ width: 100%; font-size: 18px; margin: 2px; - padding: 2px; font-weight: bold; text-align: center; } - .sub-title{ width: 100%; - font-size: 14px; + height: 25px; + font-size: 15px; text-align: left; - margin: 2px; + 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; + max-height: 20px; padding-left: 10px; - padding-top: 20px; + padding-top: 1px; padding-right: 15px; - padding-bottom: 5px; + padding-bottom: 1px; margin-left: 10px; - margin-top: 20px; + margin-top: 0px; margin-right: 15px; margin-bottom: 5px; border-left-style: solid; @@ -91,7 +141,7 @@ } .style2{ - width: 50px; + width: 70%; height: 20px; padding-start: 10px; padding-end: 15px; @@ -105,11 +155,11 @@ mask-image: url('common/images/icon.png'); mask-size: cover; mask-position: center; - } .style3{ width: 100%; + height: 20px; padding: 10px; margin: 5px; border-left: 1px solid #000000; @@ -127,22 +177,16 @@ } .style4{ + height: 20px; width: 60%; - height: 5%; - padding: 10px; + padding: 1px; margin: 5px; border: 2px solid #000000; } -.contain1{ - width: 100%; - height: 70px; - flex-direction: column; -} - .style5{ width: 50%; - height: 30px; + height: 20px; background-color: yellow; border-image-source: url('/common/images/image.png'); border-image-slice: 1px 2px 3px 4px; @@ -153,7 +197,7 @@ .style6{ width: 70px; - height: 30px; + height: 20px; position: absolute; left: 10px; top: 35px; @@ -164,58 +208,117 @@ } .style7 { - margin-bottom: 50px; - margin-top: 10px; - color: green; - stroke-width: 30px; - line-cap: round; + height: 20px; + text-color:salmon; + font-size:15px; + allow-scale:false; + font-style:normal; + font-weight:100; + font-family:sans-serif; + icon-width:60px; + icon-height:15px; + radius:10px; } -.prop-container{ - flex-direction: column; - height: 100%; - flex-weight: 1; +.style8 { + height: 20px; + margin-bottom: 5px; + margin-top: 5px; + background-color: sandybrown; +} +.event1{ + width: 100%; + height: 20px; + background-color: salmon; } +.event2{ + width: 100%; + height: 20px; + background-color: darkorchid; +} + +.event3{ + width: 100%; + height: 20px; + background-color: #ad4e2a; +} + +.event4{ + width: 100%; + height: 20px; + background-color: blanchedalmond; +} + +.event5{ + width: 100%; + height: 20px; + background-color: blanchedalmond; +} + + #prop1 { - color: #ad4e2a; - stroke-width: 10px; - line-cap: square; - margin: 5px; + background-color: mediumslateblue; + height: 20px; + margin: 2px; } .prop2 { - color: #343524; - stroke-width: 15px; - line-cap: round; - margin: 5px; + background-color: salmon; + height: 20px; + margin: 2px; } .prop4 { - color: #456345; - stroke-width: 25px; - line-cap: round; - margin: 5px; + background-color: skyblue; + height: 20px; + margin: 2px; + text-color:skyblue; + font-size:15px; + allow-scale:true; + font-style:italic; + font-weight:200; + font-family:sans-serif; } .prop5 { - color: #831834; - stroke-width: 40px; - line-cap: square; - margin: 5px; - height: 70px; + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; } -.ani-container{ - flex-direction: column; - height: 100%; - flex-weight: 1; +.prop6 { + background-color: gold; + height: 30px; + width: 100%; + margin: 2px; +} + +.prop7 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; } +.prop8 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; +} + +.prop9 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; +} + + .ani1{ color: #72ac33; - stroke-width: 55px; - line-cap: square; margin: 5px; transform-origin: 0% 0%; animation: ani1Go 3s infinite; @@ -250,66 +353,88 @@ } .ani2{ - color: #ad4e2a; - stroke-width: 55px; - line-cap: square; + background-color: #ad4e2a; + width: 100%; + height: 55px; margin: 5px; } -.gradient-container{ - flex-direction: column; -} - .gradient1{ - stroke-width: 30px; - line-cap: square; margin: 5px; + height: 20px; background: linear-gradient(red, #00ff00); } .gradient2{ - stroke-width: 30px; - line-cap: square; margin: 5px; + height: 20px; background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); } .gradient3{ - stroke-width: 30px; - line-cap: square; margin: 5px; + height: 20px; background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); } .gradient4{ - stroke-width: 30px; - line-cap: square; margin: 5px; + height: 20px; background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); } -.access-container{ - flex-direction: column; -} - .access1{ color: #321124; - stroke-width: 30px; - line-cap: square; + height: 20px; margin: 5px; + background-color: chartreuse; } -.atom-container{ - flex-direction: column; +.atom1{ + background-color: saddlebrown; + width: 40px; + height: 40px; } - -.multimode-container{ - flex-direction: column; +.atom2{ + background-color: blueviolet; + width: 40px; + height: 40px; +} +.atom3{ + background-color: aquamarine; + width: 40px; + height: 40px; } .multimode1{ - color: #978666; - stroke-width: 30px; - line-cap: square; + background-color: firebrick; + height: 20px; + width: 100%; margin: 5px; +} + + +.function1{ + background-color: #ff0000; + width: 60%; + height: 30px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 30px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 30px; +} + +.function4 { + flex-direction: row; + width: 60%; + height: 60px; + overflow: scroll; } \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/button/router/index.hml b/ace/ace_standard/src/main/js/default/pages/button/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..25e2ec4635f26d42e86d7ecef2ecbc8cd1fcadc1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/router/index.hml @@ -0,0 +1,353 @@ + + +
+
+ +
+ + 通用样式 + + + + button通用样式1 + + + + + button通用样式2 + + + + + button通用样式3 + + + + + button通用样式4 + + + + + button通用样式5 + +
+ + +
+ + + button特有样式 + + +
+ + + + +
+ + 动画样式 + + + + button动画样式1 + + + + + button动画样式2 + + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + button通用属性1 + + + + + button通用属性2 + + + + + button通用属性3 + + + + + arc按钮 + + + + + capsule按钮 + + + + + circle按钮 + + + + + text按钮 + + + + + download按钮 + + + + + 普通按钮 + + + +
+
+
+ +
+ + 通用事件 + + + button通用事件1 + + + + + button通用事件2 + + + + + button通用事件3 + + +
+
+
+ +
+ + 通用方法 + + + button通用方法1 + + + + + button通用方法2 + + + + + button通用方法3 + + +
+
+ +
+
+ +
+ +
+ + 渐变样式 + + + + button渐变样式1 + + + + + button渐变样式2 + + + + + button渐变样式3 + + + + + button渐变样式4 + + +
+
+
+ +
+ + 无障碍 + + + button无障碍1 + + +
+
+
+ +
+ + 原子布局 + + + button原子布局1 + +
+ + + +
+ + button原子布局2 + +
+ + + +
+ + button原子布局3 + +
+ + + +
+
+
+
+ + 多模输入 + + + button多模输入1 + + +
+
+
+
+ + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/button/router/index.js b/ace/ace_standard/src/main/js/default/pages/button/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..1deae6639f5a07a9b7e4cafa60ca44a6889e32cd --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/button/router/index.js @@ -0,0 +1,507 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + data: { + progress: 10, + downloadText: "进度条按钮" + }, + setProgress(e) { + var i=0 + var set= setInterval(()=>{ + i+=10 + this.progress=i + this.downloadText = this.progress + "%"; + this.$element('download-btn').setProgress({ progress: this.progress }); + if(this.progress>=100){ + clearInterval(set) + this.downloadText="完成" + } + },1000) + }, + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/button/style/index.css b/ace/ace_standard/src/main/js/default/pages/button/style/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/button/style/index.hml b/ace/ace_standard/src/main/js/default/pages/button/style/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/button/style/index.js b/ace/ace_standard/src/main/js/default/pages/button/style/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/ace/ace_standard/src/main/js/default/pages/div/style/index.css b/ace/ace_standard/src/main/js/default/pages/div/style/index.css index 5c4c1d87fa5e983621c40f7d950abae189ebeb90..ba39c3f2177da5582ba781c103f5ad8d20bd542d 100644 --- a/ace/ace_standard/src/main/js/default/pages/div/style/index.css +++ b/ace/ace_standard/src/main/js/default/pages/div/style/index.css @@ -51,7 +51,7 @@ padding-bottom: 0.5px; margin-left: 1px; margin-top: 2px; - margin-right: 3px; + margin-right: 1.5px; margin-bottom: 0.5px; border-left-style: solid; border-right-style: dashed; @@ -351,4 +351,163 @@ mask-image: url('common/images/icon.png'); mask-size: cover; mask-position: center; -} \ No newline at end of file +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#specificOne{ + width: 70px; + height: 25px; + flex-direction: row; + flex-wrap:nowrap; +} + +#specificTwo{ + width: 100%; + height: 50px; + flex-direction: column; + flex-wrap:wrap; + justify-content:flex-start; + align-items: flex-start; + align-content: flex-start; +} + +#specificThree{ + width: 18%; + height: 48%; + border: 1px solid pink; + flex-direction: row; + justify-content:flex-end; + align-items: flex-end; + align-content: flex-end; + margin: 1%; +} + +#specificFour{ + width: 18%; + height: 48%; + border: 1px solid pink; + flex-direction: row; + justify-content:center; + align-items: center; + align-items: center; + margin: 1%; +} + +#specificFive{ + width: 18%; + height: 48%; + border: 1px solid pink; + flex-direction: row; + justify-content:space-between; + align-items:stretch; + align-content: space-between; + margin: 1%; +} + +#specificSix{ + width: 18%; + height: 48%; + border: 1px solid pink; + flex-direction: row; + justify-content:space-around; + align-items: baseline; + align-content: space-around; + margin: 1%; +} + +#specificSeven{ + width: 50px; + height: 10px; + background-color: #ff0000; + overflow: hidden; +} + +#specificEight{ + width: 70px; + height: 10px; + background-color: #00ff00; + overflow: visible; + margin-left: 10px; +} + +#specificNine{ + width: 100%; + height: 50px; + margin-top: 10px; + overflow: scroll; + flex-direction: column; + scrollbar-color:#ff0000; + scrollbar-width:2px; + overscroll-effect:spring; +} + +#specificTen{ + width: 100%; + height: 10px; + margin-top: 10px; + overflow: scroll; + scrollbar-color:#ff0000; + scrollbar-width:2px; + overscroll-effect:fade; +} + +#specificEleven{ + width: 100%; + height: 10px; + margin-top: 10px; + overflow: scroll; + scrollbar-color:#ff0000; + scrollbar-width:2px; + overscroll-effect:none; +} + +#specificTwelve{ + width: 100%; + height: 30px; + display: grid; + background-color: #000fff; + grid-template-rows: 50px 100px 60px; + grid-rows-gap:10px; + grid-row-start: 1; + grid-row-end: 2; + grid-auto-flow:row; +} + +#specificThirteen{ + width: 100%; + height: 30px; + background-color: #fff000; + display: grid; + grid-template-columns: 50px 100px 60px; + grid-columns-gap:10px; + grid-column-start: 1; + grid-column-end: 2; + grid-auto-flow:column; +} + + +.flex-item{ + width: 40%; + height: 10px; +} + +.red-item{ + background-color: #ff0000; +} + +.green-item{ + background-color: #00ff00; +} + +.blue-item{ + background-color: #0000ff; +} + +.yellow-item{ + background-color: #fff000; +} + diff --git a/ace/ace_standard/src/main/js/default/pages/div/style/index.hml b/ace/ace_standard/src/main/js/default/pages/div/style/index.hml index 8184c24ef4cdd723060fb23229606a51fdca1675..5f72ac1c4635ce94cd1094b1e2ef76310957364f 100644 --- a/ace/ace_standard/src/main/js/default/pages/div/style/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/div/style/index.hml @@ -107,5 +107,130 @@
+
+
+
+ + div特有样式 + + + + 特有样式 flex-direction flex-wrap justify-content align-items align-content + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ + 文本 + +
+
+
+
+ + + + + 特有样式 overflow scrollbar-color scrollbar-width overscroll-effect + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + 特有样式 grid + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + +
diff --git a/ace/ace_standard/src/main/js/default/pages/div/style/index.js b/ace/ace_standard/src/main/js/default/pages/div/style/index.js index 8452f14bb05344e8032c4c0dbcf73b5b023d4e34..8179ff70cbe9fa27c38c5386a6f497949bf60f3a 100644 --- a/ace/ace_standard/src/main/js/default/pages/div/style/index.js +++ b/ace/ace_standard/src/main/js/default/pages/div/style/index.js @@ -14,104 +14,6 @@ */ export default { - data:{ - styleOne : null, - styleTwo : null, - styleThree : null, - styleFour : null, - styleFive : null, - styleSix : null, - styleSeven : null, - styleEight : null, - styleNine : null, - styleTen : null, - styleEleven : null, - styleTwelve : null, - styleThirteen : null, - styleFourteen : null, - styleFifteen : null, - styleSixteen : null, - styleSeventeen : null, - styleEighteen : null, - styleNineteen : null, - styleTwenty : null, - styleTwentyOne : null, - styleTwentyTwo : null, - styleTwentyThree : null, - styleTwentyFour : null, - styleTwentyFive : null, - styleTwentySix : null, - styleTwentySeven : null, - styleTwentyNine : null, - styleThirty : null, - styleThirtyOne : null, - styleThirtyTwo : null - }, - onShow(){ - this.getCommonStyleValues(); - globalThis.value = { - styleOne : this.styleOne, - styleTwo : this.styleTwo, - styleThree : this.styleThree, - styleFour : this.styleFour, - styleFive : this.styleFive, - styleSix : this.styleSix, - styleSeven : this.styleSeven, - styleEight : this.styleEight, - styleNine : this.styleNine, - styleTen : this.styleTen, - styleEleven : this.styleEleven, - styleTwelve : this.styleTwelve, - styleThirteen : this.styleThirteen, - styleFourteen : this.styleFourteen, - styleFifteen : this.styleFifteen, - styleSixteen : this.styleSixteen, - styleSeventeen : this.styleSeventeen, - styleEighteen : this.styleEighteen, - styleNineteen : this.styleNineteen, - styleTwenty : this.styleTwenty, - styleTwentyOne : this.styleTwentyOne, - styleTwentyTwo : this.styleTwentyTwo, - styleTwentyThree : this.styleTwentyThree, - styleTwentyFour : this.styleTwentyFour, - styleTwentyFive : this.styleTwentyFive, - styleTwentySix : this.styleTwentySix, - styleThirty : this.styleThirty, - styleThirtyOne : this.styleThirtyOne, - styleThirtyTwo : this.styleThirtyTwo - } - }, - getCommonStyleValues(){ - this.styleOne = this.$element("styleOne").getInspector() - this.styleTwo = this.$element("styleTwo").getInspector() - this.styleThree = this.$element("styleThree").getInspector() - this.styleFour = this.$element("styleFour").getInspector() - this.styleFive = this.$element("styleFive").getInspector() - this.styleSix = this.$element("styleSix").getInspector() - this.styleSeven = this.$element("styleSeven").getInspector() - this.styleEight = this.$element("styleEight").getInspector() - this.styleNine = this.$element("styleNine").getInspector() - this.styleTen = this.$element("styleTen").getInspector() - this.styleEleven = this.$element("styleEleven").getInspector() - this.styleTwelve = this.$element("styleTwelve").getInspector() - this.styleThirteen = this.$element("styleThirteen").getInspector() - this.styleFourteen = this.$element("styleFourteen").getInspector() - this.styleFifteen = this.$element("styleFifteen").getInspector() - this.styleSixteen = this.$element("styleSixteen").getInspector() - this.styleSeventeen = this.$element("styleSeventeen").getInspector() - this.styleEighteen = this.$element("styleEighteen").getInspector() - this.styleNineteen = this.$element("styleNineteen").getInspector() - this.styleTwenty = this.$element("styleTwenty").getInspector() - this.styleTwentyOne = this.$element("styleTwentyOne").getInspector() - this.styleTwentyTwo = this.$element("styleTwentyTwo").getInspector() - this.styleTwentyThree = this.$element("styleTwentyThree").getInspector() - this.styleTwentyFour = this.$element("styleTwentyFour").getInspector() - this.styleTwentyFive = this.$element("styleTwentyFive").getInspector() - this.styleTwentySix = this.$element("styleTwentySix").getInspector() - this.styleThirty = this.$element("styleThirty").getInspector() - this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() - this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() - }, } diff --git a/ace/ace_standard/src/main/js/default/pages/divider/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/index.hml deleted file mode 100644 index 318aa797b0e75160f57b7484617a078b5066fc41..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/divider/index.hml +++ /dev/null @@ -1,235 +0,0 @@ - - -
-
- - 通用样式 - - - divider通用样式1 - - - - - divider通用样式2 - - - - - divider通用样式3 - - - - - divider通用样式4 - - - - - divider通用样式5 - -
- - - - -
- - divider特有样式 - - - -
- - - - -
-
- - 通用属性 - - - divider通用属性1 - - - - - divider通用属性2 - - - - - divider通用属性3 - - - - - divider特有属性4 - - - - - divider特有属性5 - - - - - - -
- - -
- - 动画样式 - - - divider动画样式1 - - - - - divider动画样式2 - - - -
-
- - - - -
-
- - 渐变样式 - - - divider渐变样式1 - - - - - divider渐变样式2 - - - - - divider渐变样式3 - - - - - divider渐变样式4 - - - -
- - -
- - 无障碍 - - - divider无障碍1 - - - -
- - -
- - 原子布局 - - - divider原子布局1 - -
- - - - - - - - - - - - -
- - divider原子布局2 - -
- - - - - - - - - - - - -
- - divider原子布局3 - -
- - - - - - - - - - - - -
-
- - -
- - 多模输入 - - - divider多模输入1 - - - -
-
-
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/index.js b/ace/ace_standard/src/main/js/default/pages/divider/index.js deleted file mode 100644 index 65b64b6e48b2dc6b6be4862d921115d432980a03..0000000000000000000000000000000000000000 --- a/ace/ace_standard/src/main/js/default/pages/divider/index.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * 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: { - title: 'World' - }, - onShow(){ - // 通用属性 - var prop1 = this.$element("prop1"); - var name1 = prop1.dataSet.name - var prop2 = this.$refs.prop2; - var name2 = prop2.dataSet.name - prompt.showToast({ - message: 'prop1--' + name1 + '\nprop2--' + name2 - }); - } -} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..6ffcda0b1aa1040a90903ce3644a53b1b8d634d9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.css @@ -0,0 +1,367 @@ +/** + * 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; +} +#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; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..b49f099b1a260ae23ba583b9805ef4f868ce7878 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.hml @@ -0,0 +1,176 @@ + + +
+
+ + divider通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + + + + + + + + + 通用属性 -- style + + + + + + 通用属性 -- ref + + + + + + + + 通用属性 -- disabled + + + + + + + + + + 通用属性 -- focusable + + + + + + + + + + 通用属性 -- data-* + + + + + + + + 通用属性 -- click-effect + + + + + + + + + + + + 通用属性 -- dir + + + + + + + + + + + + 渲染属性 -- for + + + + + + + + + + 渲染属性 -- if + + + + + + + + + + 渲染属性 -- show + + + + + + + +
+ +
+
+
+ + divider特有属性 + + + divider特有属性 -- vertical + + + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/divider/prop/index.js b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..b270679293902bf3a2026152bc8364889d448914 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/prop/index.js @@ -0,0 +1,136 @@ +/** + * 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, + ifPropFalse : null, + ifPropNone : null, + showPropTrue : null, + showPropFalse : null, + showPropNone : null, + verticalTrue: null, + verticalFalse: 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, + ifPropFalse : this.ifPropFalse, + ifPropNone : this.ifPropNone, + showPropTrue : this.showPropTrue, + showPropFalse : this.showPropFalse, + showPropNone : this.showPropNone, + verticalTrue: this.verticalTrue, + verticalFalse: this.verticalFalse + } + }, + + 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.ifPropFalse = this.$element("ifPropFalse").getInspector() + this.ifPropNone = this.$element("ifPropNone").getInspector() + this.showPropTrue = this.$element("showPropTrue").getInspector() + this.showPropFalse = this.$element("showPropFalse").getInspector() + this.showPropNone = this.$element("showPropNone").getInspector() + return + }, + getSpecificPropValues () { + this.verticalTrue = this.$element("showPropNone").getInspector() + this.verticalTrue = this.$element("showPropNone").getInspector() + return + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/divider/router/index.css b/ace/ace_standard/src/main/js/default/pages/divider/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..fe52f6baae7dc334d720a1177293b64ac31ef7f3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/router/index.css @@ -0,0 +1,313 @@ +/** + * 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; +} + +divider { + color: darkblue; +} +.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 { + height: 200px; + margin: 10px; + color: red; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 1; +} +.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 diff --git a/ace/ace_standard/src/main/js/default/pages/divider/router/index.hml b/ace/ace_standard/src/main/js/default/pages/divider/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..bc74802387843a3114152b1ccc408990533044f1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/router/index.hml @@ -0,0 +1,259 @@ + + +
+
+ +
+ + 通用样式 + + + 仅支持如下样式 + + +
+ + + + +
+ + 动画样式 + + + + divider动画样式1 + + + + + + divider动画样式2 + + + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + divider通用属性1 + + + + + + divider通用属性2 + + + + + + divider通用属性3 + + + + + + divider特有属性4 + + + + + + divider特有属性5 + + + +
+
+
+ +
+ + 通用事件 + + + divider不支持通用事件 + +
+
+
+ +
+ + 通用方法 + + + divider不支持通用方法 + +
+
+ +
+
+ +
+ +
+ + 渐变样式 + + + + divider渐变样式1 + + + + + + divider渐变样式2 + + + + + + divider渐变样式3 + + + + + + divider渐变样式4 + + + +
+
+
+ +
+ + 无障碍 + + + divider无障碍1 + + + +
+
+
+
+ + 原子布局 + + + divider原子布局1 + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + divider原子布局2 + +
+ + + + + + + + + + + + +
+ + divider原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + divider多模输入1 + + + +
+
+
+
+ + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/divider/router/index.js b/ace/ace_standard/src/main/js/default/pages/divider/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e778c4f80c3511b6e8afb82048d2e37dbf378034 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/divider/router/index.js @@ -0,0 +1,104 @@ +/** + * 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 + }) + }, + + 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 + }); + }, +} diff --git a/ace/ace_standard/src/main/js/default/test/List.test.js b/ace/ace_standard/src/main/js/default/test/List.test.js index d94ccd962afa3bb754ee57ade578b18cb33742d7..c7891cac15fd1ca9948b462795cecb780d79633e 100755 --- a/ace/ace_standard/src/main/js/default/test/List.test.js +++ b/ace/ace_standard/src/main/js/default/test/List.test.js @@ -17,4 +17,5 @@ require('./basicabilityapi.test.js') require('./mediaquery.test.js') require('./commonComponentJsApi.test.js') require('./divProps.test.js') +require('./buttonProps.test.js') diff --git a/ace/ace_standard/src/main/js/default/test/buttonProps.test.js b/ace/ace_standard/src/main/js/default/test/buttonProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..f451b8f2307de15b73650cae3866a2afcbf7d766 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/test/buttonProps.test.js @@ -0,0 +1,979 @@ +/* + * Copyright (C) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@system.router'; +import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('buttonPropsJsTest', function () { + + async function sleep(time) { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve() + }, time) + }).then(() => { + console.info(`sleep ${time} over...`) + }) + }; + async function backToIndex() { + let backToIndexPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.back({ + uri: 'pages/button/prop/index' + }); + resolve(); + }, 500); + }); + let clearPromise = new Promise((resolve, reject) => { + setTimeout(() => { + router.clear(); + resolve(); + }, 500); + }); + await backToIndexPromise.then(() => { + return clearPromise; + }); + } + /** + * run before testcase + */ + beforeAll(async function (done) { + console.info('[buttonPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/button/prop/index' + } + try { + result = router.push(options) + console.info("push buttonProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push buttonProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }); + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[buttonPropsJsTest] after each called') + await backToIndex(); + await sleep(1000) + }); + + // 通用属性 + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonIdProp + * @tc.desc ACE + */ + it('testButtonIdProp', 0, async function (done) { + console.info('testButtonIdProp START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + it('testButtonClassProp', 0, async function (done) { + console.info('testButtonClassProp START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClassPropNone + * @tc.desc ACE + */ + it('testButtonClassPropNone', 0, async function (done) { + console.info('testButtonClassPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[buttonProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonRefProp + * @tc.desc ACE + */ + it('testButtonRefProp', 0, async function (done) { + console.info('testButtonRefProp START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonRefPropNone + * @tc.desc ACE + */ + it('testButtonRefPropNone', 0, async function (done) { + console.info('testButtonRefPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[buttonProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDisabledPropTrue + * @tc.desc ACE + */ + it('testButtonDisabledPropTrue', 0, async function (done) { + console.info('testButtonDisabledPropTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('disabledPropTrue') + expect(obj.$attrs.disabled).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDisabledPropFalse + * @tc.desc ACE + */ + it('testButtonDisabledPropFalse', 0, async function (done) { + console.info('testButtonDisabledPropFalse START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropFalse); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('disabledPropFalse') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDisabledPropNone + * @tc.desc ACE + */ + it('testButtonDisabledPropNone', 0, async function (done) { + console.info('testButtonDisabledPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('disabledPropNone') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonFocusablePropTrue + * @tc.desc ACE + */ + it('testButtonFocusablePropTrue', 0, async function (done) { + console.info('testButtonFocusablePropTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('focusablePropTrue') + expect(obj.$attrs.focusable).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonFocusablePropFalse + * @tc.desc ACE + */ + it('testButtonFocusablePropFalse', 0, async function (done) { + console.info('testButtonFocusablePropFalse START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropFalse); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('focusablePropFalse') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonFocusablePropNone + * @tc.desc ACE + */ + it('testButtonFocusablePropNone', 0, async function (done) { + console.info('testButtonFocusablePropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('focusablePropNone') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDataProp + * @tc.desc ACE + */ + it('testButtonDataProp', 0, async function (done) { + console.info('testButtonDataProp START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.dataButton).assertEqual(undefined); + console.info("[buttonProps] get dataButton value is: " + JSON.stringify(obj.$attrs.dataButton)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDataPropNone + * @tc.desc ACE + */ + it('testButtonDataPropNone', 0, async function (done) { + console.info('testButtonDataPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.dataButton).assertEqual(undefined) + console.info("[buttonProps] get dataButton value is: " + JSON.stringify(obj.$attrs.dataButton)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClickEffectPropSmall + * @tc.desc ACE + */ + it('testButtonClickEffectPropSmall', 0, async function (done) { + console.info('testButtonClickEffectPropSmall START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('clickEffectPropSmall') + expect(obj.$attrs.clickEffect).assertEqual('spring-small') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClickEffectPropMedium + * @tc.desc ACE + */ + it('testButtonClickEffectPropMedium', 0, async function (done) { + console.info('testButtonClickEffectPropMedium START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('clickEffectPropMedium') + expect(obj.$attrs.clickEffect).assertEqual('spring-medium') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClickEffectPropLarge + * @tc.desc ACE + */ + it('testButtonClickEffectPropLarge', 0, async function (done) { + console.info('testButtonClickEffectPropLarge START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('clickEffectPropLarge') + expect(obj.$attrs.clickEffect).assertEqual('spring-large') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonClickEffectPropNone + * @tc.desc ACE + */ + it('testButtonClickEffectPropNone', 0, async function (done) { + console.info('testButtonClickEffectPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[buttonProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDirPropRtl + * @tc.desc ACE + */ + it('testButtonDirPropRtl', 0, async function (done) { + console.info('testButtonDirPropRtl START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDirPropLtr + * @tc.desc ACE + */ + it('testButtonDirPropLtr', 0, async function (done) { + console.info('testButtonDirPropLtr START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDirPropAuto + * @tc.desc ACE + */ + it('testButtonDirPropAuto', 0, async function (done) { + console.info('testButtonDirPropAuto START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonDirPropNone + * @tc.desc ACE + */ + it('testButtonDirPropNone', 0, async function (done) { + console.info('testButtonDirPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonForPropNull + * @tc.desc ACE + */ + it('testButtonForPropNull', 0, async function (done) { + console.info('testButtonForPropNull START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropNull); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('forPropNull') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonForPropOne + * @tc.desc ACE + */ + it('testButtonForPropOne', 0, async function (done) { + console.info('testButtonForPropOne START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropOne); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('forPropOne') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonForPropThree + * @tc.desc ACE + */ + it('testButtonForPropThree', 0, async function (done) { + console.info('testButtonForPropThree START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.forPropThree); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('forPropThree') + expect(obj.$attrs.for).assertEqual(undefined) + console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.for)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonIfPropTrue + * @tc.desc ACE + */ + it('testButtonIfPropTrue', 0, async function (done) { + console.info('testButtonIfPropTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.ifPropTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('ifPropTrue') + expect(obj.$attrs.if).assertEqual(undefined) + console.info("[buttonProps] get for value is: " + JSON.stringify(obj.$attrs.if)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonShowPropTrue + * @tc.desc ACE + */ + it('testButtonShowPropTrue', 0, async function (done) { + console.info('testButtonShowPropTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('showPropTrue') + expect(obj.$attrs.show).assertEqual('true') + console.info("[buttonProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonShowPropFalse + * @tc.desc ACE + */ + it('testButtonShowPropFalse', 0, async function (done) { + console.info('testButtonShowPropFalse START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropFalse); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('showPropFalse') + expect(obj.$attrs.show).assertEqual('false') + console.info("[buttonProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonShowPropNone + * @tc.desc ACE + */ + it('testButtonShowPropNone', 0, async function (done) { + console.info('testButtonShowPropNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.showPropNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('showPropNone') + expect(obj.$attrs.show).assertEqual('false') + console.info("[buttonProps] get show value is: " + JSON.stringify(obj.$attrs.show)); + done(); + }); + + // 特有属性 + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeArc + * @tc.desc ACE + */ + it('testButtonTypeArc', 0, async function (done) { + console.info('testButtonTypeArc START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeArc); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeArc') + expect(obj.$attrs.type).assertEqual('arc') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeCapsule + * @tc.desc ACE + */ + it('testButtonTypeCapsule', 0, async function (done) { + console.info('testButtonTypeCapsule START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeCapsule); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeCapsule') + expect(obj.$attrs.type).assertEqual('capsule') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeCircle + * @tc.desc ACE + */ + it('testButtonTypeCircle', 0, async function (done) { + console.info('testButtonTypeCircle START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeCircle); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeCircle') + expect(obj.$attrs.type).assertEqual('circle') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeText + * @tc.desc ACE + */ + it('testButtonTypeText', 0, async function (done) { + console.info('testButtonTypeText START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeText); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeText') + expect(obj.$attrs.type).assertEqual('text') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeDownload + * @tc.desc ACE + */ + it('testButtonTypeDownload', 0, async function (done) { + console.info('testButtonTypeDownload START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeDownload); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeDownload') + expect(obj.$attrs.type).assertEqual('download') + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonTypeNone + * @tc.desc ACE + */ + it('testButtonTypeNone', 0, async function (done) { + console.info('testButtonTypeNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.typeNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('typeNone') + expect(obj.$attrs.type).assertEqual(undefined) + console.info("[buttonProps] get type value is: " + JSON.stringify(obj.$attrs.type)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonValue + * @tc.desc ACE + */ + it('testButtonValue', 0, async function (done) { + console.info('testButtonValue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.value); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('value') + expect(obj.$attrs.value).assertEqual('按钮') + console.info("[buttonProps] get value value is: " + JSON.stringify(obj.$attrs.value)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonValueNone + * @tc.desc ACE + */ + it('testButtonValueNone', 0, async function (done) { + console.info('testButtonValueNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.valueNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('valueNone') + expect(obj.$attrs.value).assertEqual(undefined) + console.info("[buttonProps] get value value is: " + JSON.stringify(obj.$attrs.value)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonIcon + * @tc.desc ACE + */ + it('testButtonIcon', 0, async function (done) { + console.info('testButtonIcon START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.icon); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('icon') + expect(obj.$attrs.icon).assertEqual('common/images/image.png') + console.info("[buttonProps] get icon value is: " + JSON.stringify(obj.$attrs.icon)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonIconNone + * @tc.desc ACE + */ + it('testButtonIconNone', 0, async function (done) { + console.info('testButtonIconNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.iconNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('iconNone') + expect(obj.$attrs.icon).assertEqual(undefined) + console.info("[buttonProps] get icon value is: " + JSON.stringify(obj.$attrs.icon)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementStart + * @tc.desc ACE + */ + it('testButtonPlacementStart', 0, async function (done) { + console.info('testButtonPlacementStart START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementStart); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementStart') + expect(obj.$attrs.placement).assertEqual('start') + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementEnd + * @tc.desc ACE + */ + it('testButtonPlacementEnd', 0, async function (done) { + console.info('testButtonPlacementEnd START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementEnd); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementEnd') + expect(obj.$attrs.placement).assertEqual('end') + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementTop + * @tc.desc ACE + */ + it('testButtonPlacementTop', 0, async function (done) { + console.info('testButtonPlacementTop START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementTop); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementTop') + expect(obj.$attrs.placement).assertEqual('top') + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementBottom + * @tc.desc ACE + */ + it('testButtonPlacementBottom', 0, async function (done) { + console.info('testButtonPlacementBottom START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementBottom); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementBottom') + expect(obj.$attrs.placement).assertEqual('bottom') + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonPlacementNone + * @tc.desc ACE + */ + it('testButtonPlacementNone', 0, async function (done) { + console.info('testButtonPlacementNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.placementNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('placementNone') + expect(obj.$attrs.placement).assertEqual(undefined) + console.info("[buttonProps] get placement value is: " + JSON.stringify(obj.$attrs.placement)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonWaitingTrue + * @tc.desc ACE + */ + it('testButtonWaitingTrue', 0, async function (done) { + console.info('testButtonWaitingTrue START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.waitingTrue); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('waitingTrue') + expect(obj.$attrs.waiting).assertEqual(true) + console.info("[buttonProps] get waiting value is: " + JSON.stringify(obj.$attrs.waiting)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonWaitingFalse + * @tc.desc ACE + */ + it('testButtonWaitingFalse', 0, async function (done) { + console.info('testButtonWaitingFalse START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.waitingFalse); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('waitingFalse') + expect(obj.$attrs.waiting).assertEqual(false) + console.info("[buttonProps] get waiting value is: " + JSON.stringify(obj.$attrs.waiting)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testButtonWaitingNone + * @tc.desc ACE + */ + it('testButtonWaitingNone', 0, async function (done) { + console.info('testButtonWaitingNone START'); + console.info("[buttonProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.waitingNone); + console.info("[buttonProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[buttonProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('button') + expect(obj.$attrs.id).assertEqual('waitingNone') + expect(obj.$attrs.waiting).assertEqual(undefined) + console.info("[buttonProps] get waiting value is: " + JSON.stringify(obj.$attrs.waiting)); + done(); + }); +}); diff --git a/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js b/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js index 9ff038b3cc5d298de45aa64bad0bfce1b32d8bc7..bae77db46e23896640a550b8d51c5f2a05b95ba0 100644 --- a/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js +++ b/ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js @@ -89,7 +89,7 @@ describe('aceJsTest', function () { console.info('testButtonComponent START'); let result; let options = { - uri: 'pages/button/index' + uri: 'pages/button/router/index' } try { result = router.push(options) @@ -100,7 +100,7 @@ describe('aceJsTest', function () { await sleep(1000) let pages = router.getState(); console.info("[router.button] getState" + JSON.stringify(pages)); - expect("pages/button/").assertEqual(pages.path); + expect("pages/button/router/").assertEqual(pages.path); done(); }); @@ -227,7 +227,7 @@ describe('aceJsTest', function () { it('testDividerComponent', 0, async function (done) { let result; let options = { - uri: 'pages/divider/index' + uri: 'pages/divider/router/index' } try { result = router.push(options) @@ -236,7 +236,7 @@ describe('aceJsTest', function () { } await sleep(1000) let pages = router.getState(); - expect("pages/divider/").assertEqual(pages.path); + expect("pages/divider/router/").assertEqual(pages.path); done(); }); diff --git a/ace/ace_standard/src/main/js/default/test/divProps.test.js b/ace/ace_standard/src/main/js/default/test/divProps.test.js index a2afd6f2ea0ce2b00a18600d1c87a4b01ea31d60..a2eac02ffc27a4b87b577c9f4a610bd15b9dabdb 100644 --- a/ace/ace_standard/src/main/js/default/test/divProps.test.js +++ b/ace/ace_standard/src/main/js/default/test/divProps.test.js @@ -27,7 +27,7 @@ describe('divPropsJsTest', function () { }).then(() => { console.info(`sleep ${time} over...`) }) - } + }; async function backToIndex() { let backToIndexPromise = new Promise((resolve, reject) => { @@ -158,7 +158,6 @@ describe('divPropsJsTest', function () { // expect(obj.$styles.height).assertEqual(undefined); // console.info("[divProps] get style height value is: " + JSON.stringify(obj.$styles.height)); // expect(obj.$styles.get('background-color')).assertEqual(undefined); -// console.info("[divProps] get style background-color value is: " + JSON.stringify(obj.$styles.get('background-color'))); // done(); // });