diff --git a/arkui/ace_standard/src/main/config.json b/arkui/ace_standard/src/main/config.json index bd79f2c78fb833150340151bebc9e6759945a206..41d30d7e23c14bfdf2bdc27b224e8e83ce9e62ac 100644 --- a/arkui/ace_standard/src/main/config.json +++ b/arkui/ace_standard/src/main/config.json @@ -75,6 +75,7 @@ "pages/rating/style/index", "pages/search/router/index", "pages/search/prop/index", + "pages/search/style/index", "pages/toolbar/prop/index", "pages/toolbar/router/index", "pages/toolbarItem/prop/index", @@ -113,8 +114,10 @@ "pages/badge/style/index", "pages/dialog/router/index", "pages/dialog/prop/index", + "pages/dialog/style/index", "pages/form/router/index", "pages/form/prop/index", + "pages/form/style/index", "pages/list/router/index", "pages/list/prop/index", "pages/list/style/index", @@ -128,6 +131,7 @@ "pages/marquee/prop/index", "pages/imageAnimator/prop/index", "pages/imageAnimator/router/index", + "pages/imageAnimator/style/index", "pages/panel/router/index", "pages/panel/prop/index", "pages/panel/style/index", @@ -148,6 +152,7 @@ "pages/stepperItem/style/index", "pages/swiper/router/index", "pages/swiper/prop/index", + "pages/swiper/style/index", "pages/tabs/router/index", "pages/tabs/prop/index", "pages/tab-bar/router/index", @@ -158,12 +163,15 @@ "pages/svg_text/router/index", "pages/video/prop/index", "pages/video/router/index", + "pages/video/style/index", "pages/gridContainer/prop/index", "pages/gridContainer/router/index", "pages/gridRow/prop/index", "pages/gridRow/router/index", + "pages/gridRow/style/index", "pages/gridCol/prop/index", "pages/gridCol/router/index", + "pages/gridCol/style/index", "pages/canvas/prop/index", "pages/canvas/router/index", "pages/canvas/style/index", @@ -210,6 +218,7 @@ "pages/chart/prop/index", "pages/image/prop/index", "pages/span/prop/index", + "pages/span/style/index", "pages/menu/prop/index", "pages/switch/prop/index", "pages/slider/prop/index", @@ -221,7 +230,12 @@ "pages/circle/router/index", "pages/richtext/prop/index", "pages/richtext/router/index", - "pages/richtext/style/index" + "pages/richtext/style/index", + "pages/camera/prop/index", + "pages/camera/router/index", + "pages/camera/style/index", + "pages/web/prop/index", + "pages/web/router/index" ], "name": "default", "window": { diff --git a/arkui/ace_standard/src/main/js/default/pages/button/style/index.css b/arkui/ace_standard/src/main/js/default/pages/button/style/index.css index c15a051796c96cd07bc7fb85f99c5707ccfbe737..57d1bc9110de106450cb0aeaa4fc6e8ffba4d3e3 100644 --- a/arkui/ace_standard/src/main/js/default/pages/button/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/button/style/index.css @@ -549,6 +549,8 @@ #addTwo{ width: 100px; height: 15px; + font-size:14px; + allow-scale:true; background-image:url('common/images/image.png'); background-size:auto; position:relative; @@ -564,6 +566,7 @@ #addThree{ width: 100px; height: 15px; + allow-scale:false; background-color:#000000; transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2); clip-path:content-box; @@ -574,6 +577,7 @@ #addFour{ width: 100px; height: 15px; + font-style:normal; background-color:#000000; transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px); clip-path:circle(1); @@ -584,6 +588,7 @@ #addFive{ width: 100px; height: 15px; + font-style:italic; background-color:#000000; transform: translateY(1px) translateZ(10px) scale(1,2) scaleZ(0.4) @@ -606,38 +611,59 @@ #addSeven{ width: 100px; height: 15px; + text-color:#ff0000; + font-family:sans-serif; background-color:#000000; clip-path:path(1); aspect-ratio:2; font-weight:400; } -#addSeven:disabled{ +#addEight{ width: 100px; height: 15px; + icon-width:100px; + icon-height:15px; background-color:#ff0000; font-weight:500; } -#addSeven:active{ +#addNine{ width: 100px; height: 15px; + radius:5px; background-color:#ff0000; font-weight:600; } -#addSeven:focus{ - width: 100px; - height: 15px; +#addTen{ + width: 90px; + height: 16px; + icon-width:90px; + icon-height:16px; + radius:3px; background-color:#ff0000; font-weight:700; } -#addSeven:waiting{ - width: 100px; - height: 15px; +#addEleven{ + width: 91px; + height: 17px; + icon-width:91px; + icon-height:17px; + radius:4px; background-color:#ff0000; - font-weight:700; + font-weight:500; +} + +#addTwelve{ + width: 93px; + height: 18px; + icon-width:93px; + icon-height:18px; + radius:6px; + background-color:#ff0000; + font-weight:600; } @font-face { diff --git a/arkui/ace_standard/src/main/js/default/pages/button/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/button/style/index.hml index 1b9567c4fb13a5f6ffc80b061a05d64640cda4d7..9095193a6d2ea50a31381914b53e4193c939531e 100644 --- a/arkui/ace_standard/src/main/js/default/pages/button/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/button/style/index.hml @@ -123,32 +123,30 @@ 特有样式 -
- - - - - - - - - - - - -
+ + + + + + + + + + + + diff --git a/arkui/ace_standard/src/main/js/default/pages/button/style/index.js b/arkui/ace_standard/src/main/js/default/pages/button/style/index.js index 8179ff70cbe9fa27c38c5386a6f497949bf60f3a..6d92470a97526b249d4e283f9a96f15533dc526a 100644 --- a/arkui/ace_standard/src/main/js/default/pages/button/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/button/style/index.js @@ -14,6 +14,146 @@ */ 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, + addOne : null, + addTwo : null, + addThree : null, + addFour : null, + addFive : null, + addSix : null, + addSeven : null, + addEight : null, + addNine : null, + addTen : null, + addEleven : null, + addTwelve : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + + addOne : this.addOne, + addTwo : this.addTwo, + addThree : this.addThree, + addFour : this.addFour, + addFive : this.addFive, + addSix : this.addSix, + addSeven : this.addSeven, + addEight : this.addEight, + addNine : this.addNine, + addTen : this.addTen, + addEleven : this.addEleven, + addTwelve : this.addTwelve + } + }, + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + this.addOne = this.$element("addOne").getInspector() + this.addTwo = this.$element("addTwo").getInspector() + this.addThree = this.$element("addThree").getInspector() + this.addFour = this.$element("addFour").getInspector() + this.addFive = this.$element("addFive").getInspector() + this.addSix = this.$element("addSix").getInspector() + this.addSeven = this.$element("addSeven").getInspector() + this.addEight = this.$element("addEight").getInspector() + this.addNine = this.$element("addNine").getInspector() + this.addTen = this.$element("addTen").getInspector() + this.addEleven = this.$element("addEleven").getInspector() + this.addTwelve = this.$element("addTwelve").getInspector() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/camera/prop/index.css b/arkui/ace_standard/src/main/js/default/pages/camera/prop/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e46137e679e5ddb0e1339352afb635e4fb71bbd4 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/camera/prop/index.css @@ -0,0 +1,566 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.prop-container{ + flex-direction: column; + flex-weight: 1; +} + +#idProp { + height: 15px; + margin-bottom: 2px; + background-color:#f00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.classProp { + height: 15px; + margin-bottom: 2px; + background-color:#0f0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#classPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000e0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refProp { + height: 15px; + margin-bottom: 2px; + background-color:#00f000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#refPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00000e; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#000f00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0000f0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#disabledPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#d00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#00000f; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#ff0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#focusablePropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0d0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataProp { + height: 15px; + margin-bottom: 2px; + background-color:#0ff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#00d000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropSmall { + height: 15px; + margin-bottom: 2px; + background-color:#00ff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropMedium { + height: 15px; + margin-bottom: 2px; + background-color:#000ff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropLarge { + height: 15px; + margin-bottom: 2px; + background-color:#fff000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#clickEffectPropNone{ + height: 15px; + margin-bottom: 2px; + background-color:#000d00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropRtl { + height: 15px; + margin-bottom: 2px; + background-color:#0fff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropAuto { + height: 15px; + margin-bottom: 2px; + background-color:#00fff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropLtr { + height: 15px; + margin-bottom: 2px; + background-color:#000fff; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dirPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#0000d0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropNull { + height: 15px; + margin-bottom: 2px; + background-color:#ffff00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropOne { + height: 15px; + margin-bottom: 2px; + background-color:#00e000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#forPropThree { + height: 15px; + margin-bottom: 2px; + background-color:#000e00; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#ifPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#0ffff0; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropTrue { + height: 15px; + margin-bottom: 2px; + background-color:#e00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropFalse { + height: 15px; + margin-bottom: 2px; + background-color:#0e0000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showPropNone { + height: 15px; + margin-bottom: 2px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#typeBar{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; +} + +#typeLine{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeGauge{ + height: 50px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeProgress{ + height: 50px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeLoading{ + height: 50px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeRainbow{ + height: 50px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#typeNone{ + height: 15px; + font-size: 10px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#options{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#optionsNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#datasets{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#datasetsNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#segmentsSeg{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#segmentsRain{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#segmentsNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#effectsTrue{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#effectsFalse{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#effectsNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#animationduration{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} +#animationdurationNone{ + height: 15px; + margin-bottom: 3px; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +.propNewAdd{ + 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/arkui/ace_standard/src/main/js/default/pages/camera/prop/index.hml b/arkui/ace_standard/src/main/js/default/pages/camera/prop/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..dbc0b9e6e349df6647d8c90e6c0aa5cb7e119b3a --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/camera/prop/index.hml @@ -0,0 +1,160 @@ + + +
+
+ + camera通用属性 + + + + 通用属性 -- id + + + + + + 通用属性 -- class + + + + + + + + 通用属性 -- style + + + + + + 通用属性 -- ref + + + + + + + + 通用属性 -- disabled + + + + + + + + + + 通用属性 -- focusable + + + + + + + + + + 通用属性 -- data-* + + + + + + + + 通用属性 -- click-effect + + + + + + + + + + + + 通用属性 -- dir + + + + + + + + + +
+ +
+
+
+ + camera特有属性 + + + + 特有属性 -- flash + + + + + + + + + + + + 特有属性 -- deviceposition + + + + + + + +
+
diff --git a/arkui/ace_standard/src/main/js/default/pages/camera/prop/index.js b/arkui/ace_standard/src/main/js/default/pages/camera/prop/index.js new file mode 100644 index 0000000000000000000000000000000000000000..76bba76b81b6e9bfa06cf938723b213d65b029d2 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/camera/prop/index.js @@ -0,0 +1,172 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; + +export default { + data:{ + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', + data: [763, 550, 551, 554, 731, 654, 525, 696, + 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + loop: { + margin: 2, + gradient: true, + } + } + }, + lineSeg:{ + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'蔬菜' + }, + lineRain:[ + { + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'蔬菜' + }, + { + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'水果' + } + ], + listOne:[{}], + listThree:[{},{},{}], + idProp : null, + classProp : null, + classPropNone : null, + styleProp : null, + refProp : null, + refPropNone : null, + disabledPropTrue : null, + disabledPropFalse : null, + disabledPropNone : null, + focusablePropTrue : null, + focusablePropFalse : null, + focusablePropNone : null, + dataProp : null, + dataPropNone : null, + clickEffectPropSmall : null, + clickEffectPropMedium : null, + clickEffectPropLarge : null, + clickEffectPropNone : null, + dirPropRtl : null, + dirPropAuto : null, + dirPropLtr : null, + dirPropNone : null, + + flashOn:null, + flashOff:null, + flashTorch:null, + flashNone:null, + devicePositionFront:null, + devicePositionBack:null, + devicePositionNone: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, + + flashOn:this.flashOn, + flashOff:this.flashOff, + flashTorch:this.flashTorch, + flashNone:this.flashNone, + devicePositionFront:this.devicePositionFront, + devicePositionBack:this.devicePositionBack, + devicePositionNone:this.devicePositionNone, + + } + }, + 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() + }, + getSpecificPropValues(){ + this.flashOn = this.$element("flashOn").getInspector() + this.flashOff = this.$element("flashOff").getInspector() + this.flashTorch = this.$element("flashTorch").getInspector() + this.flashNone = this.$element("flashNone").getInspector() + this.devicePositionFront = this.$element("devicePositionFront").getInspector() + this.devicePositionBack = this.$element("devicePositionBack").getInspector() + this.devicePositionNone = this.$element("devicePositionNone").getInspector() + } +} diff --git a/arkui/ace_standard/src/main/js/default/pages/camera/router/index.css b/arkui/ace_standard/src/main/js/default/pages/camera/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..d77b89325dabef0f85a194293e5b9d195c00bcbf --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/camera/router/index.css @@ -0,0 +1,371 @@ +/** + * 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: 80%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 35%; +} + +.function-container{ + flex-direction: column; + height: 30%; +} + +.gradient-container{ + flex-direction: column; + height: 40%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 45%; +} + +.multimode-container{ + flex-direction: column; + height: 45%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + font-weight: bold; + text-align: center; +} +.sub-title{ + width: 100%; + height: 25px; + font-size: 15px; + text-align: left; + margin-bottom: 1px; + padding: 2px; +} + +.style1{ + width: 60px; + height:30px; + left:5px; + top:5px; +} + +.style2{ + width: 61px; + height:29px; + left:3px; + top:3px; +} + +.style3{ + width: 55px; + height:32px; + left:3px; + top:2px; +} + +.style4{ + width: 54px; + height:32px; + left:3px; + top:2px; +} + +.style5{ + width: 53px; + height:32px; + left:3px; + top:2px; +} + +.style6{ + width: 52px; + height:32px; + left:2px; + top:7px; +} + +.style7 { + width: 51px; + height:32px; + left:3px; + top:6px; +} + +.style8 { + width: 57px; + height:36px; + left:3px; + top:4px; +} + +.event1{ + width: 100%; + height: 30px; + background-color: salmon; +} + +.event2{ + width: 100%; + height: 30px; + background-color: darkorchid; +} + +.event3{ + width: 100%; + height: 30px; + background-color: #ad4e2a; +} + +.event4{ + width: 100%; + height: 30px; + background-color: blanchedalmond; +} + +.event5{ + width: 100%; + height: 40px; + background-color: blanchedalmond; +} + + +#prop1 { + background-color: mediumslateblue; + height: 20px; + margin: 2px; +} + +.prop2 { + background-color: salmon; + height: 20px; + margin: 2px; +} + +.prop4 { + background-color: skyblue; + height: 20px; + margin: 2px; +} + +.prop5 { + background-color: gold; + height: 20px; + width: 100%; + margin: 2px; + stroke-width:10px; + start-angle:90; + total-angle:180; + font-family:sans-serif; + font-size:25px; + center-x:10px; + center-y:10px; + radius:5px; + colors:salmon,sandybrown,gold,black; + weights:2,2,2; +} +.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; + stroke-width:10px; + start-angle:90; + total-angle:180; + font-family:sans-serif; + font-size:25px; +} + +.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; + background-color: chartreuse; +} + +.atom1{ + background-color: saddlebrown; + width: 40px; + height: 40px; +} +.atom2{ + background-color: blueviolet; + width: 40px; + height: 40px; +} +.atom3{ + background-color: aquamarine; + width: 40px; + height: 40px; +} + +.multimode1{ + background-color: firebrick; + height: 40px; + 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: 10px; + overflow: scroll; +} \ No newline at end of file diff --git a/arkui/ace_standard/src/main/js/default/pages/camera/router/index.hml b/arkui/ace_standard/src/main/js/default/pages/camera/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..9707ac27636190cc528ff4865b622ba991482f52 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/camera/router/index.hml @@ -0,0 +1,334 @@ + + +
+
+ +
+ + 通用样式 + + + + camera通用样式1 + + + + + + camera通用样式2 + + + + + + camera通用样式3 + + + + + + camera通用样式4 + + + + + + camera通用样式5 + +
+ + + + +
+ + + camera特有样式 + + + +
+
+ +
+
+ +
+ +
+ + 通用属性 + + + camera通用属性1 + + + + + + camera通用属性2 + + + + + + camera通用属性3 + + + + + + camera特有属性4 + + + + + + camera特有属性5 + + + + + + camera特有属性6 + + + + + camera特有属性7 + + + + + + camera特有属性7 + + + +
+
+
+ +
+ + 通用事件 + + + camera通用事件1 + + + + + + camera通用事件2 + + + + + + camera通用事件3 + + + +
+
+
+ +
+ + 通用方法 + + + camera通用方法1 + + + + + + camera通用方法2 + + + + + + camera通用方法3 + + + + + + camera特有事件1 + + + + +
+
+ +
+
+ +
+ +
+ + 渐变样式 + + + + camera渐变样式1 + + + + + + camera渐变样式2 + + + + + + camera渐变样式3 + + + + + + camera渐变样式4 + + + +
+
+
+ +
+ + 无障碍 + + + camera无障碍1 + + + +
+
+
+ +
+ + 原子布局 + + + camera原子布局1 + +
+ + + + + + +
+ + camera原子布局2 + +
+ + + + + + +
+ + camera原子布局3 + +
+ + + + + + +
+
+
+
+ + 多模输入 + + + camera多模输入1 + + + +
+
+
+
+ + + + + + diff --git a/arkui/ace_standard/src/main/js/default/pages/camera/router/index.js b/arkui/ace_standard/src/main/js/default/pages/camera/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..a822f7b62d3a5828d882a775e06aa3e882d9afb8 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/camera/router/index.js @@ -0,0 +1,565 @@ +/** + * 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: { + lineData: [ + { + strokeColor: '#0081ff', + fillColor: '#cce5ff', + data: [763, 550, 551, 554, 731, 654, 525, 696, + 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716], + gradient: true, + } + ], + lineOps: { + xAxis: { + min: 0, + max: 20, + display: false, + }, + yAxis: { + min: 0, + max: 1000, + display: false, + }, + series: { + lineStyle: { + width: "5px", + smooth: true, + }, + headPoint: { + shape: "circle", + size: 20, + strokeWidth: 5, + fillColor: '#ffffff', + strokeColor: '#007aff', + display: true, + }, + loop: { + margin: 2, + gradient: true, + } + } + }, + lineSeg:{ + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'蔬菜' + }, + lineRain:[ + { + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'蔬菜' + }, + { + startColor:'#f7ce00', + endColor:'#d9542b', + value:50, + name:'水果' + } + ] + }, + + onAccessibility(event) { + if (event.eventType == 1) { + // Do Something + } + console.log("onAccessibility" + JSON.stringify(event)); + }, + + addData() { + this.$refs.linechart.append({ + serial: 0, + data: [Math.floor(Math.random() * 400) + 400] + }) + }, + + 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/arkui/ace_standard/src/main/js/default/pages/camera/style/index.css b/arkui/ace_standard/src/main/js/default/pages/camera/style/index.css new file mode 100644 index 0000000000000000000000000000000000000000..1c709093bc961c7cfc339ae972ed4bd8deb99b6f --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/camera/style/index.css @@ -0,0 +1,614 @@ +/** + * 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 '../../../common/style.css'; + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +#styleOne{ + width: 150px; + height: 150px; + position: absolute; + left: 10px; + top: 20px; + +} + +#styleTwo{ + width: 150px; + height: 200px; + position: absolute; + left: 10px; + top: 20px; +} + +#styleThree{ + width: 50px; + height: 20px; + padding: 2px; + margin:1px; + border-left: 1px solid #ff0000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + opacity: 1; + align-self:baseline; +} + +#styleFour{ + width: 50px; + height: 20px; + align-self:center; + border: 2px solid #00ff00; +} + +#styleFive{ + width: 150px; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleSix{ + width: 100%; + height: 2%; + background-color: #ff0000; + padding-top: 1%; + padding-left: 2%; + padding-right: 3%; + padding-bottom: 0.5%; + margin-left: 1%; + margin-top: 2%; + margin-right: 1.5%; + margin-bottom: 0.5%; +} + +#styleSeven{ + width: 70%; + height: 1%; + padding-start: 1%; + padding-end: 2%; + margin-start: 1%; + margin-end: 2%; + background-color: #00ff00; +} + +#styleEight{ + width: 60%; + height: 1%; + margin: 1%; + padding: 2%; + background-color: #0000ff; +} + +#styleNine{ + width: 100%; + height: 40px; + display:flex; +} + +#styleFive{ + width: 100%; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleTen{ + width: 100%; + height: 400%; + display: none; + background-color: #ff0000; +} + +#styleEleven{ + height: 40%; + background-color: #00ff00; + flex:1 1 20px; + z-index:10; +} + +#styleTwelve{ + height: 50%; + background-color: #ff00ff; + flex-grow:2; + flex-shrink: 3; + flex-basis: 30px; + z-index:13; +} + +#styleThirteen{ + position: absolute; + left: 10px; + top: 20px; + width: 10px; + height: 10px; + background-color: #00ff00; + z-index:12; +} + +#styleFourteen{ + position: absolute; + right: 10px; + bottom: 20px; + width: 10px; + height: 10px; + background-color: #0000ff; + z-index:3; +} + +#styleFifteen{ + position: absolute; + left: 10%; + top: 20%; + width: 10px; + height: 10px; + background-color: #fff000; + z-index:5; + font-weight:800; +} + +#styleSixteen{ + position: absolute; + right: 10%; + bottom: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:15; + font-weight:900; +} + +#styleSeventeen{ + position: absolute; + start: 50px; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:7; +} + +#styleEighteen{ + position: absolute; + end: 20px; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:4; +} + +#styleNineteen{ + position: absolute; + start: 20%; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:1; +} + +#styleTwenty{ + position: absolute; + end: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:17; +} + +#styleTwentyOne{ + height: 20px; + box-shadow: 2px 4px; + flex-weight: 1; + margin:5px; +} + +#styleTwentyTwo{ + flex-weight: 1; + height: 20px; + box-shadow: 2px 4px 6px 8px; + margin:5px; +} + +#styleTwentyThree{ + flex-weight: 1; + height: 20px; + box-shadow: 1px 2px 3px 4px #ff0000; + margin:5px; +} + +#styleTwentyFour{ + width: 150px; + height: 20px; + background-color: #00ffff; + clip-path:inset(2 23); + visibility: visible; +} + +#styleTwentyFive{ + width: 150px; + height: 20px; + background-color: #00ffff; + visibility: hidden; +} + +#styleTwentySix{ + width: 150px; + height: 20px; + background-color: #999999; +} + +#styleTwentySeven{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); +} + +#styleTwentyNine{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:contain; + background-repeat: repeat-x; + background-position: center; +} + +#styleThirty{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:50px 10px; + background-repeat: no-repeat; + background-position: 10px 10px; +} + +#styleThirtyOne{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:10% 20%; + background-repeat: repeat; + background-position: 30% 40%; + mask-image:linear-gradient(pink,#fff000); +} + +#styleThirtyTwo{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.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; +} + + +#addOne{ + width: 10%; + height: 20px; + background-image:url('common/images/image.png'); + background-size:cover; + align-self:stretch; + position:fixed; + transform: none; + animation-timing-function:cubic-bezier(0.4, 0.0, 0.4, 1.0); + shared-transition-effect:static; + shared-transition-name:ani; + shared-transition-timing-function:friction; + transition-enter:ani; + transition-exit: ani; + transition-duration:10; + transition-timing-function:friction; + clip-path:border-box; + display-index:1; + filter:blur(10px); + backdrop-filter:blur(10px); + window-filter:blur(10%); + align-items:center; + font-weight:lighter; + overflow:hidden; +} + +#addTwo{ + width: 100px; + height: 15px; + background-image:url('common/images/image.png'); + background-size:auto; + position:relative; + transform: matrix(0.5,0.1,0.2,0.9,20,10); + animation-timing-function:steps(4); + shared-transition-effect:exchange; + clip-path:padding-box; + align-items:flex-end; + font-weight:normal; + overflow:visible; +} + +#addThree{ + width: 100px; + height: 15px; + background-color:#000000; + transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2); + clip-path:content-box; + align-items:flex-start; + font-weight:bolder; +} + +#addFour{ + width: 100px; + height: 15px; + background-color:#000000; + transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px); + clip-path:circle(1); + align-items:baseline; + font-weight:medium; +} + +#addFive{ + width: 100px; + height: 15px; + background-color:#000000; + transform: translateY(1px) translateZ(10px) + scale(1,2) scaleZ(0.4) + rotateX(10deg) rotateY(10deg) rotateZ(10deg) + skewX(1deg) skewY(2deg); + clip-path:ellipse(1); + align-items:stretch; + font-weight:regular; +} + +#addSix{ + width: 100px; + height: 15px; + background-color:#000000; + transform: scaleX(1) scaleY(0.4); + clip-path:ellipse(1); + font-weight:300; +} + +#addSeven{ + width: 100px; + height: 15px; + background-color:#000000; + clip-path:path(1); + aspect-ratio:2; + font-weight:400; +} + +#addSeven:disabled{ + width: 100px; + height: 15px; + background-color:#ff0000; + font-weight:500; +} + +#addSeven:active{ + width: 100px; + height: 15px; + background-color:#ff0000; + font-weight:600; +} + +#addSeven:focus{ + width: 100px; + height: 15px; + background-color:#ff0000; + font-weight:700; +} + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); +} + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} + diff --git a/arkui/ace_standard/src/main/js/default/pages/camera/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/camera/style/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..3a4c570c8b4d1c66839ed9c1d4893402f9ec22a8 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/camera/style/index.hml @@ -0,0 +1,32 @@ + + +
+
+ + camera通用样式 + + + + 通用样式 1-2 \n width height position [left|top] + + + + + + +
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/camera/style/index.js b/arkui/ace_standard/src/main/js/default/pages/camera/style/index.js new file mode 100644 index 0000000000000000000000000000000000000000..5aba2de8d3a526f3f6e7ee9580f3b9ec2624ef2d --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/camera/style/index.js @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export default { + data:{ + styleOne : null, + styleTwo : null, + }, + + onShow(){ + this.getCommonStyleValues(); + globalThis.value = { + styleOne : this.styleOne, + styleTwo : this.styleTwo, + } + }, + + getCommonStyleValues(){ + this.styleOne = this.$element("styleOne").getInspector() + this.styleTwo = this.$element("styleTwo").getInspector() + }, +} diff --git a/arkui/ace_standard/src/main/js/default/pages/canvas/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/canvas/style/index.hml index 4d27ec9a090c574f8e7a192aafaf86004c752ed7..2927eeb88035639195cc44c9b29b5d9e73009d6a 100644 --- a/arkui/ace_standard/src/main/js/default/pages/canvas/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/canvas/style/index.hml @@ -113,123 +113,6 @@ canvas特有样式 - - - 特有样式 flex-direction flex-wrap justify-content align-items align-content - -
- - - - - - -
-
-
- - -
-
- - - -
-
- - - - -
-
- - 文本 - - - -
-
- - - 特有样式 overflow scrollbar-color scrollbar-width overscroll-effect - -
-
- -
-
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
- - - 特有样式 grid - - - - - - -
- - 补充样式 - - - - - - - - - - - - - - - -
- - diff --git a/arkui/ace_standard/src/main/js/default/pages/canvas/style/index.js b/arkui/ace_standard/src/main/js/default/pages/canvas/style/index.js index 8179ff70cbe9fa27c38c5386a6f497949bf60f3a..63efb43b380f96b7c3e465f72eb2b814635decee 100644 --- a/arkui/ace_standard/src/main/js/default/pages/canvas/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/canvas/style/index.js @@ -14,6 +14,108 @@ */ 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/chart/style/index.css b/arkui/ace_standard/src/main/js/default/pages/chart/style/index.css index 42e8f5874fd5e5aa8a771f1ff5a68f98184d169d..2e241af29d9b1775a7d25e3eead829fe3d4d85fa 100644 --- a/arkui/ace_standard/src/main/js/default/pages/chart/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/chart/style/index.css @@ -77,7 +77,6 @@ #styleTwo{ width: 150px; height: 20px; - font-size:10px; padding-start: 1px; padding-end: 2px; margin-start: 1px; @@ -357,6 +356,11 @@ mask-size: cover; mask-position: center; } +#styleThirtyThree{ + filter:blur(10px); + backdrop-filter:blur(10px); + window-filter:blur(10%); +} .specific-container{ flex-direction: column; @@ -545,6 +549,11 @@ #addTwo{ width: 100px; height: 15px; + font-size:14px; + stroke-width:34px; + start-angle:100; + total-angle:200; + allow-scale:true; background-image:url('common/images/image.png'); background-size:auto; position:relative; @@ -560,6 +569,11 @@ #addThree{ width: 100px; height: 15px; + font-size:13px; + stroke-width:24px; + start-angle:150; + total-angle:250; + allow-scale:false; background-color:#000000; transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2); clip-path:content-box; @@ -570,6 +584,15 @@ #addFour{ width: 100px; height: 15px; + stroke-width:30px; + start-angle:0; + total-angle:360; + center-x:38px; + center-y:8px; + colors: #ff0000, #00ff00; + radius:6px; + weights:1,1; + font-style:normal; background-color:#000000; transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px); clip-path:circle(1); @@ -580,6 +603,14 @@ #addFive{ width: 100px; height: 15px; + start-angle:0; + total-angle:90; + center-x:30px; + center-y:7.5px; + radius:7.5px; + colors: #ff0000, #00ff00; + weights:2,2; + font-style:italic; background-color:#000000; transform: translateY(1px) translateZ(10px) scale(1,2) scaleZ(0.4) @@ -593,6 +624,13 @@ #addSix{ width: 100px; height: 15px; + start-angle:0; + total-angle:180; + center-x:35px; + center-y:7px; + radius:7px; + weights:3,1; + colors: #ff0000, #00ff00; background-color:#000000; transform: scaleX(1) scaleY(0.4); clip-path:ellipse(1); @@ -602,43 +640,97 @@ #addSeven{ width: 100px; height: 15px; + start-angle:90; + total-angle:180; + text-color:#ff0000; + font-family:sans-serif; background-color:#000000; clip-path:path(1); aspect-ratio:2; font-weight:400; } -#addSeven:disabled{ +#addEight{ width: 100px; height: 15px; background-color:#ff0000; font-weight:500; } -#addSeven:active{ +#addNine{ width: 100px; height: 15px; background-color:#ff0000; font-weight:600; } -#addSeven:focus{ - width: 100px; - height: 15px; +#addTen{ + width: 90px; + height: 16px; background-color:#ff0000; font-weight:700; } -@font-face { - font-family: SimSunfont; - src: url('/common/simsun.ttf'); +#addEleven{ + width: 91px; + height: 17px; + background-color:#ff0000; + font-weight:500; +} + +#addTwelve{ + width: 93px; + height: 18px; + background-color:#ff0000; + font-weight:600; } -@media (device-type: tv) { - .addSeven { - width: 500px; - height: 500px; - background-color: #fa8072; - } +#addThirteen{ + width: 93px; + height: 18px; + background-color:#ff0000; + font-weight:600; +} + +#addFourteen{ + width: 93px; + height: 18px; + background-color:#ff0000; + font-weight:600; } +#addFifteen{ + width: 93px; + height: 18px; + background-color:#ff0000; + font-weight:600; +} + +#addSixteen{ + width: 93px; + height: 18px; + start-angle:80; + total-angle:90; + background-color:#ff0000; + font-weight:600; +} + +#addSeventeen{ + width: 93px; + height: 18px; + start-angle:120; + total-angle:180; + background-color:#ff0000; + font-weight:600; +} + +#addEighteen{ + width: 93px; + height: 18px; + start-angle:20; + total-angle:80; + background-color:#ff0000; + font-weight:600; +} + + diff --git a/arkui/ace_standard/src/main/js/default/pages/chart/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/chart/style/index.hml index c3e44ada3c5cc2c7719b5e4685fa27bf1ded74ac..0ba48b0ed9d4ddaed218d868ae312aaca7d31e67 100644 --- a/arkui/ace_standard/src/main/js/default/pages/chart/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/chart/style/index.hml @@ -124,29 +124,42 @@ 特有样式 color
- + - + - + - + - + - + - + - + - + - + - + - + + + + + + + + + + + + + +
diff --git a/arkui/ace_standard/src/main/js/default/pages/chart/style/index.js b/arkui/ace_standard/src/main/js/default/pages/chart/style/index.js index 8179ff70cbe9fa27c38c5386a6f497949bf60f3a..068c3d21c629ad38317b56eb7ca3d4cbe56372a4 100644 --- a/arkui/ace_standard/src/main/js/default/pages/chart/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/chart/style/index.js @@ -14,6 +14,165 @@ */ 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, + addOne : null, + addTwo : null, + addThree : null, + addFour : null, + addFive : null, + addSix : null, + addSeven : null, + addEight : null, + addNine : null, + addTen : null, + addEleven : null, + addTwelve : null, + addThirteen : null, + addFourteen : null, + addFifteen : null, + addSixteen : null, + addSeventeen : null, + addEighteen : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + + addOne : this.addOne, + addTwo : this.addTwo, + addThree : this.addThree, + addFour : this.addFour, + addFive : this.addFive, + addSix : this.addSix, + addSeven : this.addSeven, + addEight : this.addEight, + addNine : this.addNine, + addTen : this.addTen, + addEleven : this.addEleven, + addTwelve : this.addTwelve, + addThirteen : this.addThirteen, + addFourteen : this.addFourteen, + addFifteen : this.addFifteen, + addSixteen : this.addSixteen, + addSeventeen : this.addSeventeen, + addEighteen : this.addEighteen + } + }, + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + + this.addOne = this.$element("addOne").getInspector() + this.addTwo = this.$element("addTwo").getInspector() + this.addThree = this.$element("addThree").getInspector() + this.addFour = this.$element("addFour").getInspector() + this.addFive = this.$element("addFive").getInspector() + this.addSix = this.$element("addSix").getInspector() + this.addSeven = this.$element("addSeven").getInspector() + this.addEight = this.$element("addEight").getInspector() + this.addNine = this.$element("addNine").getInspector() + this.addTen = this.$element("addTen").getInspector() + this.addEleven = this.$element("addEleven").getInspector() + this.addTwelve = this.$element("addTwelve").getInspector() + this.addThirteen = this.$element("addThirteen").getInspector() + this.addFourteen = this.$element("addFourteen").getInspector() + this.addFifteen = this.$element("addFifteen").getInspector() + this.addSixteen = this.$element("addSixteen").getInspector() + this.addSeventeen = this.$element("addSeventeen").getInspector() + this.addEighteen = this.$element("addEighteen").getInspector() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.css b/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.css index b202f62d2211533f2b96319405d378117894aef5..4c3bc52e7b487c4f8da337b84925b66959e2167e 100644 --- a/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.css @@ -12,4 +12,780 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@import '../../../common/style.css'; + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +#styleOne{ + width: 150px; + height: 20px; + margin-left: 1px; + margin-top: 2px; + margin-right: 1.5px; + margin-bottom: 0.5px; + margin-start: 1px; + margin-end: 2px; +} + +#styleTwo{ + width: 149px; + height: 19px; + margin-left: 2px; + margin-top: 1px; + margin-right: 2px; + margin-bottom: 1px; + margin-start: 2px; + margin-end: 1px; +} + +#styleThree{ + width: 148px; + height: 18px; + margin-left: 1.1px; + margin-top: 1.1px; + margin-right: 1.1px; + margin-bottom: 1.1px; + margin-start: 1.1px; + margin-end: 1.1px; +} + +#styleFour{ + width: 147px; + height: 17px; + margin-left: 1.2px; + margin-top: 1.2px; + margin-right: 1.2px; + margin-bottom: 1.2px; + margin-start: 1.2px; + margin-end: 1.2px; +} + +#styleFive{ + width: 146px; + height: 16px; + margin-left: 1.3px; + margin-top: 1.3px; + margin-right: 1.3px; + margin-bottom: 1.3px; + margin-start: 1.3px; + margin-end: 1.3px; +} + +#styleSix{ + width: 145px; + height: 15px; + margin-left: 1.4px; + margin-top: 1.4px; + margin-right: 1.4px; + margin-bottom: 1.4px; + margin-start: 1.4px; + margin-end: 1.4px; +} + +#styleSeven{ + width: 144px; + height: 14px; + margin-left: 1.5px; + margin-top: 1.5px; + margin-right: 1.5px; + margin-bottom: 1.5px; + margin-start: 1.5px; + margin-end: 1.5px; +} + +#styleEight{ + width: 143px; + height: 13px; + margin-left: 1.6px; + margin-top: 1.6px; + margin-right: 1.6px; + margin-bottom: 1.6px; + margin-start: 1.6px; + margin-end: 1.6px; +} + +#styleNine{ + width: 142px; + height: 12px; + margin-left: 1.7px; + margin-top: 1.7px; + margin-right: 1.7px; + margin-bottom: 1.7px; + margin-start: 1.7px; + margin-end: 1.7px; +} + +#styleTen{ + width: 141px; + height: 11px; + margin-left: 1.8px; + margin-top: 1.8px; + margin-right: 1.8px; + margin-bottom: 1.8px; + margin-start: 1.8px; + margin-end: 1.8px; +} + +#styleEleven{ + width: 140px; + height: 10px; + margin-left: 1.9px; + margin-top: 1.9px; + margin-right: 1.9px; + margin-bottom: 1.9px; + margin-start: 1.9px; + margin-end: 1.9px; +} + +#styleTwelve{ + width: 139px; + height: 11px; + margin-left: 2.0px; + margin-top: 2.0px; + margin-right: 2.0px; + margin-bottom: 2.0px; + margin-start: 2.0px; + margin-end: 2.0px; +} + +#styleThirteen{ + width: 138px; + height: 12px; + margin-left: 2.1px; + margin-top: 2.1px; + margin-right: 2.1px; + margin-bottom: 2.1px; + margin-start: 2.1px; + margin-end: 2.1px; +} + +#styleFourteen{ + width: 137px; + height: 13px; + margin-left: 2.2px; + margin-top: 2.2px; + margin-right: 2.2px; + margin-bottom: 2.2px; + margin-start: 2.2px; + margin-end: 2.2px; +} + +#styleFifteen{ + width: 136px; + height: 14px; + margin-left: 2.3px; + margin-top: 2.3px; + margin-right: 2.3px; + margin-bottom: 2.3px; + margin-start: 2.3px; + margin-end: 2.3px; +} + +#styleSixteen{ + width: 135px; + height: 15px; + margin-left: 2.4px; + margin-top: 2.4px; + margin-right: 2.4px; + margin-bottom: 2.4px; + margin-start: 2.4px; + margin-end: 2.4px; +} + +#styleSeventeen{ + width: 134px; + height: 16px; + margin-left: 2.5px; + margin-top: 2.5px; + margin-right: 2.5px; + margin-bottom: 2.5px; + margin-start: 2.5px; + margin-end: 2.5px; +} + +#styleEighteen{ + width: 133px; + height: 17px; + margin-left: 2.6px; + margin-top: 2.6px; + margin-right: 2.6px; + margin-bottom: 2.6px; + margin-start: 2.6px; + margin-end: 2.6px; +} + +#styleNineteen{ + width: 132px; + height: 18px; + margin-left: 2.7px; + margin-top: 2.7px; + margin-right: 2.7px; + margin-bottom: 2.7px; + margin-start: 2.7px; + margin-end: 2.7px; +} + +#styleTwenty{ + width: 132px; + height: 18px; + margin-left: 2.8px; + margin-top: 2.8px; + margin-right: 2.8px; + margin-bottom: 2.8px; + margin-start: 2.8px; + margin-end: 2.8px; +} + +#styleTwentyOne{ + width: 132px; + height: 18px; + margin-left: 2.9px; + margin-top: 2.9px; + margin-right: 2.9px; + margin-bottom: 2.9px; + margin-start: 2.9px; + margin-end: 2.9px; +} + +#styleTwentyTwo{ + width: 132px; + height: 18px; + margin-left: 3.0px; + margin-top: 3.0px; + margin-right: 3.0px; + margin-bottom: 3.0px; + margin-start: 3.0px; + margin-end: 3.0px; +} + +#styleTwentyThree{ + width: 132px; + height: 18px; + margin-left: 3.1px; + margin-top: 3.1px; + margin-right: 3.1px; + margin-bottom: 3.1px; + margin-start: 3.1px; + margin-end: 3.1px; +} + +#styleTwentyFour{ + width: 132px; + height: 18px; + margin-left: 3.2px; + margin-top: 3.2px; + margin-right: 3.2px; + margin-bottom: 3.2px; + margin-start: 3.2px; + margin-end: 3.2px; +} + +#styleTwentyFive{ + width: 132px; + height: 18px; + margin-left: 3.3px; + margin-top: 3.3px; + margin-right: 3.3px; + margin-bottom: 3.3px; + margin-start: 3.3px; + margin-end: 3.3px; +} + +#styleTwentySix{ + width: 132px; + height: 18px; + margin-left: 3.4px; + margin-top: 3.4px; + margin-right: 3.4px; + margin-bottom: 3.4px; + margin-start: 3.4px; + margin-end: 3.4px; +} + +#styleTwentySeven{ + width: 132px; + height: 18px; + margin-left: 3.5px; + margin-top: 3.5px; + margin-right: 3.5px; + margin-bottom: 3.5px; + margin-start: 3.5px; + margin-end: 3.5px; +} + +#styleTwentyNine{ + width: 132px; + height: 18px; + margin-left: 3.6px; + margin-top: 3.6px; + margin-right: 3.6px; + margin-bottom: 3.6px; + margin-start: 3.6px; + margin-end: 3.6px; +} + +#styleThirty{ + width: 132px; + height: 18px; + margin-left: 3.7px; + margin-top: 3.7px; + margin-right: 3.7px; + margin-bottom: 3.7px; + margin-start: 3.7px; + margin-end: 3.7px; +} + +#styleThirtyOne{ + width: 132px; + height: 18px; + margin-left: 3.8px; + margin-top: 3.8px; + margin-right: 3.8px; + margin-bottom: 3.8px; + margin-start: 3.8px; + margin-end: 3.8px; +} + +#styleThirtyTwo{ + width: 132px; + height: 18px; + margin-left: 3.9px; + margin-top: 3.9px; + margin-right: 3.9px; + margin-bottom: 3.9px; + margin-start: 3.9px; + margin-end: 3.9px; +} +#styleThirtyThree{ + width: 132px; + height: 18px; + margin-left: 4.0px; + margin-top: 4.0px; + margin-right: 4.0px; + margin-bottom: 4.0px; + margin-start: 4.0px; + margin-end: 4.0px; +} + +.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; +} + + +#addOne{ + width: 10%; + height: 20px; + background-image:url('common/images/image.png'); + background-size:cover; + align-self:stretch; + position:fixed; + transform: none; + animation-timing-function:cubic-bezier(0.4, 0.0, 0.4, 1.0); + shared-transition-effect:static; + shared-transition-name:ani; + shared-transition-timing-function:friction; + transition-enter:ani; + transition-exit: ani; + transition-duration:10; + transition-timing-function:friction; + clip-path:border-box; + display-index:1; + filter:blur(10px); + backdrop-filter:blur(10px); + window-filter:blur(10%); + align-items:center; + font-weight:lighter; + overflow:hidden; +} + +#addTwo{ + width: 100px; + height: 15px; + font-size:14px; + stroke-width:34px; + start-angle:240; + total-angle:240; + allow-scale:true; + background-image:url('common/images/image.png'); + background-size:auto; + position:relative; + transform: matrix(0.5,0.1,0.2,0.9,20,10); + animation-timing-function:steps(4); + shared-transition-effect:exchange; + clip-path:padding-box; + align-items:flex-end; + font-weight:normal; + overflow:visible; +} + +#addThree{ + width: 100px; + height: 15px; + font-size:13px; + stroke-width:24px; + start-angle:120; + total-angle:120; + allow-scale:false; + background-color:#000000; + transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2); + clip-path:content-box; + align-items:flex-start; + font-weight:bolder; +} + +#addFour{ + width: 100px; + height: 15px; + stroke-width:30px; + start-angle:100; + total-angle:100; + center-x:38px; + center-y:8px; + radius:6px; + font-style:normal; + background-color:#000000; + transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px); + clip-path:circle(1); + align-items:baseline; + font-weight:medium; +} + +#addFive{ + width: 100px; + height: 15px; + start-angle:150; + total-angle:80; + center-x:30px; + center-y:7.5px; + radius:7.5px; + font-style:italic; + background-color:#000000; + transform: translateY(1px) translateZ(10px) + scale(1,2) scaleZ(0.4) + rotateX(10deg) rotateY(10deg) rotateZ(10deg) + skewX(1deg) skewY(2deg); + clip-path:ellipse(1); + align-items:stretch; + font-weight:regular; +} + +#addSix{ + width: 100px; + height: 15px; + start-angle:360; + total-angle:360; + center-x:35px; + center-y:7px; + radius:7px; + background-color:#000000; + transform: scaleX(1) scaleY(0.4); + clip-path:ellipse(1); + font-weight:300; +} + +#addSeven{ + width: 100px; + height: 15px; + start-angle:0; + total-angle:70; + text-color:#ff0000; + font-family:sans-serif; + background-color:#000000; + clip-path:path(1); + aspect-ratio:2; + font-weight:400; +} + +#addEight{ + width: 100px; + height: 15px; + total-angle:0; + background-color:#ff0000; + font-weight:500; +} + +#addNine{ + width: 100px; + height: 15px; + radius:5px; + background-color:#ff0000; + font-weight:600; +} + +#addTen{ + width: 90px; + height: 16px; + radius:3px; + background-color:#ff0000; + font-weight:700; +} + +#addEleven{ + width: 91px; + height: 17px; + radius:4px; + background-color:#ff0000; + font-weight:500; +} + +#addTwelve{ + width: 93px; + height: 18px; + radius:6px; + start-angle:60; + background-color:#ff0000; + font-weight:600; +} + +#addThirteen{ + width: 93px; + height: 18px; + start-angle:50; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addFourteen{ + width: 93px; + height: 18px; + start-angle:15; + total-angle:60; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addFifteen{ + width: 93px; + height: 18px; + start-angle:60; + total-angle:120; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addSixteen{ + width: 93px; + height: 18px; + start-angle:80; + total-angle:90; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addSeventeen{ + width: 93px; + height: 18px; + start-angle:180; + total-angle:180; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addEighteen{ + width: 93px; + height: 18px; + start-angle:40; + total-angle:80; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); +} + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} diff --git a/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.hml index 394ea5f188a19eabe0ef85d735d75fe76ffd7de3..373a171dc590c6f3aa56aafb5c9ddbb26642c367 100644 --- a/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.hml @@ -13,3 +13,174 @@ * limitations under the License. */--> +
+
+ + dialog通用样式 + + + + 通用样式 1-8 + + + + + + + + + + + + + + + + + + + + + + + + + + + + 通用样式9-20 + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + 通用样式21-23 + +
+ + + + + + + + + +
+ + + 通用样式23-25 + + + + + + + + + + 通用样式26-31 + + + + + + + + + + + + + + + + + + + 通用样式32 + + + + + + + 通用样式33 + + + + +
+
+
+
+ + dialog特有样式 + +
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.js b/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.js index 4a45d3eb108b49649154e73122e0614943ed7f7e..48bb737ad03fc03ad40b8ad10bdcdfc4a777f102 100644 --- a/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/dialog/style/index.js @@ -11,4 +11,208 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */ \ No newline at end of file + */ + +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, + styleThirtyThree : null, + }, + + styleOne(){ + this.$element('styleOne').show() + }, + styleTwo(){ + this.$element('styleTwo').show() + }, + styleThree(){ + this.$element('styleThree').show() + }, + styleFour(){ + this.$element('styleFour').show() + }, + styleFive(){ + this.$element('styleFive').show() + }, + styleSix(){ + this.$element('styleSix').show() + }, + styleSeven(){ + this.$element('styleSeven').show() + }, + styleEight(){ + this.$element('styleEight').show() + }, + styleTen(){ + this.$element('styleTen').show() + }, + styleEleven(){ + this.$element('styleEleven').show() + }, + styleTwelve(){ + this.$element('styleTwelve').show() + }, + styleThirteen(){ + this.$element('styleThirteen').show() + }, + styleFourteen(){ + this.$element('styleFourteen').show() + }, + styleFifteen(){ + this.$element('styleFifteen').show() + }, + styleSixteen(){ + this.$element('styleSixteen').show() + }, + styleSeventeen(){ + this.$element('styleSeventeen').show() + }, + styleEighteen(){ + this.$element('styleEighteen').show() + }, + styleNineteen(){ + this.$element('styleNineteen').show() + }, + styleTwenty(){ + this.$element('styleTwenty').show() + }, + styleTwentyOne(){ + this.$element('styleTwentyOne').show() + }, + styleTwentyTwo(){ + this.$element('styleTwentyTwo').show() + }, + styleTwentyThree(){ + this.$element('styleTwentyThree').show() + }, + styleTwentyFour(){ + this.$element('styleTwentyFour').show() + }, + styleTwentyFive(){ + this.$element('styleTwentyFive').show() + }, + styleTwentySix(){ + this.$element('styleTwentySix').show() + }, + styleTwentySeven(){ + this.$element('styleTwentySeven').show() + }, + styleTwentyNine(){ + this.$element('styleTwentyNine').show() + }, + styleThirty(){ + this.$element('styleThirty').show() + }, + styleThirtyOne(){ + this.$element('styleThirtyOne').show() + }, + styleThirtyTwo(){ + this.$element('styleThirtyTwo').show() + }, + styleThirtyThree(){ + this.$element('styleThirtyThree').show() + }, + + 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + styleThirtyThree : 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + this.styleThirtyThree = this.$element("styleThirtyThree").getInspector() + }, +} diff --git a/arkui/ace_standard/src/main/js/default/pages/div/prop/index.css b/arkui/ace_standard/src/main/js/default/pages/div/prop/index.css index 871b8196852c12aa3a6624ae3ac6ca0ba55d051a..d1b35f2b157c193f85b23055fd43722bfbecbc63 100644 --- a/arkui/ace_standard/src/main/js/default/pages/div/prop/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/div/prop/index.css @@ -61,6 +61,16 @@ padding-end: 10px; } +#styleProp { + 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; diff --git a/arkui/ace_standard/src/main/js/default/pages/div/prop/index.hml b/arkui/ace_standard/src/main/js/default/pages/div/prop/index.hml index c2de87f831d67c3cee0169c984b8e064d7e2f3a4..2aeab4f7e7a1f0e9755369f898416a5c5d1b6c05 100644 --- a/arkui/ace_standard/src/main/js/default/pages/div/prop/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/div/prop/index.hml @@ -40,7 +40,7 @@ 通用属性 -- style
+ style="width:10%">
diff --git a/arkui/ace_standard/src/main/js/default/pages/div/style/index.js b/arkui/ace_standard/src/main/js/default/pages/div/style/index.js index 8179ff70cbe9fa27c38c5386a6f497949bf60f3a..0a257c0757e1fe3024a63265bcc929b5ebcc27b0 100644 --- a/arkui/ace_standard/src/main/js/default/pages/div/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/div/style/index.js @@ -14,6 +14,207 @@ */ 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, + specificOne : null, + specificTwo : null, + specificThree : null, + specificFour : null, + specificFive : null, + specificSix : null, + specificSeven : null, + specificEight : null, + specificNine : null, + specificTen : null, + specificEleven : null, + specificTwelve : null, + specificThirteen : null, + addOne : null, + addTwo : null, + addThree : null, + addFour : null, + addFive : null, + addSix : null, + addSeven : null, + addEight : null, + addNine : null, + addTen : null, + addEleven : null, + addTwelve : null, + addThirteen : null, + addFourteen : null, + addFifteen : null, + addSixteen : null, + addSeventeen : null, + addEighteen : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + + specificOne : this.specificOne, + specificTwo : this.specificTwo, + specificThree : this.specificThree, + specificFour : this.specificFour, + specificFive : this.specificFive, + specificSix : this.specificSix, + specificSeven : this.specificSeven, + specificEight : this.specificEight, + specificNine : this.specificNine, + specificTen : this.specificTen, + specificEleven : this.specificEleven, + specificTwelve : this.specificTwelve, + specificThirteen : this.specificThirteen, + + addOne : this.addOne, + addTwo : this.addTwo, + addThree : this.addThree, + addFour : this.addFour, + addFive : this.addFive, + addSix : this.addSix, + addSeven : this.addSeven, + addEight : this.addEight, + addNine : this.addNine, + addTen : this.addTen, + addEleven : this.addEleven, + addTwelve : this.addTwelve, + addThirteen : this.addThirteen, + addFourteen : this.addFourteen, + addFifteen : this.addFifteen, + addSixteen : this.addSixteen, + addSeventeen : this.addSeventeen, + addEighteen : this.addEighteen + } + }, + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + + this.specificOne = this.$element("styleThirtyOne").getInspector() + this.specificTwo = this.$element("styleThirtyTwo").getInspector() + this.specificThree = this.$element("styleThirtyOne").getInspector() + this.specificFour = this.$element("styleThirtyTwo").getInspector() + this.specificFive = this.$element("styleThirtyOne").getInspector() + this.specificSix = this.$element("styleThirtyTwo").getInspector() + this.specificSeven = this.$element("styleThirtyOne").getInspector() + this.specificEight = this.$element("styleThirtyTwo").getInspector() + this.specificNine = this.$element("styleThirtyTwo").getInspector() + this.specificTen = this.$element("styleThirtyTwo").getInspector() + this.specificEleven = this.$element("styleThirtyTwo").getInspector() + this.specificTwelve = this.$element("styleThirtyTwo").getInspector() + this.specificThirteen = this.$element("styleThirtyTwo").getInspector() + + this.addOne = this.$element("addOne").getInspector() + this.addTwo = this.$element("addTwo").getInspector() + this.addThree = this.$element("addThree").getInspector() + this.addFour = this.$element("addFour").getInspector() + this.addFive = this.$element("addFive").getInspector() + this.addSix = this.$element("addSix").getInspector() + this.addSeven = this.$element("addSeven").getInspector() + this.addEight = this.$element("addEight").getInspector() + this.addNine = this.$element("addNine").getInspector() + this.addTen = this.$element("addTen").getInspector() + this.addEleven = this.$element("addEleven").getInspector() + this.addTwelve = this.$element("addTwelve").getInspector() + this.addThirteen = this.$element("addThirteen").getInspector() + this.addFourteen = this.$element("addFourteen").getInspector() + this.addFifteen = this.$element("addFifteen").getInspector() + this.addSixteen = this.$element("addSixteen").getInspector() + this.addSeventeen = this.$element("addSeventeen").getInspector() + this.addEighteen = this.$element("addEighteen").getInspector() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/divider/style/index.css b/arkui/ace_standard/src/main/js/default/pages/divider/style/index.css index 706a685fb52a29224b2cb0cdff15ae8bf2689b5b..5863f9bbbc073a602c75081d5fe8b4cf2d82494d 100644 --- a/arkui/ace_standard/src/main/js/default/pages/divider/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/divider/style/index.css @@ -42,23 +42,692 @@ width: 50%; } -.style1 { - height: 30px; - background-color: yellow; +#styleOne{ + height: 29px; + background-color: green; margin: 10px; padding: 10px; color: red; stroke-width: 5px; display: flex; visibility: visible; + line-cap: butt; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 0; +} + +#styleTwo{ + height: 28px; + margin: 9.9px; + padding: 9.9px; + color: rebeccapurple; + stroke-width: 6px; + display: flex; + visibility: visible; + line-cap: round; + flex-grow: 0.1; + flex-shrink: 0.1; + flex-basis: 10px; +} + +#styleThree{ + height: 27px; + background-color: blue; + margin: 9.8px; + padding: 9.8px; + color: black; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 0.2; + flex-shrink: 1; + flex-basis:20px; +} + +#styleFour{ + height: 26px; + background-color: yellow; + margin: 9.7px; + padding: 9.7px; + color: orange; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: butt; + flex-grow: 1; + flex-shrink: 0.1; + flex-basis: 0; +} + +#styleFive{ + height: 25px; + background-color: yellow; + margin: 9.6px; + padding: 9.6px; + color: #ADADAD; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: round; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 0; +} + +#styleSix{ + height: 24px; + background-color: #00AEAE; + margin: 9.5px; + padding: 9.5px; + color: #000079; + stroke-width: 5px; + display: flex; + visibility: hidden; + line-cap: square; + flex-grow: 0.5; + flex-shrink: 1; + flex-basis: 30px; +} + +#styleSeven{ + height: 23px; + background-color: #ECFFFF; + margin: 9.4px; + padding: 9.4px; + color: #DCB5FF; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 1; + flex-shrink: 0.5; + flex-basis: 50px; +} + +#styleEight{ + height: 22px; + background-color: yellow; + margin: 9.3px; + padding: 9.3px; + color: red; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 0; +} + +#styleNine{ + height: 21px; + background-color: yellow; + margin: 9.2px; + padding: 9.2px; + color: red; + stroke-width: 5px; + display: flex; + visibility: visible; line-cap: square; flex-grow: 0; flex-shrink: 0; flex-basis: 0; +} + +#styleFive{ + height: 20px; + background-color: yellow; + margin: 9.1px; + padding: 9.1px; + color: red; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 0; +} + +#styleTen{ + height: 19px; + background-color: yellow; + margin: 9.0px; + padding: 9.0px; + color: red; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 0; +} + +#styleEleven{ + height: 18px; + background-color: yellow; + margin: 8.9px; + padding: 8.9px; + color: red; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 0; +} + +#styleTwelve{ + height: 17px; + background-color: yellow; + margin: 8.8px; + padding: 8.8px; + color: red; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 0; +} + +#styleThirteen{ + height: 16px; + background-color: yellow; + margin: 8.7px; + padding: 8.7px; + color: red; + stroke-width: 5px; + display: flex; + visibility: visible; + line-cap: square; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 0; +} + +#styleFourteen{ + width: 150px; + height: 20px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleFifteen{ + width: 150px; + height: 20px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleSixteen{ + width: 150px; + height: 20px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleSeventeen{ + position: absolute; + start: 50px; + width: 8.6px; + height: 8.6px; + background-color: #ffff00; + z-index:7; +} + +#styleEighteen{ + width: 150px; + height: 20px; + padding-top: 1px; + padding-left: 2px; + padding-right: 3px; + padding-bottom: 0.5px; + margin-left: 1px; + margin-top: 2px; + margin-right: 1.5px; + margin-bottom: 0.5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dotted; + border-bottom-style: solid; + border-left-width: 1px; + border-right-width: 1.5px; + border-top-width: 2px; + border-bottom-width: 0.5px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 0px; opacity: 0.5; - border: 1px solid rebeccapurple; - transform: translate(50px); + align-self:flex-end; +} + +#styleNineteen{ + width: 149px; + height: 21px; + padding-top: 2px; + padding-left: 3px; + padding-right: 4px; + padding-bottom: 2px; + margin-left: 2px; + margin-top: 3px; + margin-right: 5px; + margin-bottom: 3px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dotted; + border-bottom-style: solid; + border-left-width: 1px; + border-right-width: 1.5px; + border-top-width: 2px; + border-bottom-width: 0.5px; + border-left-color: #00ff00; + border-right-color: #ff0000; + border-top-color: #fff000; + border-bottom-color: #0000ff; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 12px; + border-top-left-radius: 11px; + border-top-right-radius: 2px; + opacity: 0.6; + align-self:flex-end; +} + +#styleTwenty{ + position: absolute; + end: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:17; +} + +#styleTwentyOne{ + height: 20px; + box-shadow: 2px 4px; + flex-weight: 1; + margin:5px; +} + +#styleTwentyTwo{ + flex-weight: 1; + height: 20px; + box-shadow: 2px 4px 6px 8px; + margin:5px; +} + +#styleTwentyThree{ + flex-weight: 1; + height: 20px; + box-shadow: 1px 2px 3px 4px #ff0000; + margin:5px; +} + +#styleTwentyFour{ + width: 150px; + height: 20px; + background-color: #00ffff; + clip-path:inset(2 23); + visibility: visible; +} + +#styleTwentyFive{ + width: 150px; + height: 20px; + background-color: #00ffff; + visibility: hidden; +} + +#styleTwentySix{ + width: 150px; + height: 20px; + background-color: #999999; +} + +#styleTwentySeven{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); +} + +#styleTwentyNine{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:contain; + background-repeat: repeat-x; + background-position: center; +} + +#styleThirty{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:50px 10px; + background-repeat: no-repeat; + background-position: 10px 10px; +} + +#styleThirtyOne{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:10% 20%; + background-repeat: repeat; + background-position: 30% 40%; + mask-image:linear-gradient(pink,#fff000); +} + +#styleThirtyTwo{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.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; + 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; +} + +#addOne{ + width: 10%; + height: 20px; + background-image:url('common/images/image.png'); + background-size:cover; + align-self:stretch; + position:fixed; + transform: none; + animation-timing-function:cubic-bezier(0.4, 0.0, 0.4, 1.0); + shared-transition-effect:static; + shared-transition-name:ani; + shared-transition-timing-function:friction; + transition-enter:ani; + transition-exit: ani; + transition-duration:10; + transition-timing-function:friction; + clip-path:border-box; + display-index:1; + filter:blur(10px); + backdrop-filter:blur(10px); + window-filter:blur(10%); +} + +#addTwo{ + width: 100px; + height: 15px; + background-image:url('common/images/image.png'); + background-size:auto; + position:relative; + transform: matrix(0.5,0.1,0.2,0.9,20,10); + animation-timing-function:steps(4); + shared-transition-effect:exchange; + clip-path:padding-box; +} + +#addThree{ + width: 100px; + height: 15px; + background-color:#000000; + transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2); + clip-path:content-box; +} + +#addFour{ + width: 100px; + height: 15px; + background-color:#000000; + transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px); + clip-path:circle(1); +} + +#addFive{ + width: 100px; + height: 15px; + background-color:#000000; + transform: translateY(1px) translateZ(10px) + scale(1,2) scaleZ(0.4) + rotateX(10deg) rotateY(10deg) rotateZ(10deg) + skewX(1deg) skewY(2deg); + clip-path:ellipse(1); +} + +#addSix{ + width: 100px; + height: 15px; + background-color:#000000; + transform: scaleX(1) scaleY(0.4); + clip-path:ellipse(1) +} + +#addSeven{ + width: 100px; + height: 15px; + background-color:#000000; + clip-path:path(1); + aspect-ratio:2; +} + +#addSeven:disabled{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +#addSeven:active{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +#addSeven:focus{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); +} + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} + .specific-container{ flex-direction: column; flex-weight: 1; diff --git a/arkui/ace_standard/src/main/js/default/pages/divider/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/divider/style/index.hml index eb3acfef7b5fa878246456060986da1ca96ca824..7345102aac5f6a103af9da35dc56423ecf1bff3c 100644 --- a/arkui/ace_standard/src/main/js/default/pages/divider/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/divider/style/index.hml @@ -22,7 +22,71 @@ 仅支持如下样式 - + + + 样式1 + + + + + 样式2 + + + + + 样式3 + + + + + 样式4 + + + + + 样式5 + + + + + 样式6 + + + + + 样式7 + + + + + 样式8 + + + + + 样式9 + + + + + 样式10 + + + + + 样式11 + + + + + 样式12 + + + + + 样式13 + + diff --git a/arkui/ace_standard/src/main/js/default/pages/divider/style/index.js b/arkui/ace_standard/src/main/js/default/pages/divider/style/index.js index 336492c8796cfa5ad4c6daef37793e77aebe4d8a..c843c95a60147ff1850793f43f11bcce177e8bef 100644 --- a/arkui/ace_standard/src/main/js/default/pages/divider/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/divider/style/index.js @@ -12,3 +12,56 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +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, + }, + + 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, + } + }, + + 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() + }, +} diff --git a/arkui/ace_standard/src/main/js/default/pages/form/style/index.css b/arkui/ace_standard/src/main/js/default/pages/form/style/index.css index 207dd4468f3f3b9f2e2e8c942da77395104569c7..609536afb41594ce43b45579c4a47d4ba5fafe79 100644 --- a/arkui/ace_standard/src/main/js/default/pages/form/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/form/style/index.css @@ -12,6 +12,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@import '../../../common/style.css'; .container { flex-direction:row; @@ -51,7 +52,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; @@ -219,6 +220,7 @@ height: 10px; background-color: #fff000; z-index:5; + font-weight:800; } #styleSixteen{ @@ -229,6 +231,7 @@ height: 10px; background-color: #00ffff; z-index:15; + font-weight:900; } #styleSeventeen{ @@ -340,6 +343,7 @@ background-size:10% 20%; background-repeat: repeat; background-position: 30% 40%; + mask-image:linear-gradient(pink,#fff000); } #styleThirtyTwo{ @@ -351,4 +355,405 @@ mask-image: url('common/images/icon.png'); mask-size: cover; mask-position: center; -} \ No newline at end of file +} +#styleThirtyThree{ + filter:blur(10px); + backdrop-filter:blur(10px); + window-filter:blur(10%); +} + +.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; +} + + +#addOne{ + width: 10%; + height: 20px; + background-image:url('common/images/image.png'); + background-size:cover; + align-self:stretch; + position:fixed; + transform: none; + animation-timing-function:cubic-bezier(0.4, 0.0, 0.4, 1.0); + shared-transition-effect:static; + shared-transition-name:ani; + shared-transition-timing-function:friction; + transition-enter:ani; + transition-exit: ani; + transition-duration:10; + transition-timing-function:friction; + clip-path:border-box; + display-index:1; + filter:blur(10px); + backdrop-filter:blur(10px); + window-filter:blur(10%); + align-items:center; + font-weight:lighter; + overflow:hidden; +} + +#addTwo{ + width: 100px; + height: 15px; + font-size:14px; + stroke-width:34px; + start-angle:240; + total-angle:240; + allow-scale:true; + background-image:url('common/images/image.png'); + background-size:auto; + position:relative; + transform: matrix(0.5,0.1,0.2,0.9,20,10); + animation-timing-function:steps(4); + shared-transition-effect:exchange; + clip-path:padding-box; + align-items:flex-end; + font-weight:normal; + overflow:visible; +} + +#addThree{ + width: 100px; + height: 15px; + font-size:13px; + stroke-width:24px; + start-angle:120; + total-angle:120; + allow-scale:false; + background-color:#000000; + transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2); + clip-path:content-box; + align-items:flex-start; + font-weight:bolder; +} + +#addFour{ + width: 100px; + height: 15px; + stroke-width:30px; + start-angle:100; + total-angle:100; + center-x:38px; + center-y:8px; + radius:6px; + font-style:normal; + background-color:#000000; + transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px); + clip-path:circle(1); + align-items:baseline; + font-weight:medium; +} + +#addFive{ + width: 100px; + height: 15px; + start-angle:150; + total-angle:80; + center-x:30px; + center-y:7.5px; + radius:7.5px; + font-style:italic; + background-color:#000000; + transform: translateY(1px) translateZ(10px) + scale(1,2) scaleZ(0.4) + rotateX(10deg) rotateY(10deg) rotateZ(10deg) + skewX(1deg) skewY(2deg); + clip-path:ellipse(1); + align-items:stretch; + font-weight:regular; +} + +#addSix{ + width: 100px; + height: 15px; + start-angle:360; + total-angle:360; + center-x:35px; + center-y:7px; + radius:7px; + background-color:#000000; + transform: scaleX(1) scaleY(0.4); + clip-path:ellipse(1); + font-weight:300; +} + +#addSeven{ + width: 100px; + height: 15px; + start-angle:0; + total-angle:70; + text-color:#ff0000; + font-family:sans-serif; + background-color:#000000; + clip-path:path(1); + aspect-ratio:2; + font-weight:400; +} + +#addEight{ + width: 100px; + height: 15px; + total-angle:0; + background-color:#ff0000; + font-weight:500; +} + +#addNine{ + width: 100px; + height: 15px; + radius:5px; + background-color:#ff0000; + font-weight:600; +} + +#addTen{ + width: 90px; + height: 16px; + radius:3px; + background-color:#ff0000; + font-weight:700; +} + +#addEleven{ + width: 91px; + height: 17px; + radius:4px; + background-color:#ff0000; + font-weight:500; +} + +#addTwelve{ + width: 93px; + height: 18px; + radius:6px; + start-angle:60; + background-color:#ff0000; + font-weight:600; +} + +#addThirteen{ + width: 93px; + height: 18px; + start-angle:50; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addFourteen{ + width: 93px; + height: 18px; + start-angle:15; + total-angle:60; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addFifteen{ + width: 93px; + height: 18px; + start-angle:60; + total-angle:120; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addSixteen{ + width: 93px; + height: 18px; + start-angle:80; + total-angle:90; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addSeventeen{ + width: 93px; + height: 18px; + start-angle:180; + total-angle:180; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +#addEighteen{ + width: 93px; + height: 18px; + start-angle:40; + total-angle:80; + radius:6px; + background-color:#ff0000; + font-weight:600; +} + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); +} + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} + diff --git a/arkui/ace_standard/src/main/js/default/pages/form/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/form/style/index.hml index 394ea5f188a19eabe0ef85d735d75fe76ffd7de3..0d2abb424af7f7943a1d80e253c58560ecc8c803 100644 --- a/arkui/ace_standard/src/main/js/default/pages/form/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/form/style/index.hml @@ -13,3 +13,117 @@ * limitations under the License. */--> +
+
+ + form通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + 通用样式9-20 \n display flex z-index position + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + 通用样式21-23 box-shadow + +
+
+
+
+
+
+
+
+ + + 通用样式23-25 visibility clip-path + +
+
+
+
+ + + 通用样式26-31 background + +
+
+
+
+
+
+
+
+
+
+ + + 通用样式32 clip-path image-fill mask-image + +
+
+ + + 通用样式33 filter:blur() backdrop-filter:blur() window-filter:blur() + +
+
+
+
+
+
+ + form特有样式 + + + + 特有样式 + + +
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/form/style/index.js b/arkui/ace_standard/src/main/js/default/pages/form/style/index.js index 8452f14bb05344e8032c4c0dbcf73b5b023d4e34..444d985a55bd90e6b0799ed6474363af7dda98b9 100644 --- a/arkui/ace_standard/src/main/js/default/pages/form/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/form/style/index.js @@ -45,7 +45,8 @@ export default { styleTwentyNine : null, styleThirty : null, styleThirtyOne : null, - styleThirtyTwo : null + styleThirtyTwo : null, + styleThirtyThree : null, }, onShow(){ @@ -77,9 +78,12 @@ export default { styleTwentyFour : this.styleTwentyFour, styleTwentyFive : this.styleTwentyFive, styleTwentySix : this.styleTwentySix, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, styleThirty : this.styleThirty, styleThirtyOne : this.styleThirtyOne, - styleThirtyTwo : this.styleThirtyTwo + styleThirtyTwo : this.styleThirtyTwo, + styleThirtyThree : this.styleThirtyTwo, } }, @@ -110,8 +114,11 @@ export default { this.styleTwentyFour = this.$element("styleTwentyFour").getInspector() this.styleTwentyFive = this.$element("styleTwentyFive").getInspector() this.styleTwentySix = this.$element("styleTwentySix").getInspector() + this.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() this.styleThirty = this.$element("styleThirty").getInspector() this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + this.styleThirtyThree = this.$element("styleThirtyThree").getInspector() }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.css b/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.css index 4a45d3eb108b49649154e73122e0614943ed7f7e..728a163903f4b87d4b09ddde43d646d2f7c2ff08 100644 --- a/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.css @@ -11,4 +11,643 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */ \ No newline at end of file + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +#styleOne{ + width: 150px; + height: 20px; + padding-top: 1px; + padding-left: 2px; + padding-right: 3px; + padding-bottom: 0.5px; + margin-left: 1px; + margin-top: 2px; + margin-right: 1.5px; + margin-bottom: 0.5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dotted; + border-bottom-style: solid; + border-left-width: 1px; + border-right-width: 1.5px; + border-top-width: 2px; + border-bottom-width: 0.5px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 0px; + opacity: 0.5; + align-self:flex-end; +} + +#styleTwo{ + width: 150px; + height: 20px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleThree{ + width: 50px; + height: 20px; + padding: 2px; + margin:1px; + border-left: 1px solid #ff0000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + opacity: 1; + align-self:baseline; +} + +#styleFour{ + width: 50px; + height: 20px; + align-self:center; + border: 2px solid #00ff00; +} + +#styleFive{ + width: 150px; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleSix{ + width: 100%; + height: 2%; + background-color: #ff0000; + padding-top: 1%; + padding-left: 2%; + padding-right: 3%; + padding-bottom: 0.5%; + margin-left: 1%; + margin-top: 2%; + margin-right: 1.5%; + margin-bottom: 0.5%; +} + +#styleSeven{ + width: 70%; + height: 1%; + padding-start: 1%; + padding-end: 2%; + margin-start: 1%; + margin-end: 2%; + background-color: #00ff00; +} + +#styleEight{ + width: 60%; + height: 1%; + margin: 1%; + padding: 2%; + background-color: #0000ff; +} + +#styleNine{ + width: 100%; + height: 40px; + display:flex; +} + +#styleFive{ + width: 100%; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleTen{ + width: 100%; + height: 400%; + display: none; + background-color: #ff0000; +} + +#styleEleven{ + height: 40%; + background-color: #00ff00; + flex:1 1 20px; + z-index:10; +} + +#styleTwelve{ + height: 50%; + background-color: #ff00ff; + flex-grow:2; + flex-shrink: 3; + flex-basis: 30px; + z-index:13; +} + +#styleThirteen{ + position: absolute; + left: 10px; + top: 20px; + width: 10px; + height: 10px; + background-color: #00ff00; + z-index:12; +} + +#styleFourteen{ + position: absolute; + right: 10px; + bottom: 20px; + width: 10px; + height: 10px; + background-color: #0000ff; + z-index:3; +} + +#styleFifteen{ + position: absolute; + left: 10%; + top: 20%; + width: 10px; + height: 10px; + background-color: #fff000; + z-index:5; +} + +#styleSixteen{ + position: absolute; + right: 10%; + bottom: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:15; +} + +#styleSeventeen{ + position: absolute; + start: 50px; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:7; +} + +#styleEighteen{ + position: absolute; + end: 20px; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:4; +} + +#styleNineteen{ + position: absolute; + start: 20%; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:1; +} + +#styleTwenty{ + position: absolute; + end: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:17; +} + +#styleTwentyOne{ + height: 20px; + box-shadow: 2px 4px; + flex-weight: 1; + margin:5px; +} + +#styleTwentyTwo{ + flex-weight: 1; + height: 20px; + box-shadow: 2px 4px 6px 8px; + margin:5px; +} + +#styleTwentyThree{ + flex-weight: 1; + height: 20px; + box-shadow: 1px 2px 3px 4px #ff0000; + margin:5px; +} + +#styleTwentyFour{ + width: 150px; + height: 20px; + background-color: #00ffff; + clip-path:inset(2 23); + visibility: visible; +} + +#styleTwentyFive{ + width: 150px; + height: 20px; + background-color: #00ffff; + visibility: hidden; +} + +#styleTwentySix{ + width: 150px; + height: 20px; + background-color: #999999; +} + +#styleTwentySeven{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); +} + +#styleTwentyNine{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:contain; + background-repeat: repeat-x; + background-position: center; +} + +#styleThirty{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:50px 10px; + background-repeat: no-repeat; + background-position: 10px 10px; +} + +#styleThirtyOne{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:10% 20%; + background-repeat: repeat; + background-position: 30% 40%; + mask-image:linear-gradient(pink,#fff000); +} + +#styleThirtyTwo{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.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; +} + + +#addOne{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addTwo{ + flex-direction: column; + flex-wrap:wrap; + justify-content:flex-end; + align-items:flex-start; + align-content:flex-end; + display:grid; +} + +#addThree{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:center; + align-items:flex-end; + align-content:center; + display:none; +} + +#addFour{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:space-between; + align-items:center; + align-content:space-between; + display:flex; +} + +#addFive{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:space-around; + align-items:stretch; + align-content:space-around; + display:flex; +} + +#addSix{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addSeven{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addEight{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addNine{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addTen{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addEleven{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addTwelve{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addThirteen{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addFourteen{ + flex-direction: row; + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); +} + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} + diff --git a/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.hml index 394ea5f188a19eabe0ef85d735d75fe76ffd7de3..11a6bbf4f04c1339083baa126bdf41848d0e1707 100644 --- a/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.hml @@ -13,3 +13,155 @@ * limitations under the License. */--> +
+
+ + grid-col通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + + + + + + + + + + + + + + + + + + + + 通用样式9-20 \n display flex z-index position + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + 通用样式21-23 box-shadow + +
+ + + + + + +
+ + + 通用样式23-25 visibility clip-path + + + + + + + + 通用样式26-31 background + + + + + + + + + + + + + + 通用样式32 clip-path image-fill mask-image + + + + + + 通用样式33 filter:blur() backdrop-filter:blur() window-filter:blur() + + + +
+
+
+
+ + grid-col特有样式 + + + + 特有样式 color + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.js b/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.js index 336492c8796cfa5ad4c6daef37793e77aebe4d8a..068c3d21c629ad38317b56eb7ca3d4cbe56372a4 100644 --- a/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/gridCol/style/index.js @@ -12,3 +12,167 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +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, + + addOne : null, + addTwo : null, + addThree : null, + addFour : null, + addFive : null, + addSix : null, + addSeven : null, + addEight : null, + addNine : null, + addTen : null, + addEleven : null, + addTwelve : null, + addThirteen : null, + addFourteen : null, + addFifteen : null, + addSixteen : null, + addSeventeen : null, + addEighteen : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + + addOne : this.addOne, + addTwo : this.addTwo, + addThree : this.addThree, + addFour : this.addFour, + addFive : this.addFive, + addSix : this.addSix, + addSeven : this.addSeven, + addEight : this.addEight, + addNine : this.addNine, + addTen : this.addTen, + addEleven : this.addEleven, + addTwelve : this.addTwelve, + addThirteen : this.addThirteen, + addFourteen : this.addFourteen, + addFifteen : this.addFifteen, + addSixteen : this.addSixteen, + addSeventeen : this.addSeventeen, + addEighteen : this.addEighteen + } + }, + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + + this.addOne = this.$element("addOne").getInspector() + this.addTwo = this.$element("addTwo").getInspector() + this.addThree = this.$element("addThree").getInspector() + this.addFour = this.$element("addFour").getInspector() + this.addFive = this.$element("addFive").getInspector() + this.addSix = this.$element("addSix").getInspector() + this.addSeven = this.$element("addSeven").getInspector() + this.addEight = this.$element("addEight").getInspector() + this.addNine = this.$element("addNine").getInspector() + this.addTen = this.$element("addTen").getInspector() + this.addEleven = this.$element("addEleven").getInspector() + this.addTwelve = this.$element("addTwelve").getInspector() + this.addThirteen = this.$element("addThirteen").getInspector() + this.addFourteen = this.$element("addFourteen").getInspector() + this.addFifteen = this.$element("addFifteen").getInspector() + this.addSixteen = this.$element("addSixteen").getInspector() + this.addSeventeen = this.$element("addSeventeen").getInspector() + this.addEighteen = this.$element("addEighteen").getInspector() + }, +} diff --git a/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.css b/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.css index 4a45d3eb108b49649154e73122e0614943ed7f7e..35758d9f989841e22a19050a10926ae15895bbe1 100644 --- a/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.css @@ -11,4 +11,661 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */ \ No newline at end of file + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +#styleOne{ + width: 150px; + height: 20px; + padding-top: 1px; + padding-left: 2px; + padding-right: 3px; + padding-bottom: 0.5px; + margin-left: 1px; + margin-top: 2px; + margin-right: 1.5px; + margin-bottom: 0.5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dotted; + border-bottom-style: solid; + border-left-width: 1px; + border-right-width: 1.5px; + border-top-width: 2px; + border-bottom-width: 0.5px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 0px; + opacity: 0.5; + align-self:flex-end; +} + +#styleTwo{ + width: 150px; + height: 20px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleThree{ + width: 50px; + height: 20px; + padding: 2px; + margin:1px; + border-left: 1px solid #ff0000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + opacity: 1; + align-self:baseline; +} + +#styleFour{ + width: 50px; + height: 20px; + align-self:center; + border: 2px solid #00ff00; +} + +#styleFive{ + width: 150px; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleSix{ + width: 100%; + height: 2%; + background-color: #ff0000; + padding-top: 1%; + padding-left: 2%; + padding-right: 3%; + padding-bottom: 0.5%; + margin-left: 1%; + margin-top: 2%; + margin-right: 1.5%; + margin-bottom: 0.5%; +} + +#styleSeven{ + width: 70%; + height: 1%; + padding-start: 1%; + padding-end: 2%; + margin-start: 1%; + margin-end: 2%; + background-color: #00ff00; +} + +#styleEight{ + width: 60%; + height: 1%; + margin: 1%; + padding: 2%; + background-color: #0000ff; +} + +#styleNine{ + width: 100%; + height: 40px; + display:flex; +} + +#styleFive{ + width: 100%; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleTen{ + width: 100%; + height: 400%; + display: none; + background-color: #ff0000; +} + +#styleEleven{ + height: 40%; + background-color: #00ff00; + flex:1 1 20px; + z-index:10; +} + +#styleTwelve{ + height: 50%; + background-color: #ff00ff; + flex-grow:2; + flex-shrink: 3; + flex-basis: 30px; + z-index:13; +} + +#styleThirteen{ + position: absolute; + left: 10px; + top: 20px; + width: 10px; + height: 10px; + background-color: #00ff00; + z-index:12; +} + +#styleFourteen{ + position: absolute; + right: 10px; + bottom: 20px; + width: 10px; + height: 10px; + background-color: #0000ff; + z-index:3; +} + +#styleFifteen{ + position: absolute; + left: 10%; + top: 20%; + width: 10px; + height: 10px; + background-color: #fff000; + z-index:5; +} + +#styleSixteen{ + position: absolute; + right: 10%; + bottom: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:15; +} + +#styleSeventeen{ + position: absolute; + start: 50px; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:7; +} + +#styleEighteen{ + position: absolute; + end: 20px; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:4; +} + +#styleNineteen{ + position: absolute; + start: 20%; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:1; +} + +#styleTwenty{ + position: absolute; + end: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:17; +} + +#styleTwentyOne{ + height: 20px; + box-shadow: 2px 4px; + flex-weight: 1; + margin:5px; +} + +#styleTwentyTwo{ + flex-weight: 1; + height: 20px; + box-shadow: 2px 4px 6px 8px; + margin:5px; +} + +#styleTwentyThree{ + flex-weight: 1; + height: 20px; + box-shadow: 1px 2px 3px 4px #ff0000; + margin:5px; +} + +#styleTwentyFour{ + width: 150px; + height: 20px; + background-color: #00ffff; + clip-path:inset(2 23); + visibility: visible; +} + +#styleTwentyFive{ + width: 150px; + height: 20px; + background-color: #00ffff; + visibility: hidden; +} + +#styleTwentySix{ + width: 150px; + height: 20px; + background-color: #999999; +} + +#styleTwentySeven{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); +} + +#styleTwentyNine{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:contain; + background-repeat: repeat-x; + background-position: center; +} + +#styleThirty{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:50px 10px; + background-repeat: no-repeat; + background-position: 10px 10px; +} + +#styleThirtyOne{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:10% 20%; + background-repeat: repeat; + background-position: 30% 40%; + mask-image:linear-gradient(pink,#fff000); +} + +#styleThirtyTwo{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#specificOne{ + width: 70px; + height: 25px; + + 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; + + justify-content:flex-end; + align-items: flex-end; + align-content: flex-end; + margin: 1%; +} + +#specificFour{ + width: 18%; + height: 48%; + border: 1px solid pink; + + justify-content:center; + align-items: center; + align-items: center; + margin: 1%; +} + +#specificFive{ + width: 18%; + height: 48%; + border: 1px solid pink; + + justify-content:space-between; + align-items:stretch; + align-content: space-between; + margin: 1%; +} + +#specificSix{ + width: 18%; + height: 48%; + border: 1px solid pink; + + 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; +} + + +#addOne{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addTwo{ + flex-wrap:wrap; + justify-content:flex-end; + align-items:flex-start; + align-content:flex-end; + display:grid; +} + +#addThree{ + flex-wrap:nowrap; + justify-content:center; + align-items:flex-end; + align-content:center; + display:none; +} + +#addFour{ + flex-wrap:nowrap; + justify-content:space-between; + align-items:center; + align-content:space-between; + display:flex; +} + +#addFive{ + flex-wrap:nowrap; + justify-content:space-around; + align-items:stretch; + align-content:space-around; + display:flex; +} + +#addSix{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addSeven{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addEight{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addNine{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addTen{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addEleven{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addTwelve{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addThirteen{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addFourteen{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addFifteen{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addSixteen{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addSeventeen{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +#addEighteen{ + flex-wrap:nowrap; + justify-content:flex-start; + align-items:stretch; + align-content:flex-start; + display:flex; +} + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); +} + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} + diff --git a/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.hml index 4d35198df7753d9d37488bb3df5c5cd0252569f4..2f4ab85f8b5844ad66c943233d5377d1eed75fa8 100644 --- a/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.hml @@ -11,4 +11,157 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */--> \ No newline at end of file + */--> + +
+
+ + grid-row通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + + + + + + + + + + + + + + + + + + + + 通用样式9-20 \n display flex z-index position + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + 通用样式21-23 box-shadow + +
+ + + + + + +
+ + + 通用样式23-25 visibility clip-path + + + + + + + + 通用样式26-31 background + + + + + + + + + + + + + + 通用样式32 clip-path image-fill mask-image + + + + + + 通用样式33 filter:blur() backdrop-filter:blur() window-filter:blur() + + + +
+
+
+
+ + grid-row特有样式 + + + + 特有样式 color + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.js b/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.js index 336492c8796cfa5ad4c6daef37793e77aebe4d8a..068c3d21c629ad38317b56eb7ca3d4cbe56372a4 100644 --- a/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/gridRow/style/index.js @@ -12,3 +12,167 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +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, + + addOne : null, + addTwo : null, + addThree : null, + addFour : null, + addFive : null, + addSix : null, + addSeven : null, + addEight : null, + addNine : null, + addTen : null, + addEleven : null, + addTwelve : null, + addThirteen : null, + addFourteen : null, + addFifteen : null, + addSixteen : null, + addSeventeen : null, + addEighteen : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + + addOne : this.addOne, + addTwo : this.addTwo, + addThree : this.addThree, + addFour : this.addFour, + addFive : this.addFive, + addSix : this.addSix, + addSeven : this.addSeven, + addEight : this.addEight, + addNine : this.addNine, + addTen : this.addTen, + addEleven : this.addEleven, + addTwelve : this.addTwelve, + addThirteen : this.addThirteen, + addFourteen : this.addFourteen, + addFifteen : this.addFifteen, + addSixteen : this.addSixteen, + addSeventeen : this.addSeventeen, + addEighteen : this.addEighteen + } + }, + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + + this.addOne = this.$element("addOne").getInspector() + this.addTwo = this.$element("addTwo").getInspector() + this.addThree = this.$element("addThree").getInspector() + this.addFour = this.$element("addFour").getInspector() + this.addFive = this.$element("addFive").getInspector() + this.addSix = this.$element("addSix").getInspector() + this.addSeven = this.$element("addSeven").getInspector() + this.addEight = this.$element("addEight").getInspector() + this.addNine = this.$element("addNine").getInspector() + this.addTen = this.$element("addTen").getInspector() + this.addEleven = this.$element("addEleven").getInspector() + this.addTwelve = this.$element("addTwelve").getInspector() + this.addThirteen = this.$element("addThirteen").getInspector() + this.addFourteen = this.$element("addFourteen").getInspector() + this.addFifteen = this.$element("addFifteen").getInspector() + this.addSixteen = this.$element("addSixteen").getInspector() + this.addSeventeen = this.$element("addSeventeen").getInspector() + this.addEighteen = this.$element("addEighteen").getInspector() + }, +} diff --git a/arkui/ace_standard/src/main/js/default/pages/image/style/index.js b/arkui/ace_standard/src/main/js/default/pages/image/style/index.js index 8179ff70cbe9fa27c38c5386a6f497949bf60f3a..0a257c0757e1fe3024a63265bcc929b5ebcc27b0 100644 --- a/arkui/ace_standard/src/main/js/default/pages/image/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/image/style/index.js @@ -14,6 +14,207 @@ */ 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, + specificOne : null, + specificTwo : null, + specificThree : null, + specificFour : null, + specificFive : null, + specificSix : null, + specificSeven : null, + specificEight : null, + specificNine : null, + specificTen : null, + specificEleven : null, + specificTwelve : null, + specificThirteen : null, + addOne : null, + addTwo : null, + addThree : null, + addFour : null, + addFive : null, + addSix : null, + addSeven : null, + addEight : null, + addNine : null, + addTen : null, + addEleven : null, + addTwelve : null, + addThirteen : null, + addFourteen : null, + addFifteen : null, + addSixteen : null, + addSeventeen : null, + addEighteen : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + + specificOne : this.specificOne, + specificTwo : this.specificTwo, + specificThree : this.specificThree, + specificFour : this.specificFour, + specificFive : this.specificFive, + specificSix : this.specificSix, + specificSeven : this.specificSeven, + specificEight : this.specificEight, + specificNine : this.specificNine, + specificTen : this.specificTen, + specificEleven : this.specificEleven, + specificTwelve : this.specificTwelve, + specificThirteen : this.specificThirteen, + + addOne : this.addOne, + addTwo : this.addTwo, + addThree : this.addThree, + addFour : this.addFour, + addFive : this.addFive, + addSix : this.addSix, + addSeven : this.addSeven, + addEight : this.addEight, + addNine : this.addNine, + addTen : this.addTen, + addEleven : this.addEleven, + addTwelve : this.addTwelve, + addThirteen : this.addThirteen, + addFourteen : this.addFourteen, + addFifteen : this.addFifteen, + addSixteen : this.addSixteen, + addSeventeen : this.addSeventeen, + addEighteen : this.addEighteen + } + }, + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + + this.specificOne = this.$element("styleThirtyOne").getInspector() + this.specificTwo = this.$element("styleThirtyTwo").getInspector() + this.specificThree = this.$element("styleThirtyOne").getInspector() + this.specificFour = this.$element("styleThirtyTwo").getInspector() + this.specificFive = this.$element("styleThirtyOne").getInspector() + this.specificSix = this.$element("styleThirtyTwo").getInspector() + this.specificSeven = this.$element("styleThirtyOne").getInspector() + this.specificEight = this.$element("styleThirtyTwo").getInspector() + this.specificNine = this.$element("styleThirtyTwo").getInspector() + this.specificTen = this.$element("styleThirtyTwo").getInspector() + this.specificEleven = this.$element("styleThirtyTwo").getInspector() + this.specificTwelve = this.$element("styleThirtyTwo").getInspector() + this.specificThirteen = this.$element("styleThirtyTwo").getInspector() + + this.addOne = this.$element("addOne").getInspector() + this.addTwo = this.$element("addTwo").getInspector() + this.addThree = this.$element("addThree").getInspector() + this.addFour = this.$element("addFour").getInspector() + this.addFive = this.$element("addFive").getInspector() + this.addSix = this.$element("addSix").getInspector() + this.addSeven = this.$element("addSeven").getInspector() + this.addEight = this.$element("addEight").getInspector() + this.addNine = this.$element("addNine").getInspector() + this.addTen = this.$element("addTen").getInspector() + this.addEleven = this.$element("addEleven").getInspector() + this.addTwelve = this.$element("addTwelve").getInspector() + this.addThirteen = this.$element("addThirteen").getInspector() + this.addFourteen = this.$element("addFourteen").getInspector() + this.addFifteen = this.$element("addFifteen").getInspector() + this.addSixteen = this.$element("addSixteen").getInspector() + this.addSeventeen = this.$element("addSeventeen").getInspector() + this.addEighteen = this.$element("addEighteen").getInspector() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.css b/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.css index 4a45d3eb108b49649154e73122e0614943ed7f7e..bc43d8ed5a903f05b46fbda0f7bba431fd6276af 100644 --- a/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.css @@ -11,4 +11,610 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */ \ No newline at end of file + */ +@import '../../../common/style.css'; +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +#styleOne{ + width: 150px; + height: 20px; + padding-top: 1px; + padding-left: 2px; + padding-right: 3px; + padding-bottom: 0.5px; + margin-left: 1px; + margin-top: 2px; + margin-right: 1.5px; + margin-bottom: 0.5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dotted; + border-bottom-style: solid; + border-left-width: 1px; + border-right-width: 1.5px; + border-top-width: 2px; + border-bottom-width: 0.5px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 0px; + opacity: 0.5; + align-self:flex-end; +} + +#styleTwo{ + width: 150px; + height: 20px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleThree{ + width: 50px; + height: 20px; + padding: 2px; + margin:1px; + border-left: 1px solid #ff0000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + opacity: 1; + align-self:baseline; +} + +#styleFour{ + width: 50px; + height: 20px; + align-self:center; + border: 2px solid #00ff00; +} + +#styleFive{ + width: 150px; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleSix{ + width: 100%; + height: 2%; + background-color: #ff0000; + padding-top: 1%; + padding-left: 2%; + padding-right: 3%; + padding-bottom: 0.5%; + margin-left: 1%; + margin-top: 2%; + margin-right: 1.5%; + margin-bottom: 0.5%; +} + +#styleSeven{ + width: 70%; + height: 1%; + padding-start: 1%; + padding-end: 2%; + margin-start: 1%; + margin-end: 2%; + background-color: #00ff00; +} + +#styleEight{ + width: 60%; + height: 1%; + margin: 1%; + padding: 2%; + background-color: #0000ff; +} + +#styleNine{ + width: 100%; + height: 40px; + display:flex; +} + +#styleFive{ + width: 100%; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleTen{ + width: 100%; + height: 400%; + display: none; + background-color: #ff0000; +} + +#styleEleven{ + height: 40%; + background-color: #00ff00; + flex:1 1 20px; + z-index:10; +} + +#styleTwelve{ + height: 50%; + background-color: #ff00ff; + flex-grow:2; + flex-shrink: 3; + flex-basis: 30px; + z-index:13; +} + +#styleThirteen{ + position: absolute; + left: 10px; + top: 20px; + width: 10px; + height: 10px; + background-color: #00ff00; + z-index:12; +} + +#styleFourteen{ + position: absolute; + right: 10px; + bottom: 20px; + width: 10px; + height: 10px; + background-color: #0000ff; + z-index:3; +} + +#styleFifteen{ + position: absolute; + left: 10%; + top: 20%; + width: 10px; + height: 10px; + background-color: #fff000; + z-index:5; +} + +#styleSixteen{ + position: absolute; + right: 10%; + bottom: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:15; +} + +#styleSeventeen{ + position: absolute; + start: 50px; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:7; +} + +#styleEighteen{ + position: absolute; + end: 20px; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:4; +} + +#styleNineteen{ + position: absolute; + start: 20%; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:1; +} + +#styleTwenty{ + position: absolute; + end: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:17; +} + +#styleTwentyOne{ + height: 20px; + box-shadow: 2px 4px; + flex-weight: 1; + margin:5px; +} + +#styleTwentyTwo{ + flex-weight: 1; + height: 20px; + box-shadow: 2px 4px 6px 8px; + margin:5px; +} + +#styleTwentyThree{ + flex-weight: 1; + height: 20px; + box-shadow: 1px 2px 3px 4px #ff0000; + margin:5px; +} + +#styleTwentyFour{ + width: 150px; + height: 20px; + background-color: #00ffff; + clip-path:inset(2 23); + visibility: visible; +} + +#styleTwentyFive{ + width: 150px; + height: 20px; + background-color: #00ffff; + visibility: hidden; +} + +#styleTwentySix{ + width: 150px; + height: 20px; + background-color: #999999; +} + +#styleTwentySeven{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); +} + +#styleTwentyNine{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:contain; + background-repeat: repeat-x; + background-position: center; +} + +#styleThirty{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:50px 10px; + background-repeat: no-repeat; + background-position: 10px 10px; +} + +#styleThirtyOne{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:10% 20%; + background-repeat: repeat; + background-position: 30% 40%; + mask-image:linear-gradient(pink,#fff000); +} + +#styleThirtyTwo{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.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; + 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; +} + +#addOne{ + width: 10%; + height: 20px; + background-image:url('common/images/image.png'); + background-size:cover; + align-self:stretch; + position:fixed; + transform: none; + animation-timing-function:cubic-bezier(0.4, 0.0, 0.4, 1.0); + shared-transition-effect:static; + shared-transition-name:ani; + shared-transition-timing-function:friction; + transition-enter:ani; + transition-exit: ani; + transition-duration:10; + transition-timing-function:friction; + clip-path:border-box; + display-index:1; + filter:blur(10px); + backdrop-filter:blur(10px); + window-filter:blur(10%); +} + +#addTwo{ + width: 100px; + height: 15px; + background-image:url('common/images/image.png'); + background-size:auto; + position:relative; + transform: matrix(0.5,0.1,0.2,0.9,20,10); + animation-timing-function:steps(4); + shared-transition-effect:exchange; + clip-path:padding-box; +} + +#addThree{ + width: 100px; + height: 15px; + background-color:#000000; + transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2); + clip-path:content-box; +} + +#addFour{ + width: 100px; + height: 15px; + background-color:#000000; + transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px); + clip-path:circle(1); +} + +#addFive{ + width: 100px; + height: 15px; + background-color:#000000; + transform: translateY(1px) translateZ(10px) + scale(1,2) scaleZ(0.4) + rotateX(10deg) rotateY(10deg) rotateZ(10deg) + skewX(1deg) skewY(2deg); + clip-path:ellipse(1); +} + +#addSix{ + width: 100px; + height: 15px; + background-color:#000000; + transform: scaleX(1) scaleY(0.4); + clip-path:ellipse(1) +} + +#addSeven{ + width: 100px; + height: 15px; + background-color:#000000; + clip-path:path(1); + aspect-ratio:2; +} + +#addSeven:disabled{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +#addSeven:active{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +#addSeven:focus{ + width: 100px; + height: 15px; + background-color:#ff0000; +} + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); +} + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } +} diff --git a/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.hml index 4d35198df7753d9d37488bb3df5c5cd0252569f4..e838c59d84c8376a8c2c24945148c3a2f458237f 100644 --- a/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.hml @@ -11,4 +11,119 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */--> \ No newline at end of file + */--> + +
+
+ + image-animator通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + + < image-animator images="" duration="" id="styleOne"> + + < image-animator images="" duration="" id="styleTwo"> + + < image-animator images="" duration="" id="styleThree"> + + < image-animator images="" duration="" id="styleFour"> + + < image-animator images="" duration="" id="styleFive"> + + < image-animator images="" duration="" id="styleSix"> + + < image-animator images="" duration="" id="styleSeven"> + + < image-animator images="" duration="" id="styleEight"> + + + + 通用样式9-20 \n display flex z-index position + +
+ < image-animator images="" duration="" id="styleTen"> + + < image-animator images="" duration="" id="styleEleven"> + + < image-animator images="" duration="" id="styleTwelve"> + + < image-animator images="" duration="" id="styleThirteen"> + + < image-animator images="" duration="" id="styleFourteen"> + + < image-animator images="" duration="" id="styleFifteen"> + + < image-animator images="" duration="" id="styleSixteen"> + + < image-animator images="" duration="" id="styleSeventeen"> + + < image-animator images="" duration="" id="styleEighteen"> + + < image-animator images="" duration="" id="styleNineteen"> + + < image-animator images="" duration="" id="styleTwenty"> + +
+ + + 通用样式21-23 box-shadow + +
+ < image-animator images="" duration="" id="styleTwentyOne"> + + < image-animator images="" duration="" id="styleTwentyTwo"> + + < image-animator images="" duration="" id="styleTwentyThree"> + +
+ + + 通用样式23-25 visibility clip-path + + < image-animator images="" duration="" id="styleTwentyFour"> + + < image-animator images="" duration="" id="styleTwentyFive"> + + + + 通用样式26-31 background + + < image-animator images="" duration="" id="styleTwentySix"> + + < image-animator images="" duration="" id="styleTwentySeven"> + + < image-animator images="" duration="" id="styleTwentyNine"> + + < image-animator images="" duration="" id="styleThirty"> + + < image-animator images="" duration="" id="styleThirtyOne"> + + + + 通用样式32 clip-path image-animator-fill mask- image-animator + + < image-animator images="" duration="" id="styleThirtyTwo"> + + + + 通用样式33 filter:blur() backdrop-filter:blur() window-filter:blur() + + < image-animator images="" duration="" id="styleThirtyThree"> + +
+
+
+
+ + image-animator特有样式 + + + + 特有样式 + + +
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.js b/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.js index 336492c8796cfa5ad4c6daef37793e77aebe4d8a..22648660218b09789777451406d48abfd8185160 100644 --- a/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/imageAnimator/style/index.js @@ -12,3 +12,190 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +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, + + specificOne : null, + specificTwo : null, + specificThree : null, + specificFour : null, + specificFive : null, + specificSix : null, + specificSeven : null, + specificEight : null, + specificNine : null, + specificTen : null, + specificEleven : null, + specificTwelve : null, + specificThirteen : null, + + addOne : null, + addTwo : null, + addThree : null, + addFour : null, + addFive : null, + addSix : null, + addSeven : null, + addEight : null, + addNine : null, + addTen : null, + addEleven : null, + addTwelve : null, + addThirteen : null, + addFourteen : null, + addFifteen : null, + addSixteen : null, + addSeventeen : null, + addEighteen : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + + specificOne : this.specificOne, + specificTwo : this.specificTwo, + specificThree : this.specificThree, + specificFour : this.specificFour, + specificFive : this.specificFive, + specificSix : this.specificSix, + specificSeven : this.specificSeven, + specificEight : this.specificEight, + specificNine : this.specificNine, + specificTen : this.specificTen, + specificEleven : this.specificEleven, + specificTwelve : this.specificTwelve, + specificThirteen : this.specificThirteen, + + addOne : this.addOne, + addTwo : this.addTwo, + addThree : this.addThree, + addFour : this.addFour, + addFive : this.addFive, + addSix : this.addSix, + addSeven : this.addSeven, + addEight : this.addEight, + addNine : this.addNine, + addTen : this.addTen, + addEleven : this.addEleven, + addTwelve : this.addTwelve, + addThirteen : this.addThirteen, + addFourteen : this.addFourteen, + addFifteen : this.addFifteen, + addSixteen : this.addSixteen, + addSeventeen : this.addSeventeen, + addEighteen : this.addEighteen + } + }, + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + + this.specificOne = this.$element("styleThirtyOne").getInspector() + this.specificTwo = this.$element("styleThirtyTwo").getInspector() + this.specificThree = this.$element("styleThirtyOne").getInspector() + this.specificFour = this.$element("styleThirtyTwo").getInspector() + this.specificFive = this.$element("styleThirtyOne").getInspector() + this.specificSix = this.$element("styleThirtyTwo").getInspector() + this.specificSeven = this.$element("styleThirtyOne").getInspector() + this.specificEight = this.$element("styleThirtyTwo").getInspector() + this.specificNine = this.$element("styleThirtyTwo").getInspector() + this.specificTen = this.$element("styleThirtyTwo").getInspector() + this.specificEleven = this.$element("styleThirtyTwo").getInspector() + this.specificTwelve = this.$element("styleThirtyTwo").getInspector() + this.specificThirteen = this.$element("styleThirtyTwo").getInspector() + }, +} diff --git a/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.css b/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.css index 93de27cbc65a6ae4bd3c7f1e4cb5b9a1d3514bd8..f75637e19ddbbf22e42dac52d5223eb53540e63e 100644 --- a/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.css @@ -353,6 +353,32 @@ mask-position: center; } +#styleThirtyThree{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + flex-direction : row; +} + +#styleThirtyFour{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + justify-content : center; +} + + + .top-list-item { width:100%; background-color:#D4F2E7; diff --git a/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.hml index 382a2e24c2f4d152dbc54d7312777e9806cebec6..4ee9b9e96aff9b54a5c3da3de30d101cafe8a8b0 100644 --- a/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.hml @@ -28,15 +28,15 @@ - + - + - + - + - + diff --git a/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.js b/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.js index 154e40b7a6936a1115bdb30451c56ce569b48d9b..8f50effbb812f7718e7efdb2f8f7ba05acdac756 100644 --- a/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/listItemGroup/style/index.js @@ -15,44 +15,118 @@ import prompt from '@system.prompt'; export default { - data: { - direction: 'column', - list: [] + 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, + styleThirtyThree : null, + styleThirtyFour : null, }, - onInit() { - this.list = [] - this.listAdd = [] - for (var i = 1; i <= 7; i++) { - var dataItem = { - value: 'GROUP' + i, - }; - this.list.push(dataItem); + + onShow(){ + this.getCommonStyleValues(); + this.getSpecialStyleValues(); + 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + styleThirtyThree : this.styleThirtyThree, + styleThirtyFour : this.styleThirtyFour, } }, - collapseOne(e) { - this.$element('mylist').collapseGroup({ - groupid: 'GROUP1' - }) - }, - expandOne(e) { - this.$element('mylist').expandGroup({ - groupid: 'GROUP1' - }) - }, - collapseAll(e) { - this.$element('mylist').collapseGroup() - }, - expandAll(e) { - this.$element('mylist').expandGroup() - }, - collapse(e) { - prompt.showToast({ - message: 'Close ' + e.groupid - }) + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() }, - expand(e) { - prompt.showToast({ - message: 'Open ' + e.groupid - }) + + getSpecialStyleValues() { + this.styleThirtyThree = this.$element("styleThirtyThree").getInspector() + this.styleThirtyFour = this.$element("styleThirtyFour").getInspector() } } diff --git a/arkui/ace_standard/src/main/js/default/pages/richtext/style/index.js b/arkui/ace_standard/src/main/js/default/pages/richtext/style/index.js index 8179ff70cbe9fa27c38c5386a6f497949bf60f3a..b1b279175642da6d839bf5a868adb47733134254 100644 --- a/arkui/ace_standard/src/main/js/default/pages/richtext/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/richtext/style/index.js @@ -14,6 +14,28 @@ */ export default { + data:{ + styleOne : null, + styleTwo : null, + styleThree : null, + styleFour : null, + }, + onShow(){ + this.getCommonStyleValues(); + globalThis.value = { + styleOne : this.styleOne, + styleTwo : this.styleTwo, + styleThree : this.styleThree, + styleFour : this.styleFour, + } + }, + + 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() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/search/style/index.css b/arkui/ace_standard/src/main/js/default/pages/search/style/index.css index 4a45d3eb108b49649154e73122e0614943ed7f7e..d6816236ba766533666c973f4dbddb5c8f920f02 100644 --- a/arkui/ace_standard/src/main/js/default/pages/search/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/search/style/index.css @@ -11,4 +11,408 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */ \ No newline at end of file + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +#styleOne{ + width: 150px; + height: 20px; + padding-top: 1px; + padding-left: 2px; + padding-right: 3px; + padding-bottom: 0.5px; + margin-left: 1px; + margin-top: 2px; + margin-right: 3px; + margin-bottom: 0.5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dotted; + border-bottom-style: solid; + border-left-width: 1px; + border-right-width: 1.5px; + border-top-width: 2px; + border-bottom-width: 0.5px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 0px; + opacity: 0.5; + align-self:flex-end; +} + +#styleTwo{ + width: 150px; + height: 20px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleThree{ + width: 50px; + height: 20px; + padding: 2px; + margin:1px; + border-left: 1px solid #ff0000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + opacity: 1; + align-self:baseline; +} + +#styleFour{ + width: 50px; + height: 20px; + align-self:center; + border: 2px solid #00ff00; +} + +#styleFive{ + width: 150px; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleSix{ + width: 100%; + height: 2%; + background-color: #ff0000; + padding-top: 1%; + padding-left: 2%; + padding-right: 3%; + padding-bottom: 0.5%; + margin-left: 1%; + margin-top: 2%; + margin-right: 1.5%; + margin-bottom: 0.5%; +} + +#styleSeven{ + width: 70%; + height: 1%; + padding-start: 1%; + padding-end: 2%; + margin-start: 1%; + margin-end: 2%; + background-color: #00ff00; +} + +#styleEight{ + width: 60%; + height: 1%; + margin: 1%; + padding: 2%; + background-color: #0000ff; +} + +#styleNine{ + width: 100%; + height: 40px; + display:flex; +} + +#styleFive{ + width: 100%; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +#styleTen{ + width: 100%; + height: 400%; + display: none; + background-color: #ff0000; +} + +#styleEleven{ + height: 40%; + background-color: #00ff00; + flex:1 1 20px; + z-index:10; +} + +#styleTwelve{ + height: 50%; + background-color: #ff00ff; + flex-grow:2; + flex-shrink: 3; + flex-basis: 30px; + z-index:13; +} + +#styleThirteen{ + position: absolute; + left: 10px; + top: 20px; + width: 10px; + height: 10px; + background-color: #00ff00; + z-index:12; +} + +#styleFourteen{ + position: absolute; + right: 10px; + bottom: 20px; + width: 10px; + height: 10px; + background-color: #0000ff; + z-index:3; +} + +#styleFifteen{ + position: absolute; + left: 10%; + top: 20%; + width: 10px; + height: 10px; + background-color: #fff000; + z-index:5; +} + +#styleSixteen{ + position: absolute; + right: 10%; + bottom: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:15; +} + +#styleSeventeen{ + position: absolute; + start: 50px; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:7; +} + +#styleEighteen{ + position: absolute; + end: 20px; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:4; +} + +#styleNineteen{ + position: absolute; + start: 20%; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:1; +} + +#styleTwenty{ + position: absolute; + end: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:17; +} + +#styleTwentyOne{ + height: 20px; + box-shadow: 2px 4px; + flex-weight: 1; + margin:5px; +} + +#styleTwentyTwo{ + flex-weight: 1; + height: 20px; + box-shadow: 2px 4px 6px 8px; + margin:5px; +} + +#styleTwentyThree{ + flex-weight: 1; + height: 20px; + box-shadow: 1px 2px 3px 4px #ff0000; + margin:5px; +} + +#styleTwentyFour{ + width: 150px; + height: 20px; + background-color: #00ffff; + clip-path:inset(2 23); + visibility: visible; +} + +#styleTwentyFive{ + width: 150px; + height: 20px; + background-color: #00ffff; + visibility: hidden; +} + +#styleTwentySix{ + width: 150px; + height: 20px; + background-color: #999999; +} + +#styleTwentySeven{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); +} + +#styleTwentyNine{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:contain; + background-repeat: repeat-x; + background-position: center; +} + +#styleThirty{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:50px 10px; + background-repeat: no-repeat; + background-position: 10px 10px; +} + +#styleThirtyOne{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:10% 20%; + background-repeat: repeat; + background-position: 30% 40%; +} + +#styleThirtyTwo{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#specificOne{ + width: 70px; + height: 25px; + color: #99ff5555; +} + +#specificTwo{ + width: 100px; + height: 25px; + font-size: 10px; +} + +#specificThree{ + width: 18%; + height: 48%; + allow-scale: false; +} + +#specificFour{ + width: 18%; + height: 48%; + placeholder-color: #00ff00; +} + +#specificFive{ + width: 18%; + height: 48%; + color: #99ff5555; + font-size: 10px; + allow-scale: false; + placeholder-color: #00ff00; +} + +#specificSix{ + width: 18%; + height: 48%; + font-weight: bold; +} + +#specificSeven{ + width: 50px; + height: 10px; + font-family: sans-serif; +} + +#specificEight{ + width: 70px; + height: 10px; + caret-color: #ff0000; +} + +#specificNine{ + width: 100%; + height: 50px; + font-weight: bold; + font-family: sans-serif; + caret-color: #ff0000; +} diff --git a/arkui/ace_standard/src/main/js/default/pages/search/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/search/style/index.hml index 4d35198df7753d9d37488bb3df5c5cd0252569f4..2198e638b2726f8c3da03007796faa35f43b4409 100644 --- a/arkui/ace_standard/src/main/js/default/pages/search/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/search/style/index.hml @@ -11,4 +11,133 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */--> \ No newline at end of file + */--> + +
+
+ + search通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + + + + + + + + + + + + + + + + + + + + 通用样式9-20 \n display flex z-index position + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ + + 通用样式21-23 box-shadow + +
+ + + + + + +
+ + + 通用样式23-25 visibility clip-path + + + + + + + + 通用样式26-31 background + + + + + + + + + + + + + + 通用样式32 clip-path image-fill mask-image + + + +
+
+
+
+ + search特有样式 + + + + 特有样式 color font-size allow-scale placeholder-color + + + + + + + + + + + + + 特有样式 font-weight font-family caret-color + + + + + + + + + +
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/search/style/index.js b/arkui/ace_standard/src/main/js/default/pages/search/style/index.js index 336492c8796cfa5ad4c6daef37793e77aebe4d8a..50c053ffab217cd90920a0642134662e35b3f372 100644 --- a/arkui/ace_standard/src/main/js/default/pages/search/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/search/style/index.js @@ -12,3 +12,137 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +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, + specificOne : null, + specificTwo : null, + specificThree : null, + specificFour : null, + specificFive : null, + specificSix : null, + specificSeven : null, + specificEight : null, + specificNine : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + specificOne : this.specificOne, + specificTwo : this.specificTwo, + specificThree : this.specificThree, + specificFour : this.specificFour, + specificFive : this.specificFive, + specificSix : this.specificSix, + specificSeven : this.specificSeven, + specificEight : this.specificEight, + specificNine : this.specificNine + } + }, + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + this.specificOne = this.$element("specificOne").getInspector() + this.specificTwo = this.$element("specificTwo").getInspector() + this.specificThree = this.$element("specificThree").getInspector() + this.specificFour = this.$element("specificFour").getInspector() + this.specificFive = this.$element("specificFive").getInspector() + this.specificSix = this.$element("specificSix").getInspector() + this.specificSeven = this.$element("specificSeven").getInspector() + this.specificEight = this.$element("specificEight").getInspector() + this.specificNine = this.$element("specificNine").getInspector() + }, +} diff --git a/arkui/ace_standard/src/main/js/default/pages/select/style/index.css b/arkui/ace_standard/src/main/js/default/pages/select/style/index.css index 57a9687ac566ec45eff69115f357db18afae2089..24443ac741d53f9337084a8560c2e6e16ec983b5 100644 --- a/arkui/ace_standard/src/main/js/default/pages/select/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/select/style/index.css @@ -358,7 +358,7 @@ flex-direction: column; flex-weight: 1; } -#specificFontFamily1{ +#specificOne{ background-color: yellowgreen; width: 100%; height: 50px; diff --git a/arkui/ace_standard/src/main/js/default/pages/select/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/select/style/index.hml index f937667c4befb3e7238cfd930495e0e8f6232176..a169aa35d61fef27795c88ad7251cd6bdc4ca3a0 100644 --- a/arkui/ace_standard/src/main/js/default/pages/select/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/select/style/index.hml @@ -117,42 +117,10 @@ 特有样式 font-family - - - 特有样式 color - - - - -
- - 补充样式 - - - - - - - - -
- diff --git a/arkui/ace_standard/src/main/js/default/pages/select/style/index.js b/arkui/ace_standard/src/main/js/default/pages/select/style/index.js index 8179ff70cbe9fa27c38c5386a6f497949bf60f3a..78e7b6c1fa6b7d233015b397014e6601ff760440 100644 --- a/arkui/ace_standard/src/main/js/default/pages/select/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/select/style/index.js @@ -14,6 +14,111 @@ */ 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, + specificOne : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + specificOne : this.specificOne + } + }, + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + this.specificOne = this.$element("specificOne").getInspector() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/slider/style/index.js b/arkui/ace_standard/src/main/js/default/pages/slider/style/index.js index 8179ff70cbe9fa27c38c5386a6f497949bf60f3a..372430aaac76034b41bca8dd96d2db6b6d5a8088 100644 --- a/arkui/ace_standard/src/main/js/default/pages/slider/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/slider/style/index.js @@ -14,6 +14,126 @@ */ 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, + specificColor1 : null, + specificColor2 : null, + specificTwo1 : null, + specificTwo2 : null, + specificThree1 : null, + specificThree2 : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + specificColor1 : this.specificColor2, + specificColor2 : this.specificColor2, + specificTwo1 : this.specificTwo1, + specificTwo2 : this.specificTwo2, + specificThree1 : this.specificThree1, + specificThree2 : this.specificThree2 + } + }, + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + this.specificColor1 = this.$element("specificColor1").getInspector() + this.specificColor2 = this.$element("specificColor2").getInspector() + this.specificTwo1 = this.$element("specificTwo1").getInspector() + this.specificTwo2 = this.$element("specificTwo2").getInspector() + this.specificThree1 = this.$element("specificThree1").getInspector() + this.specificThree2 = this.$element("specificThree2").getInspector() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/span/style/index.css b/arkui/ace_standard/src/main/js/default/pages/span/style/index.css index 4a45d3eb108b49649154e73122e0614943ed7f7e..2857c58760f42a92786583ba83c6f2435974f6e1 100644 --- a/arkui/ace_standard/src/main/js/default/pages/span/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/span/style/index.css @@ -11,4 +11,99 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */ \ No newline at end of file + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +.spanTextTitle { + height: 20px; + font-size: 15px; + margin-bottom: 2px; + background-color:#0FFFFF; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#specificOne1{ + color: yellow; +} +#specificOne2{ + color: yellowgreen; +} + +#specificTwo1{ + font-size: 10px; +} +#specificTwo2{ + font-size: 40px; +} + +#specificThree1{ + allow-scale: true; +} +#specificThree2{ + allow-scale: false; +} + +#specificFour1{ + font-style: normal; +} +#specificFour2{ + font-style: italic; +} + +#specificFive1{ + font-weight: bold; +} +#specificFive2{ + font-weight: lighter; +} + +#specificSix1{ + text-decoration: underline; +} +#specificSix2{ + text-decoration: line-through; +} + +#specificSeven1{ + font-family: monospace; +} +#specificSeven2{ + font-family: sans-serif; +} diff --git a/arkui/ace_standard/src/main/js/default/pages/span/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/span/style/index.hml index 4d35198df7753d9d37488bb3df5c5cd0252569f4..1570ccac983fb269ab308025eef9b62f8a85b938 100644 --- a/arkui/ace_standard/src/main/js/default/pages/span/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/span/style/index.hml @@ -11,4 +11,76 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */--> \ No newline at end of file + */--> + +
+
+ + span通用样式 + +
+
+
+
+ + span特有样式 + + + 特有样式 color + + + + span1 + + + + 特有样式 font-size + + + + span1 + + + + 特有样式 allow-scale + + + + span1 + + + + 特有样式 font-style + + + + span1 + + + + 特有样式 font-weight + + + + span1 + + + + 特有样式 text-decoration + + + + span1 + + + + 特有样式 font-family + + + + span1 + + +
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/span/style/index.js b/arkui/ace_standard/src/main/js/default/pages/span/style/index.js index 4a45d3eb108b49649154e73122e0614943ed7f7e..8ffae417ba55510c263c8ebf9c553a7efef787dd 100644 --- a/arkui/ace_standard/src/main/js/default/pages/span/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/span/style/index.js @@ -11,4 +11,60 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */ \ No newline at end of file + */ + +export default { + data:{ + specificOne1 : null, + specificOne2 : null, + specificTwo1 : null, + specificTwo2 : null, + specificThree1 : null, + specificThree2 : null, + specificFour1 : null, + specificFour2 : null, + specificFive1 : null, + specificFive2 : null, + specificSix1 : null, + specificSix2 : null, + specificSeven1 : null, + specificSeven2 : null + }, + + onShow(){ + this.getCommonStyleValues(); + globalThis.value = { + specificOne1 : this.specificOne1, + specificOne2 : this.specificOne2, + specificTwo1 : this.specificTwo1, + specificTwo2 : this.specificTwo2, + specificThree1 : this.specificThree1, + specificThree2 : this.specificThree2, + specificFour1 : this.specificFour1, + specificFour2 : this.specificFour2, + specificFive1 : this.specificFive1, + specificFive2 : this.specificFive2, + specificSix1 : this.specificSix1, + specificSix2 : this.specificSix2, + specificSeven1 : this.specificSeven1, + specificSeven2 : this.specificSeven2 + } + }, + + getCommonStyleValues(){ + this.specificOne1 = this.$element("specificOne1").getInspector() + this.specificOne2 = this.$element("specificOne2").getInspector() + this.specificTwo1 = this.$element("specificTwo1").getInspector() + this.specificTwo2 = this.$element("specificTwo2").getInspector() + this.specificThree1 = this.$element("specificThree1").getInspector() + this.specificThree2 = this.$element("specificThree2").getInspector() + this.specificFour1 = this.$element("specificFour1").getInspector() + this.specificFour2 = this.$element("specificFour2").getInspector() + this.specificFive1 = this.$element("specificFive1").getInspector() + this.specificFive2 = this.$element("specificFive2").getInspector() + this.specificSix1 = this.$element("specificSix1").getInspector() + this.specificSix2 = this.$element("specificSix2").getInspector() + this.specificSeven1 = this.$element("specificSeven1").getInspector() + this.specificSeven2 = this.$element("specificSeven2").getInspector() + }, +} diff --git a/arkui/ace_standard/src/main/js/default/pages/stack/style/index.js b/arkui/ace_standard/src/main/js/default/pages/stack/style/index.js index 8452f14bb05344e8032c4c0dbcf73b5b023d4e34..b9cfd23a19fe6380f3be48d3e837f56972165e45 100644 --- a/arkui/ace_standard/src/main/js/default/pages/stack/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/stack/style/index.js @@ -77,6 +77,8 @@ export default { styleTwentyFour : this.styleTwentyFour, styleTwentyFive : this.styleTwentyFive, styleTwentySix : this.styleTwentySix, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, styleThirty : this.styleThirty, styleThirtyOne : this.styleThirtyOne, styleThirtyTwo : this.styleThirtyTwo @@ -110,6 +112,8 @@ export default { this.styleTwentyFour = this.$element("styleTwentyFour").getInspector() this.styleTwentyFive = this.$element("styleTwentyFive").getInspector() this.styleTwentySix = this.$element("styleTwentySix").getInspector() + this.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() this.styleThirty = this.$element("styleThirty").getInspector() this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() diff --git a/arkui/ace_standard/src/main/js/default/pages/stepper/style/index.js b/arkui/ace_standard/src/main/js/default/pages/stepper/style/index.js index bb29005fc5c93670676d6debec44b80f964e4116..b9cfd23a19fe6380f3be48d3e837f56972165e45 100644 --- a/arkui/ace_standard/src/main/js/default/pages/stepper/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/stepper/style/index.js @@ -14,5 +14,108 @@ */ 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.css b/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.css index bbf8044dd68232413bb9986a63348fc5a8dc5ee6..99d20f168e39cb7b5f6e1393b9c7a420371a6aef 100644 --- a/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.css +++ b/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.css @@ -43,8 +43,6 @@ } #styleOne{ - width: 150px; - height: 20px; padding-top: 1px; padding-left: 2px; padding-right: 3px; @@ -74,8 +72,6 @@ } #styleTwo{ - width: 150px; - height: 20px; padding-start: 1px; padding-end: 2px; margin-start: 1px; @@ -89,8 +85,6 @@ } #styleThree{ - width: 50px; - height: 20px; padding: 2px; margin:1px; border-left: 1px solid #ff0000; @@ -102,22 +96,16 @@ } #styleFour{ - width: 50px; - height: 20px; align-self:center; border: 2px solid #00ff00; } #styleFourNew{ - width: 50px; - height: 20px; align-self:stretch; border: 2px solid #00ff00; } #styleFive{ - width: 150px; - height: 40px; border: 5px; border-image-source: url('/common/images/image.png'); border-image-slice: 5px 10px 10px 5px; @@ -138,8 +126,6 @@ /*}*/ #styleSix{ - width: 100%; - height: 2%; background-color: #ff0000; padding-top: 1%; padding-left: 2%; @@ -152,8 +138,6 @@ } #styleSeven{ - width: 70%; - height: 1%; padding-start: 1%; padding-end: 2%; margin-start: 1%; @@ -162,44 +146,34 @@ } #styleEight{ - width: 60%; - height: 1%; margin: 1%; padding: 2%; background-color: #0000ff; } #styleNine{ - width: 100%; - height: 20px; display:flex; background-color: #0000ff; } #styleNineNew{ - width: 100%; - height: 20px; display:grid; background-color: #0000ff; } #styleTen{ - width: 100%; - height: 400%; display: none; background-color: #ff0000; } #styleEleven{ - height: 40%; background-color: #00ff00; flex:1 1 20px; z-index:10; } #styleTwelve{ - height: 50%; background-color: #ff00ff; flex-grow:2; flex-shrink: 3; @@ -208,83 +182,46 @@ } #styleThirteen{ - position: absolute; - left: 10px; - top: 20px; - width: 10px; - height: 10px; background-color: #00ff00; z-index:12; } #styleFourteen{ - position: absolute; - right: 10px; - bottom: 20px; - width: 10px; - height: 10px; background-color: #0000ff; z-index:3; } #styleFifteen{ - position: absolute; - left: 10%; - top: 20%; - width: 10px; - height: 10px; background-color: #fff000; z-index:5; } #styleSixteen{ - position: absolute; - right: 10%; - bottom: 20%; - width: 10px; - height: 10px; background-color: #00ffff; z-index:15; } #styleSeventeen{ - position: absolute; - start: 50px; - width: 10px; - height: 10px; background-color: #ffff00; z-index:7; } #styleEighteen{ - position: absolute; - end: 20px; - width: 10px; - height: 10px; background-color: #00ffff; z-index:4; } #styleNineteen{ - position: relative; - start: 20%; - width: 10px; - height: 10px; background-color: #ffff00; z-index:1; } #styleTwenty{ - position: fixed; - end: 20%; - width: 10px; - height: 10px; background-color: #00ffff; z-index:17; } #styleTwentyOne{ - height: 20px; box-shadow: 2px 4px; flex-weight: 1; margin:5px; @@ -292,48 +229,36 @@ #styleTwentyTwo{ flex-weight: 1; - height: 20px; box-shadow: 2px 4px 6px 8px; margin:5px; } #styleTwentyThree{ flex-weight: 1; - height: 20px; box-shadow: 1px 2px 3px 4px #ff0000; margin:5px; } #styleTwentyFour{ - width: 150px; - height: 20px; background-color: #00ffff; clip-path:inset(2 23); visibility: visible; } #styleTwentyFive{ - width: 150px; - height: 20px; background-color: #00ffff; visibility: hidden; } #styleTwentySix{ - width: 150px; - height: 20px; background-color: #999999; } #styleTwentySeven{ - width: 150px; - height: 20px; background: linear-gradient(pink,#fff000); } #styleTwentyNine{ - width: 150px; - height: 20px; background-image:url('common/images/image.png'); background-size:contain; background-repeat: repeat-x; @@ -341,8 +266,6 @@ } #styleThirty{ - width: 150px; - height: 20px; background-image:url('common/images/image.png'); background-size:50px 10px; background-repeat: no-repeat; @@ -350,8 +273,6 @@ } #styleThirtyOne{ - width: 150px; - height: 20px; background-image:url('common/images/image.png'); background-size:10% 20%; background-repeat: repeat; @@ -359,8 +280,6 @@ } #styleThirtyTwo{ - width: 150px; - height: 20px; background-image:url('common/images/image.png'); background-size: auto; background-repeat: repeat; @@ -368,8 +287,6 @@ } #styleThirtyThree{ - width: 150px; - height: 20px; background: linear-gradient(pink,#fff000); clip-path: margin-box; image-fill: #000fff; @@ -379,8 +296,6 @@ } #styleThirtyFour{ - width: 150px; - height: 20px; background: linear-gradient(pink,#fff000); clip-path: margin-box; image-fill: #000fff; @@ -390,122 +305,82 @@ } #styleThirtyFive{ - width: 150px; - height: 20px; background-color: #000fff; transform: none; } #styleThirtySix{ - width: 150px; - height: 20px; background-color: #ff0fff; transform: translate3d(10,2,2); } #styleThirtySeven{ - width: 150px; - height: 20px; background-color: #f0000f; transform: translateY(5); } #styleThirtyEight{ - width: 150px; - height: 20px; background-color: #fff00f; transform: translateZ(5); } #styleThirtyNine{ - width: 150px; - height: 20px; background-color: #ff000f; transform: scale(1.2); } #styleForty{ - width: 150px; - height: 20px; background-color: #ff0fff; transform: scale3d(1.2,1.2,1.2); } #styleFortyOne{ - width: 150px; - height: 20px; background-color: #000fff; transform: scaleX(1.2); } #styleFortyTwo{ - width: 150px; - height: 20px; background-color: #ff80ff; transform: scaleY(1.5); } #styleFortyThree{ - width: 150px; - height: 20px; background-color: #ff30ff; transform: scaleZ(1.5); } #styleFortyFour{ - width: 150px; - height: 20px; background-color: #f0000f; transform: rotate3d(1.5,1.5,1.5,10); } #styleFortyFive{ - width: 150px; - height: 20px; background-color: #f0f00f; transform: rotateX(20); } #styleFortySix{ - width: 150px; - height: 20px; background-color: #f00fff; transform: rotateY(30); } #styleFortySeven{ - width: 150px; - height: 20px; background-color: #f0000f; transform: rotateZ(5); } #styleFortyEight{ - width: 150px; - height: 20px; background-color: #f00fff; transform: skew(10,10); } #styleFortyNine{ - width: 150px; - height: 20px; background-color: #f0000f; transform: skewX(10); } #styleFifty{ - width: 150px; - height: 20px; background-color: #f00fff; transform: skewY(10); } #styleFiftyOne{ - width: 150px; - height: 20px; background-color: #ff88ff; transform: perspective(20); } #styleFiftyTwo{ - width: 150px; - height: 20px; background-color: #ff11ff; shared-transition-effect:exchange; } #styleFiftyThree{ - width: 150px; - height: 20px; background-color: #ffff0f; shared-transition-effect:static; } #styleFiftyFour{ - width: 150px; - height: 20px; background-color: #f00f0f; shared-transition-name: shared-transition; } @@ -515,8 +390,6 @@ } #styleFiftyFive{ - width: 150px; - height: 20px; background-color: #00ff00; shared-transition-timing-function: friction; } @@ -549,4 +422,65 @@ } .color-violet{ background-color: violet; +} + +.stepper-itemTextTitle { + height: 20px; + font-size: 15px; + margin-bottom: 2px; + background-color:#0FFFFFF; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#specificOne1{ + color: yellow; +} +#specificOne2{ + color: yellowgreen; +} + +#specificTwo1{ + font-size: 10px; +} +#specificTwo2{ + font-size: 40px; +} + +#specificThree1{ + allow-scale: true; +} +#specificThree2{ + allow-scale: false; +} + +#specificFour1{ + font-style: normal; +} +#specificFour2{ + font-style: italic; +} + +#specificFive1{ + font-weight: bold; +} +#specificFive2{ + font-weight: lighter; +} + +#specificSix1{ + text-decoration: underline; +} +#specificSix2{ + text-decoration: line-through; +} + +#specificSeven1{ + font-family: monospace; +} +#specificSeven2{ + font-family: sans-serif; } \ No newline at end of file diff --git a/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.hml b/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.hml index 85e742a011b8640e6561638623541ef66f6f7df0..b6529843fb8971e39989d98d23fd32f8960153e5 100644 --- a/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.hml +++ b/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.hml @@ -20,7 +20,7 @@ - 通用样式 1-8 \n width height padding margin border opacity align-self + 通用样式 1-8 \n padding margin border opacity align-self @@ -56,7 +56,7 @@ - 通用样式9-20 \n display flex z-index position + 通用样式9-20 \n display flex z-index @@ -177,9 +177,81 @@ stepper特有样式 - - - + + 特有样式 color + + + + stepper-item1 + + + stepper-item2 + + + + 特有样式 font-size + + + + stepper-item1 + + + stepper-item2 + + + + 特有样式 allow-scale + + + + stepper-item1 + + + stepper-item2 + + + + 特有样式 font-style + + + + stepper-item1 + + + stepper-item2 + + + + 特有样式 font-weight + + + + stepper-item1 + + + stepper-item2 + + + + 特有样式 text-decoration + + + + stepper-item1 + + + stepper-item2 + + + + 特有样式 font-family + + + + stepper-item1 + + + stepper-item2 diff --git a/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.js b/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.js index a466f13f63fc579e234388074a03f16adf386a16..19a9f2291bf8fa00cca34261da9cc8a38f55046b 100644 --- a/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.js +++ b/arkui/ace_standard/src/main/js/default/pages/stepperItem/style/style.js @@ -13,7 +13,151 @@ * limitations under the License. */ - 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, + specificOne1 : null, + specificOne2 : null, + specificTwo1 : null, + specificTwo2 : null, + specificThree1 : null, + specificThree2 : null, + specificFour1 : null, + specificFour2 : null, + specificFive1 : null, + specificFive2 : null, + specificSix1 : null, + specificSix2 : null, + specificSeven1 : null, + specificSeven2 : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + specificOne1 : this.specificOne1, + specificOne2 : this.specificOne2, + specificTwo1 : this.specificTwo1, + specificTwo2 : this.specificTwo2, + specificThree1 : this.specificThree1, + specificThree2 : this.specificThree2, + specificFour1 : this.specificFour1, + specificFour2 : this.specificFour2, + specificFive1 : this.specificFive1, + specificFive2 : this.specificFive2, + specificSix1 : this.specificSix1, + specificSix2 : this.specificSix2, + specificSeven1 : this.specificSeven1, + specificSeven2 : this.specificSeven2 + } + }, + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + this.specificOne1 = this.$element("specificOne1").getInspector() + this.specificOne2 = this.$element("specificOne2").getInspector() + this.specificTwo1 = this.$element("specificTwo1").getInspector() + this.specificTwo2 = this.$element("specificTwo2").getInspector() + this.specificThree1 = this.$element("specificThree1").getInspector() + this.specificThree2 = this.$element("specificThree2").getInspector() + this.specificFour1 = this.$element("specificFour1").getInspector() + this.specificFour2 = this.$element("specificFour2").getInspector() + this.specificFive1 = this.$element("specificFive1").getInspector() + this.specificFive2 = this.$element("specificFive2").getInspector() + this.specificSix1 = this.$element("specificSix1").getInspector() + this.specificSix2 = this.$element("specificSix2").getInspector() + this.specificSeven1 = this.$element("specificSeven1").getInspector() + this.specificSeven2 = this.$element("specificSeven2").getInspector() + }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.css b/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.css index 5c4c1d87fa5e983621c40f7d950abae189ebeb90..b5e1d9a5b2e6e7237f277c226a7d5fc2d9b5e788 100644 --- a/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.css +++ b/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.css @@ -351,4 +351,69 @@ mask-image: url('common/images/icon.png'); mask-size: cover; mask-position: center; -} \ No newline at end of file +} + +.spanTextTitle { + height: 20px; + font-size: 15px; + margin-bottom: 2px; + background-color:#0FFFFF; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#specificOne1{ + indicator-color: yellow; +} +#specificOne2{ + indicator-color: yellowgreen; +} + +#specificTwo1{ + indicator-selected-color: red; +} +#specificTwo2{ + indicator-selected-color: purple; +} + +#specificThree1{ + indicator-size: 3px; +} +#specificThree2{ + indicator-size: 6px; +} + +#specificFour1{ + indicator-top: 10%; + indicator-left: 10%; + +} +#specificFour2{ + indicator-bottom: 10px; + indicator-right: 10%; +} +#specificFour3{ + indicator-top: 5px; + indicator-right: 10px; +} +#specificFour4{ + indicator-bottom: 10%; + indicator-left: 5px; +} + +#specificFive1{ + next-margin: 10px; +} +#specificFive2{ + next-margin: 20%; +} + +#specificSix1{ + previous-margin: 5px; +} +#specificSix2{ + previous-margin: 10%; +} diff --git a/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.hml index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..fae1a4f813b767bfdf6ce23a0bd2c5099b36872b 100644 --- a/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.hml +++ b/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.hml @@ -0,0 +1,164 @@ + + +
+
+ + swiper通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + + + + + + + + + + + + + + + + + + + + 通用样式9-20 \n display flex z-index position + + + + + + + + + + + + + + + + + + + + + + + + + + + + 通用样式21-23 box-shadow + +
+ + + + + + +
+ + + 通用样式23-25 visibility clip-path + + + + + + + + 通用样式26-31 background + + + + + + + + + + + + + + 通用样式32 clip-path image-fill mask-image + + + +
+
+
+
+ + swiper特有样式 + + + 特有样式 indicator-color + + + + + + + 特有样式 indicator-selected-color + + + + + + + 特有样式 indicator-size + + + + + + + 特有样式 indicator-top|left|right|bottom + + + + + + + + + + + 特有样式 next-margin + + + + + + + 特有样式 previous-margin + + + + + +
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.js b/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.js index 8452f14bb05344e8032c4c0dbcf73b5b023d4e34..90fd66a671ff16cc7c33b552798c559a1e4304a2 100644 --- a/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.js +++ b/arkui/ace_standard/src/main/js/default/pages/swiper/style/index.js @@ -45,7 +45,21 @@ export default { styleTwentyNine : null, styleThirty : null, styleThirtyOne : null, - styleThirtyTwo : null + styleThirtyTwo : null, + specificOne1 : null, + specificOne2 : null, + specificTwo1 : null, + specificTwo2 : null, + specificThree1 : null, + specificThree2 : null, + specificFour1 : null, + specificFour2 : null, + specificFour3 : null, + specificFour4 : null, + specificFive1 : null, + specificFive2 : null, + specificSix1 : null, + specificSix2 : null }, onShow(){ @@ -77,9 +91,25 @@ export default { styleTwentyFour : this.styleTwentyFour, styleTwentyFive : this.styleTwentyFive, styleTwentySix : this.styleTwentySix, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, styleThirty : this.styleThirty, styleThirtyOne : this.styleThirtyOne, - styleThirtyTwo : this.styleThirtyTwo + styleThirtyTwo : this.styleThirtyTwo, + specificOne1 : this.specificOne1, + specificOne2 : this.specificOne2, + specificTwo1 : this.specificTwo1, + specificTwo2 : this.specificTwo2, + specificThree1 : this.specificThree1, + specificThree2 : this.specificThree2, + specificFour1 : this.specificFour1, + specificFour2 : this.specificFour2, + specificFour3 : this.specificFour3, + specificFour4 : this.specificFour4, + specificFive1 : this.specificFive1, + specificFive2 : this.specificFive2, + specificSix1 : this.specificSix1, + specificSix2 : this.specificSix2 } }, @@ -110,8 +140,24 @@ export default { this.styleTwentyFour = this.$element("styleTwentyFour").getInspector() this.styleTwentyFive = this.$element("styleTwentyFive").getInspector() this.styleTwentySix = this.$element("styleTwentySix").getInspector() + this.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() this.styleThirty = this.$element("styleThirty").getInspector() this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + this.specificOne1 = this.$element("specificOne1").getInspector() + this.specificOne2 = this.$element("specificOne2").getInspector() + this.specificTwo1 = this.$element("specificTwo1").getInspector() + this.specificTwo2 = this.$element("specificTwo2").getInspector() + this.specificThree1 = this.$element("specificThree1").getInspector() + this.specificThree2 = this.$element("specificThree2").getInspector() + this.specificFour1 = this.$element("specificFour1").getInspector() + this.specificFour2 = this.$element("specificFour2").getInspector() + this.specificFour3 = this.$element("specificFour3").getInspector() + this.specificFour4 = this.$element("specificFour4").getInspector() + this.specificFive1 = this.$element("specificFive1").getInspector() + this.specificFive2 = this.$element("specificFive2").getInspector() + this.specificSix1 = this.$element("specificSix1").getInspector() + this.specificSix2 = this.$element("specificSix2").getInspector() }, } diff --git a/arkui/ace_standard/src/main/js/default/pages/video/style/index.css b/arkui/ace_standard/src/main/js/default/pages/video/style/index.css new file mode 100644 index 0000000000000000000000000000000000000000..710ed63353d9431f58231d8a56f9ca367df1446a --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/video/style/index.css @@ -0,0 +1,544 @@ +/** + * 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; +} + +.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; +} + +.style-container{ + flex-direction: column; + width: 50%; +} + +#styleOne{ + width: 150px; + height: 20px; + padding-top: 1px; + padding-left: 2px; + padding-right: 3px; + padding-bottom: 0.5px; + margin-left: 1px; + margin-top: 2px; + margin-right: 1.5px; + margin-bottom: 0.5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dotted; + border-bottom-style: solid; + border-left-width: 1px; + border-right-width: 1.5px; + border-top-width: 2px; + border-bottom-width: 0.5px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 15px; + border-top-left-radius: 10px; + border-top-right-radius: 0px; + opacity: 0.5; + align-self:flex-end; +} + +#styleTwo{ + width: 150px; + height: 20px; + padding-start: 1px; + padding-end: 2px; + margin-start: 1px; + margin-end: 2px; + border-style: dotted; + border-width: 2px; + border-color:#0f00f0; + border-radius:5px; + opacity: 1.5; + align-self:flex-start; +} + +#styleThree{ + width: 50px; + height: 20px; + padding: 2px; + margin:1px; + border-left: 1px solid #ff0000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + opacity: 1; + align-self:baseline; +} + +#styleFour{ + width: 50px; + height: 20px; + align-self:center; + border: 2px solid #00ff00; +} + +#styleFourNew{ + width: 50px; + height: 20px; + align-self:stretch; + border: 2px solid #00ff00; +} + +#styleFive{ + width: 150px; + height: 40px; + border: 5px; + border-image-source: url('/common/images/image.png'); + border-image-slice: 5px 10px 10px 5px; + border-image-width: 10px 5px 5px 10px; + border-image-outset: 10px 5px 10px 5px; + border-image-repeat: repeat; +} + +/*#styleFive{*/ +/* width: 100%;*/ +/* height: 40px;*/ +/* border: 5px;*/ +/* border-image-source: url('/common/images/image.png');*/ +/* border-image-slice: 5px 10px 10px 5px;*/ +/* border-image-width: 10px 5px 5px 10px;*/ +/* border-image-outset: 10px 5px 10px 5px;*/ +/* border-image-repeat: repeat;*/ +/*}*/ + +#styleSix{ + width: 100%; + height: 2%; + background-color: #ff0000; + padding-top: 1%; + padding-left: 2%; + padding-right: 3%; + padding-bottom: 0.5%; + margin-left: 1%; + margin-top: 2%; + margin-right: 1.5%; + margin-bottom: 0.5%; +} + +#styleSeven{ + width: 70%; + height: 1%; + padding-start: 1%; + padding-end: 2%; + margin-start: 1%; + margin-end: 2%; + background-color: #00ff00; +} + +#styleEight{ + width: 60%; + height: 1%; + margin: 1%; + padding: 2%; + background-color: #0000ff; +} + +#styleNine{ + width: 100%; + height: 20px; + display:flex; + background-color: #0000ff; +} + +#styleNineNew{ + width: 100%; + height: 20px; + display:grid; + background-color: #0000ff; +} + + +#styleTen{ + width: 100%; + height: 400%; + display: none; + background-color: #ff0000; +} + +#styleEleven{ + height: 40%; + background-color: #00ff00; + flex:1 1 20px; + z-index:10; +} + +#styleTwelve{ + height: 50%; + background-color: #ff00ff; + flex-grow:2; + flex-shrink: 3; + flex-basis: 30px; + z-index:13; +} + +#styleThirteen{ + position: absolute; + left: 10px; + top: 20px; + width: 10px; + height: 10px; + background-color: #00ff00; + z-index:12; +} + +#styleFourteen{ + position: absolute; + right: 10px; + bottom: 20px; + width: 10px; + height: 10px; + background-color: #0000ff; + z-index:3; +} + +#styleFifteen{ + position: absolute; + left: 10%; + top: 20%; + width: 10px; + height: 10px; + background-color: #fff000; + z-index:5; +} + +#styleSixteen{ + position: absolute; + right: 10%; + bottom: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:15; +} + +#styleSeventeen{ + position: absolute; + start: 50px; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:7; +} + +#styleEighteen{ + position: absolute; + end: 20px; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:4; +} + +#styleNineteen{ + position: relative; + start: 20%; + width: 10px; + height: 10px; + background-color: #ffff00; + z-index:1; +} + +#styleTwenty{ + position: fixed; + end: 20%; + width: 10px; + height: 10px; + background-color: #00ffff; + z-index:17; +} + +#styleTwentyOne{ + height: 20px; + box-shadow: 2px 4px; + flex-weight: 1; + margin:5px; +} + +#styleTwentyTwo{ + flex-weight: 1; + height: 20px; + box-shadow: 2px 4px 6px 8px; + margin:5px; +} + +#styleTwentyThree{ + flex-weight: 1; + height: 20px; + box-shadow: 1px 2px 3px 4px #ff0000; + margin:5px; +} + +#styleTwentyFour{ + width: 150px; + height: 20px; + background-color: #00ffff; + clip-path:inset(2 23); + visibility: visible; +} + +#styleTwentyFive{ + width: 150px; + height: 20px; + background-color: #00ffff; + visibility: hidden; +} + +#styleTwentySix{ + width: 150px; + height: 20px; + background-color: #999999; +} + +#styleTwentySeven{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); +} + +#styleTwentyNine{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:contain; + background-repeat: repeat-x; + background-position: center; +} + +#styleThirty{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:50px 10px; + background-repeat: no-repeat; + background-position: 10px 10px; +} + +#styleThirtyOne{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size:10% 20%; + background-repeat: repeat; + background-position: 30% 40%; +} + +#styleThirtyTwo{ + width: 150px; + height: 20px; + background-image:url('common/images/image.png'); + background-size: auto; + background-repeat: repeat; + background-position: 30% 40%; +} + +#styleThirtyThree{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + +#styleThirtyFour{ + width: 150px; + height: 20px; + background: linear-gradient(pink,#fff000); + clip-path: margin-box; + image-fill: #000fff; + mask-image: linear-gradient(pink,#fff000); + mask-size: cover; + mask-position: center; +} + +#styleThirtyFive{ + width: 150px; + height: 20px; + background-color: #000fff; + transform: none; +} +#styleThirtySix{ + width: 150px; + height: 20px; + background-color: #ff0fff; + transform: translate3d(10,2,2); +} +#styleThirtySeven{ + width: 150px; + height: 20px; + background-color: #f0000f; + transform: translateY(5); +} +#styleThirtyEight{ + width: 150px; + height: 20px; + background-color: #fff00f; + transform: translateZ(5); +} +#styleThirtyNine{ + width: 150px; + height: 20px; + background-color: #ff000f; + transform: scale(1.2); +} +#styleForty{ + width: 150px; + height: 20px; + background-color: #ff0fff; + transform: scale3d(1.2,1.2,1.2); +} +#styleFortyOne{ + width: 150px; + height: 20px; + background-color: #000fff; + transform: scaleX(1.2); +} +#styleFortyTwo{ + width: 150px; + height: 20px; + background-color: #ff80ff; + transform: scaleY(1.5); +} +#styleFortyThree{ + width: 150px; + height: 20px; + background-color: #ff30ff; + transform: scaleZ(1.5); +} +#styleFortyFour{ + width: 150px; + height: 20px; + background-color: #f0000f; + transform: rotate3d(1.5,1.5,1.5,10); +} +#styleFortyFive{ + width: 150px; + height: 20px; + background-color: #f0f00f; + transform: rotateX(20); +} +#styleFortySix{ + width: 150px; + height: 20px; + background-color: #f00fff; + transform: rotateY(30); +} +#styleFortySeven{ + width: 150px; + height: 20px; + background-color: #f0000f; + transform: rotateZ(5); +} +#styleFortyEight{ + width: 150px; + height: 20px; + background-color: #f00fff; + transform: skew(10,10); +} +#styleFortyNine{ + width: 150px; + height: 20px; + background-color: #f0000f; + transform: skewX(10); +} +#styleFifty{ + width: 150px; + height: 20px; + background-color: #f00fff; + transform: skewY(10); +} +#styleFiftyOne{ + width: 150px; + height: 20px; + background-color: #ff88ff; + transform: perspective(20); +} +#styleFiftyTwo{ + width: 150px; + height: 20px; + background-color: #ff11ff; + shared-transition-effect:exchange; +} +#styleFiftyThree{ + width: 150px; + height: 20px; + background-color: #ffff0f; + shared-transition-effect:static; +} +#styleFiftyFour{ + width: 150px; + height: 20px; + background-color: #f00f0f; + shared-transition-name: shared-transition; +} +@keyframes shared-transition { + from { opacity: 0; } + to { opacity: 1; } +} + +#styleFiftyFive{ + width: 150px; + height: 20px; + background-color: #00ff00; + shared-transition-timing-function: friction; +} + +.specific-container{ + flex-direction: column; + flex-weight: 1; +} + +#specificOne1{ + object-fit: cover; +} +#specificOne2{ + object-fit: contain; +} +#specificOne3{ + object-fit: fill; +} +#specificOne4{ + object-fit: none; +} +#specificOne5{ + object-fit: scale-down; +} + diff --git a/arkui/ace_standard/src/main/js/default/pages/video/style/index.hml b/arkui/ace_standard/src/main/js/default/pages/video/style/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..173ec4dc7a0becd56f89a357c715422ad3693286 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/video/style/index.hml @@ -0,0 +1,131 @@ + + +
+
+ + video通用样式 + + + + 通用样式 1-8 \n width height padding margin border opacity align-self + + + + + + + + + + + + 通用样式9-20 \n display flex z-index position + + + + + + + + + + + + + + + + 通用样式21-23 box-shadow + +
+ + + +
+ + + 通用样式23-25 visibility clip-path + + + + + + 通用样式26-31 background + + + + + + + + + 通用样式32 clip-path image-fill mask-image + + +
+
+
+
+ + video特有样式 + + + 特有样式 object-fit + + + + + + +
+
+ diff --git a/arkui/ace_standard/src/main/js/default/pages/video/style/index.js b/arkui/ace_standard/src/main/js/default/pages/video/style/index.js new file mode 100644 index 0000000000000000000000000000000000000000..45a69d959b9f1204887451bd62d807299283aa80 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/video/style/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. + */ + +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, + specificOne1 : null, + specificOne2 : null, + specificOne3 : null, + specificOne4 : null, + specificOne5 : 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, + styleTwentySeven : this.styleTwentySeven, + styleTwentyNine : this.styleTwentyNine, + styleThirty : this.styleThirty, + styleThirtyOne : this.styleThirtyOne, + styleThirtyTwo : this.styleThirtyTwo, + specificOne1 : this.specificOne1, + specificOne2 : this.specificOne2, + specificOne3 : this.specificOne3, + specificOne4 : this.specificOne4, + specificOne5 : this.specificOne5 + } + }, + + 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.styleTwentySeven = this.$element("styleTwentySeven").getInspector() + this.styleTwentyNine = this.$element("styleTwentyNine").getInspector() + this.styleThirty = this.$element("styleThirty").getInspector() + this.styleThirtyOne = this.$element("styleThirtyOne").getInspector() + this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector() + this.specificOne1 = this.$element("specificOne1").getInspector() + this.specificOne2 = this.$element("specificOne2").getInspector() + this.specificOne3 = this.$element("specificOne3").getInspector() + this.specificOne4 = this.$element("specificOne4").getInspector() + this.specificOne5 = this.$element("specificOne5").getInspector() + }, +} diff --git a/arkui/ace_standard/src/main/js/default/pages/web/router/index.css b/arkui/ace_standard/src/main/js/default/pages/web/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..40524042cc886a04bab477bd3afbd7ead7d49765 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/web/router/index.css @@ -0,0 +1,99 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +button{ + width: 60%; + height: 20px; +} +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} +.contain1{ + width: 100%; + height: 15%; + flex-direction: column; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-container{ + flex-direction: column; + height: 60%; + padding-left: 2px; +} + +.event-container{ + flex-direction: column; + height: 20%; +} + +.function-container{ + flex-direction: column; + height: 20%; +} + +.gradient-container{ + flex-direction: column; + height: 40%; +} + +.access-container{ + flex-direction: column; + height: 15%; +} + +.atom-container{ + flex-direction: column; + height: 45%; +} + +.multimode-container{ + flex-direction: column; + height: 45%; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + font-weight: bold; + text-align: center; +} +.sub-title{ + width: 100%; + height: 25px; + font-size: 15px; + text-align: left; + margin-bottom: 1px; + padding: 2px; +} \ No newline at end of file diff --git a/arkui/ace_standard/src/main/js/default/pages/web/router/index.hml b/arkui/ace_standard/src/main/js/default/pages/web/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..78689ca4336ee8a7d818eb8bebca8b7f90f1cb9a --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/web/router/index.hml @@ -0,0 +1,45 @@ + + +
+
+ + web支持事件 + + + web支持事件1 + + + + + + web支持事件2 + + + +
+
+
+ +
+ + web支持方法 + + reload web + + +
+
\ No newline at end of file diff --git a/arkui/ace_standard/src/main/js/default/pages/web/router/index.js b/arkui/ace_standard/src/main/js/default/pages/web/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e25b9a81a2ee1d516563670128450408dadc8cc1 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/pages/web/router/index.js @@ -0,0 +1,43 @@ +/** + * 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 { + pageStart() { + console.log("pageStart"); + prompt.showToast({ + message: 'pagestart:\n' + }); + }, + + pageFinish() { + console.log("pageFinish"); + prompt.showToast({ + message: 'pagefinish:\n' + }); + }, + + errorOccur() { + console.log("error"); + prompt.showToast({ + message: 'error:\n' + }) + }, + + onTextClick() { + this.$element('function1').reload() + } +} diff --git a/arkui/ace_standard/src/main/js/default/test/List.test.js b/arkui/ace_standard/src/main/js/default/test/List.test.js index 62d95856f6ce4a6a2b69fefcde98fde72536dad7..a46bfb645db8428b3557919d9d109456fffd0036 100644 --- a/arkui/ace_standard/src/main/js/default/test/List.test.js +++ b/arkui/ace_standard/src/main/js/default/test/List.test.js @@ -15,6 +15,7 @@ require('./basicabilityapi.test.js') require('./mediaquery.test.js') +require('./commonComponentJsApi.test.js') require('./divProps.test.js') require('./buttonProps.test.js') require('./chartProps.test.js') @@ -25,6 +26,7 @@ require('./tabsProps.test.js') require('./progressProps.test.js') require('./dividerProps.test.js') require('./pickerProps.test.js') +require('./pickerViewProps.test.js') require('./labelProps.test.js') require('./stackProps.test.js') require('./panelProps.test.js') diff --git a/arkui/ace_standard/src/main/js/default/test/cameraProps.test.js b/arkui/ace_standard/src/main/js/default/test/cameraProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..52ecc5dd7545401f33af2884f7612a9f2e7a6373 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/test/cameraProps.test.js @@ -0,0 +1,642 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@system.router'; +import {describe, beforeAll,afterAll, it, expect} from 'deccjsunit/index'; + + +describe('cameraPropsJsTest', 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/index/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('[cameraPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/camera/prop/index' + } + try { + result = router.push(options) + console.info("push cameraProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push cameraProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }) + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[cameraPropsJsTest] after each called') + await backToIndex() + await sleep(1000) + }) + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraIdProp + * @tc.desc ACE + */ + it('testCameraIdProp', 0, async function (done) { + console.info('testCameraIdProp START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.idProp); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('idProp') + done(); + }); + + it('testCameraClassProp', 0, async function (done) { + console.info('testCameraClassProp START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classProp); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('classProp') + expect(obj.$attrs.className).assertEqual('classProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraClassPropNone + * @tc.desc ACE + */ + it('testCameraClassPropNone', 0, async function (done) { + console.info('testCameraClassPropNone START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.classPropNone); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('classPropNone') + expect(obj.$attrs.className).assertEqual(undefined) + console.info("[cameraProps] get className value is: " + JSON.stringify(obj.$attrs.className)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraStyleProp + * @tc.desc ACEs + */ + it('testCameraStyleProp', 0, async function (done) { + console.info('testCameraStyleProp START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.styleProp); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('styleProp') + expect(obj.$attrs.style).assertEqual(undefined) + console.info("[divProps] get style value is: " + JSON.stringify(obj.$attrs.style)); + // 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); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraRefProp + * @tc.desc ACE + */ + it('testCameraRefProp', 0, async function (done) { + console.info('testCameraRefProp START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refProp); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('refProp') + expect(obj.$attrs.ref).assertEqual('refProp') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraRefPropNone + * @tc.desc ACE + */ + it('testCameraRefPropNone', 0, async function (done) { + console.info('testCameraRefPropNone START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.refPropNone); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('refPropNone') + expect(obj.$attrs.ref).assertEqual(undefined) + console.info("[cameraProps] get ref value is: " + JSON.stringify(obj.$attrs.ref)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDisabledPropTrue + * @tc.desc ACE + */ + it('testCameraDisabledPropTrue', 0, async function (done) { + console.info('testCameraDisabledPropTrue START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropTrue); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('disabledPropTrue') + expect(obj.$attrs.disabled).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDisabledPropFalse + * @tc.desc ACE + */ + it('testCameraDisabledPropFalse', 0, async function (done) { + console.info('testCameraDisabledPropFalse START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropFalse); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('disabledPropFalse') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDisabledPropNone + * @tc.desc ACE + */ + it('testCameraDisabledPropNone', 0, async function (done) { + console.info('testCameraDisabledPropNone START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.disabledPropNone); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('disabledPropNone') + expect(obj.$attrs.disabled).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraFocusablePropTrue + * @tc.desc ACE + */ + it('testCameraFocusablePropTrue', 0, async function (done) { + console.info('testCameraFocusablePropTrue START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropTrue); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('focusablePropTrue') + expect(obj.$attrs.focusable).assertEqual('true') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraFocusablePropFalse + * @tc.desc ACE + */ + it('testCameraFocusablePropFalse', 0, async function (done) { + console.info('testCameraFocusablePropFalse START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropFalse); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('focusablePropFalse') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraFocusablePropNone + * @tc.desc ACE + */ + it('testCameraFocusablePropNone', 0, async function (done) { + console.info('testCameraFocusablePropNone START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.focusablePropNone); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('focusablePropNone') + expect(obj.$attrs.focusable).assertEqual('false') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDataProp + * @tc.desc ACE + */ + it('testCameraDataProp', 0, async function (done) { + console.info('testCameraDataProp START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataProp); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('dataProp') + expect(obj.$attrs.datacamera).assertEqual(undefined); + console.info("[cameraProps] get datacamera value is: " + JSON.stringify(obj.$attrs.datacamera)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDataPropNone + * @tc.desc ACE + */ + it('testCameraDataPropNone', 0, async function (done) { + console.info('testCameraDataPropNone START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dataPropNone); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('dataPropNone') + expect(obj.$attrs.datacamera).assertEqual(undefined) + console.info("[cameraProps] get datacamera value is: " + JSON.stringify(obj.$attrs.datacamera)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraClickEffectPropSmall + * @tc.desc ACE + */ + it('testCameraClickEffectPropSmall', 0, async function (done) { + console.info('testCameraClickEffectPropSmall START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropSmall); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + 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 testCameraClickEffectPropMedium + * @tc.desc ACE + */ + it('testCameraClickEffectPropMedium', 0, async function (done) { + console.info('testCameraClickEffectPropMedium START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropMedium); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + 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 testCameraClickEffectPropLarge + * @tc.desc ACE + */ + it('testCameraClickEffectPropLarge', 0, async function (done) { + console.info('testCameraClickEffectPropLarge START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropLarge); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + 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 testCameraClickEffectPropNone + * @tc.desc ACE + */ + it('testCameraClickEffectPropNone', 0, async function (done) { + console.info('testCameraClickEffectPropNone START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.clickEffectPropNone); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('clickEffectPropNone') + expect(obj.$attrs.clickEffect).assertEqual(undefined) + console.info("[cameraProps] get clickEffect value is: " + JSON.stringify(obj.$attrs.clickEffect)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDirPropRtl + * @tc.desc ACE + */ + it('testCameraDirPropRtl', 0, async function (done) { + console.info('testCameraDirPropRtl START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropRtl); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('dirPropRtl') + expect(obj.$attrs.dir).assertEqual('rtl') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDirPropLtr + * @tc.desc ACE + */ + it('testCameraDirPropLtr', 0, async function (done) { + console.info('testCameraDirPropLtr START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropLtr); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('dirPropLtr') + expect(obj.$attrs.dir).assertEqual('ltr') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDirPropAuto + * @tc.desc ACE + */ + it('testCameraDirPropAuto', 0, async function (done) { + console.info('testCameraDirPropAuto START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropAuto); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('dirPropAuto') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDirPropNone + * @tc.desc ACE + */ + it('testCameraDirPropNone', 0, async function (done) { + console.info('testCameraDirPropNone START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.dirPropNone); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('dirPropNone') + expect(obj.$attrs.dir).assertEqual('auto') + done(); + }); + + // 特有属性 + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraFlashOn + * @tc.desc ACE + */ + it('testCameraFlashOn', 0, async function (done) { + console.info('testCameraFlashOn START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.flashOn); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('flashOn') + expect(obj.$attrs.flash).assertEqual('on') + console.info("[cameraProps] get flashOn value is: " + JSON.stringify(obj.$attrs.flash)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraFlashOff + * @tc.desc ACE + */ + it('testCameraFlashOff', 0, async function (done) { + console.info('testCameraFlashOff START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.flashOff); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('flashOff') + expect(obj.$attrs.flash).assertEqual('off') + console.info("[cameraProps] get flashOff value is: " + JSON.stringify(obj.$attrs.flash)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraFlashTorch + * @tc.desc ACE + */ + it('testCameraFlashTorch', 0, async function (done) { + console.info('testCameraFlashTorch START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.flashTorch); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('flashTorch') + expect(obj.$attrs.flash).assertEqual('torch') + console.info("[cameraProps] get flashTorch value is: " + JSON.stringify(obj.$attrs.flash)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraFlashNone + * @tc.desc ACE + */ + it('testCameraFlashNone', 0, async function (done) { + console.info('testCameraFlashOn START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.flashNone); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('flashNone') + expect(obj.$attrs.flash).assertEqual('off') + console.info("[cameraProps] get flashNone value is: " + JSON.stringify(obj.$attrs.flash)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraFlashOn + * @tc.desc ACE + */ + it('testCameraDevicePositionFront', 0, async function (done) { + console.info('testCameraDevicePositionFront START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.devicePositionFront); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('devicePositionFront') + expect(obj.$attrs.flash).assertEqual('front') + console.info("[cameraProps] get devicePositionFront value is: " + JSON.stringify(obj.$attrs.flash)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDevicePositionBack + * @tc.desc ACE + */ + it('testCameraDevicePositionBack', 0, async function (done) { + console.info('testCameraDevicePositionFront START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.devicePositionBack); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('devicePositionBack') + expect(obj.$attrs.flash).assertEqual('back') + console.info("[cameraProps] get devicePositionBack value is: " + JSON.stringify(obj.$attrs.flash)); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraDevicePositionNone + * @tc.desc ACE + */ + it('testCameraDevicePositionNone', 0, async function (done) { + console.info('testCameraDevicePositionNone START'); + console.info("[cameraProps] get globalThis.value is: " + JSON.stringify(globalThis.value)); + + let obj = JSON.parse(globalThis.value.devicePositionNone); + console.info("[cameraProps] get inspector value is: " + JSON.stringify(obj)); + console.info("[cameraProps] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + + expect(obj.$type).assertEqual('camera') + expect(obj.$attrs.id).assertEqual('devicePositionNone') + expect(obj.$attrs.flash).assertEqual('back') + console.info("[cameraProps] get devicePositionNone value is: " + JSON.stringify(obj.$attrs.flash)); + done(); + }); + +}); diff --git a/arkui/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js b/arkui/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js index 417ccc922666e60ef13c9f1304e10afd77fdeb57..7d1f1c1788e0ea896b0bd1267550d058b75b99d9 100644 --- a/arkui/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js +++ b/arkui/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js @@ -104,6 +104,30 @@ describe('aceJsTest', function () { done(); }); + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraComponent + * @tc.desc ACE + */ + it('testCameraComponent', 0, async function (done) { + console.info('testCameraComponent START'); + let result; + let options = { + uri: 'pages/camera/router/index' + } + try { + result = router.push(options) + console.info("push camera page success " + JSON.stringify(result)); + } catch (err) { + console.error("push camera page error " + JSON.stringify(result)); + } + await sleep(1000) + let pages = router.getState(); + console.info("[router.camera] getState" + JSON.stringify(pages)); + expect("pages/camera/router/").assertEqual(pages.path); + done(); + }); + /** * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0300 * @tc.name testInputComponent @@ -1171,4 +1195,50 @@ describe('aceJsTest', function () { done(); }); + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraComponent + * @tc.desc ACE + */ + it('testCameraComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/camera/router/index' + } + try { + result = router.push(options) + console.info("push camera page success " + JSON.stringify(result)); + } catch (err) { + console.error("push camera page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.camera] getState" + JSON.stringify(pages)); + expect("pages/camera/router/").assertEqual(pages.path); + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testCameraComponent + * @tc.desc ACE + */ + it('testWebComponent', 0, async function (done) { + let result; + let options = { + uri: 'pages/web/router/index' + } + try { + result = router.push(options) + console.info("push web page success " + JSON.stringify(result)); + } catch (err) { + console.error("push web page error " + JSON.stringify(result)); + } + await sleep(5000) + let pages = router.getState(); + console.info("[router.web] getState" + JSON.stringify(pages)); + expect("pages/web/router/").assertEqual(pages.path); + done(); + }); + }); diff --git a/arkui/ace_standard/src/main/js/default/test/webProps.test.js b/arkui/ace_standard/src/main/js/default/test/webProps.test.js new file mode 100644 index 0000000000000000000000000000000000000000..5f60be5d7f36263304b084bb72e4e4da02ac6361 --- /dev/null +++ b/arkui/ace_standard/src/main/js/default/test/webProps.test.js @@ -0,0 +1,113 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@system.router'; +import {describe, beforeEach,afterEach, it, expect} from 'deccjsunit/index'; + + +describe('webJsTest', 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/index/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('[webPropsJsTest] before each called') + + let result; + let options = { + uri: 'pages/web/prop/index' + } + try { + result = router.push(options) + console.info("push webProps page success " + JSON.stringify(result)); + } catch (err) { + console.error("push webProps page error " + JSON.stringify(result)); + } + await sleep(4000) + done() + }); + + /** + * run after testcase + */ + afterAll(async function () { + console.info('[webPropsJsTest] after each called') + await backToIndex(); + await sleep(1000) + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0100 + * @tc.name testWebComponentProp1 + * @tc.desc ACE + */ + it('testWebComponentProp1', 0, async function (done) { + console.info('testWebComponentProp1 START'); + let obj = JSON.parse(globalThis.value.propsValues.webSrc); + console.info("[web] get globalThis.value is: " + JSON.stringify(globalThis.value)); + console.info("[web] get inspector value is: " + JSON.stringify(obj)); + expect(obj.$type).assertEqual('web') + console.info("[web] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + expect(obj.$attrs.id).assertEqual('webSrc') + expect(obj.$attrs.src).assertEqual('https://www.baidu.com') + done(); + }); + + /** + * @tc.number SUB_ACE_BASIC_COMPONENT_JS_API_0101 + * @tc.name testWebComponentProp2 + * @tc.desc ACE + */ + it('testWebComponentProp2', 0, async function (done) { + console.info('testWebComponentProp2 START'); + let obj = JSON.parse(globalThis.value.propsValues.webSrc); + console.info("[web] get globalThis.value is: " + JSON.stringify(globalThis.value)); + console.info("[web] get inspector value is: " + JSON.stringify(obj)); + expect(obj.$type).assertEqual('web') + console.info("[web] get inspector attrs value is: " + JSON.stringify(obj.$attrs)); + expect(obj.$attrs.id).assertEqual('webSrcNone') + expect(obj.$attrs.src).assertEqual(undefined) + done(); + }); +});