Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
接近 2 年 前同步成功

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

!2185 add attribute testcase 

Merge pull request !2185 from bayanxing/master
上级 60184a64 a0d43135
展开全部 隐藏空白更改
内联 并排
Showing with 19246 addition and 1222 deletion
ace/ace_standard/src/main/config.json
浏览文件 @ d4f58a98
...@@ -55,7 +55,9 @@ ...@@ -55,7 +55,9 @@
"pages/routerReplace/index", "pages/routerReplace/index",
"pages/button/router/index", "pages/button/router/index",
"pages/chart/router/index", "pages/chart/router/index",
"pages/input/index", "pages/input/prop/index",
"pages/input/router/index",
"pages/input/style/index",
"pages/slider/index", "pages/slider/index",
"pages/text/router/index", "pages/text/router/index",
"pages/text/prop/index", "pages/text/prop/index",
...@@ -63,11 +65,13 @@ ...@@ -63,11 +65,13 @@
"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",
"pages/textarea/index", "pages/textarea/prop/index",
"pages/textarea/router/index",
"pages/menu/router/index", "pages/menu/router/index",
"pages/span/router/index", "pages/span/router/index",
"pages/switch/router/index", "pages/switch/router/index",
...@@ -83,7 +87,8 @@ ...@@ -83,7 +87,8 @@
"pages/progress/router/index", "pages/progress/router/index",
"pages/progress/prop/index", "pages/progress/prop/index",
"pages/qrcode/index", "pages/qrcode/index",
"pages/select/index", "pages/select/prop/index",
"pages/select/router/index",
"pages/div/router/index", "pages/div/router/index",
"pages/badge/router/index", "pages/badge/router/index",
"pages/badge/prop/index", "pages/badge/prop/index",
...@@ -99,7 +104,8 @@ ...@@ -99,7 +104,8 @@
"pages/listItemGroup/prop/index", "pages/listItemGroup/prop/index",
"pages/marquee/router/index", "pages/marquee/router/index",
"pages/marquee/prop/index", "pages/marquee/prop/index",
"pages/imageAnimator/index", "pages/imageAnimator/prop/index",
"pages/imageAnimator/router/index",
"pages/panel/router/index", "pages/panel/router/index",
"pages/panel/prop/index", "pages/panel/prop/index",
"pages/popup/router/index", "pages/popup/router/index",
...@@ -155,7 +161,8 @@ ...@@ -155,7 +161,8 @@
"pages/image/prop/index", "pages/image/prop/index",
"pages/span/prop/index", "pages/span/prop/index",
"pages/menu/prop/index", "pages/menu/prop/index",
"pages/switch/prop/index" "pages/switch/prop/index",
"pages/slider/prop/index"
], ],
"name": "default", "name": "default",
"window": { "window": {
......
ace/ace_standard/src/main/js/default/pages/imageAnimator/prop/index.css 0 → 100644
浏览文件 @ d4f58a98
/**
* 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;
}
#typePredecode0{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeImage{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
margin-bottom: 4px;
padding-end: 10px;
}
#typeImage{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeDuration3{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeDuration6{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeIterationInfi{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeIteration3{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeReverseTrue{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeReverseFalse{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeFixedsizeTrue{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeFixedsizeFalse{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeFillmodeForwards{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
#typeFillmodeNone{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
margin-bottom: 4px;
}
ace/ace_standard/src/main/js/default/pages/imageAnimator/prop/index.hml 0 → 100644
浏览文件 @ d4f58a98
<!--/**
* 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">
img-animator通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<image-animator images="" duration="" id="idProp">
</image-animator>
<text class="sub-title">
通用属性 -- class
</text>
<image-animator images="" duration="" id="classProp"
class="classProp">
</image-animator>
<image-animator images="" duration="" id="classPropNone"
class="">
</image-animator>
<text class="sub-title">
通用属性 -- style
</text>
<image-animator images="" duration="" id="styleProp"
style="width:10%;height:20px;background-color:red">
</image-animator>
<text class="sub-title">
通用属性 -- ref
</text>
<image-animator images="" duration="" id="refProp"
ref="refProp">
</image-animator>
<image-animator images="" duration="" id="refPropNone"
ref="">
</image-animator>
<text class="sub-title">
通用属性 -- disabled
</text>
<image-animator images="" duration="" id="disabledPropTrue"
disabled="true">
</image-animator>
<image-animator images="" duration="" id="disabledPropFalse"
disabled="false">
</image-animator>
<image-animator images="" duration="" id="disabledPropNone"
disabled="">
</image-animator>
<text class="sub-title">
通用属性 -- focusable
</text>
<image-animator images="" duration="" id="focusablePropTrue"
focusable="true">
</image-animator>
<image-animator images="" duration="" id="focusablePropFalse"
focusable="false">
</image-animator>
<image-animator images="" duration="" id="focusablePropNone"
focusable="">
</image-animator>
<text class="sub-title">
通用属性 -- data-*
</text>
<image-animator images="" duration="" id="dataProp"
data-imageAnimator="通用属性 -- data-*">
</image-animator>
<image-animator images="" duration="" id="dataPropNone"
data-imageAnimator="">
</image-animator>
<text class="sub-title">
通用属性 -- click-effect
</text>
<image-animator images="" duration="" id="clickEffectPropSmall"
click-effect="spring-small">
</image-animator>
<image-animator images="" duration="" id="clickEffectPropMedium"
click-effect="spring-medium">
</image-animator>
<image-animator images="" duration="" id="clickEffectPropLarge"
click-effect="spring-large">
</image-animator>
<image-animator images="" duration="" id="clickEffectPropNone"
click-effect="">
</image-animator>
<text class="sub-title">
通用属性 -- dir
</text>
<image-animator images="" duration="" id="dirPropRtl"
dir="rtl">
</image-animator>
<image-animator images="" duration="" id="dirPropAuto"
dir="auto">
</image-animator>
<image-animator images="" duration="" id="dirPropLtr"
dir="ltr">
</image-animator>
<image-animator images="" duration="" id="dirPropNone"
dir="">
</image-animator>
<text class="sub-title">
渲染属性 -- for
</text>
<image-animator images="" duration="" id="forPropNull"
for="">
</image-animator>
<image-animator images="" duration="" id="forPropOne"
for="{{listOne}}">
</image-animator>
<image-animator images="" duration="" id="forPropThree"
for="{{listThree}}">
</image-animator>
<text class="sub-title">
渲染属性 -- if
</text>
<image-animator images="" duration="" id="ifPropTrue"
if="true">
</image-animator>
<image-animator images="" duration="" id="ifPropFalse"
if="false">
</image-animator>
<image-animator images="" duration="" id="ifPropNone"
if="">
</image-animator>
<text class="sub-title">
渲染属性 -- show
</text>
<image-animator images="" duration="" id="showPropTrue"
show="true">
</image-animator>
<image-animator images="" duration="" id="showPropFalse"
show="false">
</image-animator>
<image-animator images="" duration="" id="showPropNone"
show="false">
</image-animator>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
imageAnimator特有属性-image
</text>
<image-animator images="" duration="" id="typeImageNull"
>
</image-animator>
<image-animator images="{{images}}" duration="3s" id="typeImage"
>
</image-animator>
<text class="title">
imageAnimator特有属性-duration
</text>
<image-animator images="" duration="" id="typeDurationNull"
>
</image-animator>
<image-animator images="" duration="3s" id="typeDuration3"
>
</image-animator>
<image-animator images="" duration="6s" id="typeDuration6"
>
</image-animator>
<text class="title">
imageAnimator特有属性-predecode
</text>
<image-animator images="" predecode="2" duration="" id="typePredecode2"
>
</image-animator>
<text class="title">
imageAnimator特有属性-iteration
</text>
<image-animator images="" duration="" iteration="infinite" id="typeIterationInfi"
>
</image-animator>
<image-animator images="" duration="" iteration="3" id="typeIteration3"
>
</image-animator>
<text class="title">
imageAnimator特有属性-reverse
</text>
<image-animator images="" duration="" reverse="" id="typeReverseNull"
>
</image-animator>
<image-animator images="" duration="" reverse="true" id="typeReverseTrue"
>
</image-animator>
<image-animator images="" duration="" reverse="false" id="typeReverseFalse"
>
</image-animator>
<text class="title">
imageAnimator特有属性-fixedsize
</text>
<image-animator images="" duration="" fixedsize="" id="typeFixedsizeNull"
>
</image-animator>
<image-animator images="" duration="" fixedsize="true" id="typeFixedsizeTrue"
>
</image-animator>
<image-animator images="" duration="" fixedsize="false" id="typeFixedsizeFalse"
>
</image-animator>
<text class="title">
imageAnimator特有属性-fillmode
</text>
<image-animator images="" duration="" fillmode="forwards" id="typeFillmodeNull"
>
</image-animator>
<image-animator images="" duration="" fillmode="forwards" id="typeFillmodeForwards"
>
</image-animator>
<image-animator images="" duration="" fillmode="none" id="typeFillmodeNone"
>
</image-animator>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/imageAnimator/prop/index.js 0 → 100644
浏览文件 @ d4f58a98
/**
* 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:{
images: [
{src: "/common/images/im-ani1.jpg"},
{src: "/common/images/im-ani2.jpg"},
{src: "/common/images/im-ani3.jpg"}
],
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,
typeImage : null,
typeImageNull : null,
typePredecode2 : null,
typeIterationInfi : null,
typeIteration3 : null,
typeReverseNull : null,
typeReverseTrue : null,
typeReverseFalse : null,
typeFixedsizeNull : null,
typeFixedsizeTrue : null,
typeFixedsizeFalse : null,
typeDurationNull : null,
typeDuration3 : null,
typeDuration6 : null,
typeFillmodeNull : null,
typeFillmodeForwards : null,
typeFillmodeNone : null,
},
onShow(){
this.getCommonPropValues();
this.getSpecialPropValues();
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,
typeImage : this.typeImage, typeImageNull : this.typeImageNull,
typePredecode2 : this.typePredecode2, typeIterationInfi : this.typeIterationInfi,
typeIteration3 : this.typeIteration3, typeReverseNull : this.typeReverseNull,
typeReverseTrue : this.typeReverseTrue, typeReverseFalse : this.typeReverseFalse,
typeFixedsizeNull : this.typeFixedsizeNull, typeFixedsizeTrue : this.typeFixedsizeTrue,
typeFixedsizeFalse : this.typeFixedsizeFalse, typeDurationNull : this.typeDurationNull,
typeDuration3 : this.typeDuration3, typeDuration6 : this.typeDuration6,
typeFillmodeNull : this.typeFillmodeNull,
typeFillmodeForwards : this.typeFillmodeForwards, typeFillmodeNone : this.typeFillmodeNone,
}
},
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()
},
getSpecialPropValues(){
this.typeImageNull = this.$element("typeImageNull").getInspector()
this.typeImage = this.$element("typeImage").getInspector()
this.typePredecode2 = this.$element("typePredecode2").getInspector()
this.typeIterationInfi = this.$element("typeIterationInfi").getInspector()
this.typeIteration3 = this.$element("typeIteration3").getInspector()
this.typeReverseNull = this.$element("typeReverseNull").getInspector()
this.typeReverseTrue = this.$element("typeReverseTrue").getInspector()
this.typeReverseFalse = this.$element("typeReverseFalse").getInspector()
this.typeFixedsizeNull = this.$element("typeFixedsizeNull").getInspector()
this.typeFixedsizeTrue = this.$element("typeFixedsizeTrue").getInspector()
this.typeFixedsizeFalse = this.$element("typeFixedsizeFalse").getInspector()
this.typeDurationNull = this.$element("typeDurationNull").getInspector()
this.typeDuration3 = this.$element("typeDuration3").getInspector()
this.typeDuration6 = this.$element("typeDuration6").getInspector()
this.typeFillmodeNull = this.$element("typeFillmodeNull").getInspector()
this.typeFillmodeForwards = this.$element("typeFillmodeForwards").getInspector()
this.typeFillmodeNone = this.$element("typeFillmodeNone").getInspector()
}
}
ace/ace_standard/src/main/js/default/pages/imageAnimator/index.css → ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.css
浏览文件 @ d4f58a98
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
.style1{ .style1{
width: 100%; width: 100%;
height: 100%; height: 30px;
min-width: 25px; min-width: 25px;
min-height: 10px; min-height: 10px;
max-width: 300px; max-width: 300px;
...@@ -168,8 +168,6 @@ ...@@ -168,8 +168,6 @@
height:120px; height:120px;
margin-top: 10px; margin-top: 10px;
color: green; color: green;
stroke-width: 30px;
line-cap: round;
} }
.flex-item { .flex-item {
...@@ -309,33 +307,29 @@ ...@@ -309,33 +307,29 @@
} }
#prop1 { #prop1 {
width: 80%;
height:30px; height:30px;
color: #ad4e2a; background-color: #ad4e2a;
stroke-width: 10px;
line-cap: square;
margin: 5px; margin: 5px;
} }
.prop2 { .prop2 {
width: 80%;
height:30px; height:30px;
color: #343524; background-color: #343524;
stroke-width: 15px;
line-cap: round;
margin: 5px; margin: 5px;
} }
.prop4 { .prop4 {
width: 80%;
height:30px; height:30px;
color: #456345; background-color: #456345;
stroke-width: 25px;
line-cap: round;
margin: 5px; margin: 5px;
} }
.prop5 { .prop5 {
color: #831834; width: 80%;
stroke-width: 40px; background-color: #831834;
line-cap: square;
margin: 5px; margin: 5px;
height: 70px; height: 70px;
} }
...@@ -348,8 +342,6 @@ ...@@ -348,8 +342,6 @@
.ani1{ .ani1{
color: #72ac33; color: #72ac33;
stroke-width: 55px;
line-cap: square;
margin: 5px; margin: 5px;
transform-origin: 0% 0%; transform-origin: 0% 0%;
animation: ani1Go 3s infinite; animation: ani1Go 3s infinite;
...@@ -397,35 +389,24 @@ ...@@ -397,35 +389,24 @@
.gradient1{ .gradient1{
height:20px; height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px; margin: 5px;
background: linear-gradient(red, #00ff00); background: linear-gradient(red, #00ff00);
} }
.gradient2{ .gradient2{
height:20px; height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px; margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
} }
.gradient3{ .gradient3{
height:20px; height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px; margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
} }
.gradient4{ .gradient4{
height:20px; height:20px;
stroke-width: 30px;
line-cap: square;
margin: 5px; margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
} }
...@@ -437,8 +418,6 @@ ...@@ -437,8 +418,6 @@
.access1{ .access1{
height:20px; height:20px;
background-color: #321124; background-color: #321124;
stroke-width: 30px;
line-cap: square;
margin: 5px; margin: 5px;
} }
...@@ -452,8 +431,6 @@ ...@@ -452,8 +431,6 @@
.multimode1{ .multimode1{
color: #978666; color: #978666;
stroke-width: 30px;
line-cap: square;
margin: 5px; margin: 5px;
} }
.function-container{ .function-container{
...@@ -489,7 +466,6 @@ ...@@ -489,7 +466,6 @@
width: 100%; width: 100%;
height: 30px; height: 30px;
display: flex; display: flex;
/* background-color: #ee6363;*/
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
ace/ace_standard/src/main/js/default/pages/imageAnimator/index.hml → ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.hml
浏览文件 @ d4f58a98
...@@ -20,77 +20,34 @@ ...@@ -20,77 +20,34 @@
通用样式 通用样式
</text> </text>
<text class="sub-title"> <text class="sub-title">
image-animator通用样式1 通用样式1
</text> </text>
<image-animator images="{{images}}" duration="6s" class="style1"> <image-animator images="" duration="" class="style1">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
image-animator通用样式2 通用样式2
</text> </text>
<image-animator images="{{images}}" duration="6s" class="style2"> <image-animator images="" duration="" class="style2">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
image-animator通用样式3 通用样式3
</text> </text>
<image-animator images="{{images}}" duration="6s" class="style3"> <image-animator images="" duration="" class="style3">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
image-animator通用样式4 通用样式4
</text> </text>
<image-animator images="{{images}}" duration="6s" class="style4"> <image-animator images="" duration="" class="style4">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
image-animator通用样式5 通用样式5
</text> </text>
<div class="contain1"> <div class="contain1">
<image-animator images="{{images}}" duration="6s" class="style5"> <image-animator images="" duration="" class="style5">
</image-animator> </image-animator>
<image-animator images="{{images}}" duration="6s" class="style6"> <image-animator images="" duration="" class="style6">
</image-animator> </image-animator>
</div> </div>
<text class="sub-title">
image-animator特有样式
</text>
<div class="style7">
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
</div>
<text class="sub-title">
image-animator特有样式1
</text>
<div class="style8">
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
<image-animator images="" duration="" class="flex-item color-primary">
</image-animator>
<image-animator images="" duration="" class="flex-item color-warning">
</image-animator>
<image-animator images="" duration="" class="flex-item color-success">
</image-animator>
</div>
<text class="sub-title">
image-animator 特有样式2
</text>
<div class="style9">
<image-animator images="" duration="" class="grid-child grid-left-top"></image-animator>
<image-animator images="" duration="" class="grid-child grid-left-bottom"></image-animator>
<image-animator images="" duration="" class="grid-child grid-right-top"></image-animator>
<image-animator images="" duration="" class="grid-child grid-right-bottom"></image-animator>
</div>
</div> </div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false"> <divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider> </divider>
...@@ -99,12 +56,12 @@ ...@@ -99,12 +56,12 @@
动画样式 动画样式
</text> </text>
<text class="sub-title"> <text class="sub-title">
image-animator动画样式1 动画样式1
</text> </text>
<image-animator images="" duration="" class="ani1" > <image-animator images="" duration="" class="ani1" >
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
image-animator动画样式2 动画样式2
</text> </text>
<image-animator images="" duration="" class="ani2" > <image-animator images="" duration="" class="ani2" >
</image-animator> </image-animator>
...@@ -120,32 +77,32 @@ ...@@ -120,32 +77,32 @@
通用属性 通用属性
</text> </text>
<text class="sub-title"> <text class="sub-title">
image-animator通用属性1 通用属性1
</text> </text>
<image-animator images="{{images}}" duration="6s" id="prop1" class="prop1" <image-animator images="" duration="" 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">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
image-animator通用属性2 通用属性2
</text> </text>
<image-animator images="{{images}}" duration="6s" class="prop2" ref ="prop2" <image-animator images="" duration="" class="prop2" ref ="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">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
image-animator通用属性3 通用属性3
</text> </text>
<image-animator images="{{images}}" duration="6s" style="height:30px; color: #679855; margin: 5px;" class="prop3"> <image-animator images="" duration="" style="height:30px; background-color: #679855; margin: 5px;" class="prop3">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
image-animator特有属性 特有属性
</text> </text>
<image-animator images="{{images}}" duration="8s" style="height:30px; color: #679855; margin: 5px;" <image-animator images="{{images}}" duration="4s" style="height:30px; background-color: #679855; margin: 5px;"
class="prop3" predecode="0" iteration="3" class="prop3" predecode="0" iteration="3" predecode="2"
reverse="true" fixedsize="false"> reverse="true" fixedsize="false" fillmode="forwards">
</image-animator> </image-animator>
</div> </div>
<div style="background-color: #000000; width: 100%; height: 2px;"> <div style="background-color: #000000; width: 100%; height: 2px;">
...@@ -155,22 +112,22 @@ ...@@ -155,22 +112,22 @@
通用事件 通用事件
</text> </text>
<text class="sub-title"> <text class="sub-title">
div通用事件1 通用事件1
</text> </text>
<image-animator images="{{images}}" duration="8s" class ="event1" ontouchstart="touchStart" ontouchmove="touchMove" <image-animator images="" duration="" class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel"> ontouchend="touchEnd" ontouchcancel="touchCancel">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
div通用事件2 通用事件2
</text> </text>
<image-animator images="{{images}}" duration="8s" class ="event2" onclick="click" ondoubleclick="doubleClick" <image-animator images="" duration="" class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key" onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached"> onswipe="swipe" onattached="attached" ondetached="detached">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
div通用事件3 通用事件3
</text> </text>
<image-animator images="{{images}}" duration="8s" class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate" <image-animator images="" duration="" class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel" onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag" ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter" ondragend="dragEnd" ondragenter="dragEnter"
...@@ -178,9 +135,9 @@ ...@@ -178,9 +135,9 @@
ondrop="drop"> ondrop="drop">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
div特有事件1 特有事件1
</text> </text>
<image-animator ref="animator" fixedsize="true" images="{{images}}" duration="1s" @resume='resume' @start="start" @stop='stop' @pause='pause' class ="event5" > <image-animator ref="animator" fixedsize="true" images="{{images}}" duration="2s" @resume='resume' @start="start" @stop='stop' @pause='pause' class ="event5" >
</image-animator> </image-animator>
</div> </div>
...@@ -191,22 +148,22 @@ ...@@ -191,22 +148,22 @@
通用方法 通用方法
</text> </text>
<text class="sub-title"> <text class="sub-title">
div通用方法1 通用方法1
</text> </text>
<image-animator images="{{images}}" duration="8s" id="function1" class="function1" ontouchstart="functionTest1"> <image-animator images="" duration="" id="function1" class="function1" ontouchstart="functionTest1">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
div通用方法2 通用方法2
</text> </text>
<image-animator images="{{images}}" duration="8s" id="function2" class="function2" ontouchstart="functionTest2"> <image-animator images="" duration="" id="function2" class="function2" ontouchstart="functionTest2">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
div通用方法3 通用方法3
</text> </text>
<image-animator images="{{images}}" duration="8s" id="function3" class="function3" ontouchstart="functionTest3"> <image-animator images="" duration="" id="function3" class="function3" ontouchstart="functionTest3">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
div特有方法 特有方法
</text> </text>
<div class="flex-class"> <div class="flex-class">
<button onclick="handleStart"> <button onclick="handleStart">
...@@ -234,22 +191,22 @@ ...@@ -234,22 +191,22 @@
渐变样式 渐变样式
</text> </text>
<text class="sub-title"> <text class="sub-title">
div渐变样式1 渐变样式1
</text> </text>
<image-animator images="" duration="" class="gradient1"> <image-animator images="" duration="" class="gradient1">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
div渐变样式2 渐变样式2
</text> </text>
<image-animator images="" duration="" class="gradient2"> <image-animator images="" duration="" class="gradient2">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
div渐变样式3 渐变样式3
</text> </text>
<image-animator images="" duration="" class="gradient3"> <image-animator images="" duration="" class="gradient3">
</image-animator> </image-animator>
<text class="sub-title"> <text class="sub-title">
div渐变样式4 渐变样式4
</text> </text>
<image-animator images="" duration="" class="gradient4"> <image-animator images="" duration="" class="gradient4">
</image-animator> </image-animator>
...@@ -261,9 +218,9 @@ ...@@ -261,9 +218,9 @@
无障碍 无障碍
</text> </text>
<text class="sub-title"> <text class="sub-title">
div无障碍1 无障碍1
</text> </text>
<image-animator images="" duration="" class="access1" accessibilitygroup ="true" <image-animator images="" duration="" class="accessibility1" accessibilitygroup ="true"
accessibilitytext="这是div" accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框" accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"> accessibilityimportance="no-hide-descendants">
...@@ -276,7 +233,7 @@ ...@@ -276,7 +233,7 @@
原子布局 原子布局
</text> </text>
<text class="sub-title"> <text class="sub-title">
div原子布局1 原子布局1
</text> </text>
<div style="flex-direction: row;height: 30px;width: 100%;"> <div style="flex-direction: row;height: 30px;width: 100%;">
<image-animator images="" duration="" style="width:20px;height:20px;background-color: blue;display-index: 1;"> <image-animator images="" duration="" style="width:20px;height:20px;background-color: blue;display-index: 1;">
...@@ -293,7 +250,7 @@ ...@@ -293,7 +250,7 @@
</image-animator> </image-animator>
</div> </div>
<text class="sub-title"> <text class="sub-title">
div原子布局2 原子布局2
</text> </text>
<div style="flex-direction: row;height: 30px;width: 100%;"> <div style="flex-direction: row;height: 30px;width: 100%;">
<image-animator images="" duration="" style="height:20px;background-color: blue;flex-weight: 1;"> <image-animator images="" duration="" style="height:20px;background-color: blue;flex-weight: 1;">
...@@ -310,7 +267,7 @@ ...@@ -310,7 +267,7 @@
</image-animator> </image-animator>
</div> </div>
<text class="sub-title"> <text class="sub-title">
div原子布局3 原子布局3
</text> </text>
<div style="flex-direction: row;height:60px;width: 100%;"> <div style="flex-direction: row;height:60px;width: 100%;">
<image-animator images="" duration="" style="width:30px;background-color: blue;aspect-ratio: 0.6;"> <image-animator images="" duration="" style="width:30px;background-color: blue;aspect-ratio: 0.6;">
...@@ -333,7 +290,7 @@ ...@@ -333,7 +290,7 @@
多模输入 多模输入
</text> </text>
<text class="sub-title"> <text class="sub-title">
div多模输入1 多模输入1
</text> </text>
<image-animator images="" duration="" class="multiMode1" voicelabel = "voice" <image-animator images="" duration="" class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common"> subscriptflag="on" subscriptlabel="div" scenelabel="common">
......
ace/ace_standard/src/main/js/default/pages/imageAnimator/index.js → ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.js
浏览文件 @ d4f58a98
...@@ -13,8 +13,6 @@ ...@@ -13,8 +13,6 @@
* limitations under the License. * limitations under the License.
*/ */
import prompt from '@system.prompt';
var options = { var options = {
duration: 1500, duration: 1500,
easing: 'friction', easing: 'friction',
...@@ -83,6 +81,7 @@ var frames = [ ...@@ -83,6 +81,7 @@ var frames = [
}, },
]; ];
import prompt from '@system.prompt';
export default { export default {
data: { data: {
images: [ images: [
...@@ -452,6 +451,8 @@ export default { ...@@ -452,6 +451,8 @@ export default {
functionTest3(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);
animation.play() animation.play()
animation.onfinish = function(){ animation.onfinish = function(){
......
ace/ace_standard/src/main/js/default/pages/imageAnimator/style/index.js 0 → 100644
浏览文件 @ d4f58a98
/**
* 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.
*/
ace/ace_standard/src/main/js/default/pages/input/index.css 已删除 100644 → 0
浏览文件 @ 60184a64
/* xxx.css */
.content {
width: 60%;
flex-direction: column;
align-items: center;
}
.input {
placeholder-color: gray;
}
.button {
background-color: gray;
margin-top: 20px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/input/index.hml 已删除 100644 → 0
浏览文件 @ 60184a64
<!-- xxx.hml -->
<div class="content">
<input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
headericon="/common/search.svg" placeholder="Please input text" onchange="change"
onenterkeyclick="enterkeyClick">
</input>
<input class="button" type="button" value="Submit" onclick="buttonClick"></input>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/input/prop/index.css 0 → 100644
浏览文件 @ d4f58a98
/**
* 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;
}
#typeText {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeEmail {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeDate {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeTime {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeNumber {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typePassword {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeButton {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.typeDiv {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.checkedDiv{
flex-weight: 1;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeNone {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#checkboxFalse {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#checkboxTrue {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#checkboxNone {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#radioFalse {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#radioTrue {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#radioNone {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#inputName {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#inputNameNone {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#inputValue {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#inputValueNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#textPlaceholder {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#textPlaceholderNone {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#emailPlaceholder {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#emailPlaceholderNone {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#datePlaceholder {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#datePlaceholderNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#timePlaceholder {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#timePlaceholderNone {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#numberPlaceholder {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#numberPlaceholderNone {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#passwordPlaceholder {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#passwordPlaceholderNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#maxlength {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#enterkeytypeDefault {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#enterkeytypeNext {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#enterkeytypeGo {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#enterkeytypeDone {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#enterkeytypeSend {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#enterkeytypeSearch {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#headericon {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#headericonNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showcounterTrue {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showcounterFalse {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showcounterNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#menuoptions {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#menuoptionsNone {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#autofocusTrue {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#autofocusFalse {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#autofocusNone {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#selectedstart {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#selectedstartNone {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#selectedendTrue {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#selectedendNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#softkeyboardenabledTrue {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#softkeyboardenabledFalse {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#softkeyboardenabledNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showpasswordiconTrue {
flex-weight: 1;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showpasswordiconFalse {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showpasswordiconNone {
flex-weight: 1;
background-color:#c00000;
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/input/prop/index.hml 0 → 100644
浏览文件 @ d4f58a98
<!--/**
* 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">
input通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<input id="idProp">
</input>
<text class="sub-title">
通用属性 -- class
</text>
<input id="classProp"
class="classProp">
</input>
<input id="classPropNone"
class="">
</input>
<text class="sub-title">
通用属性 -- style
</text>
<input id="styleProp"
style="width:10%;height:20px;background-color:red">
</input>
<text class="sub-title">
通用属性 -- ref
</text>
<input id="refProp"
ref="refProp">
</input>
<input id="refPropNone"
ref="">
</input>
<text class="sub-title">
通用属性 -- disabled
</text>
<input id="disabledPropTrue"
disabled="true">
</input>
<input id="disabledPropFalse"
disabled="false">
</input>
<input id="disabledPropNone"
disabled="">
</input>
<text class="sub-title">
通用属性 -- focusable
</text>
<input id="focusablePropTrue"
focusable="true">
</input>
<input id="focusablePropFalse"
focusable="false">
</input>
<input id="focusablePropNone"
focusable="">
</input>
<text class="sub-title">
通用属性 -- data-*
</text>
<input id="dataProp"
data-input="通用属性 -- data-*">
</input>
<input id="dataPropNone"
data-input="">
</input>
<text class="sub-title">
通用属性 -- click-effect
</text>
<input id="clickEffectPropSmall"
click-effect="spring-small">
</input>
<input id="clickEffectPropMedium"
click-effect="spring-medium">
</input>
<input id="clickEffectPropLarge"
click-effect="spring-large">
</input>
<input id="clickEffectPropNone"
click-effect="">
</input>
<text class="sub-title">
通用属性 -- dir
</text>
<input id="dirPropRtl"
dir="rtl">
</input>
<input id="dirPropAuto"
dir="auto">
</input>
<input id="dirPropLtr"
dir="ltr">
</input>
<input id="dirPropNone"
dir="">
</input>
<text class="sub-title">
渲染属性 -- for
</text>
<input id="forPropNull"
for="">
</input>
<input id="forPropOne"
for="{{listOne}}">
</input>
<input id="forPropThree"
for="{{listThree}}">
</input>
<text class="sub-title">
渲染属性 -- if
</text>
<input id="ifPropTrue"
if="true">
</input>
<text class="sub-title">
渲染属性 -- show
</text>
<input id="showPropTrue"
show="true">
</input>
<input id="showPropFalse"
show="false">
</input>
<input id="showPropNone"
show="">
</input>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
input特有属性
</text>
<text class="sub-title">
特有属性 -- type
</text>
<input id="typeText"
type="text">
</input>
<input id="typeEmail"
type="email">
</input>
<input id="typeDate"
type="date">
</input>
<input id="typeTime"
type="time">
</input>
<input id="typeNumber"
type="number">
</input>
<input id="typePassword"
type="password">
</input>
<input id="typeButton"
type="button">
</input>
<div class="typeDiv">
<input id="typeCheckbox"
type="checkbox">
</input>
<input id="typeRadio"
type="radio">
</input>
</div>
<input id="typeNone"
type="">
</input>
<text class="sub-title">
特有属性 -- checked
</text>
<div class="checkedDiv">
<input id="checkboxFalse"
type="checkbox"
checked="false">
</input>
<input id="checkboxTrue"
type="checkbox"
checked="true">
</input>
<input id="checkboxNone"
type="checkbox"
checked="">
</input>
<input id="radioFalse"
type="radio"
checked="false">
</input>
<input id="radioTrue"
type="radio"
checked="true">
</input>
<input id="radioNone"
type="radio"
checked="">
</input>
</div>
<text class="sub-title">
特有属性 -- name
</text>
<input id="inputName"
name="inputName">
</input>
<input id="inputNameNone"
name="">
</input>
<text class="sub-title">
特有属性 -- value
</text>
<input id="inputValue"
value="inputValue">
</input>
<input id="inputValueNone"
value="">
</input>
<text class="sub-title">
特有属性 -- placeholder
</text>
<input id="textPlaceholder"
placeholder="placeholder"
type="text">
</input>
<input id="textPlaceholderNone"
placeholder=""
type="text">
</input>
<input id="emailPlaceholder"
placeholder="placeholder"
type="email">
</input>
<input id="emailPlaceholderNone"
placeholder=""
type="email">
</input>
<input id="datePlaceholder"
placeholder="placeholder"
type="date">
</input>
<input id="datePlaceholderNone"
placeholder=""
type="date">
</input>
<input id="timePlaceholder"
placeholder="placeholder"
type="time">
</input>
<input id="timePlaceholderNone"
placeholder=""
type="time">
</input>
<input id="numberPlaceholder"
placeholder="placeholder"
type="number">
</input>
<input id="numberPlaceholderNone"
placeholder=""
type="number">
</input>
<input id="passwordPlaceholder"
placeholder="placeholder"
type="password">
</input>
<input id="passwordPlaceholderNone"
placeholder=""
type="password">
</input>
<text class="sub-title">
特有属性 -- maxlength
</text>
<input id="maxlength"
maxlength="10">
</input>
<text class="sub-title">
特有属性 -- enterkeytype
</text>
<input id="enterkeytypeDefault"
enterkeytype="default">
</input>
<input id="enterkeytypeNext"
enterkeytype="next">
</input>
<input id="enterkeytypeGo"
enterkeytype="go">
</input>
<input id="enterkeytypeDone"
enterkeytype="done">
</input>
<input id="enterkeytypeSend"
enterkeytype="send">
</input>
<input id="enterkeytypeSearch"
enterkeytype="search">
</input>
<text class="sub-title">
特有属性 -- headericon
</text>
<input id="headericon"
headericon="../../../common/images/icon.png">
</input>
<input id="headericonNone"
headericon="">
</input>
<text class="sub-title">
特有属性 -- showcounter
</text>
<input id="showcounterTrue"
maxlength="10"
showcounter="true">
</input>
<input id="showcounterFalse"
maxlength="10"
showcounter="false">
</input>
<input id="showcounterNone"
showcounter="">
</input>
<text class="sub-title">
特有属性 -- menuoptions
</text>
<input id="menuoptions"
menuoptions="[{icon:'../../../common/images/icon.png',content:'content1'},{icon:'../../../common/images/icon.png',content:'content2'}]">
</input>
<input id="menuoptionsNone"
menuoptions="">
</input>
<text class="sub-title">
特有属性 -- autofocus
</text>
<input id="autofocusTrue"
autofocus="true">
</input>
<input id="autofocusFalse"
autofocus="false">
</input>
<input id="autofocusNone"
autofocus="">
</input>
<text class="sub-title">
特有属性 -- selectedstart
</text>
<input id="selectedstart"
selectedstart="0">
</input>
<input id="selectedstartNone"
selectedstart="">
</input>
<text class="sub-title">
特有属性 -- selectedend
</text>
<input id="selectedendTrue"
selectedend="10">
</input>
<input id="selectedendNone"
selectedend="">
</input>
<text class="sub-title">
特有属性 -- softkeyboardenabled
</text>
<input id="softkeyboardenabledTrue"
softkeyboardenabled="true">
</input>
<input id="softkeyboardenabledFalse"
softkeyboardenabled="false">
</input>
<input id="softkeyboardenabledNone"
softkeyboardenabled="">
</input>
<text class="sub-title">
特有属性 -- showpasswordicon
</text>
<input id="showpasswordiconTrue"
showpasswordicon="true"
type="password">
</input>
<input id="showpasswordiconFalse"
showpasswordicon="false"
type="password">
</input>
<input id="showpasswordiconNone"
showpasswordicon=""
type="password">
</input>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/input/prop/index.js 0 → 100644
浏览文件 @ d4f58a98
/**
* 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,
typeText : null,
typeEmail : null,
typeDate : null,
typeTime : null,
typeNumber : null,
typePassword : null,
typeButton : null,
typeCheckbox : null,
typeRadio : null,
typeNone : null,
checkboxFalse : null,
checkboxTrue : null,
checkboxNone : null,
radioFalse : null,
radioTrue : null,
radioNone : null,
inputName : null,
inputNameNone : null,
inputValue : null,
inputValueNone : null,
textPlaceholder : null,
textPlaceholderNone : null,
emailPlaceholder : null,
emailPlaceholderNone : null,
datePlaceholder : null,
datePlaceholderNone : null,
timePlaceholder : null,
timePlaceholderNone : null,
numberPlaceholder : null,
numberPlaceholderNone : null,
passwordPlaceholder : null,
passwordPlaceholderNone : null,
maxlength : null,
enterkeytypeDefault : null,
enterkeytypeNext : null,
enterkeytypeGo : null,
enterkeytypeDone : null,
enterkeytypeSend : null,
enterkeytypeSearch : null,
headericon : null,
headericonNone : null,
showcounterTrue : null,
showcounterFalse : null,
showcounterNone : null,
menuoptions : null,
menuoptionsNone : null,
autofocusTrue : null,
autofocusFalse : null,
autofocusNone : null,
selectedstart : null,
selectedstartNone : null,
selectedendTrue : null,
selectedendNone : null,
softkeyboardenabledTrue : null,
softkeyboardenabledFalse : null,
softkeyboardenabledNone : null,
showpasswordiconTrue : null,
showpasswordiconFalse : null,
showpasswordiconNone : null
},
onShow(){
this.getCommonPropValues();
this.getSpecificPropValuesOne();
this.getSpecificPropValuesTwo();
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,
typeText : this.typeText, typeEmail : this.typeEmail, typeDate : this.typeDate,
typeTime : this.typeTime, typeNumber : this.typeNumber, typePassword : this.typePassword,
typeButton : this.typeButton, typeCheckbox : this.typeCheckbox,
typeRadio : this.typeRadio, typeNone : this.typeNone,
checkboxFalse : this.checkboxFalse, checkboxTrue : this.checkboxTrue,
checkboxNone : this.checkboxNone, radioFalse : this.radioFalse,
radioTrue : this.radioTrue, radioNone : this.radioNone, inputName : this.inputName,
inputNameNone : this.inputNameNone, inputValue : this.inputValue,
inputValueNone : this.inputValueNone, textPlaceholder : this.textPlaceholder,
textPlaceholderNone : this.textPlaceholderNone, emailPlaceholder : this.emailPlaceholder,
emailPlaceholderNone : this.emailPlaceholderNone, datePlaceholder : this.datePlaceholder,
datePlaceholderNone : this.datePlaceholderNone, timePlaceholder : this.timePlaceholder,
timePlaceholderNone : this.timePlaceholderNone, numberPlaceholder : this.numberPlaceholder,
numberPlaceholderNone : this.numberPlaceholderNone, passwordPlaceholder : this.passwordPlaceholder,
passwordPlaceholderNone : this.passwordPlaceholderNone, maxlength : this.maxlength,
enterkeytypeDefault : this.enterkeytypeDefault, enterkeytypeNext : this.enterkeytypeNext,
enterkeytypeGo : this.enterkeytypeGo, enterkeytypeDone : this.enterkeytypeDone,
enterkeytypeSend : this.enterkeytypeSend, enterkeytypeSearch : this.enterkeytypeSearch,
headericon : this.headericon, headericonNone : this.headericonNone,
showcounterTrue : this.showcounterTrue, showcounterFalse : this.showcounterFalse,
showcounterNone : this.showcounterNone, menuoptions : this.menuoptions,
menuoptionsNone : this.menuoptionsNone, autofocusTrue : this.autofocusTrue,
autofocusFalse : this.autofocusFalse, autofocusNone : this.autofocusNone,
selectedstart : this.selectedstart, selectedstartNone : this.selectedstartNone,
selectedendTrue : this.selectedendTrue, selectedendNone : this.selectedendNone,
softkeyboardenabledTrue : this.softkeyboardenabledTrue,
softkeyboardenabledFalse : this.softkeyboardenabledFalse,
softkeyboardenabledNone : this.softkeyboardenabledNone, showpasswordiconTrue : this.showpasswordiconTrue,
showpasswordiconFalse : this.showpasswordiconFalse, showpasswordiconNone : this.showpasswordiconNone
}
},
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()
},
getSpecificPropValuesOne(){
this.typeText = this.$element("typeText").getInspector()
this.typeEmail = this.$element("typeEmail").getInspector()
this.typeDate = this.$element("typeDate").getInspector()
this.typeTime = this.$element("typeTime").getInspector()
this.typeNumber = this.$element("typeNumber").getInspector()
this.typePassword = this.$element("typePassword").getInspector()
this.typeButton = this.$element("typeButton").getInspector()
this.typeCheckbox = this.$element("typeCheckbox").getInspector()
this.typeRadio = this.$element("typeRadio").getInspector()
this.typeNone = this.$element("typeNone").getInspector()
this.checkboxFalse = this.$element("checkboxFalse").getInspector()
this.checkboxTrue = this.$element("checkboxTrue").getInspector()
this.checkboxNone = this.$element("checkboxNone").getInspector()
this.radioFalse = this.$element("radioFalse").getInspector()
this.radioTrue = this.$element("radioTrue").getInspector()
this.radioNone = this.$element("radioNone").getInspector()
this.inputName = this.$element("inputName").getInspector()
this.inputNameNone = this.$element("inputNameNone").getInspector()
this.inputValue = this.$element("inputValue").getInspector()
this.inputValueNone = this.$element("inputValueNone").getInspector()
this.textPlaceholder = this.$element("textPlaceholder").getInspector()
this.textPlaceholderNone = this.$element("textPlaceholderNone").getInspector()
this.emailPlaceholder = this.$element("emailPlaceholder").getInspector()
this.emailPlaceholderNone = this.$element("emailPlaceholderNone").getInspector()
this.datePlaceholder = this.$element("datePlaceholder").getInspector()
this.datePlaceholderNone = this.$element("datePlaceholderNone").getInspector()
this.timePlaceholder = this.$element("timePlaceholder").getInspector()
this.timePlaceholderNone = this.$element("timePlaceholderNone").getInspector()
this.numberPlaceholder = this.$element("numberPlaceholder").getInspector()
this.numberPlaceholderNone = this.$element("numberPlaceholderNone").getInspector()
this.passwordPlaceholder = this.$element("passwordPlaceholder").getInspector()
this.passwordPlaceholderNone = this.$element("passwordPlaceholderNone").getInspector()
this.maxlength = this.$element("maxlength").getInspector()
},
getSpecificPropValuesTwo(){
this.enterkeytypeDefault = this.$element("enterkeytypeDefault").getInspector()
this.enterkeytypeNext = this.$element("enterkeytypeNext").getInspector()
this.enterkeytypeGo = this.$element("enterkeytypeGo").getInspector()
this.enterkeytypeDone = this.$element("enterkeytypeDone").getInspector()
this.enterkeytypeSend = this.$element("enterkeytypeSend").getInspector()
this.enterkeytypeSearch = this.$element("enterkeytypeSearch").getInspector()
this.headericon = this.$element("headericon").getInspector()
this.headericonNone = this.$element("headericonNone").getInspector()
this.showcounterTrue = this.$element("showcounterTrue").getInspector()
this.showcounterFalse = this.$element("showcounterFalse").getInspector()
this.showcounterNone = this.$element("showcounterNone").getInspector()
this.menuoptions = this.$element("menuoptions").getInspector()
this.menuoptionsNone = this.$element("menuoptionsNone").getInspector()
this.autofocusTrue = this.$element("autofocusTrue").getInspector()
this.autofocusFalse = this.$element("autofocusFalse").getInspector()
this.autofocusNone = this.$element("autofocusNone").getInspector()
this.selectedstart = this.$element("selectedstart").getInspector()
this.selectedstartNone = this.$element("selectedstartNone").getInspector()
this.selectedendTrue = this.$element("selectedendTrue").getInspector()
this.selectedendNone = this.$element("selectedendNone").getInspector()
this.softkeyboardenabledTrue = this.$element("softkeyboardenabledTrue").getInspector()
this.softkeyboardenabledFalse = this.$element("softkeyboardenabledFalse").getInspector()
this.softkeyboardenabledNone = this.$element("softkeyboardenabledNone").getInspector()
this.showpasswordiconTrue = this.$element("showpasswordiconTrue").getInspector()
this.showpasswordiconFalse = this.$element("showpasswordiconFalse").getInspector()
this.showpasswordiconNone = this.$element("showpasswordiconNone").getInspector()
}
}
ace/ace_standard/src/main/js/default/pages/input/router/index.css 0 → 100644
浏览文件 @ d4f58a98
/**
* 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 {
flex-direction: column;
flex-wrap:wrap;
justify-content:flex-start;
align-items: flex-end;
align-content:space-around;
display: flex;
height: 40px;
}
.style8{
flex-direction: row;
flex-wrap:nowrap;
scrollbar-color: yellow;
scrollbar-width: 10px;
overscroll-effect:spring;
height: 20px;
overflow:scroll;
}
.flex-item {
width: 50%;
height: 20px;
border-radius: 16px;
}
.style9{
flex-direction: row;
flex-wrap:nowrap;
scrollbar-color: yellow;
scrollbar-width: 10px;
overscroll-effect:spring;
height: 20px;
overflow:scroll;
}
.color-red {
color: red;
}
.color-white {
color: white;
}
.font-size16 {
font-size: 16;
}
.font-size20 {
font-size: 20;
}
.allow-scale{
allow-scale:true
}
.placeholder-color{
placeholder-color:pink
}
.font-weight3{
font-weight:300
}
.font-weight6{
font-weight:600
}
.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;
}
.event5{
flex-direction: column;
width: 100%;
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%;
}
.prop6 {
height: 15px;
background-color: purple;
width: 100%;
margin-bottom: 5px;
}
.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;
}
.function4{
flex-direction: row;
background-color: purple;
width: 20%;
height: 20px;
margin-bottom: 10px;
}
.function5{
flex-direction: row;
background-color: red;
width: 30%;
height: 20px;
margin-bottom: 10px;
margin-left: 2%;
}
.function6{
flex-direction: row;
background-color: yellow;
width: 20%;
height: 20px;
margin-bottom: 10px;
margin-left: 2%;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/input/router/index.hml 0 → 100644
浏览文件 @ d4f58a98
<!--/**
* 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="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
input通用样式1
</text>
<input class="style1" id="style1">
</input>
<text class="sub-title">
input通用样式2
</text>
<input class="style2" id="style2">
</input>
<text class="sub-title">
input通用样式3
</text>
<input class="style3" id="style3">
</input>
<text class="sub-title">
input通用样式4
</text>
<input class="style4" id="style4">
</input>
<text class="sub-title">
input通用样式5
</text>
<div class="contain1">
<input class="style5" id="style5">
</input>
<input class="style6" id="style6">
</input>
</div>
<text class="sub-title">
input特有样式1
</text>
<div class="style7" id="style7">
<input class="flex-item color-red font-size16" type="button" value="value">
</input>
<input class="flex-item color-white font-size20" type="button" value="value">
</input>
</div>
<text class="sub-title">
input特有样式2
</text>
<div class="style8" id="style8">
<input class="flex-item color-primary allow-scale">
</input>
<input class="flex-item color-success placeholder-color" placeholder="placeholder">
</input>
</div>
<text class="sub-title">
input特有样式3
</text>
<div class="style9" id="style9">
<input class="flex-item color-primary font-weight3" type="button" value="buttion"></input>
<input class="flex-item color-success font-weight6" type="button" value="buttion"></input>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
input动画样式1
</text>
<input class="ani1" >
</input>
<text class="sub-title">
input动画样式2
</text>
<input class="ani2" >
</input>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
input通用属性1
</text>
<input id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</input>
<text class="sub-title">
input通用属性2
</text>
<input class="prop2" ref ="prop2" id="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</input>
<text class="sub-title">
input通用属性3
</text>
<input style="color: #679855; margin: 5px;" class="prop3" id="prop3">
</input>
<text class="sub-title">
input特有属性1
</text>
<input class="prop4" id="prop4"
type="button"
value="value"
placeholder="placeholder"
menuoptions="[{icon:'../../../common/images/icon.png',content:'content1'},{icon:'../../../common/images/icon.png',content:'content2'}]"
autofocus="true"
selectedstart="0"
selectedend="10"
softkeyboardenabled="false">
</input>
<text class="sub-title">
input特有属性2
</text>
<input class="prop5" id="prop5"
type="text"
value=""
placeholder=""
maxlength="10"
enterkeytype="go"
headericon="../../../common/images/icon.png"
showcounter="true"
menuoptions=""
autofocus="false"
selectedstart=""
selectedend=""
softkeyboardenabled="true"
showpasswordicon="false">
</input>
<text class="sub-title">
input特有属性3
</text>
<input class="prop6" id="prop6"
type="password"
showpasswordicon="true">
</input>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
input通用事件1
</text>
<input class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</input>
<text class="sub-title">
input通用事件2
</text>
<input class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</input>
<text class="sub-title">
input通用事件3
</text>
<input class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</input>
<text class="sub-title">
input特有事件1
</text>
<input class ="event4"
type = "text"
onchange="change"
onenterkeyclick="enterkeyclick"
enterkeytype="go"
ontranslate="translate"
onshare="share"
onsearch="search"
onoptionselect="optionselect"
onselectchange="selectchange">
</input>
<text class="sub-title">
input特有事件2
</text>
<input class ="event5"
type="checkbox"
onchange="checkChange">
</input>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
input通用方法1
</text>
<input id="function1" class="function1" ontouchstart="functionTest1">
</input>
<text class="sub-title">
input通用方法2
</text>
<input id="function2" class="function2" ontouchstart="functionTest2">
</input>
<text class="sub-title">
input通用方法3
</text>
<input id="function3" class="function3" ontouchstart="functionTest3">
</input>
<text class="sub-title">
input特有方法
</text>
<div>
<input id="function4"
class="function4"
type="text"
ontouchstart="functionTest4">
</input>
<input id="function5"
class="function5"
type="email"
ontouchstart="functionTest5">
</input>
<input id="function6"
class="function6"
type="date"
ontouchstart="functionTest6">
</input>
</div>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
input渐变样式1
</text>
<input class="gradient1">
</input>
<text class="sub-title">
input渐变样式2
</text>
<input class="gradient2">
</input>
<text class="sub-title">
input渐变样式3
</text>
<input class="gradient3">
</input>
<text class="sub-title">
input渐变样式4
</text>
<input class="gradient4">
</input>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
input无障碍1
</text>
<input class="access1" accessibilitygroup ="true"
accessibilitytext="这是input"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</input>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
input原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<input style="width:20px;height:20px;background-color: blue;display-index: 1;">
</input>
<input style="width:30px; height:20px;background-color: black;display-index: 5;">
</input>
<input style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</input>
<input style="width:10px; height:20px;background-color: red;display-index: 3;">
</input>
<input style="width:25px; height:20px;background-color:pink;display-index: 7;">
</input>
<input style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</input>
</div>
<text class="sub-title">
input原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<input style="height:20px;background-color: blue;flex-weight: 1;">
</input>
<input style="height:20px;background-color: black;flex-weight: 5;">
</input>
<input style="height:20px;background-color: yellow;flex-weight: 4;">
</input>
<input style="height:20px;background-color: red;flex-weight: 3;">
</input>
<input style="height:20px;background-color:pink;flex-weight: 7;">
</input>
<input style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</input>
</div>
<text class="sub-title">
input原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<input style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</input>
<input style="width:30px;background-color: black;aspect-ratio:0.5;">
</input>
<input style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</input>
<input style="width:30px;background-color: red;aspect-ratio: 1.3;">
</input>
<input style="width:30px;background-color:pink;aspect-ratio: 1;">
</input>
<input style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</input>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
input多模输入1
</text>
<input class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="input" scenelabel="common">
</input>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/marquee/index.js → ace/ace_standard/src/main/js/default/pages/input/router/index.js
浏览文件 @ d4f58a98
...@@ -251,39 +251,6 @@ export default { ...@@ -251,39 +251,6 @@ export default {
}); });
}, },
//
onMarqueeBounce: function() {
console.log("onMarqueeBounce");
prompt.showToast({
message: 'Bounce'
});
},
onMarqueeStart: function() {
console.log("onMarqueeStart");
prompt.showToast({
message: 'Start'
});
},
onMarqueeFinish: function() {
console.log("onMarqueeFinish");
prompt.showToast({
message: 'Finish'
});
},
onStartClick (evt) {
this.$element('customMarquee').start();
prompt.showToast({
message: 'Start'
});
},
onStopClick (evt) {
this.$element('customMarquee').stop();
prompt.showToast({
message: 'Stop'
});
},
//
pinchStart(event){ pinchStart(event){
var scale = event.scale var scale = event.scale
var pinchCenterX = event.pinchCenterX var pinchCenterX = event.pinchCenterX
...@@ -480,43 +447,64 @@ export default { ...@@ -480,43 +447,64 @@ export default {
functionTest4(event){ functionTest4(event){
var function4 = this.$element('function4'); var function4 = this.$element('function4');
var scrollOffset = function4.getScrollOffset(); function4.focus({ focus: false });
var x = scrollOffset.x; },
var y = scrollOffset.y;
var message = 'x--' + x + ',y--' + y; functionTest5(event){
var function4 = this.$element('function5');
function4.showError({ error: "you input error string" });
},
functionTest6(event){
var function4 = this.$element('function6');
function4.delete();
},
change(event){
prompt.showToast({
message: JSON.stringify(event)
});
},
enterkeyclick(event){
prompt.showToast({
message: JSON.stringify(event)
});
},
translate(event){
prompt.showToast({ prompt.showToast({
message: 'functionTest4 scrollOffset:\n' + message message: JSON.stringify(event)
}); });
},
var scrollParam = { share(event){
dx:60, prompt.showToast({
dy:0, message: JSON.stringify(event)
smooth:true });
}
function4.scrollBy(scrollParam)
}, },
reachStart(){ search(event){
prompt.showToast({ prompt.showToast({
message: 'reachStart' message: JSON.stringify(event)
}); });
}, },
reachEnd(){ optionselect(event){
prompt.showToast({ prompt.showToast({
message: 'reachEnd' message: JSON.stringify(event)
}); });
}, },
reachTop(){ selectchange(event){
prompt.showToast({ prompt.showToast({
message: 'reachTop' message: JSON.stringify(event)
}); });
}, },
reachBottom(){ checkChange(event){
prompt.showToast({ prompt.showToast({
message: 'reachBottom' message: JSON.stringify(event)
}); });
} }
} }
ace/ace_standard/src/main/js/default/pages/input/style/index.css 0 → 100644
浏览文件 @ d4f58a98
/**
* 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;
}
#styleTwentySeven{
width: 150px;
height: 20px;
background: linear-gradient(pink,#fff000);
}
#styleTwentyNine{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:contain;
background-repeat: repeat-x;
background-position: center;
}
#styleThirty{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:50px 10px;
background-repeat: no-repeat;
background-position: 10px 10px;
}
#styleThirtyOne{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:10% 20%;
background-repeat: repeat;
background-position: 30% 40%;
}
#styleThirtyTwo{
width: 150px;
height: 20px;
background: linear-gradient(pink,#fff000);
clip-path: margin-box;
image-fill: #000fff;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
#specificOne{
width: 100%;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificColor1{
background-color: red;
}
#specificColor2{
background-color: yellow;
}
.color-red{
color:red
}
.color-black{
color:black
}
#specificTwo{
width: 100%;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificFontSize1{
background-color: black;
}
#specificFontSize2{
background-color: blue;
}
.font-size1{
font-size: 20px;
}
.font-size2{
font-size: 30px;
}
#specificThree{
width: 100%;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificAllowScale1{
background-color: red;
}
#specificAllowScale2{
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;
}
.placeholder-color1{
placeholder-color: rebeccapurple;
}
.placeholder-color2{
placeholder-color: saddlebrown;
}
#specificFive{
width: 100%;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificFontWeight1{
background-color: red;
}
#specificFontWeight2{
background-color: purple;
}
.font-weight1{
font-weight: 200;
}
.font-weight2{
font-weight: 900;
}
#specificSix{
width: 100%;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificCaretColor1{
background-color: yellowgreen;
}
#specificCaretColor2{
background-color: beige;
}
.placeholder-color1{
placeholder-color: black;
}
.placeholder-color2{
placeholder-color: red;
}
ace/ace_standard/src/main/js/default/pages/input/style/index.hml 0 → 100644
浏览文件 @ d4f58a98
<!--/**
* 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">
input通用样式
</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>
<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>
</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>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<input id="styleTwentyFour">
</input>
<input id="styleTwentyFive">
</input>
<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>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<input id="styleThirtyTwo">
</input>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
input特有样式
</text>
<text class="sub-title">
特有样式 color
</text>
<div id="specificOne">
<input id="specificColor1" class="color-red">
</input>
<input id="specificColor2" class="color-black">
</input>
</div>
<text class="sub-title">
特有样式 font-size
</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>
</div>
<text class="sub-title">
特有样式 allow-scale
</text>
<div id="specificThree">
<input id="specificAllowScale1" class="allow-scale1">
</input>
<input id="specificAllowScale2" class="allow-scale2">
</input>
</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>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/select/index.js → ace/ace_standard/src/main/js/default/pages/input/style/index.js
浏览文件 @ d4f58a98
...@@ -13,16 +13,7 @@ ...@@ -13,16 +13,7 @@
* limitations under the License. * limitations under the License.
*/ */
import prompt from '@system.prompt';
export default { export default {
data: {
title: 'World'
},
changeFruit(e){
console.log(JSON.stringify(e))
prompt.showToast({
message: e.newValue
});
}
} }
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/rating/index.css 已删除 100644 → 0
浏览文件 @ 60184a64
/**
* 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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或