Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
大约 1 年 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts

体验新版 GitCode，发现更多精彩内容 >>

提交 5694fcad 编写于 作者: D dongwei 提交者： wanggang
浏览文件
操作

add test cases 

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 7c09eb44
隐藏空白更改
内联 并排
Showing with 1989 addition and 177 deletion
ace/ace_standard/src/main/js/default/pages/slider/prop/index.css
浏览文件 @ 5694fcad
......@@ -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
ace/ace_standard/src/main/js/default/pages/slider/prop/index.hml
浏览文件 @ 5694fcad
......@@ -79,15 +79,29 @@
focusable="">
</slider>
<text class="sub-title">
通用属性 -- data
</text>
<div>
<slider id="dataPropB"
data-input="通用属性 -- data">
</slider>
<slider id="dataPropBNone"
data-input="">
</slider>
</div>
<text class="sub-title">
通用属性 -- data-*
</text>
<slider id="dataProp"
data-slider="通用属性 -- data-*">
</slider>
<slider id="dataPropNone"
data-slider="">
</slider>
<div>
<slider id="dataProp"
data-slider="通用属性 -- data-*">
</slider>
<slider id="dataPropNone"
data-slider="">
</slider>
</div>
<text class="sub-title">
通用属性 -- click-effect
......@@ -258,5 +272,22 @@
<slider id="showtipsNone"
showtips="">
</slider>
<text class="sub-title">
特有属性 -- tid
</text>
<slider for="{{array}}" tid="id" style="color: #679855; margin: 1px;"
id="showFor{{$item.id}}" value="{{$item.name }}">
</slider>
<text class="sub-title">
特有属性 -- if elif
</text>
<slider if="false" id="showIf">
</slider>
<slider elif="false" id="showElseIfTrue">
</slider>
<slider elif="true" id="showElseIfFalse">
</slider>
<slider else id="showElse">
</slider>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/slider/prop/index.js
浏览文件 @ 5694fcad
......@@ -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,
......
ace/ace_standard/src/main/js/default/pages/slider/router/index.hml
浏览文件 @ 5694fcad
......@@ -113,9 +113,9 @@
slider通用属性2
</text>
<slider class="prop2" ref ="prop2" id="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</slider>
<text class="sub-title">
slider通用属性3
......@@ -138,12 +138,23 @@
<text class="sub-title">
slider特有属性2
</text>
<slider class="prop5" id="prop5"
type="continuous"
minicon="../../../common/images/icon.png"
maxicon="../../../common/images/icon.png">
</slider>
<div>
<slider class="prop5" id="prop5"
type="continuous"
minicon="../../../common/images/icon.png"
maxicon="../../../common/images/icon.png">
</slider>
<div style="margin: 1px;">
<slider if="false" class="prop2" ref ="prop2" style="background-color: rebeccapurple;">
</slider>
<slider elif="true" class="prop2" ref ="prop2" style="background-color: black;">
</slider>
<slider elif="false" class="prop2" ref ="prop2" style="background-color: blue;">
</slider>
<slider else class="prop2" ref ="prop2" style="background-color: yellow;">
</slider>
</div>
</div>
<text class="sub-title">
slider特有属性3
</text>
......@@ -152,6 +163,11 @@
showsteps="true"
showtips="true">
</slider>
<div>
<slider for="{{array}}" tid="id" style="color: #679855; margin: 1px;" class="prop3"
value="{{$item.name }}">
</slider>
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
......@@ -186,7 +202,8 @@
slider特有事件1
</text>
<slider class ="event4"
onchange="change">
onchange="change"
onaccessibility="accessibility">
</slider>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
......
ace/ace_standard/src/main/js/default/pages/slider/router/index.js
浏览文件 @ 5694fcad
......@@ -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)
});
}
}
ace/ace_standard/src/main/js/default/pages/slider/style/index.css
浏览文件 @ 5694fcad
......@@ -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;
}
}
ace/ace_standard/src/main/js/default/pages/slider/style/index.hml
浏览文件 @ 5694fcad
......@@ -16,157 +16,150 @@
<div class="container">
<div class="style-container">
<text class="title">
input通用样式
slider通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<input id="styleOne">
</input>
<input id="styleTwo">
</input>
<input id="styleThree">
</input>
<input id="styleFour">
</input>
<input id="styleFive">
</input>
<input id="styleSix">
</input>
<input id="styleSeven">
</input>
<input id="styleEight">
</input>
<slider id="styleOne">
</slider>
<slider id="styleTwo">
</slider>
<slider id="styleThree">
</slider>
<slider id="styleFour">
</slider>
<slider id="styleFive">
</slider>
<slider id="styleSix">
</slider>
<slider id="styleSeven">
</slider>
<slider id="styleEight">
</slider>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<div id="styleNine">
<input id="styleTen">
</input>
<input id="styleEleven">
</input>
<input id="styleTwelve">
</input>
<input id="styleThirteen">
</input>
<input id="styleFourteen">
</input>
<input id="styleFifteen">
</input>
<input id="styleSixteen">
</input>
<input id="styleSeventeen">
</input>
<input id="styleEighteen">
</input>
<input id="styleNineteen">
</input>
<input id="styleTwenty">
</input>
<slider id="styleTen">
</slider>
<slider id="styleEleven">
</slider>
<slider id="styleTwelve">
</slider>
<slider id="styleThirteen">
</slider>
<slider id="styleFourteen">
</slider>
<slider id="styleFifteen">
</slider>
<slider id="styleSixteen">
</slider>
<slider id="styleSeventeen">
</slider>
<slider id="styleEighteen">
</slider>
<slider id="styleNineteen">
</slider>
<slider id="styleTwenty">
</slider>
</div>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<input id="styleTwentyOne">
</input>
<input id="styleTwentyTwo">
</input>
<input id="styleTwentyThree">
</input>
<slider id="styleTwentyOne">
</slider>
<slider id="styleTwentyTwo">
</slider>
<slider id="styleTwentyThree">
</slider>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<input id="styleTwentyFour">
</input>
<input id="styleTwentyFive">
</input>
<slider id="styleTwentyFour">
</slider>
<slider id="styleTwentyFive">
</slider>
<text class="sub-title">
通用样式26-31 background
</text>
<input id="styleTwentySix">
</input>
<input id="styleTwentySeven">
</input>
<input id="styleTwentyNine">
</input>
<input id="styleThirty">
</input>
<input id="styleThirtyOne">
</input>
<slider id="styleTwentySix">
</slider>
<slider id="styleTwentySeven">
</slider>
<slider id="styleTwentyNine">
</slider>
<slider id="styleThirty">
</slider>
<slider id="styleThirtyOne">
</slider>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<input id="styleThirtyTwo">
</input>
<slider id="styleThirtyTwo">
</slider>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
input特有样式
slider特有样式
</text>
<text class="sub-title">
特有样式 color
</text>
<div id="specificOne">
<input id="specificColor1" class="color-red">
</input>
<input id="specificColor2" class="color-black">
</input>
<slider id="specificColor1" class="color-red">
</slider>
<slider id="specificColor2" class="color-black">
</slider>
</div>
<text class="sub-title">
特有样式 font-size
特有样式 selected-color
</text>
<div id="specificTwo">
<input id="specificFontSize1" class="font-size1" value="value" type="button">
</input>
<input id="specificFontSize2" class="font-size2" value="value" type="button">
</input>
<slider id="specificTwo1" class="selected-color1" value="50">
</slider>
<slider id="specificTwo2" class="selected-color2" value="50">
</slider>
</div>
<text class="sub-title">
特有样式 allow-scale
特有样式 block-color
</text>
<div id="specificThree">
<input id="specificAllowScale1" class="allow-scale1">
</input>
<input id="specificAllowScale2" class="allow-scale2">
</input>
<slider id="specificThree1" class="block-color1">
</slider>
<slider id="specificThree2" class="block-color2">
</slider>
</div>
<text class="sub-title">
特有样式 placeholder-color
</text>
<div id="specificFour">
<input id="specificPlaceholderColor1" class="placeholder-color1" type="text" placeholder="placeholder">
</input>
<input id="specificPlaceholderColor2" class="placeholder-color2" type="text" placeholder="placeholder">
</input>
</div>
<text class="sub-title">
特有样式 font-weight
</text>
<div id="specificFive">
<input id="specificFontWeight1" class="font-weight1" value="value" type="button">
</input>
<input id="specificFontWeight2" class="font-weight2" value="value" type="button">
</input>
</div>
<text class="sub-title">
特有样式 caret-color
</text>
<div id="specificSix">
<input id="specificCaretColor1" class="caret-color1">
</input>
<input id="specificCaretColor2" class="caret-color2">
</input>
<div style="width: 100%;flex-weight: 1;overflow: scroll;flex-direction: column;">
<text class="sub-title">
补充样式
</text>
<slider id="addOne">
</slider>
<slider id="addTwo">
</slider>
<slider id="addThree">
</slider>
<slider id="addFour">
</slider>
<slider id="addFive">
</slider>
<slider id="addSix">
</slider>
<slider id="addSeven">
</slider>
</div>
</div>
</div>
......
ace/ace_standard/src/main/js/default/pages/span/prop/index.hml
浏览文件 @ 5694fcad
......@@ -87,6 +87,22 @@
</span>
</text>
<text class="sub-title">
通用属性 -- data
</text>
<text class="spanTextTitle">
<span id="dataPropOne"
data="通用属性 -- data">
span
</span>
</text>
<text class="spanTextTitle">
<span id="dataPropOneNone"
data="">
span
</span>
</text>
<text class="sub-title">
通用属性 -- click-effect
</text>
......@@ -197,6 +213,39 @@
span
</span>
</text>
<text class="sub-title">
属性 -- tid
</text>
<text class="spanTextTitle">
<span id="tidProp"
tid="tidProp">
span
</span>
</text>
<text class="spanTextTitle">
<span id="tidPropNone"
tid="">
span
</span>
</text>
<text class="sub-title">
属性 -- elif
</text>
<text class="spanTextTitle">
<span if="false">
span
</span>
<span id="elifPropTrue"
elif="true">
span
</span>
<span id="elifPropFalse"
elif="false">
span
</span>
</text>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
......
ace/ace_standard/src/main/js/default/pages/span/router/index.css
浏览文件 @ 5694fcad
......@@ -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;
......
ace/ace_standard/src/main/js/default/pages/stack/prop/index.css
浏览文件 @ 5694fcad
......@@ -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;
......
ace/ace_standard/src/main/js/default/pages/stack/prop/index.hml
浏览文件 @ 5694fcad
......@@ -153,5 +153,27 @@
<stack id="showPropNone"
show="">
</stack>
<text class="sub-title">
特有属性 -- tid
</text>
<stack class="propNewAdd"
tid="id">
</stack>
<stack class="propNewAdd"
tid="">
</stack>
<div>
<stack id="ifPropTrue"
if="true">
</stack>
<stack class="propNewAdd"
elif="true">
</stack>
<stack class="propNewAdd"
elif="false">
</stack>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/stack/router/index.hml
浏览文件 @ 5694fcad
......@@ -128,6 +128,7 @@
ondrop="drop">
</stack>
<stack onaccessibility="onAccessibility"></stack>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
......
ace/ace_standard/src/main/js/default/pages/stack/router/index.js
浏览文件 @ 5694fcad
......@@ -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));
}
}
ace/ace_standard/src/main/js/default/pages/stepper/prop/index.css
浏览文件 @ 5694fcad
......@@ -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
ace/ace_standard/src/main/js/default/pages/stepper/prop/index.hml
浏览文件 @ 5694fcad
......@@ -162,6 +162,39 @@
stepper特有属性
</text>
<text class="sub-title">
特有属性属性 -- stepper
</text>
<stepper id="stepperPorp" stepper="stepper" class="specific-style color-grey">
</stepper>
<stepper id="stepperPorpNone" stepper="" class="specific-style color-blue">
</stepper>
<text class="sub-title">
特有属性属性 -- elif
</text>
<stepper if="false"></stepper>
<stepper id="elifPorpTrue" elif="true" class="specific-style color-grey">
</stepper>
<stepper id="elifPorpFalse" elif="false" class="specific-style color-blue">
</stepper>
<text class="sub-title">
特有属性属性 -- tid
</text>
<stepper id="tidPorp" tid="tid" class="specific-style color-grey">
</stepper>
<stepper id="tidPorpNone" tid="" class="specific-style color-blue">
</stepper>
<text class="sub-title">
特有属性属性 -- tid
</text>
<stepper id="tidPorp" tid="tid" class="specific-style color-grey">
</stepper>
<stepper id="tidPorpNone" tid="" class="specific-style color-blue">
</stepper>
<text class="sub-title">
显示子组件属性 -- index
</text>
......
ace/ace_standard/src/main/js/default/pages/stepper/router/index.hml
浏览文件 @ 5694fcad
......@@ -185,7 +185,8 @@
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
ondrop="drop"
onaccessibility="onAccessibility">
</stepper>
<text class="sub-title">
stepper特有事件4
......
ace/ace_standard/src/main/js/default/pages/stepper/router/index.js
浏览文件 @ 5694fcad
......@@ -560,5 +560,11 @@ export default {
prompt.showToast({
message: 'reachBottom'
});
},
onAccessibility() {
prompt.showToast({
message: 'onAccessibility'
});
}
}
ace/ace_standard/src/main/js/default/pages/stepper/style/index.css 0 → 100644
浏览文件 @ 5694fcad
/**
* 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;
}
ace/ace_standard/src/main/js/default/pages/stepper/style/index.hml 0 → 100644
浏览文件 @ 5694fcad
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="style-container">
<text class="title">
stepper通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<stepper id="styleOne">
</stepper>
<stepper id="styleTwo">
</stepper>
<stepper id="styleThree">
</stepper>
<stepper id="styleFour">
</stepper>
<stepper id="styleFive">
</stepper>
<stepper id="styleSix">
</stepper>
<stepper id="styleSeven">
</stepper>
<stepper id="styleEight">
</stepper>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<stepper id="styleNine">
</stepper>
<stepper id="styleTen">
</stepper>
<stepper id="styleEleven">
</stepper>
<stepper id="styleTwelve">
</stepper>
<stepper id="styleThirteen">
</stepper>
<stepper id="styleFourteen">
</stepper>
<stepper id="styleFifteen">
</stepper>
<stepper id="styleSixteen">
</stepper>
<stepper id="styleSeventeen">
</stepper>
<stepper id="styleEighteen">
</stepper>
<stepper id="styleNineteen">
</stepper>
<stepper id="styleTwenty">
</stepper>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<stepper id="styleTwentyOne">
</stepper>
<stepper id="styleTwentyTwo">
</stepper>
<stepper id="styleTwentyThree">
</stepper>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<stepper id="styleTwentyFour">
</stepper>
<stepper id="styleTwentyFive">
</stepper>
<text class="sub-title">
通用样式26-31 background
</text>
<stepper id="styleTwentySix">
</stepper>
<stepper id="styleTwentySeven">
</stepper>
<stepper id="styleTwentyNine">
</stepper>
<stepper id="styleThirty">
</stepper>
<stepper id="styleThirtyOne">
</stepper>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<stepper id="styleThirtyTwo">
</stepper>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
stepper特有样式
</text>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/stepper/style/index.js 0 → 100644
浏览文件 @ 5694fcad
/**
* 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 {
}
ace/ace_standard/src/main/js/default/pages/stepperItem/prop/index.hml
浏览文件 @ 5694fcad
......@@ -224,6 +224,43 @@
stepper特有属性
</text>
<text class="sub-title">
特有属性 -- stepper-item
</text>
<stepper class="stepper-style">
<stepper-item id="stepperItemProp"
stepper-item="stepper-item">
</stepper-item>
<stepper-item id="stepperItemPropNone"
stepper-item="">
</stepper-item>
</stepper>
<text class="sub-title">
特有属性 -- tid
</text>
<stepper class="stepper-style">
<stepper-item id="tidProp"
tid="tid">
</stepper-item>
<stepper-item id="tidPropNone"
tid="">
</stepper-item>
</stepper>
<text class="sub-title">
特有属性 -- elif
</text>
<stepper class="stepper-style">
<stepper-item if="false"></stepper-item>
<stepper-item id="elifPropTrue"
elif="true">
</stepper-item>
<stepper-item id="tidPropNone"
elif="false">
</stepper-item>
</stepper>
<text class="sub-title">
底部按钮属性 -- label
</text>
......
ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.hml
浏览文件 @ 5694fcad
......@@ -147,7 +147,8 @@
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
ondrop="drop"
onaccessibility="onAccessibility">
</stepper-item>
<text class="sub-title">
特有事件1
......
ace/ace_standard/src/main/js/default/pages/stepperItem/router/index.js
浏览文件 @ 5694fcad
......@@ -515,5 +515,11 @@ export default {
prompt.showToast({
message: 'reachBottom'
});
},
onAccessibility() {
prompt.showToast({
message: 'onAccessibility'
});
}
}
ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.css 0 → 100644
浏览文件 @ 5694fcad
/**
* 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
ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.hml 0 → 100644
浏览文件 @ 5694fcad
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="style-container">
<text class="title">
stepper通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<stepper class="style-box color-grey">
<stepper-item id="styleOne">
</stepper-item>
</stepper>
<stepper class="style-box color-beige">
<stepper-item id="styleTwo">
</stepper-item>
</stepper>
<stepper class="style-box color-violet">
<stepper-item id="styleThree">
</stepper-item>
</stepper>
<stepper class="style-box color-grey">
<stepper-item id="styleFour">
</stepper-item>
</stepper>
<stepper class="style-box color-beige">
<stepper-item id="styleFive">
</stepper-item>
</stepper>
<stepper class="style-box color-violet">
<stepper-item id="styleSix">
</stepper-item>
</stepper>
<stepper class="style-box color-grey">
<stepper-item id="styleSeven">
</stepper-item>
</stepper>
<stepper class="style-box color-violet">
<stepper-item id="styleEight">
</stepper-item>
</stepper>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<stepper class="style-box color-violet">
<stepper-item id="styleNine">
</stepper-item>
</stepper>
<stepper class="style-box color-beige">
<stepper-item id="styleTen">
</stepper-item>
</stepper>
<stepper class="style-box color-grey">
<stepper-item id="styleEleven">
</stepper-item>
</stepper>
<stepper class="style-box color-violet">
<stepper-item id="styleTwelve">
</stepper-item>
</stepper>
<stepper class="style-box color-beige">
<stepper-item id="styleThirteen">
</stepper-item>
</stepper>
<stepper class="style-box color-grey">
<stepper-item id="styleFourteen">
</stepper-item>
</stepper>
<stepper class="style-box color-beige">
<stepper-item id="styleFifteen">
</stepper-item>
</stepper>
<stepper class="style-box color-violet">
<stepper-item id="styleSixteen">
</stepper-item>
</stepper>
<stepper class="style-box color-grey">
<stepper-item id="styleSeventeen">
</stepper-item>
</stepper>
<stepper class="style-box color-beige">
<stepper-item id="styleEighteen">
</stepper-item>
</stepper>
<stepper class="style-box color-violet">
<stepper-item id="styleNineteen">
</stepper-item>
</stepper>
<stepper class="style-box color-grey">
<stepper-item id="styleTwenty">
</stepper-item>
</stepper>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<stepper class="style-box color-grey">
<stepper-item id="styleTwentyOne">
</stepper-item>
</stepper>
<stepper class="style-box color-beige">
<stepper-item id="styleTwentyTwo">
</stepper-item>
</stepper>
<stepper class="style-box color-violet">
<stepper-item id="styleTwentyThree">
</stepper-item>
</stepper>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<stepper class="style-box color-violet">
<stepper-item id="styleTwentyFour">
</stepper-item>
</stepper>
<stepper class="style-box color-beige">
<stepper-item id="styleTwentyFive">
</stepper-item>
</stepper>
<text class="sub-title">
通用样式26-31 background
</text>
<stepper class="style-box color-beige">
<stepper-item id="styleTwentySix">
</stepper-item>
</stepper>
<stepper class="style-box color-violet">
<stepper-item id="styleTwentySeven">
</stepper-item>
</stepper>
<stepper class="style-box color-grey">
<stepper-item id="styleTwentyNine">
</stepper-item>
</stepper>
<stepper class="style-box color-beige">
<stepper-item id="styleThirty">
</stepper-item>
</stepper>
<stepper class="style-box color-violet">
<stepper-item id="styleThirtyOne">
</stepper-item>
</stepper>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<stepper class="style-box color-violet">
<stepper-item id="styleThirtyTwo">
</stepper-item>
</stepper>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<text class="title">
stepper特有样式
</text>
<stepper class="style-box color-violet">
<stepper-item id="styleThirtyThree">
</stepper-item>
</stepper>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/stepperItem/style/style.js 0 → 100644
浏览文件 @ 5694fcad
/**
* 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 {
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或