From c0b342cb4a5a1920a508149b8a3cff3fdde23f7a Mon Sep 17 00:00:00 2001 From: dongwei Date: Tue, 8 Mar 2022 18:24:16 +0800 Subject: [PATCH] add test cases Signed-off-by: dongwei --- .../js/default/pages/slider/prop/index.css | 85 +++ .../js/default/pages/slider/prop/index.hml | 43 +- .../js/default/pages/slider/prop/index.js | 4 + .../js/default/pages/slider/router/index.hml | 37 +- .../js/default/pages/slider/router/index.js | 12 + .../js/default/pages/slider/style/index.css | 172 ++++-- .../js/default/pages/slider/style/index.hml | 197 +++---- .../main/js/default/pages/span/prop/index.hml | 49 ++ .../js/default/pages/span/router/index.css | 1 + .../js/default/pages/stack/prop/index.css | 7 + .../js/default/pages/stack/prop/index.hml | 22 + .../js/default/pages/stack/router/index.hml | 1 + .../js/default/pages/stack/router/index.js | 7 + .../js/default/pages/stepper/prop/index.css | 15 + .../js/default/pages/stepper/prop/index.hml | 33 ++ .../js/default/pages/stepper/router/index.hml | 3 +- .../js/default/pages/stepper/router/index.js | 6 + .../js/default/pages/stepper/style/index.css | 529 +++++++++++++++++ .../js/default/pages/stepper/style/index.hml | 118 ++++ .../js/default/pages/stepper/style/index.js | 20 + .../default/pages/stepperItem/prop/index.hml | 37 ++ .../pages/stepperItem/router/index.hml | 3 +- .../default/pages/stepperItem/router/index.js | 6 + .../default/pages/stepperItem/style/style.css | 552 ++++++++++++++++++ .../default/pages/stepperItem/style/style.hml | 187 ++++++ .../default/pages/stepperItem/style/style.js | 20 + 26 files changed, 1989 insertions(+), 177 deletions(-) create mode 100644 ace/ace_standard/src/main/js/default/pages/stepper/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/stepper/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/stepper/style/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.css create mode 100644 ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.js diff --git a/ace/ace_standard/src/main/js/default/pages/slider/prop/index.css b/ace/ace_standard/src/main/js/default/pages/slider/prop/index.css index 8bc92445a..b182eb64e 100644 --- a/ace/ace_standard/src/main/js/default/pages/slider/prop/index.css +++ b/ace/ace_standard/src/main/js/default/pages/slider/prop/index.css @@ -151,10 +151,33 @@ padding-end: 10px; } +#dataPropB { + flex-weight: 1; + background-color:#0ff000; + height: 20px; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#dataPropBNone { + flex-weight: 1; + background-color:#00d000; + width: 100%; + height: 20px; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + #dataProp { flex-weight: 1; background-color:#0ff000; width: 100%; + height: 20px; margin-left: 10px; margin-right: 10px; padding-start: 10px; @@ -165,6 +188,7 @@ flex-weight: 1; background-color:#00d000; width: 100%; + height: 20px; margin-left: 10px; margin-right: 10px; padding-start: 10px; @@ -549,4 +573,65 @@ margin-right: 10px; padding-start: 10px; padding-end: 10px; +} + + +#showFor1 { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showFor2 { + flex-weight: 1; + background-color:blue; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showIf { + flex-weight: 1; + background-color:#c00000; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showElseIfTrue { + flex-weight: 1; + background-color:black; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showElseIfFalse { + flex-weight: 1; + background-color:blue; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; +} + +#showElse { + flex-weight: 1; + background-color:yellow; + width: 100%; + margin-left: 10px; + margin-right: 10px; + padding-start: 10px; + padding-end: 10px; } \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/slider/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/slider/prop/index.hml index 91485ec60..7db64b144 100644 --- a/ace/ace_standard/src/main/js/default/pages/slider/prop/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/slider/prop/index.hml @@ -79,15 +79,29 @@ focusable=""> + + 通用属性 -- data + +
+ + + + +
+ 通用属性 -- data-* - - - - +
+ + + + +
通用属性 -- click-effect @@ -258,5 +272,22 @@ + + 特有属性 -- tid + + + + + 特有属性 -- if elif + + + + + + + + + diff --git a/ace/ace_standard/src/main/js/default/pages/slider/prop/index.js b/ace/ace_standard/src/main/js/default/pages/slider/prop/index.js index e29b73fea..3d774b815 100644 --- a/ace/ace_standard/src/main/js/default/pages/slider/prop/index.js +++ b/ace/ace_standard/src/main/js/default/pages/slider/prop/index.js @@ -17,6 +17,10 @@ import prompt from '@system.prompt'; export default { data:{ + array: [ + {id: 1, name: 'jack', age: 18}, + {id: 2, name: 'tony', age: 18}, + ], listOne:[{}], listThree:[{},{},{}], idProp : null, diff --git a/ace/ace_standard/src/main/js/default/pages/slider/router/index.hml b/ace/ace_standard/src/main/js/default/pages/slider/router/index.hml index d04f16c6b..c03b08567 100644 --- a/ace/ace_standard/src/main/js/default/pages/slider/router/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/slider/router/index.hml @@ -113,9 +113,9 @@ slider通用属性2 + disabled = "false" focusable ="false" + data-name ="prop2" click-effect="spring-large" + dir ="ltr"> slider通用属性3 @@ -138,12 +138,23 @@ slider特有属性2 - - - +
+ + +
+ + + + + + + + +
+
slider特有属性3 @@ -152,6 +163,11 @@ showsteps="true" showtips="true"> +
+ + +
@@ -186,7 +202,8 @@ slider特有事件1 + onchange="change" + onaccessibility="accessibility">
diff --git a/ace/ace_standard/src/main/js/default/pages/slider/router/index.js b/ace/ace_standard/src/main/js/default/pages/slider/router/index.js index 76a4d072a..1a66abfee 100644 --- a/ace/ace_standard/src/main/js/default/pages/slider/router/index.js +++ b/ace/ace_standard/src/main/js/default/pages/slider/router/index.js @@ -84,6 +84,12 @@ var frames = [ ]; export default { + data: { + array: [ + {id: 1, name: 'jack', age: 18}, + {id: 2, name: 'tony', age: 18}, + ], + }, onShow(){ // 通用属性 @@ -449,5 +455,11 @@ export default { prompt.showToast({ message: JSON.stringify(event) }); + }, + + accessibility(event){ + prompt.showToast({ + message: JSON.stringify(event) + }); } } diff --git a/ace/ace_standard/src/main/js/default/pages/slider/style/index.css b/ace/ace_standard/src/main/js/default/pages/slider/style/index.css index 7fb4e731a..5782c73cb 100644 --- a/ace/ace_standard/src/main/js/default/pages/slider/style/index.css +++ b/ace/ace_standard/src/main/js/default/pages/slider/style/index.css @@ -340,6 +340,7 @@ background-size:10% 20%; background-repeat: repeat; background-position: 30% 40%; + mask-image:linear-gradient(pink,#fff000); } #styleThirtyTwo{ @@ -382,17 +383,17 @@ flex-direction: row; flex-wrap:nowrap; } -#specificFontSize1{ - background-color: black; +#specificTwo1{ + background-color: yellow; } -#specificFontSize2{ - background-color: blue; +#specificTwo2{ + background-color: yellowgreen; } -.font-size1{ - font-size: 20px; +.selected-color1{ + selected-color: black; } -.font-size2{ - font-size: 30px; +.selected-color2{ + selected-color: blue; } #specificThree{ width: 100%; @@ -400,70 +401,127 @@ flex-direction: row; flex-wrap:nowrap; } -#specificAllowScale1{ +#specificThree1{ background-color: red; } -#specificAllowScale2{ +#specificThree2{ background-color: yellow; } -.allow-scale1{ - allow-scale: true; -} -.allow-scale2{ - allow-scale: false; -} -#specificFour{ - width: 100%; - height: 25px; - flex-direction: row; - flex-wrap:nowrap; -} -#specificPlaceholderColor1{ - background-color: red; -} -#specificPlaceholderColor2{ - background-color: blue; +.block-color1{ + block-color: black; } -.placeholder-color1{ - placeholder-color: rebeccapurple; +.block-color2{ + block-color: purple; } -.placeholder-color2{ - placeholder-color: saddlebrown; + +#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; } -#specificFive{ - width: 100%; - height: 25px; - flex-direction: row; - flex-wrap:nowrap; + +#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; } -#specificFontWeight1{ - background-color: red; + +#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); } -#specificFontWeight2{ - background-color: purple; + +#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); } -.font-weight1{ - font-weight: 200; + +#addSix{ + width: 100px; + height: 15px; + background-color:#000000; + transform: scaleX(1) scaleY(0.4); + clip-path:ellipse(1) } -.font-weight2{ - font-weight: 900; + +#addSeven{ + width: 100px; + height: 15px; + background-color:#000000; + clip-path:path(1); + aspect-ratio:2; } -#specificSix{ - width: 100%; - height: 25px; - flex-direction: row; - flex-wrap:nowrap; + +#addSeven:disabled{ + width: 100px; + height: 15px; + background-color:#ff0000; + radius: 100px; } -#specificCaretColor1{ - background-color: yellowgreen; + +#addSeven:active{ + width: 100px; + height: 15px; + background-color:#ff0000; } -#specificCaretColor2{ - background-color: beige; + +#addSeven:focus{ + width: 100px; + height: 15px; + background-color:#ff0000; } -.placeholder-color1{ - placeholder-color: black; + +@font-face { + font-family: SimSunfont; + src: url('/common/simsun.ttf'); } -.placeholder-color2{ - placeholder-color: red; + +@media (device-type: tv) { + .addSeven { + width: 500px; + height: 500px; + background-color: #fa8072; + } } + diff --git a/ace/ace_standard/src/main/js/default/pages/slider/style/index.hml b/ace/ace_standard/src/main/js/default/pages/slider/style/index.hml index ced40937a..65e63ea11 100644 --- a/ace/ace_standard/src/main/js/default/pages/slider/style/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/slider/style/index.hml @@ -16,157 +16,150 @@
- input通用样式 + slider通用样式 通用样式 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 - - + +
- input特有样式 + slider特有样式 特有样式 color
- - - - + + + +
- 特有样式 font-size + 特有样式 selected-color
- - - - + + + +
- 特有样式 allow-scale + 特有样式 block-color
- - - - + + + +
- - 特有样式 placeholder-color - -
- - - - -
- - 特有样式 font-weight - -
- - - - -
- - 特有样式 caret-color - -
- - - - + +
+ + 补充样式 + + + + + + + + + + + + + + +
diff --git a/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml index 4288fae66..40ba6a7f9 100644 --- a/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/span/prop/index.hml @@ -87,6 +87,22 @@ + + 通用属性 -- data + + + + span + + + + + span + + + 通用属性 -- click-effect @@ -197,6 +213,39 @@ span + + + 属性 -- tid + + + + span + + + + + span + + + + + 属性 -- elif + + + + span + + + span + + + span + +
diff --git a/ace/ace_standard/src/main/js/default/pages/span/router/index.css b/ace/ace_standard/src/main/js/default/pages/span/router/index.css index 4de666365..30fd94816 100644 --- a/ace/ace_standard/src/main/js/default/pages/span/router/index.css +++ b/ace/ace_standard/src/main/js/default/pages/span/router/index.css @@ -160,6 +160,7 @@ background-size:cover; background-repeat: repeat-x; background-position: center; + mask-image:linear-gradient(pink,#fff000); flex:1; flex-grow: 2; flex-basis: 10px; diff --git a/ace/ace_standard/src/main/js/default/pages/stack/prop/index.css b/ace/ace_standard/src/main/js/default/pages/stack/prop/index.css index e815b3669..fc1512277 100644 --- a/ace/ace_standard/src/main/js/default/pages/stack/prop/index.css +++ b/ace/ace_standard/src/main/js/default/pages/stack/prop/index.css @@ -36,6 +36,13 @@ padding: 2px; } +stack{ + background: linear-gradient(pink,#fff000); + width: 50%; + margin-bottom: 2px; + height: 15px; +} + .prop-container{ flex-direction: column; flex-weight: 1; diff --git a/ace/ace_standard/src/main/js/default/pages/stack/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/stack/prop/index.hml index ff779d892..95458c2dc 100644 --- a/ace/ace_standard/src/main/js/default/pages/stack/prop/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/stack/prop/index.hml @@ -153,5 +153,27 @@ + + + 特有属性 -- tid + + + + + + +
+ + + + + + +
diff --git a/ace/ace_standard/src/main/js/default/pages/stack/router/index.hml b/ace/ace_standard/src/main/js/default/pages/stack/router/index.hml index 702921f0c..d5d36347c 100644 --- a/ace/ace_standard/src/main/js/default/pages/stack/router/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/stack/router/index.hml @@ -128,6 +128,7 @@ ondrop="drop"> +
diff --git a/ace/ace_standard/src/main/js/default/pages/stack/router/index.js b/ace/ace_standard/src/main/js/default/pages/stack/router/index.js index e0f4eb3c6..354dd4875 100644 --- a/ace/ace_standard/src/main/js/default/pages/stack/router/index.js +++ b/ace/ace_standard/src/main/js/default/pages/stack/router/index.js @@ -485,5 +485,12 @@ export default { prompt.showToast({ message: 'reachBottom' }); + }, + + onAccessibility(event) { + if (event.eventType == 1) { + console.log("onAccessibility" + event.eventType); + } + console.log("onAccessibility" + JSON.stringify(event)); } } diff --git a/ace/ace_standard/src/main/js/default/pages/stepper/prop/index.css b/ace/ace_standard/src/main/js/default/pages/stepper/prop/index.css index affed3a44..d1240d4a2 100644 --- a/ace/ace_standard/src/main/js/default/pages/stepper/prop/index.css +++ b/ace/ace_standard/src/main/js/default/pages/stepper/prop/index.css @@ -354,4 +354,19 @@ .specific-container{ flex-direction: column; flex-weight: 1; +} + +.specific-style{ + width: 90%; + height: 20px; + margin-left: 5%; +} +.color-red{ + background-color: red; +} +.color-grey{ + background-color: grey; +} +.color-blue{ + background-color: blue; } \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/stepper/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/stepper/prop/index.hml index 2a8b35df5..d9cbcecc1 100644 --- a/ace/ace_standard/src/main/js/default/pages/stepper/prop/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/stepper/prop/index.hml @@ -162,6 +162,39 @@ stepper特有属性 + + 特有属性属性 -- stepper + + + + + + + + 特有属性属性 -- elif + + + + + + + + + 特有属性属性 -- tid + + + + + + + + 特有属性属性 -- tid + + + + + + 显示子组件属性 -- index diff --git a/ace/ace_standard/src/main/js/default/pages/stepper/router/index.hml b/ace/ace_standard/src/main/js/default/pages/stepper/router/index.hml index 0ff25d786..cc7dd8516 100644 --- a/ace/ace_standard/src/main/js/default/pages/stepper/router/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/stepper/router/index.hml @@ -185,7 +185,8 @@ ondragstart="dragStart" ondrag="drag" ondragend="dragEnd" ondragenter="dragEnter" ondragover="dragOver" ondragleave="dragLeave" - ondrop="drop"> + ondrop="drop" + onaccessibility="onAccessibility"> stepper特有事件4 diff --git a/ace/ace_standard/src/main/js/default/pages/stepper/router/index.js b/ace/ace_standard/src/main/js/default/pages/stepper/router/index.js index 0564aba2d..3a76ba821 100644 --- a/ace/ace_standard/src/main/js/default/pages/stepper/router/index.js +++ b/ace/ace_standard/src/main/js/default/pages/stepper/router/index.js @@ -560,5 +560,11 @@ export default { prompt.showToast({ message: 'reachBottom' }); + }, + + onAccessibility() { + prompt.showToast({ + message: 'onAccessibility' + }); } } diff --git a/ace/ace_standard/src/main/js/default/pages/stepper/style/index.css b/ace/ace_standard/src/main/js/default/pages/stepper/style/index.css new file mode 100644 index 000000000..c67ada6a8 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/stepper/style/index.css @@ -0,0 +1,529 @@ +/** + * 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; +} + + diff --git a/ace/ace_standard/src/main/js/default/pages/stepper/style/index.hml b/ace/ace_standard/src/main/js/default/pages/stepper/style/index.hml new file mode 100644 index 000000000..7c6e4ff97 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/stepper/style/index.hml @@ -0,0 +1,118 @@ + + +
+
+ + stepper通用样式 + + + + 通用样式 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 + + + +
+
+
+
+ + stepper特有样式 + +
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/stepper/style/index.js b/ace/ace_standard/src/main/js/default/pages/stepper/style/index.js new file mode 100644 index 000000000..65b0e5d2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/stepper/style/index.js @@ -0,0 +1,20 @@ +/** + * 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 { + +} diff --git a/ace/ace_standard/src/main/js/default/pages/stepperItem/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/stepperItem/prop/index.hml index c6a1e15ee..068ff094e 100644 --- a/ace/ace_standard/src/main/js/default/pages/stepperItem/prop/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/stepperItem/prop/index.hml @@ -224,6 +224,43 @@ stepper特有属性 + + 特有属性 -- stepper-item + + + + + + + + + + 特有属性 -- tid + + + + + + + + + + 特有属性 -- elif + + + + + + + + + 底部按钮属性 -- label diff --git a/ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.hml b/ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.hml index ee9fe0c98..379f80729 100644 --- a/ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.hml +++ b/ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.hml @@ -147,7 +147,8 @@ ondragstart="dragStart" ondrag="drag" ondragend="dragEnd" ondragenter="dragEnter" ondragover="dragOver" ondragleave="dragLeave" - ondrop="drop"> + ondrop="drop" + onaccessibility="onAccessibility"> 特有事件1 diff --git a/ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.js b/ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.js index 055f531e2..4634151f0 100644 --- a/ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.js +++ b/ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.js @@ -515,5 +515,11 @@ export default { prompt.showToast({ message: 'reachBottom' }); + }, + + onAccessibility() { + prompt.showToast({ + message: 'onAccessibility' + }); } } diff --git a/ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.css b/ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.css new file mode 100644 index 000000000..19b7fc40d --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.css @@ -0,0 +1,552 @@ +/** + * 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; +} + +#styleThirtyThree{ + color: red; + font-size: 18px; + allow-scale: true; + font-style: italic; + font-weight: 600; + text-decoration: underline; + font-family: font-family; +} + + +.style-box{ + width: 80%; + height: 30px; +} +.color-grey{ + background-color: grey; +} +.color-beige{ + background-color: beige; +} +.color-violet{ + background-color: violet; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.hml b/ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.hml new file mode 100644 index 000000000..85e742a01 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.hml @@ -0,0 +1,187 @@ + + +
+
+ + stepper通用样式 + + + + 通用样式 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 + + + + + + +
+
+ + stepper特有样式 + + + + + + +
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.js b/ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.js new file mode 100644 index 000000000..65b0e5d2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.js @@ -0,0 +1,20 @@ +/** + * 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 { + +} -- GitLab