Skip to content

X
Xts Acts

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

通知 9
Star 22
Fork 0
X
Xts Acts
提交 0ca07819 编写于 作者: B bayanxing
浏览文件
操作

add attribute testcase 

Signed-off-by: Nbayanxing <bayanxing@kaihongdigi.com>
上级 db1a6f5b
展开全部 隐藏空白更改
内联 并排
Showing with 18164 addition and 1735 deletion
ace/ace_standard/src/main/config.json
浏览文件 @ 0ca07819
......@@ -84,12 +84,18 @@
"pages/qrcode/index",
"pages/select/index",
"pages/div/router/index",
"pages/badge/index",
"pages/dialog/index",
"pages/form/index",
"pages/list/index",
"pages/listItem/index",
"pages/listItemGroup/index",
"pages/badge/router/index",
"pages/badge/prop/index",
"pages/dialog/router/index",
"pages/dialog/prop/index",
"pages/form/router/index",
"pages/form/prop/index",
"pages/list/router/index",
"pages/list/prop/index",
"pages/listItem/router/index",
"pages/listItem/prop/index",
"pages/listItemGroup/router/index",
"pages/listItemGroup/prop/index",
"pages/marquee/index",
"pages/imageAnimator/index",
"pages/panel/router/index",
......@@ -100,7 +106,10 @@
"pages/refresh/prop/index",
"pages/stack/router/index",
"pages/stack/prop/index",
"pages/stepper/index",
"pages/stepper/router/index",
"pages/stepper/prop/index",
"pages/stepperItem/router/index",
"pages/stepperItem/prop/index",
"pages/swiper/router/index",
"pages/swiper/prop/index",
"pages/tabs/router/index",
......
ace/ace_standard/src/main/js/default/pages/badge/prop/index.css 0 → 100644
浏览文件 @ 0ca07819
/**
* 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;
}
#placementRight{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#placementRightTop{
flex-weight: 1;
background-color:red;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#placementLeft{
flex-weight: 1;
background-color:salmon;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#placementNone{
flex-weight: 1;
background-color:saddlebrown;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#count{
flex-weight: 1;
background-color:#000000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#visibleTrue{
flex-weight: 1;
background-color:#000000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#visibleFalse{
flex-weight: 1;
background-color:#f1f1f1;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#visibleNone{
flex-weight: 1;
background-color:hotpink;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#maxcount{
flex-weight: 1;
background-color:#212121;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#maxcountNone{
flex-weight: 1;
background-color:skyblue;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#config{
flex-weight: 1;
background-color:antiquewhite;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#configNone{
flex-weight: 1;
background-color:saddlebrown;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#label{
flex-weight: 1;
background-color:skyblue;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#labelNone{
flex-weight: 1;
background-color:navy;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
ace/ace_standard/src/main/js/default/pages/badge/prop/index.hml 0 → 100644
浏览文件 @ 0ca07819
<!--/**
* 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">
badge通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<badge id="idProp">
</badge>
<text class="sub-title">
通用属性 -- class
</text>
<badge id="classProp"
class="classProp">
</badge>
<badge id="classPropNone"
class="">
</badge>
<text class="sub-title">
通用属性 -- style
</text>
<badge id="styleProp"
style="width:10%;height:20px;background-color:red">
</badge>
<text class="sub-title">
通用属性 -- ref
</text>
<badge id="refProp"
ref="refProp">
</badge>
<badge id="refPropNone"
ref="">
</badge>
<text class="sub-title">
通用属性 -- disabled
</text>
<badge id="disabledPropTrue"
disabled="true">
</badge>
<badge id="disabledPropFalse"
disabled="false">
</badge>
<badge id="disabledPropNone"
disabled="">
</badge>
<text class="sub-title">
通用属性 -- focusable
</text>
<badge id="focusablePropTrue"
focusable="true">
</badge>
<badge id="focusablePropFalse"
focusable="false">
</badge>
<badge id="focusablePropNone"
focusable="">
</badge>
<text class="sub-title">
通用属性 -- data-*
</text>
<badge id="dataProp"
data-badge="通用属性 -- data-*">
</badge>
<badge id="dataPropNone"
data-badge="">
</badge>
<text class="sub-title">
通用属性 -- click-effect
</text>
<badge id="clickEffectPropSmall"
click-effect="spring-small">
</badge>
<badge id="clickEffectPropMedium"
click-effect="spring-medium">
</badge>
<badge id="clickEffectPropLarge"
click-effect="spring-large">
</badge>
<badge id="clickEffectPropNone"
click-effect="">
</badge>
<text class="sub-title">
通用属性 -- dir
</text>
<badge id="dirPropRtl"
dir="rtl">
</badge>
<badge id="dirPropAuto"
dir="auto">
</badge>
<badge id="dirPropLtr"
dir="ltr">
</badge>
<badge id="dirPropNone"
dir="">
</badge>
<text class="sub-title">
渲染属性 -- for
</text>
<badge id="forPropNull"
for="">
</badge>
<badge id="forPropOne"
for="{{listOne}}">
</badge>
<badge id="forPropThree"
for="{{listThree}}">
</badge>
<text class="sub-title">
渲染属性 -- if
</text>
<badge id="ifPropTrue"
if="true">
</badge>
<text class="sub-title">
渲染属性 -- show
</text>
<badge id="showPropTrue"
show="true">
</badge>
<badge id="showPropFalse"
show="false">
</badge>
<badge id="showPropNone"
show="">
</badge>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
bagde特有属性
</text>
<text class="sub-title">
特有属性 -- placement
</text>
<badge id="placementRight" placement="right">
</badge>
<badge id="placementRightTop" placement="rightTop">
</badge>
<badge id="placementLeft" placement="left">
</badge>
<badge id="placementNone" placement="">
</badge>
<text class="sub-title">
特有属性 -- count
</text>
<badge id="count" count="10">
</badge>
<text class="sub-title">
特有属性 -- visible
</text>
<badge id="visibleTrue" visible="true">
</badge>
<badge id="visibleFalse" visible="false">
</badge>
<badge id="visibleNone" visible="">
</badge>
<text class="sub-title">
特有属性 -- maxcount
</text>
<badge id="maxcount" maxcount="100">
</badge>
<badge id="maxcountNone" maxcount="">
</badge>
<text class="sub-title">
特有属性 -- config
</text>
<badge id="config" config="{{badgeconfig}}">
</badge>
<badge id="configNone" config="">
</badge>
<text class="sub-title">
特有属性 -- label
</text>
<badge id="label" label="哈哈">
</badge>
<badge id="labelNone" label="">
</badge>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/badge/prop/index.js 0 → 100644
浏览文件 @ 0ca07819
/**
* 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,
ifPropFalse : null,
ifPropNone : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : null,
badgeconfig:{
badgeColor:"#0a59f7",
textColor:"#ffffff",
}
},
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
}
},
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()
},
}
ace/ace_standard/src/main/js/default/pages/badge/style/index.css 0 → 100644
浏览文件 @ 0ca07819
/**
* 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;
}
ace/ace_standard/src/main/js/default/pages/badge/style/index.hml 0 → 100644
浏览文件 @ 0ca07819
<!--/**
* 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">
badge通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<badge id="styleOne">
</badge>
<badge id="styleTwo">
</badge>
<badge id="styleThree">
</badge>
<badge id="styleFour">
</badge>
<badge id="styleFive">
</badge>
<badge id="styleSix">
</badge>
<badge id="styleSeven">
</badge>
<badge id="styleEight">
</badge>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<div id="styleNine">
<badge id="styleTen">
</badge>
<badge id="styleEleven">
</badge>
<badge id="styleTwelve">
</badge>
<badge id="styleThirteen">
</badge>
<badge id="styleFourteen">
</badge>
<badge id="styleFifteen">
</badge>
<badge id="styleSixteen">
</badge>
<badge id="styleSeventeen">
</badge>
<badge id="styleEighteen">
</badge>
<badge id="styleNineteen">
</badge>
<badge id="styleTwenty">
</badge>
</div>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<badge id="styleTwentyOne">
</badge>
<badge id="styleTwentyTwo">
</badge>
<badge id="styleTwentyThree">
</badge>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<badge id="styleTwentyFour">
</badge>
<badge id="styleTwentyFive">
</badge>
<text class="sub-title">
通用样式26-31 background
</text>
<badge id="styleTwentySix">
</badge>
<badge id="styleTwentySeven">
</badge>
<badge id="styleTwentyNine">
</badge>
<badge id="styleThirty">
</badge>
<badge id="styleThirtyOne">
</badge>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<badge id="styleThirtyTwo">
</badge>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/badge/style/index.js 0 → 100644
浏览文件 @ 0ca07819
/**
* 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/dialog/index.css 已删除 100644 → 0
浏览文件 @ db1a6f5b
.doc-page {
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.btn-div {
width: 100%;
height: 200px;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 10px;
}
.btn {
background-color: brown;
margin: 10px;
}
.txt {
font-weight: bold;
font-size: 39px;
}
.dialog-main {
width: 500px;
height: 300px;
margin: 30px;
}
.dialog-div {
flex-direction: column;
align-items: center;
}
.inner-txt {
width: 400px;
height: 160px;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.inner-btn {
width: 400px;
height: 120px;
justify-content: space-around;
align-items: center;
}
.btn-txt {
background-color: brown;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/dialog/index.hml 已删除 100644 → 0
浏览文件 @ db1a6f5b
<div class="doc-page">
<div class="btn-div">
<button type="capsule" value="Click show 样式" class="btn" onclick="showDialog1"></button>
<button type="capsule" value="Click show 通用属性1" class="btn" onclick="showDialog2"></button>
<button type="capsule" value="Click show 通用属性2" class="btn" onclick="showDialog3"></button>
<button type="capsule" value="Click show 特有属性" class="btn" onclick="showDialog4"></button>
<button type="capsule" value="Click show 无障碍dialog" class="btn" onclick="showDialog5"></button>
</div>
<dialog id="simpleDialog1" dragable="true" class="dialog-main" oncancel="cancelDialog">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">Simple dialog</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
<dialog id="simpleDialog2" dragable="false" class="dialog-main" oncancel="cancelDialog"
focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl"
style="width: 100%; height: 300px;">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">dialog通用属性1</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
<dialog id="simpleDialog3" dragable="false" class="dialog-main" oncancel="cancelDialog"
ref ="prop2"
focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr"
style="width: 100%; height: 300px;">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">dialog通用属性2</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
<dialog id="simpleDialog4" dragable="true" class="dialog-main" oncancel="cancelDialog">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">dialog特有属性</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
<dialog id="simpleDialog5" dragable="true" class="dialog-main" oncancel="cancelDialog"
accessibilitygroup ="true"
accessibilitytext="这是dialog"
accessibilitydescription="此处是dialog"
accessibilityimportance="no-hide-descendants">
<div class="dialog-div">
<div class="inner-txt">
<text class="txt" ondoubleclick="doubleClick">dialog无障碍</text>
</div>
<div class="inner-btn">
<button type="capsule" value="Cancel" onclick="cancelSchedule" class="btn-txt"></button>
<button type="capsule" value="Confirm" onclick="setSchedule" class="btn-txt"></button>
</div>
</div>
</dialog>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/dialog/prop/index.css 0 → 100644
浏览文件 @ 0ca07819
/**
* 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:red;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
.classProp {
flex-weight: 1;
background-color:#0f0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#classPropNone {
flex-weight: 1;
background-color:#0000e0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#refProp {
flex-weight: 1;
background-color:#00f000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#refPropNone {
flex-weight: 1;
background-color:#00000e;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#disabledPropTrue {
flex-weight: 1;
background-color:#000f00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#disabledPropFalse {
flex-weight: 1;
background-color:#0000f0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#disabledPropNone {
flex-weight: 1;
background-color:#d00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#focusablePropTrue {
flex-weight: 1;
background-color:#00000f;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#focusablePropFalse {
flex-weight: 1;
background-color:#ff0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#focusablePropNone {
flex-weight: 1;
background-color:#0d0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#dataProp {
flex-weight: 1;
background-color:#0ff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#dataPropNone {
flex-weight: 1;
background-color:#00d000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#clickEffectPropSmall {
height: 100px;
background-color:#00ff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropMedium {
height: 100px;
background-color:#000ff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropLarge {
height: 100px;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropNone{
height: 100px;
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;
height: 100px;
}
#dirPropAuto {
flex-weight: 1;
background-color:#00fff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#dirPropLtr {
flex-weight: 1;
background-color:#000fff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#dirPropNone {
flex-weight: 1;
background-color:#0000d0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#forPropNull {
flex-weight: 1;
background-color:#ffff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#forPropOne {
flex-weight: 1;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#forPropThree {
flex-weight: 1;
background-color:#000e00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#ifPropTrue {
flex-weight: 1;
background-color:#0ffff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#ifPropFalse {
flex-weight: 1;
background-color:#00ffff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#ifPropNone {
flex-weight: 1;
background-color:#00000d;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#showPropTrue {
flex-weight: 1;
background-color:#e00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#showPropFalse {
flex-weight: 1;
background-color:#0e0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#showPropNone {
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
#dragableNone{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#dragableTrue{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
#dragableFalse{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
height: 100px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/dialog/prop/index.hml 0 → 100644
浏览文件 @ 0ca07819
<!--/**
* 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">
dialog通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<dialog id="idProp">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="openidProp">
</button>
<text class="sub-title">
通用属性 -- class
</text>
<button style="background-color: red;width:90%;" @click="openclassProp">
</button>
<button style="background-color: darkblue;width:90%;" @click="openclassPropNone">
</button>
<dialog id="classProp"
class="classProp">
</dialog>
<dialog id="classPropNone"
class="">
</dialog>
<text class="sub-title">
通用属性 -- style
</text>
<button style="background-color: saddlebrown;width:90%;" @click="openstyleProp">
</button>
<dialog id="styleProp"
style="width:10%;height:20px;background-color:red">
</dialog>
<text class="sub-title">
通用属性 -- ref
</text>
<button style="background-color: saddlebrown;width:90%;" @click="openrefProp">
</button>
<button style="background-color: hotpink;width:90%;" @click="openrefPropNone">
</button>
<dialog id="refProp"
ref="refProp">
</dialog>
<dialog id="refPropNone"
ref="">
</dialog>
<text class="sub-title">
通用属性 -- disabled
</text>
<button style="background-color: saddlebrown;width:90%;" @click="opendisabledPropTrue">
</button>
<button style="background-color: hotpink;width:90%;" @click="opendisabledPropFalse">
</button>
<button style="background-color: darkolivegreen;width:90%;" @click="opendisabledPropNone">
</button>
<dialog id="disabledPropTrue"
disabled="true">
</dialog>
<dialog id="disabledPropFalse"
disabled="false">
</dialog>
<dialog id="disabledPropNone"
disabled="">
</dialog>
<text class="sub-title">
通用属性 -- focusable
</text>
<button style="background-color: gainsboro;width:90%;" @click="openfocusablePropTrue">
</button>
<button style="background-color: navy;width:90%;" @click="openfocusablePropFalse">
</button>
<button style="background-color: darkolivegreen;width:90%;" @click="openfocusablePropNone">
</button>
<dialog id="focusablePropTrue"
focusable="true">
</dialog>
<dialog id="focusablePropFalse"
focusable="false">
</dialog>
<dialog id="focusablePropNone"
focusable="">
</dialog>
<text class="sub-title">
通用属性 -- data-*
</text>
<button style="background-color: bisque;width:90%;" @click="opendataProp">
</button>
<button style="background-color: saddlebrown;width:90%;" @click="opendataPropNone">
</button>
<dialog id="dataProp"
data-dialog="通用属性 -- data-*">
</dialog>
<dialog id="dataPropNone"
data-dialog="">
</dialog>
<text class="sub-title">
通用属性 -- click-effect
</text>
<button style="background-color: gainsboro;width:90%;" @click="openclickEffectPropSmall">
</button>
<button style="background-color: navy;width:90%;" @click="openclickEffectPropMedium">
</button>
<button style="background-color: darkolivegreen;width:90%;" @click="openclickEffectPropLarge">
</button>
<button style="background-color: skyblue;width:90%;" @click="openclickEffectPropNone">
</button>
<dialog id="clickEffectPropSmall"
click-effect="spring-small">
</dialog>
<dialog id="clickEffectPropMedium"
click-effect="spring-medium">
</dialog>
<dialog id="clickEffectPropLarge"
click-effect="spring-large">
</dialog>
<dialog id="clickEffectPropNone"
click-effect="">
</dialog>
<text class="sub-title">
通用属性 -- dir
</text>
<button style="background-color: gainsboro;width:90%;" @click="opendirPropRtl">
</button>
<button style="background-color: navy;width:90%;" @click="opendirPropAuto">
</button>
<button style="background-color: darkolivegreen;width:90%;" @click="opendirPropLtr">
</button>
<button style="background-color: skyblue;width:90%;" @click="opendirPropNone">
</button>
<dialog id="dirPropRtl"
dir="rtl">
</dialog>
<dialog id="dirPropAuto"
dir="auto">
</dialog>
<dialog id="dirPropLtr"
dir="ltr">
</dialog>
<dialog id="dirPropNone"
dir="">
</dialog>
<text class="sub-title">
渲染属性 -- for
</text>
<button style="background-color: gainsboro;width:90%;" @click="openforPropNull">
</button>
<button style="background-color: navy;width:90%;" @click="openforPropOne">
</button>
<button style="background-color: darkolivegreen;width:90%;" @click="openforPropThree">
</button>
<dialog id="forPropNull"
for="">
</dialog>
<dialog id="forPropOne"
for="{{listOne}}">
</dialog>
<dialog id="forPropThree"
for="{{listThree}}">
</dialog>
<text class="sub-title">
渲染属性 -- if
</text>
<button style="background-color: gainsboro;width:90%;" @click="openifPropTrue">
</button>
<dialog id="ifPropTrue"
if="true">
</dialog>
<text class="sub-title">
渲染属性 -- show
</text>
<button style="background-color: gainsboro;width:90%;" @click="openshowPropTrue">
</button>
<button style="background-color: skyblue;width:90%;" @click="openshowPropFalse">
</button>
<button style="background-color: darkolivegreen;width:90%;" @click="openshowPropNone">
</button>
<dialog id="showPropTrue"
show="true">
</dialog>
<dialog id="showPropFalse"
show="false">
</dialog>
<dialog id="showPropNone"
show="">
</dialog>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
dialog特有属性
</text>
<text class="sub-title">
特有属性 -- dragable
</text>
<button style="background-color: skyblue;width:90%;margin-bottom: 10px;" @click="opendragableNone">
</button>
<button style="background-color: saddlebrown;width:90%; margin-bottom: 10px;" @click="opendragableTrue">
</button>
<button style="background-color: gainsboro;width:90%;" @click="opendragableFalse">
</button>
<dialog id="dragableNone"
dragable=''>
</dialog>
<dialog id="dragableTrue"
dragable='true'>
</dialog>
<dialog id="dragableFalse"
dragable='false'>
</dialog>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/dialog/prop/index.js 0 → 100644
浏览文件 @ 0ca07819
/**
* 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,
ifPropFalse : null,
ifPropNone : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : null
},
openidProp(){
this.$element('idProp').show()
},
openclassProp(){
this.$element('classProp').show()
},
openclassPropNone(){
this.$element('classPropNone').show()
},
openstyleProp(){
this.$element('styleProp').show()
},
openrefProp(){
this.$element('refProp').show()
},
openrefPropNone(){
this.$element('refPropNone').show()
},
opendisabledPropTrue(){
this.$element('disabledPropTrue').show()
},
opendisabledPropFalse(){
this.$element('disabledPropFalse').show()
},
opendisabledPropNone(){
this.$element('disabledPropNone').show()
},
openfocusablePropTrue(){
this.$element('focusablePropTrue').show()
},
openfocusablePropFalse(){
this.$element('focusablePropFalse').show()
},
openfocusablePropNone(){
this.$element('focusablePropNone').show()
},
opendataProp(){
this.$element('dataProp').show()
},
opendataPropNone(){
this.$element('dataPropNone').show()
},
openclickEffectPropSmall(){
this.$element('clickEffectPropSmall').show()
},
openclickEffectPropMedium(){
this.$element('clickEffectPropMedium').show()
},
openclickEffectPropLarge(){
this.$element('clickEffectPropLarge').show()
},
openclickEffectPropNone(){
this.$element('clickEffectPropNone').show()
},
opendirPropRtl(){
this.$element('dirPropRtl').show()
},
opendirPropAuto(){
this.$element('dirPropAuto').show()
},
opendirPropLtr(){
this.$element('dirPropLtr').show()
},
opendirPropNone(){
this.$element('dirPropNone').show()
},
openforPropNull(){
this.$element('forPropNull').show()
},
openforPropOne(){
this.$element('forPropOne').show()
},
openforPropThree(){
this.$element('forPropThree').show()
},
openifPropTrue(){
this.$element('ifPropTrue').show()
},
openshowPropTrue(){
this.$element('showPropTrue').show()
},
openshowPropFalse(){
this.$element('showPropFalse').show()
},
openshowPropNone(){
this.$element('showPropNone').show()
},
opendragableNone(){
this.$element('dragableNone').show()
},
opendragableTrue(){
this.$element('dragableTrue').show()
},
opendragableFalse(){
this.$element('dragableFalse').show()
},
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
}
},
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()
},
}
ace/ace_standard/src/main/js/default/pages/form/prop/index.css 0 → 100644
浏览文件 @ 0ca07819
/**
* 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/form/prop/index.hml 0 → 100644
浏览文件 @ 0ca07819
<!--/**
* 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">
form通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<form id="idProp">
</form>
<text class="sub-title">
通用属性 -- class
</text>
<form id="classProp"
class="classProp">
</form>
<form id="classPropNone"
class="">
</form>
<text class="sub-title">
通用属性 -- style
</text>
<form id="styleProp"
style="width:10%;height:20px;background-color:red">
</form>
<text class="sub-title">
通用属性 -- ref
</text>
<form id="refProp"
ref="refProp">
</form>
<form id="refPropNone"
ref="">
</form>
<text class="sub-title">
通用属性 -- disabled
</text>
<form id="disabledPropTrue"
disabled="true">
</form>
<form id="disabledPropFalse"
disabled="false">
</form>
<form id="disabledPropNone"
disabled="">
</form>
<text class="sub-title">
通用属性 -- focusable
</text>
<form id="focusablePropTrue"
focusable="true">
</form>
<form id="focusablePropFalse"
focusable="false">
</form>
<form id="focusablePropNone"
focusable="">
</form>
<text class="sub-title">
通用属性 -- data-*
</text>
<form id="dataProp"
data-form="通用属性 -- data-*">
</form>
<form id="dataPropNone"
data-form="">
</form>
<text class="sub-title">
通用属性 -- click-effect
</text>
<form id="clickEffectPropSmall"
click-effect="spring-small">
</form>
<form id="clickEffectPropMedium"
click-effect="spring-medium">
</form>
<form id="clickEffectPropLarge"
click-effect="spring-large">
</form>
<form id="clickEffectPropNone"
click-effect="">
</form>
<text class="sub-title">
通用属性 -- dir
</text>
<form id="dirPropRtl"
dir="rtl">
</form>
<form id="dirPropAuto"
dir="auto">
</form>
<form id="dirPropLtr"
dir="ltr">
</form>
<form id="dirPropNone"
dir="">
</form>
<text class="sub-title">
渲染属性 -- for
</text>
<form id="forPropNull"
for="">
</form>
<form id="forPropOne"
for="{{listOne}}">
</form>
<form id="forPropThree"
for="{{listThree}}">
</form>
<text class="sub-title">
渲染属性 -- if
</text>
<form id="ifPropTrue"
if="true">
</form>
<text class="sub-title">
渲染属性 -- show
</text>
<form id="showPropTrue"
show="true">
</form>
<form id="showPropFalse"
show="false">
</form>
<form id="showPropNone"
show="">
</form>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
form特有属性
</text>
</div>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/form/prop/index.js 0 → 100644
浏览文件 @ 0ca07819
/**
* 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,
ifPropFalse : null,
ifPropNone : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : 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
}
},
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()
},
}
ace/ace_standard/src/main/js/default/pages/form/style/index.css 0 → 100644
浏览文件 @ 0ca07819
/**
* 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/form/style/index.hml 0 → 100644
浏览文件 @ 0ca07819
<!--/**
* 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/form/style/index.js 0 → 100644
浏览文件 @ 0ca07819
/**
* 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/list/prop/index.css 0 → 100644
浏览文件 @ 0ca07819
/**
* 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;
}
#scrollPageTrue{
flex-weight: 1;
background-color:red;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrollPageFalse{
flex-weight: 1;
background-color:skyblue;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrollPageNone{
flex-weight: 1;
background-color:violet;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#cachedcount{
flex-weight: 1;
background-color:red;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrollbarOff{
flex-weight: 1;
background-color:yellow;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrollbarAuto{
flex-weight: 1;
background-color:red;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrollbarOn{
flex-weight: 1;
background-color:gray;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrollbarNone{
flex-weight: 1;
background-color:magenta;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrolleffectSpring{
flex-weight: 1;
background-color:gray;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrolleffectFade{
flex-weight: 1;
background-color:red;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrolleffectNo{
flex-weight: 1;
background-color:yellow;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#scrolleffectNone{
flex-weight: 1;
background-color:maroon;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexerTrue{
flex-weight: 1;
background-color:yellow;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexerFalse{
flex-weight: 1;
background-color:red;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexerArray{
flex-weight: 1;
background-color:salmon;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexerNone{
flex-weight: 1;
background-color:khaki;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexercircleTrue{
flex-weight: 1;
background-color:yellow;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexercircleFalse{
flex-weight: 1;
background-color:saddlebrown;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexercircleNone{
flex-weight: 1;
background-color:firebrick;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexermultiTrue{
flex-weight: 1;
background-color:yellow;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexermultiFalse{
flex-weight: 1;
background-color:violet;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexermultiNone{
flex-weight: 1;
background-color:mediumslateblue;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexerbubbleTrue{
flex-weight: 1;
background-color:yellow;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexerbubbleFalse{
flex-weight: 1;
background-color:chartreuse;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#indexerbubbleNone{
flex-weight: 1;
background-color:lightcoral;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dividerTrue{
flex-weight: 1;
background-color:yellow;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dividerFalse{
flex-weight: 1;
background-color:black;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dividerNone{
flex-weight: 1;
background-color:mediumblue;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#shapemodeDefault{
flex-weight: 1;
background-color:yellow;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#shapemodeRect{
flex-weight: 1;
background-color:black;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#shapemodeRound{
flex-weight: 1;
background-color:salmon;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#shapemodeNone{
flex-weight: 1;
background-color:blueviolet;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#updateeffectTrue{
flex-weight: 1;
background-color:salmon;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#updateeffectFalse{
flex-weight: 1;
background-color:black;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#updateeffectNone{
flex-weight: 1;
background-color:maroon;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#chainanimationTrue{
flex-weight: 1;
background-color:bisque;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#chainanimationFalse{
flex-weight: 1;
background-color:black;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#chainanimationNone{
flex-weight: 1;
background-color:bisque;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#initialindex{
flex-weight: 1;
background-color:black;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#initialoffset{
flex-weight: 1;
background-color:lightcoral;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#selected{
flex-weight: 1;
background-color:mediumaquamarine;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#selectedNone{
flex-weight: 1;
background-color:lavenderblush;
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/list/prop/index.hml 0 → 100644
浏览文件 @ 0ca07819
<!--/**
* 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">
list通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<list id="idProp">
</list>
<text class="sub-title">
通用属性 -- class
</text>
<list id="classProp"
class="classProp">
</list>
<list id="classPropNone"
class="">
</list>
<text class="sub-title">
通用属性 -- style
</text>
<list id="styleProp"
style="width:10%;height:20px;background-color:red">
</list>
<text class="sub-title">
通用属性 -- ref
</text>
<list id="refProp"
ref="refProp">
</list>
<list id="refPropNone"
ref="">
</list>
<text class="sub-title">
通用属性 -- disabled
</text>
<list id="disabledPropTrue"
disabled="true">
</list>
<list id="disabledPropFalse"
disabled="false">
</list>
<list id="disabledPropNone"
disabled="">
</list>
<text class="sub-title">
通用属性 -- focusable
</text>
<list id="focusablePropTrue"
focusable="true">
</list>
<list id="focusablePropFalse"
focusable="false">
</list>
<list id="focusablePropNone"
focusable="">
</list>
<text class="sub-title">
通用属性 -- data-*
</text>
<list id="dataProp"
data-list="通用属性 -- data-*">
</list>
<list id="dataPropNone"
data-list="">
</list>
<text class="sub-title">
通用属性 -- click-effect
</text>
<list id="clickEffectPropSmall"
click-effect="spring-small">
</list>
<list id="clickEffectPropMedium"
click-effect="spring-medium">
</list>
<list id="clickEffectPropLarge"
click-effect="spring-large">
</list>
<list id="clickEffectPropNone"
click-effect="">
</list>
<text class="sub-title">
通用属性 -- dir
</text>
<list id="dirPropRtl"
dir="rtl">
</list>
<list id="dirPropAuto"
dir="auto">
</list>
<list id="dirPropLtr"
dir="ltr">
</list>
<list id="dirPropNone"
dir="">
</list>
<text class="sub-title">
渲染属性 -- for
</text>
<list id="forPropNull"
for="">
</list>
<list id="forPropOne"
for="{{listOne}}">
</list>
<list id="forPropThree"
for="{{listThree}}">
</list>
<text class="sub-title">
渲染属性 -- if
</text>
<list id="ifPropTrue"
if="true">
</list>
<text class="sub-title">
渲染属性 -- show
</text>
<list id="showPropTrue"
show="true">
</list>
<list id="showPropFalse"
show="false">
</list>
<list id="showPropNone"
show="">
</list>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
list特有属性
</text>
<text class="sub-title">
特有属性 -- scrollpage
</text>
<list id="scrollPageTrue" scrollpage="true">
</list>
<list id="scrollPageFalse" scrollpage="false">
</list>
<list id="scrollPageNone" scrollpage="">
</list>
<text class="sub-title">
特有属性 -- cachedcount
</text>
<list id="cachedcount" cachedcount="1">
</list>
<text class="sub-title">
特有属性 -- scrollbar
</text>
<list id="scrollbarOff" scrollbar="off">
</list>
<list id="scrollbarAuto" scrollbar="auto">
</list>
<list id="scrollbarOn" scrollbar="on">
</list>
<list id="scrollbarNone" scrollbar="">
</list>
<text class="sub-title">
特有属性 -- scrolleffect
</text>
<list id="scrolleffectSpring" scrolleffect="spring">
</list>
<list id="scrolleffectFade" scrolleffect="fade">
</list>
<list id="scrolleffectNo" scrolleffect="no">
</list>
<list id="scrolleffectNone" scrolleffect="">
</list>
<text class="sub-title">
特有属性 -- indexer
</text>
<list id="indexerTrue" indexer="true">
</list>
<list id="indexerFalse" indexer="false">
</list>
<list id="indexerArray" indexer="{{array}}">
</list>
<list id="indexerNone" indexer="">
</list>
<text class="sub-title">
特有属性 -- indexercircle
</text>
<list id="indexercircleTrue" indexercircle="true">
</list>
<list id="indexercircleFalse" indexercircle="false">
</list>
<list id="indexercircleNone" indexercircle="">
</list>
<text class="sub-title">
特有属性 -- indexermulti
</text>
<list id="indexermultiTrue" indexermulti="true">
</list>
<list id="indexermultiFalse" indexermulti="false">
</list>
<list id="indexermultiNone" indexermulti="">
</list>
<text class="sub-title">
特有属性 -- indexerbubble
</text>
<list id="indexerbubbleTrue" indexerbubble="true">
</list>
<list id="indexerbubbleFalse" indexerbubble="false">
</list>
<list id="indexerbubbleNone" indexerbubble="">
</list>
<text class="sub-title">
特有属性 -- divider
</text>
<list id="dividerTrue" divider="true">
</list>
<list id="dividerFalse" divider="false">
</list>
<list id="dividerNone" divider="">
</list>
<text class="sub-title">
特有属性 -- shapemode
</text>
<list id="shapemodeDefault" shapemode="default">
</list>
<list id="shapemodeRect" shapemode="rect">
</list>
<list id="shapemodeRound" shapemode="round">
</list>
<list id="shapemodeNone" shapemode="">
</list>
<text class="sub-title">
特有属性 -- chainanimation
</text>
<list id="chainanimationTrue" chainanimation="true">
</list>
<list id="chainanimationFalse" chainanimation="false">
</list>
<list id="chainanimationNone" chainanimation="">
</list>
<text class="sub-title">
特有属性 -- updateeffect
</text>
<list id="updateeffectTrue" updateeffect="true">
</list>
<list id="updateeffectFalse" updateeffect="false">
</list>
<list id="updateeffectNone" updateeffect="">
</list>
<text class="sub-title">
特有属性 -- initialindex
</text>
<list id="initialindex" initialindex="0">
</list>
<text class="sub-title">
特有属性 -- initialoffset
</text>
<list id="initialoffset" initialoffset="0">
</list>
<text class="sub-title">
特有属性 -- selected
</text>
<list id="selected" selected="0">
</list>
<list id="selectedNone" selected="">
</list>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/list/prop/index.js 0 → 100644
浏览文件 @ 0ca07819
/**
* 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,
ifPropFalse : null,
ifPropNone : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : null,
array:['#',1,2,3,4,5,6,7,8]
},
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
}
},
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()
},
}
ace/ace_standard/src/main/js/default/pages/list/style/index.hml 0 → 100644
浏览文件 @ 0ca07819
<!--/**
* 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">
list通用样式
</text>
<text class="sub-title">
通用样式 1-8 \n width height padding margin border opacity align-self
</text>
<list id="styleOne">
</list>
<list id="styleTwo">
</list>
<list id="styleThree">
</list>
<list id="styleFour">
</list>
<list id="styleFive">
</list>
<list id="styleSix">
</list>
<list id="styleSeven">
</list>
<list id="styleEight">
</list>
<text class="sub-title">
通用样式9-20 \n display flex z-index position
</text>
<div id="styleNine">
<list id="styleTen">
</list>
<list id="styleEleven">
</list>
<list id="styleTwelve">
</list>
<list id="styleThirteen">
</list>
<list id="styleFourteen">
</list>
<list id="styleFifteen">
</list>
<list id="styleSixteen">
</list>
<list id="styleSeventeen">
</list>
<list id="styleEighteen">
</list>
<list id="styleNineteen">
</list>
<list id="styleTwenty">
</list>
</div>
<text class="sub-title">
通用样式21-23 box-shadow
</text>
<div style="width: 100%;flex-direction: row;">
<list id="styleTwentyOne">
</list>
<list id="styleTwentyTwo">
</list>
<list id="styleTwentyThree">
</list>
</div>
<text class="sub-title">
通用样式23-25 visibility clip-path
</text>
<list id="styleTwentyFour">
</list>
<list id="styleTwentyFive">
</list>
<text class="sub-title">
通用样式26-31 background
</text>
<list id="styleTwentySix">
</list>
<list id="styleTwentySeven">
</list>
<list id="styleTwentyNine">
</list>
<list id="styleThirty">
</list>
<list id="styleThirtyOne">
</list>
<text class="sub-title">
通用样式32 clip-path image-fill mask-image
</text>
<div id="styleThirtyTwo">
</div>
</div>
<div class="style-container">
<text class="title">
list特有样式
</text>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/listItem/style/index.js 0 → 100644
浏览文件 @ 0ca07819
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
}
ace/ace_standard/src/main/js/default/test/List.test.js
浏览文件 @ 0ca07819
......@@ -39,3 +39,11 @@ require('./refreshProps.test.js')
require('./swiperProps.test.js')
require('./textProps.test.js')
require('./popupProps.test.js')
require('./badgeProps.test.js')
require('./dialogProps.test.js')
require('./formProps.test.js')
require('./listProps.test.js')
require('./lsitItemProps.test.js')
require('./listItemGroupProps.test.js')
require('./stepperProps.test.js')
require('./stepperItemProps.test.js')
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或