Skip to content

X
Xts Acts

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

通知 9
Star 22
Fork 0
X
Xts Acts

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

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

add test cases 

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 ed95ee9b
隐藏空白更改
内联 并排
Showing with 4265 addition and 74 deletion
ace/ace_standard/src/main/js/default/pages/toggle/prop/index.css 0 → 100644
浏览文件 @ f45223c9
/**
* 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;
}
#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;
}
#typeArc{
height: 30px;
margin-bottom: 20px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
}
#typeCapsule{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeCircle{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeText{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeDownload{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#value{
height: 15px;
font-size: 10px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#valueNone{
height: 15px;
font-size: 10px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#checkedNone{
height: 15px;
font-size: 10px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#checkedTrue{
height: 15px;
font-size: 10px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#checkedFalse{
height: 15px;
font-size: 10px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.propNewAdd{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
ace/ace_standard/src/main/js/default/pages/toggle/prop/index.hml 0 → 100644
浏览文件 @ f45223c9
<!--/**
* 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">
toggle通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<toggle id="idProp" value="">
</toggle>
<text class="sub-title" >
通用属性 -- class
</text>
<toggle id="classProp"
class="classProp" value="">
</toggle>
<toggle id="classPropNone" value=""
class="">
</toggle>
<text class="sub-title">
通用属性 -- style
</text>
<toggle id="styleProp" value=""
style="width:10%;height:20px;background-color:red">
</toggle>
<text class="sub-title">
通用属性 -- ref
</text>
<toggle id="refProp" value=""
ref="refProp">
</toggle>
<toggle id="refPropNone" value=""
ref="">
</toggle>
<text class="sub-title">
通用属性 -- disabled
</text>
<toggle id="disabledPropTrue" value=""
disabled="true">
</toggle>
<toggle id="disabledPropFalse" value=""
disabled="false">
</toggle>
<toggle id="disabledPropNone" value=""
disabled="">
</toggle>
<text class="sub-title">
通用属性 -- focusable
</text>
<toggle id="focusablePropTrue" value=""
focusable="true">
</toggle>
<toggle id="focusablePropFalse" value=""
focusable="false">
</toggle>
<toggle id="focusablePropNone" value=""
focusable="">
</toggle>
<text class="sub-title">
通用属性 -- data-*
</text>
<toggle id="dataProp" value=""
data-toggle="通用属性 -- data-*">
</toggle>
<toggle id="dataPropNone" value=""
data-toggle="">
</toggle>
<text class="sub-title">
通用属性 -- click-effect
</text>
<toggle id="clickEffectPropSmall" value=""
click-effect="spring-small">
</toggle>
<toggle id="clickEffectPropMedium" value=""
click-effect="spring-medium">
</toggle>
<toggle id="clickEffectPropLarge" value=""
click-effect="spring-large">
</toggle>
<toggle id="clickEffectPropNone" value=""
click-effect="">
</toggle>
<text class="sub-title">
通用属性 -- dir
</text>
<toggle id="dirPropRtl" value=""
dir="rtl">
</toggle>
<toggle id="dirPropAuto" value=""
dir="auto">
</toggle>
<toggle id="dirPropLtr" value=""
dir="ltr">
</toggle>
<toggle id="dirPropNone" value=""
dir="">
</toggle>
<text class="sub-title">
渲染属性 -- for
</text>
<toggle id="forPropNull" value=""
for="">
</toggle>
<toggle id="forPropOne" value=""
for="{{listOne}}">
</toggle>
<toggle id="forPropThree" value=""
for="{{listThree}}">
</toggle>
<text class="sub-title">
渲染属性 -- if
</text>
<toggle id="ifPropTrue" value=""
if="true">
</toggle>
<text class="sub-title">
渲染属性 -- show
</text>
<toggle id="showPropTrue" value=""
show="true">
</toggle>
<toggle id="showPropFalse" value=""
show="false">
</toggle>
<toggle id="showPropNone" value=""
show="">
</toggle>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
toggle特有属性
</text>
<text class="sub-title">
特有属性 -- value
</text>
<toggle id="valueNone"
value="">
</toggle>
<toggle id="value"
value="please--input">
</toggle>
<text class="sub-title">
特有属性 -- checked
</text>
<toggle id="checkedNone" value=""
checked="">
</toggle>
<toggle id="checkedTrue" value=""
checked="true">
</toggle>
<toggle id="checkedFalse" value=""
checked="false">
</toggle>
<text class="sub-title">
特有属性 -- tid
</text>
<toggle class="propNewAdd"
tid="id">
</toggle>
<toggle class="propNewAdd"
tid="">
</toggle>
<text class="sub-title">
特有属性 -- elif
</text>
<toggle class="propNewAdd"
if="false">
</toggle>
<toggle class="propNewAdd"
elif="true">
</toggle>
<toggle class="propNewAdd"
elif="false">
</toggle>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/toggle/prop/index.js 0 → 100644
浏览文件 @ f45223c9
/**
* 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:{
OptionArray:{icon:"common/images/icon.png",content:"复制"
},
listOne:[{}],
listThree:[{},{},{}],
idProp : null,
classProp : null,
classPropNone : null,
styleProp : null,
refProp : null,
refPropNone : null,
disabledPropTrue : null,
disabledPropFalse : null,
disabledPropNone : null,
focusablePropTrue : null,
focusablePropFalse : null,
focusablePropNone : null,
dataProp : null,
dataPropNone : null,
clickEffectPropSmall : null,
clickEffectPropMedium : null,
clickEffectPropLarge : null,
clickEffectPropNone : null,
dirPropRtl : null,
dirPropAuto : null,
dirPropLtr : null,
dirPropNone : null,
forPropNull : null,
forPropOne : null,
forPropThree : null,
ifPropTrue : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : null,
value : null,
valueNone : null,
checkedNone : null,
checkedTrue : null,
checkedFalse : null,
},
onShow(){
this.getCommonPropValues();
this.getSpecificPropValues();
globalThis.value = {
idProp : this.idProp, classProp : this.classProp, classPropNone : this.classPropNone,
styleProp : this.styleProp, refProp : this.refProp, refPropNone : this.refPropNone,
disabledPropTrue : this.disabledPropTrue, disabledPropFalse : this.disabledPropFalse,
disabledPropNone : this.disabledPropNone, focusablePropTrue : this.focusablePropTrue,
focusablePropFalse : this.focusablePropFalse, focusablePropNone : this.focusablePropNone,
dataProp : this.dataProp, dataPropNone : this.dataPropNone,
clickEffectPropSmall : this.clickEffectPropSmall,
clickEffectPropMedium : this.clickEffectPropMedium,
clickEffectPropLarge : this.clickEffectPropLarge,
clickEffectPropNone : this.clickEffectPropNone, dirPropRtl : this.dirPropRtl,
dirPropAuto : this.dirPropAuto,
dirPropLtr : this.dirPropLtr, dirPropNone : this.dirPropNone, forPropNull : this.forPropNull,
forPropOne : this.forPropOne, forPropThree : this.forPropThree, ifPropTrue : this.ifPropTrue,
showPropTrue : this.showPropTrue, showPropFalse : this.showPropFalse, showPropNone : this.showPropNone,
value : this.value,
valueNone : this.valueNone,
checkedNone : this.checkedNone,
checkedTrue : this.checkedTrue,
checkedFalse : this.checkedFalse,
}
},
getCommonPropValues(){
this.idProp = this.$element("idProp").getInspector()
this.classProp = this.$element("classProp").getInspector()
this.classPropNone = this.$element("classPropNone").getInspector()
this.styleProp = this.$element("styleProp").getInspector()
this.refProp = this.$element("refProp").getInspector()
this.refPropNone = this.$element("refPropNone").getInspector()
this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
this.disabledPropNone = this.$element("disabledPropNone").getInspector()
this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
this.focusablePropNone = this.$element("focusablePropNone").getInspector()
this.dataProp = this.$element("dataProp").getInspector()
this.dataPropNone = this.$element("dataPropNone").getInspector()
this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
this.dirPropRtl = this.$element("dirPropRtl").getInspector()
this.dirPropAuto = this.$element("dirPropAuto").getInspector()
this.dirPropLtr = this.$element("dirPropLtr").getInspector()
this.dirPropNone = this.$element("dirPropNone").getInspector()
this.forPropNull = this.$element("forPropNull").getInspector()
this.forPropOne = this.$element("forPropOne").getInspector()
this.forPropThree = this.$element("forPropThree").getInspector()
this.ifPropTrue = this.$element("ifPropTrue").getInspector()
this.showPropTrue = this.$element("showPropTrue").getInspector()
this.showPropFalse = this.$element("showPropFalse").getInspector()
this.showPropNone = this.$element("showPropNone").getInspector()
},
getSpecificPropValues(){
this.value = this.$element("value").getInspector()
this.valueNone = this.$element("valueNone").getInspector()
this.checkedNone = this.$element("checkedNone").getInspector()
this.checkedTrue = this.$element("checkedTrue").getInspector()
this.checkedFalse = this.$element("checkedFalse").getInspector()
}
}
ace/ace_standard/src/main/js/default/pages/toolbar/index.js → ace/ace_standard/src/main/js/default/pages/toggle/style/index.js
浏览文件 @ f45223c9
......@@ -12,9 +12,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
title: 'World'
}
}
ace/ace_standard/src/main/js/default/pages/toolbar/index.hml 已删除 100644 → 0
浏览文件 @ ed95ee9b
<!--/**
* 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">
<toolbar class="toolbar1">
<toolbar-item class ="item1" icon='common/images/icon.png' value='Option 1' > </toolbar-item>
<toolbar-item class ="item2" icon='common/images/image.png' value='Option 2'> </toolbar-item>
<toolbar-item class ="item3" icon='common/images/star-1-1.png' value='Option 3' > </toolbar-item>
<toolbar-item icon='common/images/star-1-2.png' value='Option 4' > </toolbar-item>
<toolbar-item class ="item5" icon='common/images/star-1-3.png' value='Option 5' > </toolbar-item>
<toolbar-item class ="item6" icon='common/images/icon.png' value='Option 6'> </toolbar-item>
</toolbar>
<toolbar class="toolbar2" style="margin-bottom: 20px;">
<toolbar-item class ="item1" icon='common/images/icon.png' value='Option 1' > </toolbar-item>
<toolbar-item class ="item2" icon='common/images/image.png' value='Option 2'> </toolbar-item>
<toolbar-item class ="item3" icon='common/images/star-1-1.png' value='Option 3' > </toolbar-item>
<toolbar-item icon='common/images/star-1-2.png' value='Option 4' > </toolbar-item>
<toolbar-item class ="item5" icon='common/images/star-1-3.png' value='Option 5' > </toolbar-item>
<toolbar-item class ="item6" icon='common/images/icon.png' value='Option 6'> </toolbar-item>
</toolbar>
<toolbar class="toolbar3" style="margin-bottom: 20px;">
<toolbar-item class ="item1" icon='common/images/icon.png' value='Option 1' > </toolbar-item>
<toolbar-item class ="item2" icon='common/images/image.png' value='Option 2'> </toolbar-item>
<toolbar-item class ="item3" icon='common/images/star-1-1.png' value='Option 3' > </toolbar-item>
<toolbar-item icon='common/images/star-1-2.png' value='Option 4' > </toolbar-item>
<toolbar-item class ="item5" icon='common/images/star-1-3.png' value='Option 5' > </toolbar-item>
<toolbar-item class ="item6" icon='common/images/icon.png' value='Option 6'> </toolbar-item>
</toolbar>
<toolbar class="toolbar4" style="margin-bottom: 20px;">
<toolbar-item class ="item1" icon='common/images/icon.png' value='Option 1' > </toolbar-item>
<toolbar-item class ="item2" icon='common/images/image.png' value='Option 2'> </toolbar-item>
<toolbar-item class ="item3" icon='common/images/star-1-1.png' value='Option 3' > </toolbar-item>
<toolbar-item icon='common/images/star-1-2.png' value='Option 4' > </toolbar-item>
<toolbar-item class ="item5" icon='common/images/star-1-3.png' value='Option 5' > </toolbar-item>
<toolbar-item class ="item6" icon='common/images/icon.png' value='Option 6'> </toolbar-item>
</toolbar>
<div class="contain1">
<toolbar class="toolbar5" style="margin-bottom: 20px;">
<toolbar-item class ="item1" icon='common/images/icon.png' value='Option 1' > </toolbar-item>
<toolbar-item class ="item2" icon='common/images/image.png' value='Option 2'> </toolbar-item>
<toolbar-item class ="item3" icon='common/images/star-1-1.png' value='Option 3' > </toolbar-item>
<toolbar-item icon='common/images/star-1-2.png' value='Option 4' > </toolbar-item>
<toolbar-item class ="item5" icon='common/images/star-1-3.png' value='Option 5' > </toolbar-item>
<toolbar-item class ="item6" icon='common/images/icon.png' value='Option 6'> </toolbar-item>
</toolbar>
<toolbar class="toolbar6" style="margin-bottom: 20px;">
<toolbar-item class ="item1" icon='common/images/icon.png' value='Option 1' > </toolbar-item>
<toolbar-item class ="item2" icon='common/images/image.png' value='Option 2'> </toolbar-item>
<toolbar-item class ="item3" icon='common/images/star-1-1.png' value='Option 3' > </toolbar-item>
<toolbar-item icon='common/images/star-1-2.png' value='Option 4' > </toolbar-item>
<toolbar-item class ="item5" icon='common/images/star-1-3.png' value='Option 5' > </toolbar-item>
<toolbar-item class ="item6" icon='common/images/icon.png' value='Option 6'> </toolbar-item>
</toolbar>
</div>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/toolbar/prop/index.css 0 → 100644
浏览文件 @ f45223c9
/**
* 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;
}
.specific-style{
width: 90%;
height: 20px;
margin-left: 5%;
}
.color-red{
background-color: red;
}
.color-grey{
background-color: grey;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/toolbar/prop/index.hml 0 → 100644
浏览文件 @ f45223c9
<!--/**
* 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">
toolbar通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<toolbar id="idProp">
</toolbar>
<text class="sub-title">
通用属性 -- class
</text>
<toolbar id="classProp"
class="classProp">
</toolbar>
<toolbar id="classPropNone"
class="">
</toolbar>
<text class="sub-title">
通用属性 -- style
</text>
<toolbar id="styleProp"
style="width:10%;height:20px;background-color:red">
</toolbar>
<text class="sub-title">
通用属性 -- ref
</text>
<toolbar id="refProp"
ref="refProp">
</toolbar>
<toolbar id="refPropNone"
ref="">
</toolbar>
<text class="sub-title">
通用属性 -- disabled
</text>
<toolbar id="disabledPropTrue"
disabled="true">
</toolbar>
<toolbar id="disabledPropFalse"
disabled="false">
</toolbar>
<toolbar id="disabledPropNone"
disabled="">
</toolbar>
<text class="sub-title">
通用属性 -- focusable
</text>
<toolbar id="focusablePropTrue"
focusable="true">
</toolbar>
<toolbar id="focusablePropFalse"
focusable="false">
</toolbar>
<toolbar id="focusablePropNone"
focusable="">
</toolbar>
<text class="sub-title">
通用属性 -- data-*
</text>
<toolbar id="dataProp"
data-div="通用属性 -- data-*">
</toolbar>
<toolbar id="dataPropNone"
data-div="">
</toolbar>
<text class="sub-title">
通用属性 -- click-effect
</text>
<toolbar id="clickEffectPropSmall"
click-effect="spring-small">
</toolbar>
<toolbar id="clickEffectPropMedium"
click-effect="spring-medium">
</toolbar>
<toolbar id="clickEffectPropLarge"
click-effect="spring-large">
</toolbar>
<toolbar id="clickEffectPropNone"
click-effect="">
</toolbar>
<text class="sub-title">
通用属性 -- dir
</text>
<toolbar id="dirPropRtl"
dir="rtl">
</toolbar>
<toolbar id="dirPropAuto"
dir="auto">
</toolbar>
<toolbar id="dirPropLtr"
dir="ltr">
</toolbar>
<toolbar id="dirPropNone"
dir="">
</toolbar>
<text class="sub-title">
渲染属性 -- for
</text>
<toolbar id="forPropNull"
for="">
</toolbar>
<toolbar id="forPropOne"
for="{{listOne}}">
</toolbar>
<toolbar id="forPropThree"
for="{{listThree}}">
</toolbar>
<text class="sub-title">
渲染属性 -- if
</text>
<toolbar id="ifPropTrue"
if="true">
</toolbar>
<text class="sub-title">
渲染属性 -- show
</text>
<toolbar id="showPropTrue"
show="true">
</toolbar>
<toolbar id="showPropFalse"
show="false">
</toolbar>
<toolbar id="showPropNone"
show="">
</toolbar>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
toolbar特有属性
</text>
<text class="sub-title">
特有属性 -- elif
</text>
<toolbar if="false"></toolbar>
<toolbar id="elifPropTrue"
class="specific-style color-grey"
elif="true">
</toolbar>
<toolbar id="elifPropFalse"
class="specific-style color-red"
elif="false">
</toolbar>
<text class="sub-title">
特有属性 -- tid
</text>
<toolbar id="tidProp"
class="specific-style color-red"
tid="tid">
</toolbar>
<toolbar id="tidPropNone"
class="specific-style color-grey"
tid="">
</toolbar>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/toolbar/prop/index.js 0 → 100644
浏览文件 @ f45223c9
/**
* 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/toolbar/index.css → ace/ace_standard/src/main/js/default/pages/toolbar/router/index.css
浏览文件 @ f45223c9
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* 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
......@@ -14,22 +14,51 @@
*/
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 70%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.toolbar1{
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 1px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
......@@ -38,10 +67,10 @@
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 2px;
border-right-width: 3px;
border-top-width: 1px;
border-bottom-width: 1.5px;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
......@@ -60,9 +89,9 @@
clip-path: margin-box;
}
.toolbar2{
width: 70%;
height:100px;
.style2{
width: 50px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
......@@ -75,15 +104,10 @@
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.toolbar3{
.style3{
width: 100%;
height: 50px;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
......@@ -91,26 +115,31 @@
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/image.png');
background-size:contain;
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.toolbar4{
width: 100%;
height: 50px;
.style4{
width: 60%;
height: 5%;
padding: 10px;
margin: 5px;
border: 1px solid #000000;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
height: 100px;
}
.toolbar5{
width: 100%;
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
......@@ -120,8 +149,8 @@
border-image-repeat: repeat;
}
.toolbar6{
width: 100%;
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
......@@ -132,41 +161,134 @@
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.item1{
color: darkorange;
font-size:10px;
background-color: cornflowerblue;
allow-scale: true;
font-style: italic;
font-weight: 700;
text-decoration: line-through;
font-family: sans-serif;
opacity: 0.5;
display:flex;
visibility: visible;
.style7 {
flex-direction: column;
flex-wrap:wrap;
justify-content:flex-start;
align-items: flex-end;
align-content:space-around;
display: flex;
height: 40px;
}
.item2{
color: pink;
font-size:20px;
font-style: italic;
background-color: darkgoldenrod;
allow-scale: false;
font-style: italic;
font-weight: 400;
text-decoration: line-through;
font-family: sans-serif;
opacity:0.7;
display:flex;
visibility: hidden;
}
.item3{
color: violet;
font-size:16px;
background-color: yellow;
font-weight: 700;
text-decoration: line-through;
opacity: 1;
display: none;
.flex-item {
width: 20px;
height: 20px;
border-radius: 16px;
}
.style8{
flex-direction: row;
flex-wrap:nowrap;
scrollbar-color: yellow;
scrollbar-width: 10px;
overscroll-effect:spring;
height: 20px;
overflow:scroll;
}
.style9{
display: grid;
height: 20px;
grid-template-columns: 20% 20%;
grid-columns-gap: 14px;
grid-rows-gap: 4px;
grid-template-rows: 15% 15%;
}
.prop-container{
flex-direction: column;
}
#prop1 {
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
height: 30px;
background-color: pink;
width: 100%;
margin: 5px;
}
.prop3 {
height: 30px;
background-color: darkseagreen;
width: 100%;
margin: 5px;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
background-color: #72ac33;
width: 55px;
height: 55px;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
background-color: #ad4e2a;
width: 55px;
height: 55px;
margin: 5px;
}
.access-container{
flex-direction: column;
}
.access1{
background-color: #321124;
margin: 5px;
width: 90%;
height: 30px;
}
.multiMode-container{
flex-direction: column;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/toolbar/router/index.hml 0 → 100644
浏览文件 @ f45223c9
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
toolbar通用样式1
</text>
<toolbar class="style1" id="style1">
</toolbar>
<text class="sub-title">
toolbar通用样式2
</text>
<toolbar class="style2" id="style2">
</toolbar>
<text class="sub-title">
toolbar通用样式3
</text>
<toolbar class="style3" id="style3">
</toolbar>
<text class="sub-title">
toolbar通用样式4
</text>
<toolbar class="style4" id="style4">
</toolbar>
<text class="sub-title">
toolbar通用样式5
</text>
<div class="contain1">
<toolbar class="style5" id="style5">
</toolbar>
<toolbar class="style6" id="style6">
</toolbar>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
toolbar动画样式1
</text>
<toolbar class="ani1">
</toolbar>
<text class="sub-title">
toolbar动画样式2
</text>
<toolbar class="ani2">
</toolbar>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
toolbar通用属性1
</text>
<toolbar id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</toolbar>
<text class="sub-title">
toolbar通用属性2
</text>
<toolbar class="prop2" ref ="prop2" id="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</toolbar>
<text class="sub-title">
toolbar通用属性3
</text>
<toolbar style="color: #679855; margin: 5px;" class="prop3" id="prop3">
</toolbar>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
toolbar无障碍1
</text>
<toolbar class="access1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</toolbar>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
toolbar多模输入1
</text>
<toolbar class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</toolbar>
</div>
</div>
</div>
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/toolbar/router/index.js 0 → 100644
浏览文件 @ f45223c9
/**
* 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';
var options = {
duration: 1500,
easing: 'friction',
delay: 100,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
translate: '-120px',
rotate:'10deg',
scale:0.2,
skew:'40deg'
},
opacity: 0.1,
offset: 0.0,
width: '40%',
height:'20px',
backgroundColor:'#ff0000',
backgroundPosition:'10px 20px',
transformOrigin:'left top'
},
{
transform: {
translateX: '0px',
translateY: '5px',
rotateX:'10deg',
rotateY:'10deg',
scaleX:0.5,
scaleY:0.7,
skewX:'22deg',
skewY:'30deg'
},
opacity: 0.6,
offset: 2.0,
width: '60%',
height:'30px',
backgroundColor:'#ff00ff',
backgroundPosition:'15px 25px',
transformOrigin:'center top'
},
{
transform: {
translateX: '100px',
translateY: '0px',
translateZ: '20px',
rotateX:'0deg',
rotateY:'0deg',
rotateZ:'30deg',
scaleX:1,
scaleY:1,
scaleZ:2,
skewX:'0',
skewY:'0',
skewZ:'30deg'
},
opacity: 1,
offset: 0.0,
width: '100%',
height:'30px',
backgroundColor:'#ffff00',
backgroundPosition:'0px',
transformOrigin:'center center'
},
];
export default {
onShow(){
// 通用属性
var prop1 = this.$element('prop1');
var name1 = prop1.dataSet.name
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.name
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
var styleValues = this.getStyleValues();
var propsValues = this.getPropValues();
globalThis.value = {
styleValues:styleValues,
propsValues:propsValues
}
},
getStyleValues(){
var styleValue1 = this.$element("style1").getInspector()
var styleValue2 = this.$element("style2").getInspector()
var styleValue3 = this.$element("style3").getInspector()
var styleValue4 = this.$element("style4").getInspector()
var styleValue5 = this.$element("style5").getInspector()
var styleValue6 = this.$element("style6").getInspector()
return {
style1:styleValue1,
style2:styleValue2,
style3:styleValue3,
style4:styleValue4,
style5:styleValue5,
style6:styleValue6,
}
},
getPropValues(){
var propValue1 = this.$element("prop1").getInspector()
var propValue2 = this.$element("prop2").getInspector()
var propValue3 = this.$element("prop3").getInspector()
return {
prop1:propValue1,
prop2:propValue2,
prop3:propValue3
}
},
}
ace/ace_standard/src/main/js/default/pages/toolbarItem/prop/index.css 0 → 100644
浏览文件 @ f45223c9
/**
* 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;
}
.toolbar-style{
width: 90%;
margin-left: 5%;
flex-weight: 1;
border: 1px solid #000000;
}
#idProp {
color: #fff;
font-size: 16px;
background-color:#f00000;
}
.classProp {
color: #fff;
font-size: 16px;
background-color:#0f0000;
}
#classPropNone {
color: #fff;
font-size: 16px;
background-color:#0000e0;
}
#refProp {
color: #fff;
font-size: 16px;
background-color:#00f000;
}
#refPropNone {
color: #fff;
font-size: 16px;
background-color:#00000e;
}
#disabledPropTrue {
background-color:#000f00;
color: #fff;
font-size: 16px;
}
#disabledPropFalse {
background-color:#0000f0;
color: #fff;
font-size: 16px;
}
#disabledPropNone {
background-color:#d00000;
color: #fff;
font-size: 16px;
}
#focusablePropTrue {
background-color:#00000f;
color: #fff;
font-size: 16px;
}
#focusablePropFalse {
background-color:#ff0000;
color: #fff;
font-size: 16px;
}
#focusablePropNone {
background-color:#0d0000;
color: #fff;
font-size: 16px;
}
#dataProp {
background-color:#0ff000;
color: #fff;
font-size: 16px;
}
#dataPropNone {
background-color:#00d000;
color: #fff;
font-size: 16px;
}
#clickEffectPropSmall {
background-color:#00ff00;
color: #fff;
font-size: 16px;
}
#clickEffectPropMedium {
background-color:#000ff0;
color: #fff;
font-size: 16px;
}
#clickEffectPropLarge {
background-color:#fff000;
color: #fff;
font-size: 16px;
}
#clickEffectPropNone{
background-color:#000d00;
color: #fff;
font-size: 16px;
}
#dirPropRtl {
background-color:#0fff00;
color: #fff;
font-size: 16px;
}
#dirPropAuto {
background-color:#00fff0;
color: #fff;
font-size: 16px;
}
#dirPropLtr {
background-color:#000fff;
color: #fff;
font-size: 16px;
}
#dirPropNone {
background-color:#0000d0;
color: #fff;
font-size: 16px;
}
#forPropNull {
background-color:#ffff00;
color: #fff;
font-size: 16px;
}
#forPropOne {
background-color:#00e000;
color: #fff;
font-size: 16px;
}
#forPropThree {
background-color:#000e00;
color: #fff;
font-size: 16px;
}
#ifPropTrue {
background-color:#0ffff0;
color: #fff;
font-size: 16px;
}
#ifPropFalse {
background-color:#00ffff;
color: #fff;
font-size: 16px;
}
#ifPropNone {
background-color:#00000d;
color: #fff;
font-size: 16px;
}
#showPropTrue {
background-color:#e00000;
color: #fff;
font-size: 16px;
}
#showPropFalse {
background-color:#0e0000;
color: #fff;
font-size: 16px;
}
#showPropNone {
background-color:#c00000;
color: #fff;
font-size: 16px;
}
#valueProp{
background-color:#0e0000;
color: #fff;
font-size: 16px;
}
#iconProp{
background-color:#e00000;
color: #fff;
font-size: 16px;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
.style-2{
max-height: 56px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/toolbarItem/prop/index.hml 0 → 100644
浏览文件 @ f45223c9
<!--/**
* 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">
toolbar通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<toolbar class="toolbar-style">
<toolbar-item id="idProp"
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
通用属性 -- class
</text>
<toolbar class="toolbar-style">
<toolbar-item id="classProp"
class="classProp"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="classPropNone"
class=""
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
通用属性 -- style
</text>
<toolbar class="toolbar-style">
<toolbar-item id="styleProp"
style="background-color:red"
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
通用属性 -- ref
</text>
<toolbar class="toolbar-style">
<toolbar-item id="refProp"
ref="refProp"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="refPropNone"
ref=""
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
通用属性 -- disabled
</text>
<toolbar class="toolbar-style">
<toolbar-item id="disabledPropTrue"
disabled="true"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="disabledPropFalse"
disabled="false"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="disabledPropNone"
disabled=""
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
通用属性 -- focusable
</text>
<toolbar class="toolbar-style">
<toolbar-item id="focusablePropTrue"
focusable="true"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="focusablePropFalse"
focusable="false"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="focusablePropNone"
focusable=""
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
通用属性 -- data-*
</text>
<toolbar class="toolbar-style">
<toolbar-item id="dataProp"
data-div="通用属性 -- data-*"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="dataPropNone"
data-div=""
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
通用属性 -- click-effect
</text>
<toolbar class="toolbar-style">
<toolbar-item id="clickEffectPropSmall"
click-effect="spring-small"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="clickEffectPropMedium"
click-effect="spring-medium"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="clickEffectPropLarge"
click-effect="spring-large"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="clickEffectPropNone"
click-effect=""
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
通用属性 -- dir
</text>
<toolbar class="toolbar-style">
<toolbar-item id="dirPropRtl"
dir="rtl"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="dirPropAuto"
dir="auto"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="dirPropLtr"
dir="ltr"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="dirPropNone"
dir=""
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
渲染属性 -- for
</text>
<toolbar class="toolbar-style">
<toolbar-item id="forPropNull"
for=""
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="forPropOne"
for="{{listOne}}"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="forPropThree"
for="{{listThree}}"
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
渲染属性 -- if
</text>
<toolbar class="toolbar-style">
<toolbar-item id="ifPropTrue"
if="true"
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
渲染属性 -- show
</text>
<toolbar class="toolbar-style">
<toolbar-item id="showPropTrue"
show="true"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="showPropFalse"
show="false"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style">
<toolbar-item id="showPropNone"
show=""
value="text"
icon="">
</toolbar-item>
</toolbar>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
toolbar特有属性
</text>
<text class="sub-title">
文本内容属性 -- value
</text>
<toolbar class="toolbar-style style-2">
<toolbar-item id="valueProp"
value="text"
icon="">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style style-2">
<toolbar-item id="valuePropNone"
value=""
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
文本内容属性 -- icon
</text>
<toolbar class="toolbar-style style-2">
<toolbar-item id="iconProp"
value=""
icon="common/images/icon.png">
</toolbar-item>
</toolbar>
<toolbar class="toolbar-style style-2">
<toolbar-item id="iconPropNone"
value=""
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
特有属性 -- elif
</text>
<toolbar class="toolbar-style style-2">
<toolbar-item if="false"></toolbar-item>
<toolbar-item id="elifPropTrue"
elif="true"
value="text"
icon="">
</toolbar-item>
<toolbar-item id="elifPropFalse"
elif="false"
value="text"
icon="">
</toolbar-item>
</toolbar>
<text class="sub-title">
特有属性 -- tid
</text>
<toolbar class="toolbar-style style-2">
<toolbar-item id="tidProp"
tid="tid"
value="text"
icon="">
</toolbar-item>
<toolbar-item id="tidPropNone"
tid=""
value="text"
icon="">
</toolbar-item>
</toolbar>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/toolbarItem/prop/index.js 0 → 100644
浏览文件 @ f45223c9
/**
* 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,
valueProp : null,
valuePropNone : null,
iconProp : null,
iconPropNone : 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,
valueProp : this.valueProp,
valuePropNone : this.valuePropNone,
iconProp : this.iconProp,
iconPropNone : this.iconPropNone
}
},
getCommonPropValues(){
this.idProp = this.$element("idProp").getInspector()
this.classProp = this.$element("classProp").getInspector()
this.classPropNone = this.$element("classPropNone").getInspector()
this.styleProp = this.$element("styleProp").getInspector()
this.refProp = this.$element("refProp").getInspector()
this.refPropNone = this.$element("refPropNone").getInspector()
this.disabledPropTrue = this.$element("disabledPropTrue").getInspector()
this.disabledPropFalse = this.$element("disabledPropFalse").getInspector()
this.disabledPropNone = this.$element("disabledPropNone").getInspector()
this.focusablePropTrue = this.$element("focusablePropTrue").getInspector()
this.focusablePropFalse = this.$element("focusablePropFalse").getInspector()
this.focusablePropNone = this.$element("focusablePropNone").getInspector()
this.dataProp = this.$element("dataProp").getInspector()
this.dataPropNone = this.$element("dataPropNone").getInspector()
this.clickEffectPropSmall = this.$element("clickEffectPropSmall").getInspector()
this.clickEffectPropMedium = this.$element("clickEffectPropMedium").getInspector()
this.clickEffectPropLarge = this.$element("clickEffectPropLarge").getInspector()
this.clickEffectPropNone = this.$element("clickEffectPropNone").getInspector()
this.dirPropRtl = this.$element("dirPropRtl").getInspector()
this.dirPropAuto = this.$element("dirPropAuto").getInspector()
this.dirPropLtr = this.$element("dirPropLtr").getInspector()
this.dirPropNone = this.$element("dirPropNone").getInspector()
this.forPropNull = this.$element("forPropNull").getInspector()
this.forPropOne = this.$element("forPropOne").getInspector()
this.forPropThree = this.$element("forPropThree").getInspector()
this.ifPropTrue = this.$element("ifPropTrue").getInspector()
this.showPropTrue = this.$element("showPropTrue").getInspector()
this.showPropFalse = this.$element("showPropFalse").getInspector()
this.showPropNone = this.$element("showPropNone").getInspector()
this.valueProp = this.$element("valueProp").getInspector()
this.valuePropNone = this.$element("valuePropNone").getInspector()
this.iconProp = this.$element("iconProp").getInspector()
this.iconPropNone = this.$element("iconPropNone").getInspector()
},
}
ace/ace_standard/src/main/js/default/pages/tspan/index.css → ace/ace_standard/src/main/js/default/pages/toolbarItem/router/index.css
浏览文件 @ f45223c9
/**
* 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%;
......@@ -11,6 +26,10 @@
flex-weight: 1;
}
.style-container{
flex-direction: column;
}
.title{
width: 100%;
font-size: 18px;
......@@ -27,17 +46,172 @@
margin: 2px;
padding: 2px;
}
.toolbar{
width: 50%;
background-color: #eeeeee;
margin-left: 25%;
border: 1px solid #888888;
}
.style1{
color: #000000;
font-size: 16px;
allow-scale: true;
font-style: normal;
font-weight: 600;
text-decoration: underline;
font-family: sans-serif;
background: linear-gradient(red, #00ff00);
}
.style2{
color: #000000;
font-size: 16px;
font-weight: 600;
background-color: red;
opacity: 0.7;
}
.style3{
color: #000000;
font-size: 16px;
font-weight: 600;
background-image:url('common/images/image.jpg');
background-size: auto;
background-repeat: repeat;
background-position: top center;
display: flex;
visibility: visible;
}
.contain1{
.flex-item {
width: 20px;
height: 20px;
border-radius: 16px;
}
.color-primary {
background-color: mediumpurple;
}
.color-warning {
background-color: pink;
}
.color-success {
background-color: cornflowerblue;
}
.grid-child {
width: 100%;
height: 70px;
border-radius: 2px;
}
.grid-left-top {
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid plum;
background: linear-gradient(pink, purple);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 0;
grid-row-end: 0;
grid-column-end: 0;
}
.grid-left-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px solid plum;
background: linear-gradient(pink, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 1;
grid-column-start: 0;
grid-row-end: 1;
grid-column-end: 0;
}
.grid-right-top {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px dotted plum;
background: linear-gradient(mediumpurple, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 1;
grid-row-end: 0;
grid-column-end: 1;
}
.grid-right-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px dotted plum;
background: linear-gradient(pink, mediumpurple);
box-shadow: 0px 0px 2px 2px pink;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 1;
grid-column-end: 1;
}
.event-container{
flex-direction: column;
flex-weight: 1;
}
.event1{
width: 60%;
flex-weight: 1;
background-color: yellow;
}
.event2{
width: 70%;
flex-weight: 1;
background-color: red;
}
.event3{
width: 80%;
flex-weight: 1;
background-color: #ad4e2a;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 2;
}
#prop1 {
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
height: 30px;
background-color: pink;
width: 100%;
margin: 5px;
}
.prop3 {
height: 30px;
background-color: darkseagreen;
width: 100%;
margin: 5px;
}
.prop4{
height: 30px;
background-color: darkseagreen;
width: 100%;
margin: 5px;
}
.prop5{
background-color: darkseagreen;
width: 100%;
}
.ani-container{
......@@ -94,23 +268,34 @@
flex-direction: column;
}
.gradient-toolbar{
font-size: 16px;
}
.gradient1{
width: 100%;
height: 50px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 50px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 50px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
stroke-width: 30px;
width: 100%;
height: 50px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
......@@ -118,16 +303,25 @@
.access-container{
flex-direction: column;
}
.access1{
background-color: #321124;
margin: 5px;
width: 90%;
height: 50px;
}
.multimode-container{
.atom-container{
flex-direction: column;
}
.multimode1{
margin: 5px;
.multiMode-container{
flex-direction: column;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/toolbarItem/router/index.hml 0 → 100644
浏览文件 @ f45223c9
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
特有样式
</text>
<text class="sub-title">
toolbarItem样式1
</text>
<toolbar class="toolbar">
<toolbar-item class="style1" id="style1">
title
</toolbar-item>
</toolbar>
<text class="sub-title">
toolbarItem样式2
</text>
<toolbar class="toolbar">
<toolbar-item class="style2" id="style2">
title
</toolbar-item>
</toolbar>
<text class="sub-title">
toolbarItem样式3
</text>
<toolbar class="toolbar">
<toolbar-item class="style3" id="style3">
title
</toolbar-item>
</toolbar>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
toolbarItem动画样式1
</text>
<toolbar class="ani1">
<toolbar-item class="style3">
title
</toolbar-item>
</toolbar>
<text class="sub-title">
toolbarItem动画样式2
</text>
<toolbar class="ani2">
<toolbar-item class="style3">
title
</toolbar-item>
</toolbar>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
toolbarItem无障碍1
</text>
<toolbar class="toolbar">
<toolbar-item class="access1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
title
</toolbar-item>
</toolbar>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
toolbarItem通用属性1
</text>
<toolbar class="toolbar">
<toolbar-item id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
title
</toolbar-item>
</toolbar>
<text class="sub-title">
toolbarItem通用属性2
</text>
<toolbar class="toolbar">
<toolbar-item class="prop2" ref ="prop2" id="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
title
</toolbar-item>
</toolbar>
<text class="sub-title">
toolbarItem通用属性3
</text>
<toolbar class="toolbar">
<toolbar-item style="color: #679855; margin: 5px;" class="prop3" id="prop3">
title
</toolbar-item>
</toolbar>
<text class="sub-title">
toolbarItem特有属性
</text>
<toolbar class="toolbar">
<toolbar-item class="prop4" id="prop4" value="value">
</toolbar-item>
</toolbar>
<toolbar class="toolbar">
<toolbar-item class="prop5" id="prop5" icon="common/images/icon.png">
</toolbar-item>
</toolbar>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
toolbarItem通用事件1
</text>
<toolbar class="toolbar">
<toolbar-item class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
title
</toolbar-item>
</toolbar>
<text class="sub-title">
toolbarItem通用事件2
</text>
<toolbar class="toolbar">
<toolbar-item class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
title
</toolbar-item>
</toolbar>
<text class="sub-title">
toolbarItem通用事件3
</text>
<toolbar class="toolbar">
<toolbar-item class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop"
onaccessibility="onAccessibility">
title
</toolbar-item>
</toolbar>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/toolbarItem/router/index.js 0 → 100644
浏览文件 @ f45223c9
/**
* 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';
var options = {
duration: 1500,
easing: 'friction',
delay: 100,
fill: 'forwards',
iterations: 2,
direction: 'normal',
};
var frames = [
{
transform: {
translate: '-120px',
rotate:'10deg',
scale:0.2,
skew:'40deg'
},
opacity: 0.1,
offset: 0.0,
width: '40%',
height:'20px',
backgroundColor:'#ff0000',
backgroundPosition:'10px 20px',
transformOrigin:'left top'
},
{
transform: {
translateX: '0px',
translateY: '5px',
rotateX:'10deg',
rotateY:'10deg',
scaleX:0.5,
scaleY:0.7,
skewX:'22deg',
skewY:'30deg'
},
opacity: 0.6,
offset: 2.0,
width: '60%',
height:'30px',
backgroundColor:'#ff00ff',
backgroundPosition:'15px 25px',
transformOrigin:'center top'
},
{
transform: {
translateX: '100px',
translateY: '0px',
translateZ: '20px',
rotateX:'0deg',
rotateY:'0deg',
rotateZ:'30deg',
scaleX:1,
scaleY:1,
scaleZ:2,
skewX:'0',
skewY:'0',
skewZ:'30deg'
},
opacity: 1,
offset: 0.0,
width: '100%',
height:'30px',
backgroundColor:'#ffff00',
backgroundPosition:'0px',
transformOrigin:'center center'
},
];
export default {
onShow(){
// 通用属性
var prop1 = this.$element('prop1');
var name1 = prop1.dataSet.name
var prop2 = this.$refs.prop2;
var name2 = prop2.dataSet.name
prompt.showToast({
message: 'prop1--' + name1 + '\nprop2--' + name2
});
var styleValues = this.getStyleValues();
var propsValues = this.getPropValues();
globalThis.value = {
styleValues:styleValues,
propsValues:propsValues
}
},
getStyleValues(){
var styleValue1 = this.$element("style1").getInspector()
var styleValue2 = this.$element("style2").getInspector()
var styleValue3 = this.$element("style3").getInspector()
return {
style1:styleValue1,
style2:styleValue2,
style3:styleValue3,
}
},
getPropValues(){
var propValue1 = this.$element("prop1").getInspector()
var propValue2 = this.$element("prop2").getInspector()
var propValue3 = this.$element("prop3").getInspector()
var propValue4 = this.$element("prop4").getInspector()
var propValue5 = this.$element("prop5").getInspector()
return {
prop1:propValue1,
prop2:propValue2,
prop3:propValue3,
prop4:propValue4,
prop5:propValue5
}
},
touchStart(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchstart:\n' + message
});
},
touchMove(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchMove:\n' +message
});
},
touchEnd(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchEnd:\n' +message
});
},
touchCancel(event){
var globalX = event.touches[0].globalX
var globalY = event.touches[0].globalY
var localX = event.touches[0].localX
var localY = event.touches[0].localY
var size = event.touches[0].size
var force = event.touches[0].force
var changeGlobalX = event.changedTouches[0].globalX
var changeGlobalY = event.changedTouches[0].globalY
var changeLocalX = event.changedTouches[0].localX
var changeLocalY = event.changedTouches[0].localY
var changeSize = event.changedTouches[0].size
var changeForce = event.changedTouches[0].force
var message = 'globalX--' + globalX + ',globalY--' + globalY +
',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force +
',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY +
',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY +
',changeSize--' + changeSize + ',changeForce--' + changeForce;
prompt.showToast({
message: 'touchCancel:\n' +message
});
},
click(){
prompt.showToast({
message: 'click'
});
},
doubleClick(){
prompt.showToast({
message: 'doubleClick'
});
},
longPress(){
prompt.showToast({
message: 'longPress'
});
},
focus(){
prompt.showToast({
message: 'focus'
});
},
blur(){
prompt.showToast({
message: 'blur'
});
},
key(event){
var code = event.code;
var action = event.action;
var repeatCount = event.repeatCount;
var timestampStart = event.timestampStart;
var message = 'code--' + code + ',action--' + action +
',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart;
prompt.showToast({
message: 'key:\n' + message
});
},
swipe(event){
var direction = event.direction;
var distance = event.distance;
var message = 'direction--' + direction + ',distance--' + distance;
prompt.showToast({
message: 'swipe:\n' + message
});
},
attached(){
prompt.showToast({
message: 'attached'
});
},
detached(){
prompt.showToast({
message: 'detached'
});
},
pinchStart(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchStart:\n' + message
});
},
pinchUpdate(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchEnd(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchUpdate:\n' + message
});
},
pinchCancel(event){
var scale = event.scale
var pinchCenterX = event.pinchCenterX
var pinchCenterY = event.pinchCenterY
var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX +
',pinchCenterY--' + pinchCenterY;
prompt.showToast({
message: 'pinchCancel:\n' + message
});
},
dragStart(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragStart:\n' + message
});
},
drag(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drag:\n' + message
});
},
dragEnd(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnd:\n' + message
});
},
dragEnter(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragEnter:\n' + message
});
},
dragOver(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragOver:\n' + message
});
},
dragLeave(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'dragLeave:\n' + message
});
},
drop(event){
var type = event.type
var globalX = event.globalX
var globalY = event.globalY
var timestamp = event.timestamp
var message = 'type--' + type + ',globalX--' + globalX +
',globalY--' + globalY + ',timestamp--' + timestamp;
prompt.showToast({
message: 'drop:\n' + message
});
},
onAccessibility() {
prompt.showToast({
message: 'onAccessibility'
});
}
}
ace/ace_standard/src/main/js/default/pages/tspan/prop/index.css 0 → 100644
浏览文件 @ f45223c9
/**
* 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;
}
.svg-style{
width: 100px;
flex-weight: 1;
background-color: #eee;
}
.prop-container{
flex-direction: column;
flex-weight: 1;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/tspan/prop/index.hml 0 → 100644
浏览文件 @ f45223c9
<!--/**
* 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">
tspan通用属性
</text>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
tspan特有属性
</text>
<text class="sub-title">
标识属性 -- id
</text>
<svg class="svg-style">
<text>
<tspan id="idProp" y="10">
text
</tspan>
</text>
</svg>
<text class="sub-title">
x坐标属性 -- x
</text>
<svg class="svg-style">
<text>
<tspan id="xPropLength" x="30" y="10">
text
</tspan>
</text>
<text>
<tspan id="xPropPercentage" x="60" y="10">
text
</tspan>
</text>
<text>
<tspan id="xPropNone" x="" y="10">
text
</tspan>
</text>
</svg>
<text class="sub-title">
y坐标属性 -- y
</text>
<svg class="svg-style">
<text>
<tspan id="yPropLength" y="10">
text
</tspan>
</text>
<text>
<tspan id="yPropPercentage" y="100%">
text
</tspan>
</text>
<text>
<tspan id="yPropNone" y="">
text
</tspan>
</text>
</svg>
<text class="sub-title">
x轴偏移属性 -- dx
</text>
<svg class="svg-style">
<text>
<tspan id="dxPropLength" dx="30" y="10">
text
</tspan>
</text>
<text>
<tspan id="dxPropPercentage" dx="60%" y="10">
text
</tspan>
</text>
<text>
<tspan id="dxPropNone" dx="" y="10">
text
</tspan>
</text>
</svg>
<text class="sub-title">
y轴偏移属性 -- dy
</text>
<svg class="svg-style">
<text>
<tspan id="dyPropLength" dy="10">
text
</tspan>
</text>
<text>
<tspan id="dyPropPercentage" dy="100%">
text
</tspan>
</text>
<text>
<tspan id="dyPropNone" dy="0">
text
</tspan>
</text>
</svg>
<text class="sub-title">
旋转属性 -- rotate
</text>
<svg class="svg-style">
<text>
<tspan id="rotateProp" rotate="30" y="10">
text
</tspan>
</text>
<text>
<tspan id="rotatePropNone" rotate="" y="100%">
text
</tspan>
</text>
</svg>
<text class="sub-title">
字体大小属性 -- font-size
</text>
<svg class="svg-style">
<text>
<tspan id="fontSizeProp" font-size="20" y="15">
text
</tspan>
</text>
<text>
<tspan id="fontSizePropNone" font-size="" x="60" y="15">
text
</tspan>
</text>
</svg>
<text class="sub-title">
字体填充颜色属性 -- fill
</text>
<svg class="svg-style">
<text>
<tspan id="fillProp" fill="red" y="10">
text
</tspan>
</text>
<text>
<tspan id="fillPropNone" fill="" y="100%">
text
</tspan>
</text>
</svg>
<text class="sub-title">
字体填充透明度属性 -- fill-opacity
</text>
<svg class="svg-style">
<text>
<tspan id="fillOpacityProp" fill-opacity="0.5" y="10">
text
</tspan>
</text>
<text>
<tspan id="fillOpacityPropNone" fill-opacity="" y="100%">
text
</tspan>
</text>
</svg>
<text class="sub-title">
元素的透明度属性 -- opacity
</text>
<svg class="svg-style">
<text>
<tspan id="opacityProp" opacity="0.8" y="10">
text
</tspan>
</text>
<text>
<tspan id="opacityPropNone" opacity="" y="100%">
text
</tspan>
</text>
</svg>
<text class="sub-title">
字体边框颜色属性 -- stroke
</text>
<svg class="svg-style">
<text>
<tspan id="strokeProp" stroke="#ff00ff" y="10">
text
</tspan>
</text>
<text>
<tspan id="strokePropNone" stroke="" y="100%">
text
</tspan>
</text>
</svg>
<text class="sub-title">
字体边框宽度属性 -- stroke-width
</text>
<svg class="svg-style">
<text>
<tspan id="strokeWidthProp" stroke="#ff00ff" stroke-width="2" y="10">
text
</tspan>
</text>
<text>
<tspan id="strokeWidthPropNone" stroke="#ff00ff" stroke-width="" y="100%">
text
</tspan>
</text>
</svg>
<text class="sub-title">
字体边框透明度属性 -- stroke-opacity
</text>
<svg class="svg-style">
<text>
<tspan id="strokeOpacityProp" stroke-opacity="0.4" stroke-width="2" stroke="#ff00ff" y="10">
text
</tspan>
</text>
<text>
<tspan id="strokeOpacityPropNone" stroke-opacity="" stroke-width="2" stroke="#ff00ff" y="100%">
text
</tspan>
</text>
</svg>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/tspan/prop/index.js 0 → 100644
浏览文件 @ f45223c9
/**
* 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,
xPropLength : null,
xPropPercentage: null,
xPropNone : null,
yPropLength : null,
yPropPercentage : null,
yPropNone : null,
dxPropLength : null,
dxPropPercentage: null,
dxPropNone : null,
dyPropLength : null,
dyPropPercentage : null,
dyPropNone : null,
rotateProp : null,
rotatePropNone: null,
fontSizeProp : null,
fontSizePropNone: null,
fillProp : null,
fillPropNone : null,
fillOpacityProp : null,
fillOpacityPropNone : null,
opacityProp : null,
opacityPropNone : null,
strokeProp : null,
strokePropNone : null,
strokeWidthProp : null,
strokeWidthPropNone : null,
strokeOpacityProp : null,
strokeOpacityPropNone : null,
},
onShow(){
this.getCommonPropValues();
globalThis.value = {
idProp : this.idProp,
xPropLength : this.xPropLength,
xPropPercentage: this.xPropPercentage,
xPropNone : this.xPropNone,
yPropLength : this.yPropLength,
yPropPercentage : this.yPropPercentage,
yPropNone : this.yPropNone,
dxPropLength : this.dxPropLength,
dxPropPercentage: this.dxPropPercentage,
dxPropNone : this.dxPropNone,
dyPropLength : this.dyPropLength,
dyPropPercentage : this.dyPropPercentage,
dyPropNone : this.dyPropNone,
rotateProp : this.rotateProp,
rotatePropNone : this.rotatePropNone,
fontSizeProp : this.fontSizeProp,
fontSizePropNone : this.fontSizePropNone,
fillProp : this.fillProp,
fillPropNone : this.fillPropNone,
fillOpacityProp : this.fillOpacityProp,
fillOpacityPropNone : this.fillOpacityPropNone,
opacityProp : this.opacityProp,
opacityPropNone : this.opacityPropNone,
strokeProp : this.strokeProp,
strokePropNone : this.strokePropNone,
strokeWidthProp : this.strokeWidthProp,
strokeWidthPropNone : this.strokeWidthPropNone,
strokeOpacityProp : this.strokeOpacityProp,
strokeOpacityPropNone : this.strokeOpacityPropNone,
}
},
getCommonPropValues(){
this.idProp = this.$element("idProp").getInspector()
this.xPropLength = this.$element("xPropLength").getInspector()
this.xPropPercentage = this.$element("xPropPercentage").getInspector()
this.xPropNone = this.$element("xPropNone").getInspector()
this.yPropLength = this.$element("yPropLength").getInspector()
this.yPropPercentage = this.$element("yPropPercentage").getInspector()
this.yPropNone = this.$element("yPropNone").getInspector()
this.dxPropLength = this.$element("dxPropLength").getInspector()
this.dxPropPercentage = this.$element("dxPropPercentage").getInspector()
this.dxPropNone = this.$element("dxPropNone").getInspector()
this.dyPropLength = this.$element("dyPropLength").getInspector()
this.dyPropPercentage = this.$element("dyPropPercentage").getInspector()
this.dyPropNone = this.$element("dyPropNone").getInspector()
this.rotateProp = this.$element("rotateProp").getInspector()
this.rotatePropNone = this.$element("rotatePropNone").getInspector()
this.fontSizeProp = this.$element("fontSizeProp").getInspector()
this.fontSizePropNone = this.$element("fontSizePropNone").getInspector()
this.fillProp = this.$element("fillProp").getInspector()
this.fillPropNone = this.$element("fillPropNone").getInspector()
this.fillOpacityProp = this.$element("fillOpacityProp").getInspector()
this.fillOpacityPropNone = this.$element("fillOpacityPropNone").getInspector()
this.opacityProp = this.$element("opacityProp").getInspector()
this.opacityPropNone = this.$element("opacityPropNone").getInspector()
this.strokeProp = this.$element("strokeProp").getInspector()
this.strokePropNone = this.$element("strokePropNone").getInspector()
this.strokeWidthProp = this.$element("strokeWidthProp").getInspector()
this.strokeWidthPropNone = this.$element("strokeWidthPropNone").getInspector()
this.strokeOpacityProp = this.$element("strokeOpacityProp").getInspector()
this.strokeOpacityPropNone = this.$element("strokeOpacityPropNone").getInspector()
return
},
}
ace/ace_standard/src/main/js/default/pages/tspan/router/index.css 0 → 100644
浏览文件 @ f45223c9
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.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: center;
margin: 2px;
padding: 2px;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 2;
align-items: center;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/tspan/index.hml → ace/ace_standard/src/main/js/default/pages/tspan/router/index.hml
浏览文件 @ f45223c9
......@@ -63,123 +63,5 @@
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
tspan动画样式1
</text>
<svg class="ani1" width="100" height="100">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="red" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan动画样式2
</text>
<svg class="ani2" width="100" height="100">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="red" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
tspan渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
tspan无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
tspan多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/video/prop/index.css
浏览文件 @ f45223c9
......@@ -570,4 +570,20 @@
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.specific-style{
flex-weight: 1;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.color-grey{
background-color: grey;
}
.color-red{
background-color: red;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/video/prop/index.hml
浏览文件 @ f45223c9
......@@ -237,5 +237,30 @@
speed="">
</video>
<text class="sub-title">
特有属性 -- tid
</text>
<video id="tidProp"
class="specific-style color-grey"
tid="tid">
</video>
<video id="tidPropNone"
class="specific-style color-red"
tid="">
</video>
<text class="sub-title">
特有属性 -- elif
</text>
<video if="false"></video>
<video id="elifPropTrue"
class="specific-style color-grey"
elif="true">
</video>
<video id="elifPropFalse"
class="specific-style color-red"
elif="false">
</video>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/video/router/index.hml
浏览文件 @ f45223c9
......@@ -104,7 +104,8 @@
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
ondrop="drop"
onaccessibility="onAccessibility">
</video>
<text class="sub-title sub-title-2">
video特有事件1
......
ace/ace_standard/src/main/js/default/pages/video/router/index.js
浏览文件 @ f45223c9
// @ts-nocheck
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
......@@ -605,5 +606,10 @@ export default {
prompt.showToast({
message: 'stop'
});
},
onAccessibility() {
prompt.showToast({
message: 'onAccessibility'
});
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或