Skip to content

X
Xts Acts

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

通知 9
Star 22
Fork 0
X
Xts Acts
未验证 提交 a800f187 编写于 作者: B bayanxing 提交者： Gitee
浏览文件
操作

!14 add test cases 

Merge pull request !14 from Nicklaus/xts_acts_dev
上级 94e3e418 eff56477
展开全部 隐藏空白更改
内联 并排
Showing with 2979 addition and 342 deletion
ace/ace_standard/src/main/config.json
浏览文件 @ a800f187
...@@ -65,7 +65,8 @@ ...@@ -65,7 +65,8 @@
"pages/image/router/index", "pages/image/router/index",
"pages/label/router/index", "pages/label/router/index",
"pages/label/prop/index", "pages/label/prop/index",
"pages/rating/index", "pages/rating/prop/index",
"pages/rating/router/index",
"pages/search/router/index", "pages/search/router/index",
"pages/search/prop/index", "pages/search/prop/index",
"pages/toolbar/index", "pages/toolbar/index",
......
ace/ace_standard/src/main/js/default/pages/rating/index.css 已删除 100644 → 0
浏览文件 @ 94e3e418
/**
* 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%;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 70%;
}
.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;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 50px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/image.png');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.style4{
width: 60%;
height: 6%;
padding: 3px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 150px;
height: 70px;
flex-direction: column;
}
.style5{
width: 120px;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 120px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('/common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
width: 90%;
height: 40px;
star-background: url('/common/images/star-1-1.png');
star-foreground: url('/common/images/star-1-3.png');
star-secondary: url('/common/images/star-1-2.png');
rtl-flip:false
}
.style8 {
width: 100%;
margin: 10px;
rtl-flip:true
}
.prop-container{
flex-direction: column;
}
#prop1 {
width: 100%;
height: 30px;
}
.prop2 {
width: 80%;
height: 20px;
}
.prop4 {
width: 60%;
height: 40px;
}
.prop5 {
width: 90%;
height: 50px;
}
.ani-container{
flex-direction: column;
}
.ani1{
background-color: #72ac33;
width: 55px;
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: 55px;
margin: 5px;
}
.gradient-container{
flex-direction: column;
}
.gradient1{
width: 100%;
height: 30px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 20px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 40px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
width: 100%;
height: 50px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
flex-direction: column;
}
.access1{
width: 100%;
height: 30px;
}
.atom-container{
flex-direction: column;
}
.multimode-container{
flex-direction: column;
}
.multimode1{
width: 100%;
height: 30px;
}
.multimode1{
width: 100%;
height: 30px;
}
.event-container{
flex-direction: column;
height: 30%;
}
.event1{
width: 60%;
flex-weight: 1;
}
.event2{
width: 70%;
flex-weight: 1;
}
.event3{
width: 80%;
flex-weight: 1;
}
.event4{
width: 90%;
flex-weight: 1;
}
.function-container{
flex-direction: column;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/rating/prop/index.css 0 → 100644
浏览文件 @ a800f187
/**
* Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.prop-container{
flex-direction: column;
flex-weight: 1;
}
#idProp {
flex-weight: 1;
background-color:#f00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.classProp {
flex-weight: 1;
background-color:#0f0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#classPropNone {
flex-weight: 1;
background-color:#0000e0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refProp {
flex-weight: 1;
background-color:#00f000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refPropNone {
flex-weight: 1;
background-color:#00000e;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropTrue {
flex-weight: 1;
background-color:#000f00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropFalse {
flex-weight: 1;
background-color:#0000f0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropNone {
flex-weight: 1;
background-color:#d00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropTrue {
flex-weight: 1;
background-color:#00000f;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropFalse {
flex-weight: 1;
background-color:#ff0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropNone {
flex-weight: 1;
background-color:#0d0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataProp {
flex-weight: 1;
background-color:#0ff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataPropNone {
flex-weight: 1;
background-color:#00d000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropSmall {
height: 15px;
background-color:#00ff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropMedium {
height: 15px;
background-color:#000ff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropLarge {
height: 15px;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropNone{
height: 15px;
background-color:#000d00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropRtl {
flex-weight: 1;
background-color:#0fff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropAuto {
flex-weight: 1;
background-color:#00fff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropLtr {
flex-weight: 1;
background-color:#000fff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropNone {
flex-weight: 1;
background-color:#0000d0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropNull {
flex-weight: 1;
background-color:#ffff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropOne {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropThree {
flex-weight: 1;
background-color:#000e00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropTrue {
flex-weight: 1;
background-color:#0ffff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropFalse {
flex-weight: 1;
background-color:#00ffff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropNone {
flex-weight: 1;
background-color:#00000d;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropTrue {
flex-weight: 1;
background-color:#e00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropFalse {
flex-weight: 1;
background-color:#0e0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
#numstars{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 20px;
}
#rating{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 20px;
}
#stepsize{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 20px;
}
#indicatorFalse{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 20px;
}
#indicatorTrue{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 20px;
}
#indicatorNone{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 20px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/rating/prop/index.hml 0 → 100644
浏览文件 @ a800f187
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="prop-container">
<text class="title">
rating通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<rating id="idProp">
</rating>
<text class="sub-title">
通用属性 -- class
</text>
<rating id="classProp"
class="classProp">
</rating>
<rating id="classPropNone"
class="">
</rating>
<text class="sub-title">
通用属性 -- style
</text>
<rating id="styleProp"
style="width:10%;height:20px;background-color:red">
</rating>
<text class="sub-title">
通用属性 -- ref
</text>
<rating id="refProp"
ref="refProp">
</rating>
<rating id="refPropNone"
ref="">
</rating>
<text class="sub-title">
通用属性 -- disabled
</text>
<rating id="disabledPropTrue"
disabled="true">
</rating>
<rating id="disabledPropFalse"
disabled="false">
</rating>
<rating id="disabledPropNone"
disabled="">
</rating>
<text class="sub-title">
通用属性 -- focusable
</text>
<rating id="focusablePropTrue"
focusable="true">
</rating>
<rating id="focusablePropFalse"
focusable="false">
</rating>
<rating id="focusablePropNone"
focusable="">
</rating>
<text class="sub-title">
通用属性 -- data-*
</text>
<rating id="dataProp"
data-rating="通用属性 -- data-*">
</rating>
<rating id="dataPropNone"
data-rating="">
</rating>
<text class="sub-title">
通用属性 -- click-effect
</text>
<rating id="clickEffectPropSmall"
click-effect="spring-small">
</rating>
<rating id="clickEffectPropMedium"
click-effect="spring-medium">
</rating>
<rating id="clickEffectPropLarge"
click-effect="spring-large">
</rating>
<rating id="clickEffectPropNone"
click-effect="">
</rating>
<text class="sub-title">
通用属性 -- dir
</text>
<rating id="dirPropRtl"
dir="rtl">
</rating>
<rating id="dirPropAuto"
dir="auto">
</rating>
<rating id="dirPropLtr"
dir="ltr">
</rating>
<rating id="dirPropNone"
dir="">
</rating>
<text class="sub-title">
渲染属性 -- for
</text>
<rating id="forPropNull"
for="">
</rating>
<rating id="forPropOne"
for="{{listOne}}">
</rating>
<rating id="forPropThree"
for="{{listThree}}">
</rating>
<text class="sub-title">
渲染属性 -- if
</text>
<rating id="ifPropTrue"
if="true">
</rating>
<text class="sub-title">
渲染属性 -- show
</text>
<rating id="showPropTrue"
show="true">
</rating>
<rating id="showPropFalse"
show="false">
</rating>
<rating id="showPropNone"
show="">
</rating>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
rating特有属性
</text>
<text class="sub-title">
特有属性 -- numstars
</text>
<rating id="numstars"
numstars="5">
</rating>
<text class="sub-title">
特有属性 -- rating
</text>
<rating id="rating"
rating="2">
</rating>
<text class="sub-title">
特有属性 -- stepsize
</text>
<rating id="stepsize"
stepsize="1">
</rating>
<text class="sub-title">
特有属性 -- indicator
</text>
<rating id="indicatorFalse"
indicator="false">
</rating>
<rating id="indicatorTrue"
indicator="true">
</rating>
<rating id="indicatorNone"
indicator="">
</rating>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/rating/prop/index.js 0 → 100644
浏览文件 @ a800f187
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data:{
listOne:[{}],
listThree:[{},{},{}],
idProp : null,
classProp : null,
classPropNone : null,
styleProp : null,
refProp : null,
refPropNone : null,
disabledPropTrue : null,
disabledPropFalse : null,
disabledPropNone : null,
focusablePropTrue : null,
focusablePropFalse : null,
focusablePropNone : null,
dataProp : null,
dataPropNone : null,
clickEffectPropSmall : null,
clickEffectPropMedium : null,
clickEffectPropLarge : null,
clickEffectPropNone : null,
dirPropRtl : null,
dirPropAuto : null,
dirPropLtr : null,
dirPropNone : null,
forPropNull : null,
forPropOne : null,
forPropThree : null,
ifPropTrue : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : null,
numstars : null,
rating : null,
stepsize : null,
indicatorFalse : null,
indicatorTrue : null,
indicatorNone : null
},
onShow(){
this.getCommonPropValues();
this.getSpecificPropValues();
globalThis.value = {
idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse,
disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue,
focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone,
dataProp : this.dataProp, dataPropNone : this.dataPropNone,
clickEffectPropSmall : this.clickEffectPropSmall, clickEffectPropMedium : this.clickEffectPropMedium,
clickEffectPropLarge : this.clickEffectPropLarge, clickEffectPropNone : this.clickEffectPropNone,
dirPropRtl : this.dirPropRtl, dirPropAuto : this.dirPropAuto, dirPropLtr : this.dirPropLtr,
dirPropNone : this.dirPropNone, forPropNull : this.forPropNull, forPropOne : this.forPropOne,
forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue, showPropTrue : this.showPropTrue,
showPropFalse : this.showPropFalse, showPropNone : this.showPropNone,
numstars : this.numstars,
rating : this.rating,
stepsize : this.stepsize,
indicatorFalse : this.indicatorFalse,
indicatorTrue : this.indicatorTrue,
indicatorNone : this.indicatorNone
}
},
getCommonPropValues(){
this.idProp = this.$element("idProp").getInspector()
this.classProp = this.$element("classProp").getInspector()
this.classPropNone = this.$element("classPropNone").getInspector()
this.styleProp = this.$element("styleProp").getInspector()
this.refProp = this.$element("refProp").getInspector()
this.refPropNone = this.$element("refPropNone").getInspector()
this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
this.disabledPropNone = this.$element("disabledPropNone").getInspector()
this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
this.focusablePropNone = this.$element("focusablePropNone").getInspector()
this.dataProp = this.$element("dataProp").getInspector()
this.dataPropNone = this.$element("dataPropNone").getInspector()
this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
this.dirPropRtl = this.$element("dirPropRtl").getInspector()
this.dirPropAuto = this.$element("dirPropAuto").getInspector()
this.dirPropLtr = this.$element("dirPropLtr").getInspector()
this.dirPropNone = this.$element("dirPropNone").getInspector()
this.forPropNull = this.$element("forPropNull").getInspector()
this.forPropOne = this.$element("forPropOne").getInspector()
this.forPropThree = this.$element("forPropThree").getInspector()
this.ifPropTrue = this.$element("ifPropTrue").getInspector()
this.showPropTrue = this.$element("showPropTrue").getInspector()
this.showPropFalse = this.$element("showPropFalse").getInspector()
this.showPropNone = this.$element("showPropNone").getInspector()
},
getSpecificPropValues(){
this.numstars = this.$element("numstars").getInspector()
this.rating = this.$element("rating").getInspector()
this.stepsize = this.$element("stepsize").getInspector()
this.indicatorFalse = this.$element("indicatorFalse").getInspector()
this.indicatorTrue = this.$element("indicatorTrue").getInspector()
this.indicatorNone = this.$element("indicatorNone").getInspector()
}
}
ace/ace_standard/src/main/js/default/pages/rating/router/index.css 0 → 100644
浏览文件 @ a800f187
/**
* 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%;
}
.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;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 50px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/image.png');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.style4{
width: 60%;
height: 5%;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.style7 {
width: 100%;
flex-direction: column;
flex-wrap:wrap;
justify-content:flex-start;
align-items: flex-end;
align-content:space-around;
display: flex;
height: 30px;
}
.style8{
flex-direction: row;
flex-wrap:nowrap;
scrollbar-color: yellow;
scrollbar-width: 10px;
overscroll-effect:spring;
height: 20px;
overflow:scroll;
}
.flex-item {
width: 30%;
height: 30px;
border-radius: 16px;
margin-right: 5px;
}
.style9{
flex-direction: row;
flex-wrap:nowrap;
scrollbar-color: yellow;
scrollbar-width: 10px;
overscroll-effect:spring;
height: 20px;
overflow:scroll;
}
.background-red {
color: red;
}
.foreground-yellow {
color: yellow;
}
.secondary-blue {
color: blue;
}
.size1{
width: 40%;
height: 20px;
}
.size2{
width: 30%;
height: 20px;
}
.rtl-flip-true{
rtl-flip: true
}
.rtl-flip-false{
rtl-flip: false
}
.color-success {
background-color: cornflowerblue;
}
.grid-child {
width: 100%;
border-radius: 2px;
}
.grid-left-top {
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid plum;
background: linear-gradient(pink, purple);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 0;
grid-row-end: 0;
grid-column-end: 0;
}
.grid-left-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px solid plum;
background: linear-gradient(pink, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 1;
grid-column-start: 0;
grid-row-end: 1;
grid-column-end: 0;
}
.grid-right-top {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px dotted plum;
background: linear-gradient(mediumpurple, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 1;
grid-row-end: 0;
grid-column-end: 1;
}
.grid-right-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px dotted plum;
background: linear-gradient(pink, mediumpurple);
box-shadow: 0px 0px 2px 2px pink;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 1;
grid-column-end: 1;
}
.event-container{
flex-direction: column;
flex-weight: 1;
}
.event1{
width: 60%;
flex-weight: 1;
background-color: yellow;
}
.event2{
width: 70%;
flex-weight: 1;
background-color: red;
}
.event3{
width: 80%;
flex-weight: 1;
background-color: #ad4e2a;
}
.event4{
flex-direction: row;
width: 90%;
flex-weight: 1;
overflow:scroll;
}
.prop-container{
flex-direction: column;
}
#prop1 {
height: 15px;
background-color: mediumslateblue;
width: 100%;
}
.prop2 {
height: 15px;
background-color: pink;
width: 100%;
}
.prop3 {
height: 15px;
background-color: darkseagreen;
width: 100%;
}
.prop4 {
height: 15px;
background-color: red;
width: 100%;
}
.prop5 {
height: 15px;
background-color: purple;
width: 100%;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
background-color: #72ac33;
width: 55px;
height: 55px;
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);
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)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
background-color: #ad4e2a;
width: 55px;
height: 55px;
margin: 5px;
}
.gradient-container{
flex-direction: column;
}
.gradient1{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
width: 100%;
height: 20px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access-container{
flex-direction: column;
}
.access1{
background-color: #321124;
margin: 5px;
width: 90%;
height: 30px;
}
.atom-container{
flex-direction: column;
}
.multiMode-container{
flex-direction: column;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
.function-container{
flex-direction: column;
}
.function1{
background-color: #ff0000;
width: 60%;
height: 20px;
}
.function2{
background-color: #00ff00;
width: 60%;
height: 20px;
}
.function3{
background-color: #0000ff;
width: 100%;
height: 20px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/rating/index.hml → ace/ace_standard/src/main/js/default/pages/rating/router/index.hml
浏览文件 @ a800f187
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
* distributed under the License is distributed on an "AS IS" BASIS, * distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License.s * limitations under the License.
*/--> */-->
<div class="container"> <div class="container">
...@@ -19,82 +19,85 @@ ...@@ -19,82 +19,85 @@
<text class="title"> <text class="title">
通用样式 通用样式
</text> </text>
<text class="sub-title"> <text class="sub-title">
rating通用样式1 rating通用样式1
</text> </text>
<rating class ="style1"> <rating class="style1" id="style1">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating通用样式2 rating通用样式2
</text> </text>
<rating class ="style2"> <rating class="style2" id="style2">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating通用样式3 rating通用样式3
</text> </text>
<rating class ="style3" rating="3"> <rating class="style3" id="style3">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating通用样式4 rating通用样式4
</text> </text>
<rating class ="style4" rating="1"> <rating class="style4" id="style4">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating通用样式5 rating通用样式5
</text> </text>
<div class="contain1"> <div class="contain1">
<rating class="style5" id="rating5"> <rating class="style5" id="style5">
</rating> </rating>
<rating class="style6" id="rating6"> <rating class="style6" id="style6">
</rating> </rating>
</div> </div>
<text class="sub-title"> <text class="sub-title">
rating特有样式 rating特有样式1
</text> </text>
<rating class ="style7" numstars="10" rating="7.5"> <div class="style7" id="style7">
</rating> <rating class="flex-item background-red">
<rating class ="style8" numstars="15" rating="3"> </rating>
</rating> <rating class="flex-item foreground-yellow">
</rating>
<rating class="flex-item fsecondary-blue">
</rating>
</div>
<text class="sub-title">
rating特有样式2
</text>
<div class="style8" id="style8">
<rating class="flex-item size1">
</rating>
<rating class="flex-item size2">
</rating>
</div>
<text class="sub-title">
rating特有样式3
</text>
<div class="style9" id="style9">
<rating class="flex-item rtl-flip-true"></rating>
<rating class="flex-item rtl-flip-false"></rating>
</div>
</div> </div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false"> <divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider> </divider>
<div class="event-container" > <div class="ani-container">
<text class="title"> <text class="title">
通用事件 动画样式
</text>
<text class="sub-title">
rating通用事件1
</text>
<rating class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</rating>
<text class="sub-title">
rating通用事件2
</text> </text>
<rating class ="event2" ondoubleclick="doubleClick" <text class="sub-title">
onfocus="focus" onblur="blur" onkey="key" rating动画样式1
onswipe="swipe" onattached="attached" ondetached="detached">
</rating>
<text class="sub-title">
rating通用事件3
</text> </text>
<rating class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate" <rating class="ani1" >
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating特有事件4 rating动画样式2
</text> </text>
<rating class ="event4" onchange="changeRating"> <rating class="ani2" >
</rating> </rating>
</div> </div>
</div> </div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true"> <div style="background-color: #000000; width: 2px; height: 100%;">
</divider> </div>
<div class="sub-container"> <div class="sub-container">
<div class="prop-container"> <div class="prop-container">
<text class="title"> <text class="title">
...@@ -103,78 +106,107 @@ ...@@ -103,78 +106,107 @@
<text class="sub-title"> <text class="sub-title">
rating通用属性1 rating通用属性1
</text> </text>
<rating id="prop1" <rating id="prop1" class="prop1"
disabled = "true" focusable ="true" disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium" data-name ="prop1" click-effect="spring-medium"
dir ="rtl"> dir ="rtl">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating通用属性2 rating通用属性2
</text> </text>
<rating class="prop2" ref ="prop2" <rating class="prop2" ref ="prop2" id="prop2"
disabled = "false" focusable ="false" disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large" data-name ="prop2" click-effect="spring-large"
dir ="ltr"> dir ="ltr">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating通用属性3 rating通用属性3
</text> </text>
<rating style="color: #679855; stroke-width: 15px; line-cap: round; margin: 5px;"> <rating style="color: #679855; margin: 5px;" class="prop3" id="prop3">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating特有属性4 rating特有属性1
</text> </text>
<rating class="prop4" numstars="6" rating="3" stepsize="0.5" indicator="true"> <rating class="prop4" id="prop4"
numstars="5"
rating="1"
stepsize="1">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating特有属性5 rating特有属性2
</text> </text>
<rating class="prop5" numstars="8" rating="4" stepsize="1" indicator="false"> <rating class="prop5" id="prop5"
numstars="5"
rating="1"
stepsize="1"
indicator="true">
</rating> </rating>
</div> </div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false"> <div style="background-color: #000000; width: 100%; height: 2px;">
</divider> </div>
<div class="function-container"> <div class="event-container" >
<text class="title"> <text class="title">
通用方法 通用事件
</text> </text>
<text class="sub-title"> <text class="sub-title">
rating通用方法1 rating通用事件1
</text> </text>
<rating id="function1" rating="5" ontouchstart="functionTouch1"> <rating class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating通用方法2 rating通用事件2
</text> </text>
<rating id="function2" rating="3" ontouchstart="functionTouch2"> <rating class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating通用方法3 rating通用事件3
</text> </text>
<rating id="function3" rating="2" ontouchstart="functionTouch3"> <rating class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</rating>
<text class="sub-title">
rating特有事件1
</text>
<rating class ="event4"
numstars="5"
rating="1"
stepsize="1"
onchange="change">
</rating> </rating>
</div> </div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false"> <div style="background-color: #000000; width: 100%; height: 2px;">
</divider> </div>
<div class="ani-container"> <div class="function-container">
<text class="title"> <text class="title">
动画样式 通用方法
</text> </text>
<text class="sub-title"> <text class="sub-title">
rating动画样式1 rating通用方法1
</text> </text>
<rating class="ani1" > <rating id="function1" class="function1" ontouchstart="functionTest1">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating rating通用方法2
</text> </text>
<rating class="ani2" > <rating id="function2" class="function2" ontouchstart="functionTest2">
</rating>
<text class="sub-title">
rating通用方法3
</text>
<rating id="function3" class="function3" ontouchstart="functionTest3">
</rating> </rating>
</div> </div>
</div> </div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true"> <div style="background-color: #000000; width: 2px; height: 100%;">
</divider> </div>
<div class="sub-container"> <div class="sub-container">
<div class="gradient-container"> <div class="gradient-container">
...@@ -184,26 +216,26 @@ ...@@ -184,26 +216,26 @@
<text class="sub-title"> <text class="sub-title">
rating渐变样式1 rating渐变样式1
</text> </text>
<rating class="gradient1" rating="1"> <rating class="gradient1">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating渐变样式2 rating渐变样式2
</text> </text>
<rating class="gradient2" rating="2"> <rating class="gradient2">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating渐变样式3 rating渐变样式3
</text> </text>
<rating class="gradient3" rating="3"> <rating class="gradient3">
</rating> </rating>
<text class="sub-title"> <text class="sub-title">
rating渐变样式4 rating渐变样式4
</text> </text>
<rating class="gradient4" rating="4"> <rating class="gradient4">
</rating> </rating>
</div> </div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false"> <div style="background-color: #000000; width: 100%; height: 2px;">
</divider> </div>
<div class="access-container"> <div class="access-container">
<text class="title"> <text class="title">
无障碍 无障碍
...@@ -211,14 +243,14 @@ ...@@ -211,14 +243,14 @@
<text class="sub-title"> <text class="sub-title">
rating无障碍1 rating无障碍1
</text> </text>
<rating class="access1" rating="5" accessibilitygroup ="true" <rating class="access1" accessibilitygroup ="true"
accessibilitytext="这是rating" accessibilitytext="这是rating"
accessibilitydescription="点击此按键会弹出一个对话框" accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"> accessibilityimportance="no-hide-descendants">
</rating> </rating>
</div> </div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false"> <div style="background-color: #000000; width: 100%; height: 2px;">
</divider> </div>
<div class="atom-container"> <div class="atom-container">
<text class="title"> <text class="title">
原子布局 原子布局
...@@ -227,66 +259,66 @@ ...@@ -227,66 +259,66 @@
rating原子布局1 rating原子布局1
</text> </text>
<div style="flex-direction: row;height: 30px;width: 100%;"> <div style="flex-direction: row;height: 30px;width: 100%;">
<rating rating="1" style="width:20px;background-color: blue;display-index: 1;"> <rating style="width:20px;height:20px;background-color: blue;display-index: 1;">
</rating> </rating>
<rating rating="1" style="width:30px;background-color: black;display-index: 5;"> <rating style="width:30px; height:20px;background-color: black;display-index: 5;">
</rating> </rating>
<rating rating="1" style="width:40px;background-color: yellow;display-index: 4;"> <rating style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</rating> </rating>
<rating rating="1" style="width:10px;background-color: red;display-index: 3;"> <rating style="width:10px; height:20px;background-color: red;display-index: 3;">
</rating> </rating>
<rating rating="1" style="width:25px;background-color:pink;display-index: 7;"> <rating style="width:25px; height:20px;background-color:pink;display-index: 7;">
</rating> </rating>
<rating rating="1" style="width:15px;background-color: palegoldenrod;display-index: 2;"> <rating style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</rating> </rating>
</div> </div>
<text class="sub-title"> <text class="sub-title">
rating原子布局2 rating原子布局2
</text> </text>
<div style="flex-direction: row;height: 30px;width: 100%;"> <div style="flex-direction: row;height: 30px;width: 100%;">
<rating rating="1" style="background-color: blue;flex-weight: 1;"> <rating style="height:20px;background-color: blue;flex-weight: 1;">
</rating> </rating>
<rating rating="1" style="background-color: black;flex-weight: 5;"> <rating style="height:20px;background-color: black;flex-weight: 5;">
</rating> </rating>
<rating rating="1" style="background-color: yellow;flex-weight: 4;"> <rating style="height:20px;background-color: yellow;flex-weight: 4;">
</rating> </rating>
<rating rating="1" style="background-color: red;flex-weight: 3;"> <rating style="height:20px;background-color: red;flex-weight: 3;">
</rating> </rating>
<rating rating="1" style="background-color:pink;flex-weight: 7;"> <rating style="height:20px;background-color:pink;flex-weight: 7;">
</rating> </rating>
<rating rating="1" style="background-color: palegoldenrod;flex-weight: 2;"> <rating style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</rating> </rating>
</div> </div>
<text class="sub-title"> <text class="sub-title">
rating原子布局3 rating原子布局3
</text> </text>
<div style="flex-direction: row;height:60px;width: 100%;"> <div style="flex-direction: row;height:60px;width: 100%;">
<rating rating="1" style="width:30px;background-color: blue;aspect-ratio: 0.6;"> <rating style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</rating> </rating>
<rating rating="1" style="width:30px;background-color: black;aspect-ratio:0.5;"> <rating style="width:30px;background-color: black;aspect-ratio:0.5;">
</rating> </rating>
<rating rating="1" style="width:30px;background-color: yellow;aspect-ratio: 1.5;"> <rating style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</rating> </rating>
<rating rating="1" style="width:30px;background-color: red;aspect-ratio: 1.3;"> <rating style="width:30px;background-color: red;aspect-ratio: 1.3;">
</rating> </rating>
<rating rating="1" style="width:30px;background-color:pink;aspect-ratio: 1;"> <rating style="width:30px;background-color:pink;aspect-ratio: 1;">
</rating> </rating>
<rating rating="1" style="width:30px;background-color: palegoldenrod;aspect-ratio:2;"> <rating style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</rating>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
rating多模输入1
</text>
<rating class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="rating" scenelabel="common">
</rating> </rating>
</div> </div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
divider多模输入1
</text>
<rating rating="2" class="multimode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
</rating>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/rating/index.js → ace/ace_standard/src/main/js/default/pages/rating/router/index.js
浏览文件 @ a800f187
...@@ -84,11 +84,6 @@ var frames = [ ...@@ -84,11 +84,6 @@ var frames = [
]; ];
export default { export default {
changeRating(e){
prompt.showToast({
message: e.rating
});
},
onShow(){ onShow(){
// 通用属性 // 通用属性
...@@ -193,12 +188,24 @@ export default { ...@@ -193,12 +188,24 @@ export default {
}); });
}, },
click(){
prompt.showToast({
message: 'click'
});
},
doubleClick(){ doubleClick(){
prompt.showToast({ prompt.showToast({
message: 'doubleClick' message: 'doubleClick'
}); });
}, },
longPress(){
prompt.showToast({
message: 'longPress'
});
},
focus(){ focus(){
prompt.showToast({ prompt.showToast({
message: 'focus' message: 'focus'
...@@ -372,7 +379,7 @@ export default { ...@@ -372,7 +379,7 @@ export default {
}); });
}, },
functionTouch1(event){ functionTest1(event){
var function1 = this.$element('function1'); var function1 = this.$element('function1');
function1.focus(true) function1.focus(true)
var rect = function1.getBoundingClientRect(); var rect = function1.getBoundingClientRect();
...@@ -387,7 +394,7 @@ export default { ...@@ -387,7 +394,7 @@ export default {
}); });
}, },
functionTouch2(event){ functionTest2(event){
var function2 = this.$element('function2'); var function2 = this.$element('function2');
let observer = function2.createIntersectionObserver({ let observer = function2.createIntersectionObserver({
ratios: [0.2, 0], // number ratios: [0.2, 0], // number
...@@ -402,7 +409,7 @@ export default { ...@@ -402,7 +409,7 @@ export default {
observer.unobserve() observer.unobserve()
}, },
functionTouch3(event){ functionTest3(event){
var function3 = this.$element('function3'); var function3 = this.$element('function3');
var animation = function3.animate(frames, options); var animation = function3.animate(frames, options);
...@@ -436,5 +443,11 @@ export default { ...@@ -436,5 +443,11 @@ export default {
setTimeout(() => { setTimeout(() => {
animation.cancel() animation.cancel()
}, 1500) }, 1500)
},
change(event){
prompt.showToast({
message: JSON.stringify(event)
});
} }
} }
ace/ace_standard/src/main/js/default/pages/rating/style/index.css 0 → 100644
浏览文件 @ a800f187
/**
* 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;
}
#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;
margin-bottom: 5px;
}
#styleTwentySeven{
width: 150px;
height: 20px;
background: linear-gradient(pink,#fff000);
margin-bottom: 5px;
}
#styleTwentyNine{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:contain;
background-repeat: repeat-x;
background-position: center;
margin-bottom: 5px;
}
#styleThirty{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:50px 10px;
background-repeat: no-repeat;
background-position: 10px 10px;
margin-bottom: 5px;
}
#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: 100%;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificStarBackground {
background-color: red;
}
.star-background{
star-background:url('../../../common/images/icon.png');
}
#specificTwo {
width: 100%;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificStarForeground {
background-color: black;
}
.star-foreground {
star-foreground:url('../../../common/images/icon.png');
}
#specificThree{
width: 100%;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificStarSecondary {
background-color: black;
}
.star-foreground {
star-secondary:url('../../../common/images/icon.png');
}
#specificFour{
width: 100%;
height: 50px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificWidthHeight1{
background-color: red;
margin-right: 10px;
}
#specificWidthHeight2{
background-color: blue;
}
.width-height1{
width: 50px;
height: 30px;
}
.width-height2{
width: 50%;
height: 50px;
}
#specificFive{
width: 100%;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificRtlFlip1{
background-color: red;
}
#specificRtlFlip2{
background-color: purple;
}
.rtl-flip1{
rtl-flip: true;
}
.rtl-flip2{
rtl-flip: false;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/rating/style/index.hml 0 → 100644
浏览文件 @ a800f187
<!--/**
* 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">
rating通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<rating id="styleOne">
</rating>
<rating id="styleTwo">
</rating>
<rating id="styleThree">
</rating>
<rating id="styleFour">
</rating>
<rating id="styleFive">
</rating>
<rating id="styleSix">
</rating>
<rating id="styleSeven">
</rating>
<rating id="styleEight">
</rating>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<div id="styleNine">
<rating id="styleTen">
</rating>
<rating id="styleEleven">
</rating>
<rating id="styleTwelve">
</rating>
<rating id="styleThirteen">
</rating>
<rating id="styleFourteen">
</rating>
<rating id="styleFifteen">
</rating>
<rating id="styleSixteen">
</rating>
<rating id="styleSeventeen">
</rating>
<rating id="styleEighteen">
</rating>
<rating id="styleNineteen">
</rating>
<rating id="styleTwenty">
</rating>
</div>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<rating id="styleTwentyOne">
</rating>
<rating id="styleTwentyTwo">
</rating>
<rating id="styleTwentyThree">
</rating>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<rating id="styleTwentyFour">
</rating>
<rating id="styleTwentyFive">
</rating>
<text class="sub-title">
通用样式26-31 background
</text>
<rating id="styleTwentySix">
</rating>
<rating id="styleTwentySeven">
</rating>
<rating id="styleTwentyNine">
</rating>
<rating id="styleThirty">
</rating>
<rating id="styleThirtyOne">
</rating>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<rating id="styleThirtyTwo">
</rating>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
rating特有样式
</text>
<text class="sub-title">
特有样式 star-background
</text>
<div id="specificOne">
<rating id="specificStarBackground" class="star-background">
</rating>
</div>
<text class="sub-title">
特有样式 star-foreground
</text>
<div id="specificTwo">
<rating id="specificStarForeground" class="star-foreground">
</rating>
</div>
<text class="sub-title">
特有样式 star-secondary
</text>
<div id="specificThree">
<rating id="specificStarSecondary" class="star-secondary">
</rating>
</div>
<text class="sub-title">
特有样式 width height
</text>
<div id="specificFour">
<rating id="specificWidthHeight1" class="width-height1">
</rating>
<rating id="specificWidthHeight2" class="width-height2">
</rating>
</div>
<text class="sub-title">
特有样式 rtl-flip
</text>
<div id="specificFive">
<rating id="specificRtlFlip1" class="rtl-flip1">
</rating>
<rating id="specificRtlFlip2" class="rtl-flip2">
</rating>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/rating/style/index.js 0 → 100644
浏览文件 @ a800f187
/**
* 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 {
}
ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js
浏览文件 @ a800f187
...@@ -311,7 +311,7 @@ describe('aceJsTest', function () { ...@@ -311,7 +311,7 @@ describe('aceJsTest', function () {
it('testRatingComponent', 0, async function (done) { it('testRatingComponent', 0, async function (done) {
let result; let result;
let options = { let options = {
uri: 'pages/rating/index' uri: 'pages/rating/router/index'
} }
try { try {
result = router.push(options) result = router.push(options)
...@@ -320,7 +320,7 @@ describe('aceJsTest', function () { ...@@ -320,7 +320,7 @@ describe('aceJsTest', function () {
} }
await sleep(1000) await sleep(1000)
let pages = router.getState(); let pages = router.getState();
expect("pages/rating/").assertEqual(pages.path); expect("pages/rating/router/").assertEqual(pages.path);
done(); done();
}); });
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或