Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
11 个月 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts

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

提交 265adc6d 编写于 作者: B bayanxing
浏览文件
操作

add attribute testcase 

Signed-off-by: Nbayanxing <bayanxing@kaihongdigi.com>
上级 533ef75f
展开全部 隐藏空白更改
内联 并排
Showing with 10545 addition and 69 deletion
ace/ace_standard/src/main/config.json
浏览文件 @ 265adc6d
......@@ -57,7 +57,8 @@
"pages/chart/router/index",
"pages/input/index",
"pages/slider/index",
"pages/text/index",
"pages/text/router/index",
"pages/text/prop/index",
"pages/divider/router/index",
"pages/image/router/index",
"pages/label/router/index",
......@@ -93,12 +94,15 @@
"pages/imageAnimator/index",
"pages/panel/router/index",
"pages/panel/prop/index",
"pages/popup/index",
"pages/refresh/index",
"pages/popup/router/index",
"pages/popup/prop/index",
"pages/refresh/router/index",
"pages/refresh/prop/index",
"pages/stack/router/index",
"pages/stack/prop/index",
"pages/stepper/index",
"pages/swiper/index",
"pages/swiper/router/index",
"pages/swiper/prop/index",
"pages/tabs/router/index",
"pages/tabs/prop/index",
"pages/tab-bar/router/index",
......
ace/ace_standard/src/main/js/default/pages/popup/prop/index.css 0 → 100644
浏览文件 @ 265adc6d
/**
* 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;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/popup/prop/index.hml 0 → 100644
浏览文件 @ 265adc6d
<div class="container">
<div class="prop-container">
<text class="title">
popup通用属性
</text>
<div id="target1"></div>
<text class="sub-title">
通用属性 -- id
</text>
<popup id="idProp" target="target1">
</popup>
<text class="sub-title">
通用属性 -- class
</text>
<popup id="classProp" target="target1"
class="classProp">
</popup>
<popup id="classPropNone" target="target1"
class="">
</popup>
<text class="sub-title">
通用属性 -- style
</text>
<popup id="styleProp" target="target1"
style="width:10%;height:20px;background-color:red">
</popup>
<text class="sub-title">
通用属性 -- ref
</text>
<popup id="refProp" target="target1"
ref="refProp">
</popup>
<popup id="refPropNone" target="target1"
ref="">
</popup>
<text class="sub-title">
通用属性 -- disabled
</text>
<popup id="disabledPropTrue" target="target1"
disabled="true">
</popup>
<popup id="disabledPropFalse" target="target1"
disabled="false">
</popup>
<popup id="disabledPropNone" target="target1"
disabled="">
</popup>
<text class="sub-title">
通用属性 -- data-*
</text>
<popup id="dataProp" target="target1"
data-popup="通用属性 -- data-*">
</popup>
<popup id="dataPropNone" target="target1"
data-popup="">
</popup>
<text class="sub-title">
通用属性 -- click-effect
</text>
<popup id="clickEffectPropSmall" target="target1"
click-effect="spring-small">
</popup>
<popup id="clickEffectPropMedium" target="target1"
click-effect="spring-medium">
</popup>
<popup id="clickEffectPropLarge" target="target1"
click-effect="spring-large">
</popup>
<popup id="clickEffectPropNone" target="target1"
click-effect="">
</popup>
<text class="sub-title">
通用属性 -- dir
</text>
<popup id="dirPropRtl" target="target1"
dir="rtl">
</popup>
<popup id="dirPropAuto" target="target1"
dir="auto">
</popup>
<popup id="dirPropLtr" target="target1"
dir="ltr">
</popup>
<popup id="dirPropNone" target="target1"
dir="">
</popup>
<text class="sub-title">
渲染属性 -- for
</text>
<popup id="forPropNull" target="target1"
for="">
</popup>
<popup id="forPropOne" target="target1"
for="{{listOne}}">
</popup>
<popup id="forPropThree" target="target1"
for="{{listThree}}">
</popup>
<text class="sub-title">
渲染属性 -- if
</text>
<popup id="ifPropTrue" target="target1"
if="true">
</popup>
<text class="sub-title">
渲染属性 -- show
</text>
<popup id="showPropTrue" target="target1"
show="true">
</popup>
<popup id="showPropFalse" target="target1"
show="false">
</popup>
<popup id="showPropNone" target="target1"
show="">
</popup>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
popup特有属性
</text>
<text class="sub-title">
特有属性 -- target
</text>
<popup id="targetProp" target="target1">
</popup>
<text class="sub-title">
特有属性 -- placement
</text>
<popup id="placementPropLeft" target="target1" placement="left">
</popup>
<popup id="placementPropRight" target="target1" placement="right">
</popup>
<popup id="placementPropTop" target="target1" placement="top">
</popup>
<text class="sub-title">
特有属性 -- keepalive
</text>
<popup id="keepAlivePropTrue" target="target1" keepalive="true">
</popup>
<popup id="keepAlivePropFalse" target="target1" keepalive="false">
</popup>
<text class="sub-title">
特有属性 -- clickable
</text>
<popup id="clickablePropTrue" target="target1" clickable="true">
</popup>
<popup id="clickablePropFalse" target="target1" clickable="false">
</popup>
<text class="sub-title">
特有属性 -- arrowoffset
</text>
<popup id="arrowOffsetProp" target="target1" arrowoffset="10px">
</popup>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/popup/prop/index.js 0 → 100644
浏览文件 @ 265adc6d
/**
* 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,
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,
targetProp : null,
placementPropLeft : null,
placementPropRight : null,
placementPropTop : null,
keepAlivePropTrue : null,
keepAlivePropFalse : null,
clickablePropTrue : null,
clickablePropFalse : null,
arrowOffsetProp : null,
},
onShow(){
this.getCommonPropValues();
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,
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,
targetProp : this.targetProp,
placementPropLeft : this.placementPropLeft,
placementPropRight : this.placementPropRight,
placementPropTop :this.placementPropTop,
keepAlivePropTrue: this.keepAlivePropTrue,
keepAlivePropFalse: this.keepAlivePropFalse,
clickablePropTrue : this.clickablePropTrue,
clickablePropFalse : this.clickablePropFalse,
arrowOffsetProp : this.arrowOffsetProp
}
},
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.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()
this.targetProp = this.$element("targetProp").getInspector()
this.placementPropLeft = this.$element("placementPropLeft").getInspector()
this.placementPropRight = this.$element("placementPropRight").getInspector()
this.placementPropTop = this.$element("placementPropTop").getInspector()
this.keepAlivePropTrue = this.$element("keepAlivePropTrue").getInspector()
this.keepAlivePropFalse = this.$element("keepAlivePropFalse").getInspector()
this.clickablePropTrue = this.$element("clickablePropTrue").getInspector()
this.clickablePropFalse = this.$element("clickablePropFalse").getInspector()
this.arrowOffsetProp = this.$element("arrowOffsetProp").getInspector()
},
}
ace/ace_standard/src/main/js/default/pages/popup/index.css → ace/ace_standard/src/main/js/default/pages/popup/router/index.css
浏览文件 @ 265adc6d
......@@ -230,7 +230,7 @@
overflow:scroll;
}
#prop1 {
.prop1 {
color: #ad4e2a;
stroke-width: 10px;
line-cap: square;
......
ace/ace_standard/src/main/js/default/pages/popup/index.hml → ace/ace_standard/src/main/js/default/pages/popup/router/index.hml
浏览文件 @ 265adc6d
......@@ -86,6 +86,7 @@
</popup>
<popup id="prop1"
class="prop1"
target="textPro1"
disabled = "true"
data-name ="prop1"
......
ace/ace_standard/src/main/js/default/pages/popup/index.js → ace/ace_standard/src/main/js/default/pages/popup/router/index.js
浏览文件 @ 265adc6d
......@@ -184,8 +184,65 @@ export default {
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
var styleValues = this.getStyleValues();
var propsValues = this.getPropValues();
globalThis.value = {
styleValues:styleValues,
propsValues:propsValues
}
},
getStyleValues(){
var styleValue1 = this.$element("popup1").getInspector()
var styleValue2 = this.$element("popup2").getInspector()
var styleValue3 = this.$element("popup3").getInspector()
var styleValue4 = this.$element("popup4").getInspector()
var styleValue5 = this.$element("popup5").getInspector()
var styleValue6 = this.$element("popup6").getInspector()
var styleValue7 = this.$element("popup7").getInspector()
return {
style1:styleValue1,
style2:styleValue2,
style3:styleValue3,
style4:styleValue4,
style5:styleValue5,
style6:styleValue6,
style7:styleValue7
}
},
getPropValues(){
var propValue1 = this.$element("prop1").getInspector()
var propValue2 = this.$element("prop2").getInspector()
var propValue3 = this.$element("prop3").getInspector()
var propValue4 = this.$element("prop4").getInspector()
var propValue5 = this.$element("prop5").getInspector()
var propValue6 = this.$element("prop6").getInspector()
var propValue7 = this.$element("prop7").getInspector()
var propValue8 = this.$element("prop8").getInspector()
var propValue9 = this.$element("prop9").getInspector()
var propValue10 = this.$element("prop10").getInspector()
var propValue11 = this.$element("prop11").getInspector()
return {
prop1:propValue1,
prop2:propValue2,
prop3:propValue3,
prop4:propValue4,
prop5:propValue5,
prop6:propValue6,
prop7:propValue7,
prop8:propValue8,
prop9:propValue9,
prop10:propValue10,
prop11:propValue11,
}
},
touchStart(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
......
ace/ace_standard/src/main/js/default/pages/popup/style/index.css 0 → 100644
浏览文件 @ 265adc6d
/**
* 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: 70px;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificTwo{
width: 100%;
height: 50px;
flex-direction: column;
flex-wrap:wrap;
justify-content:flex-start;
align-items: flex-start;
align-content: flex-start;
}
#specificThree{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:flex-end;
align-items: flex-end;
align-content: flex-end;
margin: 1%;
}
#specificFour{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:center;
align-items: center;
align-items: center;
margin: 1%;
}
#specificFive{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:space-between;
align-items:stretch;
align-content: space-between;
margin: 1%;
}
#specificSix{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:space-around;
align-items: baseline;
align-content: space-around;
margin: 1%;
}
#specificSeven{
width: 50px;
height: 10px;
background-color: #ff0000;
overflow: hidden;
}
#specificEight{
width: 70px;
height: 10px;
background-color: #00ff00;
overflow: visible;
margin-left: 10px;
}
#specificNine{
width: 100%;
height: 50px;
margin-top: 10px;
overflow: scroll;
flex-direction: column;
scrollbar-color:#ff0000;
scrollbar-width:2px;
overscroll-effect:spring;
}
#specificTen{
width: 100%;
height: 10px;
margin-top: 10px;
overflow: scroll;
scrollbar-color:#ff0000;
scrollbar-width:2px;
overscroll-effect:fade;
}
#specificEleven{
width: 100%;
height: 10px;
margin-top: 10px;
overflow: scroll;
scrollbar-color:#ff0000;
scrollbar-width:2px;
overscroll-effect:none;
}
#specificTwelve{
width: 100%;
height: 30px;
display: grid;
background-color: #000fff;
grid-template-rows: 50px 100px 60px;
grid-rows-gap:10px;
grid-row-start: 1;
grid-row-end: 2;
grid-auto-flow:row;
}
#specificThirteen{
width: 100%;
height: 30px;
background-color: #fff000;
display: grid;
grid-template-columns: 50px 100px 60px;
grid-columns-gap:10px;
grid-column-start: 1;
grid-column-end: 2;
grid-auto-flow:column;
}
.flex-item{
width: 40%;
height: 10px;
}
.red-item{
background-color: #ff0000;
}
.green-item{
background-color: #00ff00;
}
.blue-item{
background-color: #0000ff;
}
.yellow-item{
background-color: #fff000;
}
ace/ace_standard/src/main/js/default/pages/popup/style/index.hml 0 → 100644
浏览文件 @ 265adc6d
<!--/**
* 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">
div通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<div id="styleOne">
</div>
<div id="styleTwo">
</div>
<div id="styleThree">
</div>
<div id="styleFour">
</div>
<div id="styleFive">
</div>
<div id="styleSix">
</div>
<div id="styleSeven">
</div>
<div id="styleEight">
</div>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<div id="styleNine">
<div id="styleTen">
</div>
<div id="styleEleven">
</div>
<div id="styleTwelve">
</div>
<div id="styleThirteen">
</div>
<div id="styleFourteen">
</div>
<div id="styleFifteen">
</div>
<div id="styleSixteen">
</div>
<div id="styleSeventeen">
</div>
<div id="styleEighteen">
</div>
<div id="styleNineteen">
</div>
<div id="styleTwenty">
</div>
</div>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<div id="styleTwentyOne">
</div>
<div id="styleTwentyTwo">
</div>
<div id="styleTwentyThree">
</div>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<div id="styleTwentyFour">
</div>
<div id="styleTwentyFive">
</div>
<text class="sub-title">
通用样式26-31 background
</text>
<div id="styleTwentySix">
</div>
<div id="styleTwentySeven">
</div>
<div id="styleTwentyNine">
</div>
<div id="styleThirty">
</div>
<div id="styleThirtyOne">
</div>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<div id="styleThirtyTwo">
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
div特有样式
</text>
<text class="sub-title">
特有样式 flex-direction flex-wrap justify-content align-items align-content
</text>
<div id="specificOne">
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
</div>
<div id="specificTwo">
<div id="specificThree" >
<div class="flex-item red-item">
</div>
</div>
<div id="specificFour" >
<div class="flex-item blue-item">
</div>
</div>
<div id="specificFive" >
<div class="flex-item yellow-item">
</div>
<div class="flex-item blue-item">
</div>
</div>
<div id="specificSix" >
<text style="font-size: 6px;">
文本
</text>
<div class="flex-item blue-item">
</div>
</div>
</div>
<text class="sub-title">
特有样式 overflow scrollbar-color scrollbar-width overscroll-effect
</text>
<div id="specificSeven" >
<div id="specificEight" >
<div style="margin-left:10px;width: 80px; height: 10px; background-color: #0000ff;"></div>
</div>
</div>
<div id="specificNine">
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
</div>
<div id="specificTen">
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
</div>
<div id="specificEleven">
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
<div class="flex-item red-item">
</div>
<div class="flex-item blue-item">
</div>
<div class="flex-item green-item">
</div>
</div>
<text class="sub-title">
特有样式 grid
</text>
<div id="specificTwelve">
</div>
<div id="specificThirteen">
</div>
<!-- <div id="specificEight" >-->
<!-- <div class="flex-item yellow-item">-->
<!-- </div>-->
<!-- <div class="flex-item blue-item" style="width: 45%; align-content:flex-end;">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div id="specificNine" >-->
<!-- <div class="flex-item yellow-item">-->
<!-- </div>-->
<!-- <div class="flex-item blue-item">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div id="specificTen" >-->
<!-- <div class="flex-item yellow-item">-->
<!-- </div>-->
<!-- <div class="flex-item blue-item">-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
ace/ace_standard/src/main/js/default/pages/refresh/prop/index.css 0 → 100644
浏览文件 @ 265adc6d
/**
* 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;
}
refresh{
background: linear-gradient(pink,#fff000);
width: 50%;
margin-bottom: 5px;
height: 40%;
}
.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;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/refresh/prop/index.hml 0 → 100644
浏览文件 @ 265adc6d
<div class="container">
<div class="prop-container">
<text class="title">
refresh通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<refresh id="idProp">
</refresh>
<text class="sub-title">
通用属性 -- class
</text>
<refresh id="classProp"
class="classProp">
</refresh>
<refresh id="classPropNone"
class="">
</refresh>
<text class="sub-title">
通用属性 -- style
</text>
<refresh id="styleProp"
style="width:10%;height:20px;background-color:red">
</refresh>
<text class="sub-title">
通用属性 -- ref
</text>
<refresh id="refProp"
ref="refProp">
</refresh>
<refresh id="refPropNone"
ref="">
</refresh>
<text class="sub-title">
通用属性 -- disabled
</text>
<refresh id="disabledPropTrue"
disabled="true">
</refresh>
<refresh id="disabledPropFalse"
disabled="false">
</refresh>
<refresh id="disabledPropNone"
disabled="">
</refresh>
<text class="sub-title">
通用属性 -- focusable
</text>
<refresh id="focusablePropTrue"
focusable="true">
</refresh>
<refresh id="focusablePropFalse"
focusable="false">
</refresh>
<refresh id="focusablePropNone"
focusable="">
</refresh>
<text class="sub-title">
通用属性 -- data-*
</text>
<refresh id="dataProp"
data-refresh="通用属性 -- data-*">
</refresh>
<refresh id="dataPropNone"
data-Refresh="">
</refresh>
<text class="sub-title">
通用属性 -- click-effect
</text>
<refresh id="clickEffectPropSmall"
click-effect="spring-small">
</refresh>
<refresh id="clickEffectPropMedium"
click-effect="spring-medium">
</refresh>
<refresh id="clickEffectPropLarge"
click-effect="spring-large">
</refresh>
<refresh id="clickEffectPropNone"
click-effect="">
</refresh>
<text class="sub-title">
通用属性 -- dir
</text>
<refresh id="dirPropRtl"
dir="rtl">
</refresh>
<refresh id="dirPropAuto"
dir="auto">
</refresh>
<refresh id="dirPropLtr"
dir="ltr">
</refresh>
<refresh id="dirPropNone"
dir="">
</refresh>
<text class="sub-title">
渲染属性 -- for
</text>
<refresh id="forPropNull"
for="">
</refresh>
<refresh id="forPropOne"
for="{{listOne}}">
</refresh>
<refresh id="forPropThree"
for="{{listThree}}">
</refresh>
<text class="sub-title">
渲染属性 -- if
</text>
<refresh id="ifPropTrue"
if="true">
</refresh>
<text class="sub-title">
渲染属性 -- show
</text>
<refresh id="showPropTrue"
show="true">
</refresh>
<refresh id="showPropFalse"
show="false">
</refresh>
<refresh id="showPropNone"
show="">
</refresh>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title" style="height: 100px;">
refresh特有属性
</text>
<refresh id="offsetProp"
offset="10px">
</refresh>
<refresh id="refreshingPropFalse"
refreshing = "false">
</refresh>
<refresh id="refreshingPropTrue"
refreshing = "true">
</refresh>
<refresh id="typePropAuto"
type="auto">
</refresh>
<refresh id="typePropPullDown"
type="pulldown">
</refresh>
<refresh id="lastTimePropTrue" lasttime="true"
type="pulldown">
</refresh>
<refresh id="lastTimePropFalse" lasttime="false"
type="pulldown">
</refresh>
<refresh id="frictionProp"
friction="42">
</refresh>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/refresh/prop/index.js 0 → 100644
浏览文件 @ 265adc6d
/**
* 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,
offsetProp: null,
refreshingPropFalse: null,
refreshingPropTrue: null,
typePropAuto: null,
typePropPullDown: null,
lastTimePropTrue: null,
lastTimePropFalse: null,
frictionProp: null
},
onShow(){
this.getCommonPropValues();
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,
offsetProp : this.offsetProp,
refreshingPropFalse : this.refreshingPropFalse,
refreshingPropTrue : this.refreshingPropTrue,
typePropAuto : this.typePropAuto,
typePropPullDown : this.typePropPullDown,
lastTimePropTrue : this.lastTimePropTrue,
lastTimePropFalse : this.lastTimePropFalse,
frictionProp : this.frictionProp
}
},
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()
this.offsetProp = this.$element("offsetProp").getInspector()
this.refreshingPropFalse = this.$element("refreshingPropFalse").getInspector()
this.refreshingPropTrue = this.$element("refreshingPropTrue").getInspector()
this.typePropAuto = this.$element("typePropAuto").getInspector()
this.typePropPullDown = this.$element("typePropPullDown").getInspector()
this.lastTimePropTrue = this.$element("lastTimePropTrue").getInspector()
this.lastTimePropFalse = this.$element("lastTimePropFalse").getInspector()
this.frictionProp = this.$element("frictionProp").getInspector()
},
}
ace/ace_standard/src/main/js/default/pages/refresh/style/index.css 0 → 100644
浏览文件 @ 265adc6d
/**
* 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: 3px;
margin-bottom: 0.5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dotted;
border-bottom-style: solid;
border-left-width: 1px;
border-right-width: 1.5px;
border-top-width: 2px;
border-bottom-width: 0.5px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 15px;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
opacity: 0.5;
align-self:flex-end;
}
#styleTwo{
width: 150px;
height: 20px;
padding-start: 1px;
padding-end: 2px;
margin-start: 1px;
margin-end: 2px;
border-style: dotted;
border-width: 2px;
border-color:#0f00f0;
border-radius:5px;
opacity: 1.5;
align-self:flex-start;
}
#styleThree{
width: 50px;
height: 20px;
padding: 2px;
margin:1px;
border-left: 1px solid #ff0000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
opacity: 1;
align-self:baseline;
}
#styleFour{
width: 50px;
height: 20px;
align-self:center;
border: 2px solid #00ff00;
}
#styleFive{
width: 150px;
height: 40px;
border: 5px;
border-image-source: url('/common/images/image.png');
border-image-slice: 5px 10px 10px 5px;
border-image-width: 10px 5px 5px 10px;
border-image-outset: 10px 5px 10px 5px;
border-image-repeat: repeat;
}
#styleSix{
width: 100%;
height: 2%;
background-color: #ff0000;
padding-top: 1%;
padding-left: 2%;
padding-right: 3%;
padding-bottom: 0.5%;
margin-left: 1%;
margin-top: 2%;
margin-right: 1.5%;
margin-bottom: 0.5%;
}
#styleSeven{
width: 70%;
height: 1%;
padding-start: 1%;
padding-end: 2%;
margin-start: 1%;
margin-end: 2%;
background-color: #00ff00;
}
#styleEight{
width: 60%;
height: 1%;
margin: 1%;
padding: 2%;
background-color: #0000ff;
}
#styleNine{
width: 100%;
height: 40px;
display:flex;
}
#styleFive{
width: 100%;
height: 40px;
border: 5px;
border-image-source: url('/common/images/image.png');
border-image-slice: 5px 10px 10px 5px;
border-image-width: 10px 5px 5px 10px;
border-image-outset: 10px 5px 10px 5px;
border-image-repeat: repeat;
}
#styleTen{
width: 100%;
height: 400%;
display: none;
background-color: #ff0000;
}
#styleEleven{
height: 40%;
background-color: #00ff00;
flex:1 1 20px;
z-index:10;
}
#styleTwelve{
height: 50%;
background-color: #ff00ff;
flex-grow:2;
flex-shrink: 3;
flex-basis: 30px;
z-index:13;
}
#styleThirteen{
position: absolute;
left: 10px;
top: 20px;
width: 10px;
height: 10px;
background-color: #00ff00;
z-index:12;
}
#styleFourteen{
position: absolute;
right: 10px;
bottom: 20px;
width: 10px;
height: 10px;
background-color: #0000ff;
z-index:3;
}
#styleFifteen{
position: absolute;
left: 10%;
top: 20%;
width: 10px;
height: 10px;
background-color: #fff000;
z-index:5;
}
#styleSixteen{
position: absolute;
right: 10%;
bottom: 20%;
width: 10px;
height: 10px;
background-color: #00ffff;
z-index:15;
}
#styleSeventeen{
position: absolute;
start: 50px;
width: 10px;
height: 10px;
background-color: #ffff00;
z-index:7;
}
#styleEighteen{
position: absolute;
end: 20px;
width: 10px;
height: 10px;
background-color: #00ffff;
z-index:4;
}
#styleNineteen{
position: absolute;
start: 20%;
width: 10px;
height: 10px;
background-color: #ffff00;
z-index:1;
}
#styleTwenty{
position: absolute;
end: 20%;
width: 10px;
height: 10px;
background-color: #00ffff;
z-index:17;
}
#styleTwentyOne{
height: 20px;
box-shadow: 2px 4px;
flex-weight: 1;
margin:5px;
}
#styleTwentyTwo{
flex-weight: 1;
height: 20px;
box-shadow: 2px 4px 6px 8px;
margin:5px;
}
#styleTwentyThree{
flex-weight: 1;
height: 20px;
box-shadow: 1px 2px 3px 4px #ff0000;
margin:5px;
}
#styleTwentyFour{
width: 150px;
height: 20px;
background-color: #00ffff;
clip-path:inset(2 23);
visibility: visible;
}
#styleTwentyFive{
width: 150px;
height: 20px;
background-color: #00ffff;
visibility: hidden;
}
#styleTwentySix{
width: 150px;
height: 20px;
background-color: #999999;
}
#styleTwentySeven{
width: 150px;
height: 20px;
background: linear-gradient(pink,#fff000);
}
#styleTwentyNine{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:contain;
background-repeat: repeat-x;
background-position: center;
}
#styleThirty{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:50px 10px;
background-repeat: no-repeat;
background-position: 10px 10px;
}
#styleThirtyOne{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:10% 20%;
background-repeat: repeat;
background-position: 30% 40%;
}
#styleThirtyTwo{
width: 150px;
height: 20px;
background: linear-gradient(pink,#fff000);
clip-path: margin-box;
image-fill: #000fff;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/refresh/style/index.hml 0 → 100644
浏览文件 @ 265adc6d
<div class="container">
<div class="style-container">
<text class="title">
refresh通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<refresh id="styleOne">
</refresh>
<refresh id="styleTwo">
</refresh>
<refresh id="styleThree">
</refresh>
<refresh id="styleFour">
</refresh>
<refresh id="styleFive">
</refresh>
<refresh id="styleSix">
</refresh>
<refresh id="styleSeven">
</refresh>
<refresh id="styleEight">
</refresh>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<div id="styleNine">
<refresh id="styleTen">
</refresh>
<refresh id="styleEleven">
</refresh>
<refresh id="styleTwelve">
</refresh>
<refresh id="styleThirteen">
</refresh>
<refresh id="styleFourteen">
</refresh>
<refresh id="styleFifteen">
</refresh>
<refresh id="styleSixteen">
</refresh>
<refresh id="styleSeventeen">
</refresh>
<refresh id="styleEighteen">
</refresh>
<refresh id="styleNineteen">
</refresh>
<refresh id="styleTwenty">
</refresh>
</div>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<refresh id="styleTwentyOne">
</refresh>
<refresh id="styleTwentyTwo">
</refresh>
<refresh id="styleTwentyThree">
</refresh>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<refresh id="styleTwentyFour">
</refresh>
<refresh id="styleTwentyFive">
</refresh>
<text class="sub-title">
通用样式26-31 background
</text>
<refresh id="styleTwentySix">
</refresh>
<refresh id="styleTwentySeven">
</refresh>
<refresh id="styleTwentyNine">
</refresh>
<refresh id="styleThirty">
</refresh>
<refresh id="styleThirtyOne">
</refresh>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<refresh id="styleThirtyTwo">
</refresh>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/refresh/style/index.js 0 → 100644
浏览文件 @ 265adc6d
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data:{
styleOne : null,
styleTwo : null,
styleThree : null,
styleFour : null,
styleFive : null,
styleSix : null,
styleSeven : null,
styleEight : null,
styleNine : null,
styleTen : null,
styleEleven : null,
styleTwelve : null,
styleThirteen : null,
styleFourteen : null,
styleFifteen : null,
styleSixteen : null,
styleSeventeen : null,
styleEighteen : null,
styleNineteen : null,
styleTwenty : null,
styleTwentyOne : null,
styleTwentyTwo : null,
styleTwentyThree : null,
styleTwentyFour : null,
styleTwentyFive : null,
styleTwentySix : null,
styleTwentySeven : null,
styleTwentyNine : null,
styleThirty : null,
styleThirtyOne : null,
styleThirtyTwo : null
},
onShow(){
this.getCommonStyleValues();
globalThis.value = {
styleOne : this.styleOne,
styleTwo : this.styleTwo,
styleThree : this.styleThree,
styleFour : this.styleFour,
styleFive : this.styleFive,
styleSix : this.styleSix,
styleSeven : this.styleSeven,
styleEight : this.styleEight,
styleNine : this.styleNine,
styleTen : this.styleTen,
styleEleven : this.styleEleven,
styleTwelve : this.styleTwelve,
styleThirteen : this.styleThirteen,
styleFourteen : this.styleFourteen,
styleFifteen : this.styleFifteen,
styleSixteen : this.styleSixteen,
styleSeventeen : this.styleSeventeen,
styleEighteen : this.styleEighteen,
styleNineteen : this.styleNineteen,
styleTwenty : this.styleTwenty,
styleTwentyOne : this.styleTwentyOne,
styleTwentyTwo : this.styleTwentyTwo,
styleTwentyThree : this.styleTwentyThree,
styleTwentyFour : this.styleTwentyFour,
styleTwentyFive : this.styleTwentyFive,
styleTwentySix : this.styleTwentySix,
styleThirty : this.styleThirty,
styleThirtyOne : this.styleThirtyOne,
styleThirtyTwo : this.styleThirtyTwo
}
},
getCommonStyleValues(){
this.styleOne = this.$element("styleOne").getInspector()
this.styleTwo = this.$element("styleTwo").getInspector()
this.styleThree = this.$element("styleThree").getInspector()
this.styleFour = this.$element("styleFour").getInspector()
this.styleFive = this.$element("styleFive").getInspector()
this.styleSix = this.$element("styleSix").getInspector()
this.styleSeven = this.$element("styleSeven").getInspector()
this.styleEight = this.$element("styleEight").getInspector()
this.styleNine = this.$element("styleNine").getInspector()
this.styleTen = this.$element("styleTen").getInspector()
this.styleEleven = this.$element("styleEleven").getInspector()
this.styleTwelve = this.$element("styleTwelve").getInspector()
this.styleThirteen = this.$element("styleThirteen").getInspector()
this.styleFourteen = this.$element("styleFourteen").getInspector()
this.styleFifteen = this.$element("styleFifteen").getInspector()
this.styleSixteen = this.$element("styleSixteen").getInspector()
this.styleSeventeen = this.$element("styleSeventeen").getInspector()
this.styleEighteen = this.$element("styleEighteen").getInspector()
this.styleNineteen = this.$element("styleNineteen").getInspector()
this.styleTwenty = this.$element("styleTwenty").getInspector()
this.styleTwentyOne = this.$element("styleTwentyOne").getInspector()
this.styleTwentyTwo = this.$element("styleTwentyTwo").getInspector()
this.styleTwentyThree = this.$element("styleTwentyThree").getInspector()
this.styleTwentyFour = this.$element("styleTwentyFour").getInspector()
this.styleTwentyFive = this.$element("styleTwentyFive").getInspector()
this.styleTwentySix = this.$element("styleTwentySix").getInspector()
this.styleThirty = this.$element("styleThirty").getInspector()
this.styleThirtyOne = this.$element("styleThirtyOne").getInspector()
this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector()
},
}
ace/ace_standard/src/main/js/default/pages/swiper/prop/index.css 0 → 100644
浏览文件 @ 265adc6d
/**
* 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;
}
swiper{
background-color:#e00000;
width: 100%;
height: 15px;
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/swiper/prop/index.hml 0 → 100644
浏览文件 @ 265adc6d
<div class="container">
<div class="prop-container">
<text class="title">
swiper通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<swiper id="idProp">
</swiper>
<text class="sub-title">
通用属性 -- class
</text>
<swiper id="classProp"
class="classProp">
</swiper>
<swiper id="classPropNone"
class="">
</swiper>
<text class="sub-title">
通用属性 -- style
</text>
<swiper id="styleProp"
style="width:10%;height:20px;background-color:red">
</swiper>
<text class="sub-title">
通用属性 -- ref
</text>
<swiper id="refProp"
ref="refProp">
</swiper>
<swiper id="refPropNone"
ref="">
</swiper>
<text class="sub-title">
通用属性 -- disabled
</text>
<swiper id="disabledPropTrue"
disabled="true">
</swiper>
<swiper id="disabledPropFalse"
disabled="false">
</swiper>
<swiper id="disabledPropNone"
disabled="">
</swiper>
<text class="sub-title">
通用属性 -- focusable
</text>
<swiper id="focusablePropTrue"
focusable="true">
</swiper>
<swiper id="focusablePropFalse"
focusable="false">
</swiper>
<swiper id="focusablePropNone"
focusable="">
</swiper>
<text class="sub-title">
通用属性 -- data-*
</text>
<swiper id="dataProp"
data-swiper="通用属性 -- data-*">
</swiper>
<swiper id="dataPropNone"
data-swiper="">
</swiper>
<text class="sub-title">
通用属性 -- click-effect
</text>
<swiper id="clickEffectPropSmall"
click-effect="spring-small">
</swiper>
<swiper id="clickEffectPropMedium"
click-effect="spring-medium">
</swiper>
<swiper id="clickEffectPropLarge"
click-effect="spring-large">
</swiper>
<swiper id="clickEffectPropNone"
click-effect="">
</swiper>
<text class="sub-title">
通用属性 -- dir
</text>
<swiper id="dirPropRtl"
dir="rtl">
</swiper>
<swiper id="dirPropAuto"
dir="auto">
</swiper>
<swiper id="dirPropLtr"
dir="ltr">
</swiper>
<swiper id="dirPropNone"
dir="">
</swiper>
<text class="sub-title">
渲染属性 -- for
</text>
<swiper id="forPropNull"
for="">
</swiper>
<swiper id="forPropOne"
for="{{listOne}}">
</swiper>
<swiper id="forPropThree"
for="{{listThree}}">
</swiper>
<text class="sub-title">
渲染属性 -- if
</text>
<swiper id="ifPropTrue"
if="true">
</swiper>
<text class="sub-title">
渲染属性 -- show
</text>
<swiper id="showPropTrue"
show="true">
</swiper>
<swiper id="showPropFalse"
show="false">
</swiper>
<swiper id="showPropNone"
show="">
</swiper>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
swiper特有属性
</text>
<text class="sub-title">
特有属性 -- index
</text>
<swiper id="indexProp"
index="0">
</swiper>
<text class="sub-title">
特有属性 -- autoplay
</text>
<swiper id="autoplayPropTrue"
autoplay="true">
</swiper>
<swiper id="autoplayPropFalse"
autoplay="false">
</swiper>
<text class="sub-title">
特有属性 -- interval
</text>
<swiper id="intervalProp"
interval="2000">
</swiper>
<text class="sub-title">
特有属性 -- indicator
</text>
<swiper id="indicatorPropTrue"
indicator="true">
</swiper>
<swiper id="indicatorPropFalse"
indicator="false">
</swiper>
<text class="sub-title">
特有属性 -- digital
</text>
<swiper id="digitalPropTrue"
indicator="true" digital="true">
</swiper>
<swiper id="digitalPropFalse"
indicator="true" digital="false">
</swiper>
<text class="sub-title">
特有属性 -- indicatormask
</text>
<swiper id="indicatorMaskPropTrue"
indicatormask="true">
</swiper>
<swiper id="indicatorMaskPropFalse"
indicatormask="false">
</swiper>
<text class="sub-title">
特有属性 -- indicatordisabled
</text>
<swiper id="indicatorDisabledPropTrue"
indicatordisabled="true">
</swiper>
<swiper id="indicatorDisabledPropFalse"
indicatordisabled="false">
</swiper>
<text class="sub-title">
特有属性 -- loop
</text>
<swiper id="loopPropTrue"
loop="true">
</swiper>
<swiper id="loopPropFalse"
loop="false">
</swiper>
<text class="sub-title">
特有属性 -- duration
</text>
<swiper id="durationProp"
duration="3000">
</swiper>
<text class="sub-title">
特有属性 -- vertical
</text>
<swiper id="verticalPropTrue"
vertical="true">
</swiper>
<swiper id="verticalPropFalse"
vertical="false">
</swiper>
<text class="sub-title">
特有属性 -- cachedsize
</text>
<swiper id="cachedSizeProp"
cachedsize="-1">
</swiper>
<text class="sub-title">
特有属性 -- scrolleffect
</text>
<swiper id="scrollEffectPropFade"
scrolleffect="fade">
</swiper>
<swiper id="scrollEffectPropSpring"
scrolleffect="spring">
</swiper>
<text class="sub-title">
特有属性 -- displaymode
</text>
<swiper id="displayModePropStretch"
displaymode="stretch">
</swiper>
<swiper id="displayModePropAutoLinear"
displaymode="autoLinear">
</swiper>
</div>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/swiper/prop/index.js 0 → 100644
浏览文件 @ 265adc6d
/**
* 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,
indexProp: null,
autoplayPropTrue: null,
autoplayPropFalse: null,
intervalProp: null,
indicatorPropTrue: null,
indicatorPropFalse: null,
digitalPropFalse: null,
indicatorMaskPropTrue: null,
indicatorMaskPropFalse: null,
indicatorDisabledPropTrue: null,
indicatorDisabledPropFalse: null,
loopPropTrue: null,
loopPropFalse: null,
durationProp: null,
verticalPropTrue: null,
verticalPropFalse: null,
cachedSizeProp: null,
scrollEffectPropFade: null,
scrollEffectPropSpring: null,
displayModePropStretch: null,
displayModePropAutoLinear: null,
},
onShow(){
this.getCommonPropValues();
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,
indexProp: this.indexProp,
autoplayPropTrue: this.autoplayPropTrue,
autoplayPropFalse: this.autoplayPropFalse,
intervalProp: this.intervalProp,
indicatorPropTrue: this.indicatorPropTrue,
indicatorPropFalse: this.indicatorPropFalse,
digitalPropFalse: this.digitalPropFalse,
indicatorMaskPropTrue: this.indicatorMaskPropTrue,
indicatorMaskPropFalse: this.indicatorMaskPropFalse,
indicatorDisabledPropTrue: this.indicatorDisabledPropTrue,
indicatorDisabledPropFalse: this.indicatorDisabledPropFalse,
loopPropTrue: this.loopPropTrue,
loopPropFalse: this.loopPropFalse,
durationProp: this.durationProp,
verticalPropTrue: this.verticalPropTrue,
verticalPropFalse: this.verticalPropFalse,
cachedSizeProp: this.cachedSizeProp,
scrollEffectPropFade: this.scrollEffectPropFade,
scrollEffectPropSpring: this.scrollEffectPropSpring,
displayModePropStretch: this.displayModePropStretch,
displayModePropAutoLinear: this.displayModePropAutoLinear,
}
},
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()
// 特有属性
this.indexProp = this.$element("showPropNone").getInspector()
this.autoplayPropTrue = this.$element("autoplayPropTrue").getInspector()
this.autoplayPropFalse = this.$element("autoplayPropFalse").getInspector()
this.intervalProp = this.$element("intervalProp").getInspector()
this.indicatorPropTrue = this.$element("indicatorPropTrue").getInspector()
this.indicatorPropFalse = this.$element("indicatorPropFalse").getInspector()
this.digitalPropFalse = this.$element("digitalPropFalse").getInspector()
this.indicatorMaskPropTrue = this.$element("indicatorMaskPropTrue").getInspector()
this.indicatorMaskPropFalse = this.$element("indicatorMaskPropFalse").getInspector()
this.indicatorDisabledPropTrue = this.$element("indicatorDisabledPropTrue").getInspector()
this.indicatorDisabledPropFalse = this.$element("indicatorDisabledPropFalse").getInspector()
this.loopPropTrue = this.$element("loopPropTrue").getInspector()
this.loopPropFalse = this.$element("loopPropFalse").getInspector()
this.durationProp = this.$element("durationProp").getInspector()
this.verticalPropTrue = this.$element("verticalPropTrue").getInspector()
this.verticalPropFalse = this.$element("verticalPropFalse").getInspector()
this.cachedSizeProp = this.$element("cachedSizeProp").getInspector()
this.scrollEffectPropFade = this.$element("scrollEffectPropFade").getInspector()
this.scrollEffectPropSpring = this.$element("scrollEffectPropSpring").getInspector()
this.displayModePropStretch = this.$element("displayModePropStretch").getInspector()
this.displayModePropAutoLinear = this.$element("displayModePropAutoLinear").getInspector()
},
}
ace/ace_standard/src/main/js/default/pages/swiper/style/index.css 0 → 100644
浏览文件 @ 265adc6d
/**
* 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: 3px;
margin-bottom: 0.5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dotted;
border-bottom-style: solid;
border-left-width: 1px;
border-right-width: 1.5px;
border-top-width: 2px;
border-bottom-width: 0.5px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 15px;
border-top-left-radius: 10px;
border-top-right-radius: 0px;
opacity: 0.5;
align-self:flex-end;
}
#styleTwo{
width: 150px;
height: 20px;
padding-start: 1px;
padding-end: 2px;
margin-start: 1px;
margin-end: 2px;
border-style: dotted;
border-width: 2px;
border-color:#0f00f0;
border-radius:5px;
opacity: 1.5;
align-self:flex-start;
}
#styleThree{
width: 50px;
height: 20px;
padding: 2px;
margin:1px;
border-left: 1px solid #ff0000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
opacity: 1;
align-self:baseline;
}
#styleFour{
width: 50px;
height: 20px;
align-self:center;
border: 2px solid #00ff00;
}
#styleFive{
width: 150px;
height: 40px;
border: 5px;
border-image-source: url('/common/images/image.png');
border-image-slice: 5px 10px 10px 5px;
border-image-width: 10px 5px 5px 10px;
border-image-outset: 10px 5px 10px 5px;
border-image-repeat: repeat;
}
#styleSix{
width: 100%;
height: 2%;
background-color: #ff0000;
padding-top: 1%;
padding-left: 2%;
padding-right: 3%;
padding-bottom: 0.5%;
margin-left: 1%;
margin-top: 2%;
margin-right: 1.5%;
margin-bottom: 0.5%;
}
#styleSeven{
width: 70%;
height: 1%;
padding-start: 1%;
padding-end: 2%;
margin-start: 1%;
margin-end: 2%;
background-color: #00ff00;
}
#styleEight{
width: 60%;
height: 1%;
margin: 1%;
padding: 2%;
background-color: #0000ff;
}
#styleNine{
width: 100%;
height: 40px;
display:flex;
}
#styleFive{
width: 100%;
height: 40px;
border: 5px;
border-image-source: url('/common/images/image.png');
border-image-slice: 5px 10px 10px 5px;
border-image-width: 10px 5px 5px 10px;
border-image-outset: 10px 5px 10px 5px;
border-image-repeat: repeat;
}
#styleTen{
width: 100%;
height: 400%;
display: none;
background-color: #ff0000;
}
#styleEleven{
height: 40%;
background-color: #00ff00;
flex:1 1 20px;
z-index:10;
}
#styleTwelve{
height: 50%;
background-color: #ff00ff;
flex-grow:2;
flex-shrink: 3;
flex-basis: 30px;
z-index:13;
}
#styleThirteen{
position: absolute;
left: 10px;
top: 20px;
width: 10px;
height: 10px;
background-color: #00ff00;
z-index:12;
}
#styleFourteen{
position: absolute;
right: 10px;
bottom: 20px;
width: 10px;
height: 10px;
background-color: #0000ff;
z-index:3;
}
#styleFifteen{
position: absolute;
left: 10%;
top: 20%;
width: 10px;
height: 10px;
background-color: #fff000;
z-index:5;
}
#styleSixteen{
position: absolute;
right: 10%;
bottom: 20%;
width: 10px;
height: 10px;
background-color: #00ffff;
z-index:15;
}
#styleSeventeen{
position: absolute;
start: 50px;
width: 10px;
height: 10px;
background-color: #ffff00;
z-index:7;
}
#styleEighteen{
position: absolute;
end: 20px;
width: 10px;
height: 10px;
background-color: #00ffff;
z-index:4;
}
#styleNineteen{
position: absolute;
start: 20%;
width: 10px;
height: 10px;
background-color: #ffff00;
z-index:1;
}
#styleTwenty{
position: absolute;
end: 20%;
width: 10px;
height: 10px;
background-color: #00ffff;
z-index:17;
}
#styleTwentyOne{
height: 20px;
box-shadow: 2px 4px;
flex-weight: 1;
margin:5px;
}
#styleTwentyTwo{
flex-weight: 1;
height: 20px;
box-shadow: 2px 4px 6px 8px;
margin:5px;
}
#styleTwentyThree{
flex-weight: 1;
height: 20px;
box-shadow: 1px 2px 3px 4px #ff0000;
margin:5px;
}
#styleTwentyFour{
width: 150px;
height: 20px;
background-color: #00ffff;
clip-path:inset(2 23);
visibility: visible;
}
#styleTwentyFive{
width: 150px;
height: 20px;
background-color: #00ffff;
visibility: hidden;
}
#styleTwentySix{
width: 150px;
height: 20px;
background-color: #999999;
}
#styleTwentySeven{
width: 150px;
height: 20px;
background: linear-gradient(pink,#fff000);
}
#styleTwentyNine{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:contain;
background-repeat: repeat-x;
background-position: center;
}
#styleThirty{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:50px 10px;
background-repeat: no-repeat;
background-position: 10px 10px;
}
#styleThirtyOne{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:10% 20%;
background-repeat: repeat;
background-position: 30% 40%;
}
#styleThirtyTwo{
width: 150px;
height: 20px;
background: linear-gradient(pink,#fff000);
clip-path: margin-box;
image-fill: #000fff;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/swiper/style/index.hml 0 → 100644
浏览文件 @ 265adc6d
<!--/**
* 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">
div通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<div id="styleOne">
</div>
<div id="styleTwo">
</div>
<div id="styleThree">
</div>
<div id="styleFour">
</div>
<div id="styleFive">
</div>
<div id="styleSix">
</div>
<div id="styleSeven">
</div>
<div id="styleEight">
</div>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<div id="styleNine">
<div id="styleTen">
</div>
<div id="styleEleven">
</div>
<div id="styleTwelve">
</div>
<div id="styleThirteen">
</div>
<div id="styleFourteen">
</div>
<div id="styleFifteen">
</div>
<div id="styleSixteen">
</div>
<div id="styleSeventeen">
</div>
<div id="styleEighteen">
</div>
<div id="styleNineteen">
</div>
<div id="styleTwenty">
</div>
</div>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<div id="styleTwentyOne">
</div>
<div id="styleTwentyTwo">
</div>
<div id="styleTwentyThree">
</div>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<div id="styleTwentyFour">
</div>
<div id="styleTwentyFive">
</div>
<text class="sub-title">
通用样式26-31 background
</text>
<div id="styleTwentySix">
</div>
<div id="styleTwentySeven">
</div>
<div id="styleTwentyNine">
</div>
<div id="styleThirty">
</div>
<div id="styleThirtyOne">
</div>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<div id="styleThirtyTwo">
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/swiper/style/index.js 0 → 100644
浏览文件 @ 265adc6d
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data:{
styleOne : null,
styleTwo : null,
styleThree : null,
styleFour : null,
styleFive : null,
styleSix : null,
styleSeven : null,
styleEight : null,
styleNine : null,
styleTen : null,
styleEleven : null,
styleTwelve : null,
styleThirteen : null,
styleFourteen : null,
styleFifteen : null,
styleSixteen : null,
styleSeventeen : null,
styleEighteen : null,
styleNineteen : null,
styleTwenty : null,
styleTwentyOne : null,
styleTwentyTwo : null,
styleTwentyThree : null,
styleTwentyFour : null,
styleTwentyFive : null,
styleTwentySix : null,
styleTwentySeven : null,
styleTwentyNine : null,
styleThirty : null,
styleThirtyOne : null,
styleThirtyTwo : null
},
onShow(){
this.getCommonStyleValues();
globalThis.value = {
styleOne : this.styleOne,
styleTwo : this.styleTwo,
styleThree : this.styleThree,
styleFour : this.styleFour,
styleFive : this.styleFive,
styleSix : this.styleSix,
styleSeven : this.styleSeven,
styleEight : this.styleEight,
styleNine : this.styleNine,
styleTen : this.styleTen,
styleEleven : this.styleEleven,
styleTwelve : this.styleTwelve,
styleThirteen : this.styleThirteen,
styleFourteen : this.styleFourteen,
styleFifteen : this.styleFifteen,
styleSixteen : this.styleSixteen,
styleSeventeen : this.styleSeventeen,
styleEighteen : this.styleEighteen,
styleNineteen : this.styleNineteen,
styleTwenty : this.styleTwenty,
styleTwentyOne : this.styleTwentyOne,
styleTwentyTwo : this.styleTwentyTwo,
styleTwentyThree : this.styleTwentyThree,
styleTwentyFour : this.styleTwentyFour,
styleTwentyFive : this.styleTwentyFive,
styleTwentySix : this.styleTwentySix,
styleThirty : this.styleThirty,
styleThirtyOne : this.styleThirtyOne,
styleThirtyTwo : this.styleThirtyTwo
}
},
getCommonStyleValues(){
this.styleOne = this.$element("styleOne").getInspector()
this.styleTwo = this.$element("styleTwo").getInspector()
this.styleThree = this.$element("styleThree").getInspector()
this.styleFour = this.$element("styleFour").getInspector()
this.styleFive = this.$element("styleFive").getInspector()
this.styleSix = this.$element("styleSix").getInspector()
this.styleSeven = this.$element("styleSeven").getInspector()
this.styleEight = this.$element("styleEight").getInspector()
this.styleNine = this.$element("styleNine").getInspector()
this.styleTen = this.$element("styleTen").getInspector()
this.styleEleven = this.$element("styleEleven").getInspector()
this.styleTwelve = this.$element("styleTwelve").getInspector()
this.styleThirteen = this.$element("styleThirteen").getInspector()
this.styleFourteen = this.$element("styleFourteen").getInspector()
this.styleFifteen = this.$element("styleFifteen").getInspector()
this.styleSixteen = this.$element("styleSixteen").getInspector()
this.styleSeventeen = this.$element("styleSeventeen").getInspector()
this.styleEighteen = this.$element("styleEighteen").getInspector()
this.styleNineteen = this.$element("styleNineteen").getInspector()
this.styleTwenty = this.$element("styleTwenty").getInspector()
this.styleTwentyOne = this.$element("styleTwentyOne").getInspector()
this.styleTwentyTwo = this.$element("styleTwentyTwo").getInspector()
this.styleTwentyThree = this.$element("styleTwentyThree").getInspector()
this.styleTwentyFour = this.$element("styleTwentyFour").getInspector()
this.styleTwentyFive = this.$element("styleTwentyFive").getInspector()
this.styleTwentySix = this.$element("styleTwentySix").getInspector()
this.styleThirty = this.$element("styleThirty").getInspector()
this.styleThirtyOne = this.$element("styleThirtyOne").getInspector()
this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector()
},
}
ace/ace_standard/src/main/js/default/pages/text/index.css 已删除 100644 → 0
浏览文件 @ 533ef75f
/**
* 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.
*/
/* xxx.css */
.container {
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
justify-content: center;
}
.text1 {
word-spacing: 10px;
adapt-height: true;
}
.text2 {
width: 200px;
max-lines: 1;
text-overflow: ellipsis;
text-valign: middle;
line-height: 40px;
text-decoration: underline;
text-decoration-color: red;
text-indent: 20px;
white-space: pre;
}
.common {
color: #ff4400;
text-decoration: line-through;
}
ace/ace_standard/src/main/js/default/pages/text/prop/index.hml 0 → 100644
浏览文件 @ 265adc6d
<div class="container">
<div class="prop-container">
<text class="title">
text通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<text id="idProp">
</text>
<text class="sub-title">
通用属性 -- class
</text>
<text id="classProp"
class="classProp">
</text>
<text id="classPropNone"
class="">
</text>
<text class="sub-title">
通用属性 -- style
</text>
<text id="styleProp"
style="width:10%;height:20px;background-color:red">
</text>
<text class="sub-title">
通用属性 -- ref
</text>
<text id="refProp"
ref="refProp">
</text>
<text id="refPropNone"
ref="">
</text>
<text class="sub-title">
通用属性 -- disabled
</text>
<text id="disabledPropTrue"
disabled="true">
</text>
<text id="disabledPropFalse"
disabled="false">
</text>
<text id="disabledPropNone"
disabled="">
</text>
<text class="sub-title">
通用属性 -- focusable
</text>
<text id="focusablePropTrue"
focusable="true">
</text>
<text id="focusablePropFalse"
focusable="false">
</text>
<text id="focusablePropNone"
focusable="">
</text>
<text class="sub-title">
通用属性 -- data-*
</text>
<text id="dataProp"
data-text="通用属性 -- data-*">
</text>
<text id="dataPropNone"
data-text="">
</text>
<text class="sub-title">
通用属性 -- click-effect
</text>
<text id="clickEffectPropSmall"
click-effect="spring-small">
</text>
<text id="clickEffectPropMedium"
click-effect="spring-medium">
</text>
<text id="clickEffectPropLarge"
click-effect="spring-large">
</text>
<text id="clickEffectPropNone"
click-effect="">
</text>
<text class="sub-title">
通用属性 -- dir
</text>
<text id="dirPropRtl"
dir="rtl">
</text>
<text id="dirPropAuto"
dir="auto">
</text>
<text id="dirPropLtr"
dir="ltr">
</text>
<text id="dirPropNone"
dir="">
</text>
<text class="sub-title">
渲染属性 -- for
</text>
<text id="forPropNull"
for="">
</text>
<text id="forPropOne"
for="{{listOne}}">
</text>
<text id="forPropThree"
for="{{listThree}}">
</text>
<text class="sub-title">
渲染属性 -- if
</text>
<text id="ifPropTrue"
if="true">
</text>
<text class="sub-title">
渲染属性 -- show
</text>
<text id="showPropTrue"
show="true">
</text>
<text id="showPropFalse"
show="false">
</text>
<text id="showPropNone"
show="">
</text>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
div特有属性
</text>
</div>
</div>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或