Skip to content

X
Xts Acts

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

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

add test cases 

Signed-off-by: Nbayanxing <bayanxing@kaihongdigi.com>
上级 1f076f5f
展开全部 显示空白变更内容
内联 并排
Showing with 12961 addition and 412 deletion
arkui/ace_standard/src/main/config.json
浏览文件 @ 23355eee
......@@ -75,6 +75,7 @@
"pages/rating/style/index",
"pages/search/router/index",
"pages/search/prop/index",
"pages/search/style/index",
"pages/toolbar/prop/index",
"pages/toolbar/router/index",
"pages/toolbarItem/prop/index",
......@@ -113,8 +114,10 @@
"pages/badge/style/index",
"pages/dialog/router/index",
"pages/dialog/prop/index",
"pages/dialog/style/index",
"pages/form/router/index",
"pages/form/prop/index",
"pages/form/style/index",
"pages/list/router/index",
"pages/list/prop/index",
"pages/list/style/index",
......@@ -128,6 +131,7 @@
"pages/marquee/prop/index",
"pages/imageAnimator/prop/index",
"pages/imageAnimator/router/index",
"pages/imageAnimator/style/index",
"pages/panel/router/index",
"pages/panel/prop/index",
"pages/panel/style/index",
......@@ -148,6 +152,7 @@
"pages/stepperItem/style/index",
"pages/swiper/router/index",
"pages/swiper/prop/index",
"pages/swiper/style/index",
"pages/tabs/router/index",
"pages/tabs/prop/index",
"pages/tab-bar/router/index",
......@@ -158,12 +163,15 @@
"pages/svg_text/router/index",
"pages/video/prop/index",
"pages/video/router/index",
"pages/video/style/index",
"pages/gridContainer/prop/index",
"pages/gridContainer/router/index",
"pages/gridRow/prop/index",
"pages/gridRow/router/index",
"pages/gridRow/style/index",
"pages/gridCol/prop/index",
"pages/gridCol/router/index",
"pages/gridCol/style/index",
"pages/canvas/prop/index",
"pages/canvas/router/index",
"pages/canvas/style/index",
......@@ -210,6 +218,7 @@
"pages/chart/prop/index",
"pages/image/prop/index",
"pages/span/prop/index",
"pages/span/style/index",
"pages/menu/prop/index",
"pages/switch/prop/index",
"pages/slider/prop/index",
......@@ -221,7 +230,12 @@
"pages/circle/router/index",
"pages/richtext/prop/index",
"pages/richtext/router/index",
"pages/richtext/style/index"
"pages/richtext/style/index",
"pages/camera/prop/index",
"pages/camera/router/index",
"pages/camera/style/index",
"pages/web/prop/index",
"pages/web/router/index"
],
"name": "default",
"window": {
......
arkui/ace_standard/src/main/js/default/pages/button/style/index.css
浏览文件 @ 23355eee
......@@ -549,6 +549,8 @@
#addTwo{
width: 100px;
height: 15px;
font-size:14px;
allow-scale:true;
background-image:url('common/images/image.png');
background-size:auto;
position:relative;
......@@ -564,6 +566,7 @@
#addThree{
width: 100px;
height: 15px;
allow-scale:false;
background-color:#000000;
transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2);
clip-path:content-box;
......@@ -574,6 +577,7 @@
#addFour{
width: 100px;
height: 15px;
font-style:normal;
background-color:#000000;
transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px);
clip-path:circle(1);
......@@ -584,6 +588,7 @@
#addFive{
width: 100px;
height: 15px;
font-style:italic;
background-color:#000000;
transform: translateY(1px) translateZ(10px)
scale(1,2) scaleZ(0.4)
......@@ -606,38 +611,59 @@
#addSeven{
width: 100px;
height: 15px;
text-color:#ff0000;
font-family:sans-serif;
background-color:#000000;
clip-path:path(1);
aspect-ratio:2;
font-weight:400;
}
#addSeven:disabled{
#addEight{
width: 100px;
height: 15px;
icon-width:100px;
icon-height:15px;
background-color:#ff0000;
font-weight:500;
}
#addSeven:active{
#addNine{
width: 100px;
height: 15px;
radius:5px;
background-color:#ff0000;
font-weight:600;
}
#addSeven:focus{
width: 100px;
height: 15px;
#addTen{
width: 90px;
height: 16px;
icon-width:90px;
icon-height:16px;
radius:3px;
background-color:#ff0000;
font-weight:700;
}
#addSeven:waiting{
width: 100px;
height: 15px;
#addEleven{
width: 91px;
height: 17px;
icon-width:91px;
icon-height:17px;
radius:4px;
background-color:#ff0000;
font-weight:700;
font-weight:500;
}
#addTwelve{
width: 93px;
height: 18px;
icon-width:93px;
icon-height:18px;
radius:6px;
background-color:#ff0000;
font-weight:600;
}
@font-face {
......
arkui/ace_standard/src/main/js/default/pages/button/style/index.hml
浏览文件 @ 23355eee
......@@ -123,7 +123,6 @@
<text class="sub-title">
特有样式
</text>
<div id="specificOne">
<button id="addOne">
</button>
<button id="addTwo">
......@@ -138,17 +137,16 @@
</button>
<button id="addSeven">
</button>
<button id="addSeven:disabled">
<button id="addEight">
</button>
<button id="addSeven:active">
<button id="addNine">
</button>
<button id="addSeven:focus">
<button id="addTen">
</button>
<button id="addFive">
<button id="addEleven">
</button>
<button id="addFive">
<button id="addTwelve">
</button>
</div>
</div>
</div>
arkui/ace_standard/src/main/js/default/pages/button/style/index.js
浏览文件 @ 23355eee
......@@ -14,6 +14,146 @@
*/
export default {
data:{
styleOne : null,
styleTwo : null,
styleThree : null,
styleFour : null,
styleFive : null,
styleSix : null,
styleSeven : null,
styleEight : null,
styleNine : null,
styleTen : null,
styleEleven : null,
styleTwelve : null,
styleThirteen : null,
styleFourteen : null,
styleFifteen : null,
styleSixteen : null,
styleSeventeen : null,
styleEighteen : null,
styleNineteen : null,
styleTwenty : null,
styleTwentyOne : null,
styleTwentyTwo : null,
styleTwentyThree : null,
styleTwentyFour : null,
styleTwentyFive : null,
styleTwentySix : null,
styleTwentySeven : null,
styleTwentyNine : null,
styleThirty : null,
styleThirtyOne : null,
styleThirtyTwo : null,
addOne : null,
addTwo : null,
addThree : null,
addFour : null,
addFive : null,
addSix : null,
addSeven : null,
addEight : null,
addNine : null,
addTen : null,
addEleven : null,
addTwelve : null,
},
onShow(){
this.getCommonStyleValues();
globalThis.value = {
styleOne : this.styleOne,
styleTwo : this.styleTwo,
styleThree : this.styleThree,
styleFour : this.styleFour,
styleFive : this.styleFive,
styleSix : this.styleSix,
styleSeven : this.styleSeven,
styleEight : this.styleEight,
styleNine : this.styleNine,
styleTen : this.styleTen,
styleEleven : this.styleEleven,
styleTwelve : this.styleTwelve,
styleThirteen : this.styleThirteen,
styleFourteen : this.styleFourteen,
styleFifteen : this.styleFifteen,
styleSixteen : this.styleSixteen,
styleSeventeen : this.styleSeventeen,
styleEighteen : this.styleEighteen,
styleNineteen : this.styleNineteen,
styleTwenty : this.styleTwenty,
styleTwentyOne : this.styleTwentyOne,
styleTwentyTwo : this.styleTwentyTwo,
styleTwentyThree : this.styleTwentyThree,
styleTwentyFour : this.styleTwentyFour,
styleTwentyFive : this.styleTwentyFive,
styleTwentySix : this.styleTwentySix,
styleTwentySeven : this.styleTwentySeven,
styleTwentyNine : this.styleTwentyNine,
styleThirty : this.styleThirty,
styleThirtyOne : this.styleThirtyOne,
styleThirtyTwo : this.styleThirtyTwo,
addOne : this.addOne,
addTwo : this.addTwo,
addThree : this.addThree,
addFour : this.addFour,
addFive : this.addFive,
addSix : this.addSix,
addSeven : this.addSeven,
addEight : this.addEight,
addNine : this.addNine,
addTen : this.addTen,
addEleven : this.addEleven,
addTwelve : this.addTwelve
}
},
getCommonStyleValues(){
this.styleOne = this.$element("styleOne").getInspector()
this.styleTwo = this.$element("styleTwo").getInspector()
this.styleThree = this.$element("styleThree").getInspector()
this.styleFour = this.$element("styleFour").getInspector()
this.styleFive = this.$element("styleFive").getInspector()
this.styleSix = this.$element("styleSix").getInspector()
this.styleSeven = this.$element("styleSeven").getInspector()
this.styleEight = this.$element("styleEight").getInspector()
this.styleNine = this.$element("styleNine").getInspector()
this.styleTen = this.$element("styleTen").getInspector()
this.styleEleven = this.$element("styleEleven").getInspector()
this.styleTwelve = this.$element("styleTwelve").getInspector()
this.styleThirteen = this.$element("styleThirteen").getInspector()
this.styleFourteen = this.$element("styleFourteen").getInspector()
this.styleFifteen = this.$element("styleFifteen").getInspector()
this.styleSixteen = this.$element("styleSixteen").getInspector()
this.styleSeventeen = this.$element("styleSeventeen").getInspector()
this.styleEighteen = this.$element("styleEighteen").getInspector()
this.styleNineteen = this.$element("styleNineteen").getInspector()
this.styleTwenty = this.$element("styleTwenty").getInspector()
this.styleTwentyOne = this.$element("styleTwentyOne").getInspector()
this.styleTwentyTwo = this.$element("styleTwentyTwo").getInspector()
this.styleTwentyThree = this.$element("styleTwentyThree").getInspector()
this.styleTwentyFour = this.$element("styleTwentyFour").getInspector()
this.styleTwentyFive = this.$element("styleTwentyFive").getInspector()
this.styleTwentySix = this.$element("styleTwentySix").getInspector()
this.styleTwentySeven = this.$element("styleTwentySeven").getInspector()
this.styleTwentyNine = this.$element("styleTwentyNine").getInspector()
this.styleThirty = this.$element("styleThirty").getInspector()
this.styleThirtyOne = this.$element("styleThirtyOne").getInspector()
this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector()
this.addOne = this.$element("addOne").getInspector()
this.addTwo = this.$element("addTwo").getInspector()
this.addThree = this.$element("addThree").getInspector()
this.addFour = this.$element("addFour").getInspector()
this.addFive = this.$element("addFive").getInspector()
this.addSix = this.$element("addSix").getInspector()
this.addSeven = this.$element("addSeven").getInspector()
this.addEight = this.$element("addEight").getInspector()
this.addNine = this.$element("addNine").getInspector()
this.addTen = this.$element("addTen").getInspector()
this.addEleven = this.$element("addEleven").getInspector()
this.addTwelve = this.$element("addTwelve").getInspector()
},
}
arkui/ace_standard/src/main/js/default/pages/camera/prop/index.css 0 → 100644
浏览文件 @ 23355eee
/**
* 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 {
height: 15px;
margin-bottom: 2px;
background-color:#f00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
.classProp {
height: 15px;
margin-bottom: 2px;
background-color:#0f0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#classPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#0000e0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refProp {
height: 15px;
margin-bottom: 2px;
background-color:#00f000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#refPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#00000e;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropTrue {
height: 15px;
margin-bottom: 2px;
background-color:#000f00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropFalse {
height: 15px;
margin-bottom: 2px;
background-color:#0000f0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#disabledPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#d00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropTrue {
height: 15px;
margin-bottom: 2px;
background-color:#00000f;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropFalse {
height: 15px;
margin-bottom: 2px;
background-color:#ff0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#focusablePropNone {
height: 15px;
margin-bottom: 2px;
background-color:#0d0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataProp {
height: 15px;
margin-bottom: 2px;
background-color:#0ff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dataPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#00d000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropSmall {
height: 15px;
margin-bottom: 2px;
background-color:#00ff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropMedium {
height: 15px;
margin-bottom: 2px;
background-color:#000ff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropLarge {
height: 15px;
margin-bottom: 2px;
background-color:#fff000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#clickEffectPropNone{
height: 15px;
margin-bottom: 2px;
background-color:#000d00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropRtl {
height: 15px;
margin-bottom: 2px;
background-color:#0fff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropAuto {
height: 15px;
margin-bottom: 2px;
background-color:#00fff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropLtr {
height: 15px;
margin-bottom: 2px;
background-color:#000fff;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#dirPropNone {
height: 15px;
margin-bottom: 2px;
background-color:#0000d0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropNull {
height: 15px;
margin-bottom: 2px;
background-color:#ffff00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropOne {
height: 15px;
margin-bottom: 2px;
background-color:#00e000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#forPropThree {
height: 15px;
margin-bottom: 2px;
background-color:#000e00;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#ifPropTrue {
height: 15px;
margin-bottom: 2px;
background-color:#0ffff0;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropTrue {
height: 15px;
margin-bottom: 2px;
background-color:#e00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropFalse {
height: 15px;
margin-bottom: 2px;
background-color:#0e0000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#showPropNone {
height: 15px;
margin-bottom: 2px;
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;
}
#typeBar{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
}
#typeLine{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeGauge{
height: 50px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeProgress{
height: 50px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeLoading{
height: 50px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeRainbow{
height: 50px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#typeNone{
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;
}
#options{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#optionsNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#datasets{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#datasetsNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#segmentsSeg{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#segmentsRain{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#segmentsNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#effectsTrue{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#effectsFalse{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#effectsNone{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#animationduration{
height: 15px;
margin-bottom: 3px;
background-color:#c00000;
width: 100%;
margin-left: 10px;
margin-right: 10px;
padding-start: 10px;
padding-end: 10px;
}
#animationdurationNone{
height: 15px;
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;
}
arkui/ace_standard/src/main/js/default/pages/camera/prop/index.hml 0 → 100644
浏览文件 @ 23355eee
<!--/**
* 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">
camera通用属性
</text>
<text class="sub-title">
通用属性 -- id
</text>
<camera id="idProp">
</camera>
<text class="sub-title">
通用属性 -- class
</text>
<camera id="classProp"
class="classProp">
</camera>
<camera id="classPropNone"
class="">
</camera>
<text class="sub-title">
通用属性 -- style
</text>
<camera id="styleProp"
style="width:80%;height:20px;background-color:red">
</camera>
<text class="sub-title">
通用属性 -- ref
</text>
<camera id="refProp"
ref="refProp">
</camera>
<camera id="refPropNone"
ref="">
</camera>
<text class="sub-title">
通用属性 -- disabled
</text>
<camera id="disabledPropTrue"
disabled="true">
</camera>
<camera id="disabledPropFalse"
disabled="false">
</camera>
<camera id="disabledPropNone"
disabled="">
</camera>
<text class="sub-title">
通用属性 -- focusable
</text>
<camera id="focusablePropTrue"
focusable="true">
</camera>
<camera id="focusablePropFalse"
focusable="false">
</camera>
<camera id="focusablePropNone"
focusable="">
</camera>
<text class="sub-title">
通用属性 -- data-*
</text>
<camera id="dataProp"
data-camera="通用属性 -- data-camera">
</camera>
<camera id="dataPropNone"
data-camera="">
</camera>
<text class="sub-title">
通用属性 -- click-effect
</text>
<camera id="clickEffectPropSmall"
click-effect="spring-small">
</camera>
<camera id="clickEffectPropMedium"
click-effect="spring-medium">
</camera>
<camera id="clickEffectPropLarge"
click-effect="spring-large">
</camera>
<camera id="clickEffectPropNone"
click-effect="">
</camera>
<text class="sub-title">
通用属性 -- dir
</text>
<camera id="dirPropRtl"
dir="rtl">
</camera>
<camera id="dirPropAuto"
dir="auto">
</camera>
<camera id="dirPropLtr"
dir="ltr">
</camera>
<camera id="dirPropNone"
dir="">
</camera>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
camera特有属性
</text>
<text class="sub-title">
特有属性 -- flash
</text>
<camera id="flashOn"
flash="on">
</camera>
<camera id="flashOff"
flash="off">
</camera>
<camera id="flashTorch"
flash="torch">
</camera>
<camera id="flashNone"
flash="">
</camera>
<text class="sub-title">
特有属性 -- deviceposition
</text>
<camera id="devicePositionFront"
deviceposition="front">
</camera>
<camera id="devicePositionBack"
deviceposition="back">
</camera>
<camera id="devicePositionNone"
deviceposition="">
</camera>
</div>
</div>
arkui/ace_standard/src/main/js/default/pages/camera/prop/index.js 0 → 100644
浏览文件 @ 23355eee
/**
* 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:{
lineData: [
{
strokeColor: '#0081ff',
fillColor: '#cce5ff',
data: [763, 550, 551, 554, 731, 654, 525, 696,
595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
gradient: true,
}
],
lineOps: {
xAxis: {
min: 0,
max: 20,
display: false,
},
yAxis: {
min: 0,
max: 1000,
display: false,
},
series: {
lineStyle: {
width: "5px",
smooth: true,
},
headPoint: {
shape: "circle",
size: 20,
strokeWidth: 5,
fillColor: '#ffffff',
strokeColor: '#007aff',
display: true,
},
loop: {
margin: 2,
gradient: true,
}
}
},
lineSeg:{
startColor:'#f7ce00',
endColor:'#d9542b',
value:50,
name:'蔬菜'
},
lineRain:[
{
startColor:'#f7ce00',
endColor:'#d9542b',
value:50,
name:'蔬菜'
},
{
startColor:'#f7ce00',
endColor:'#d9542b',
value:50,
name:'水果'
}
],
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,
flashOn:null,
flashOff:null,
flashTorch:null,
flashNone:null,
devicePositionFront:null,
devicePositionBack:null,
devicePositionNone: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,
flashOn:this.flashOn,
flashOff:this.flashOff,
flashTorch:this.flashTorch,
flashNone:this.flashNone,
devicePositionFront:this.devicePositionFront,
devicePositionBack:this.devicePositionBack,
devicePositionNone:this.devicePositionNone,
}
},
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()
},
getSpecificPropValues(){
this.flashOn = this.$element("flashOn").getInspector()
this.flashOff = this.$element("flashOff").getInspector()
this.flashTorch = this.$element("flashTorch").getInspector()
this.flashNone = this.$element("flashNone").getInspector()
this.devicePositionFront = this.$element("devicePositionFront").getInspector()
this.devicePositionBack = this.$element("devicePositionBack").getInspector()
this.devicePositionNone = this.$element("devicePositionNone").getInspector()
}
}
arkui/ace_standard/src/main/js/default/pages/camera/router/index.css 0 → 100644
浏览文件 @ 23355eee
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 70%;
}
.contain1{
width: 100%;
height: 15%;
flex-direction: column;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.prop-container{
flex-direction: column;
height: 80%;
padding-left: 2px;
}
.event-container{
flex-direction: column;
height: 35%;
}
.function-container{
flex-direction: column;
height: 30%;
}
.gradient-container{
flex-direction: column;
height: 40%;
}
.access-container{
flex-direction: column;
height: 15%;
}
.atom-container{
flex-direction: column;
height: 45%;
}
.multimode-container{
flex-direction: column;
height: 45%;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
height: 25px;
font-size: 15px;
text-align: left;
margin-bottom: 1px;
padding: 2px;
}
.style1{
width: 60px;
height:30px;
left:5px;
top:5px;
}
.style2{
width: 61px;
height:29px;
left:3px;
top:3px;
}
.style3{
width: 55px;
height:32px;
left:3px;
top:2px;
}
.style4{
width: 54px;
height:32px;
left:3px;
top:2px;
}
.style5{
width: 53px;
height:32px;
left:3px;
top:2px;
}
.style6{
width: 52px;
height:32px;
left:2px;
top:7px;
}
.style7 {
width: 51px;
height:32px;
left:3px;
top:6px;
}
.style8 {
width: 57px;
height:36px;
left:3px;
top:4px;
}
.event1{
width: 100%;
height: 30px;
background-color: salmon;
}
.event2{
width: 100%;
height: 30px;
background-color: darkorchid;
}
.event3{
width: 100%;
height: 30px;
background-color: #ad4e2a;
}
.event4{
width: 100%;
height: 30px;
background-color: blanchedalmond;
}
.event5{
width: 100%;
height: 40px;
background-color: blanchedalmond;
}
#prop1 {
background-color: mediumslateblue;
height: 20px;
margin: 2px;
}
.prop2 {
background-color: salmon;
height: 20px;
margin: 2px;
}
.prop4 {
background-color: skyblue;
height: 20px;
margin: 2px;
}
.prop5 {
background-color: gold;
height: 20px;
width: 100%;
margin: 2px;
stroke-width:10px;
start-angle:90;
total-angle:180;
font-family:sans-serif;
font-size:25px;
center-x:10px;
center-y:10px;
radius:5px;
colors:salmon,sandybrown,gold,black;
weights:2,2,2;
}
.prop6 {
background-color: gold;
height: 30px;
width: 100%;
margin: 2px;
}
.prop7 {
background-color: gold;
height: 20px;
width: 100%;
margin: 2px;
}
.prop8 {
background-color: gold;
height: 20px;
width: 100%;
margin: 2px;
}
.prop9 {
background-color: gold;
height: 20px;
width: 100%;
margin: 2px;
stroke-width:10px;
start-angle:90;
total-angle:180;
font-family:sans-serif;
font-size:25px;
}
.ani1{
color: #72ac33;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
background-color: #ad4e2a;
width: 100%;
height: 55px;
margin: 5px;
}
.gradient1{
margin: 5px;
height: 40px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
margin: 5px;
height: 40px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
margin: 5px;
height: 40px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
margin: 5px;
height: 40px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.access1{
color: #321124;
height: 40px;
margin: 5px;
background-color: chartreuse;
}
.atom1{
background-color: saddlebrown;
width: 40px;
height: 40px;
}
.atom2{
background-color: blueviolet;
width: 40px;
height: 40px;
}
.atom3{
background-color: aquamarine;
width: 40px;
height: 40px;
}
.multimode1{
background-color: firebrick;
height: 40px;
width: 100%;
margin: 5px;
}
.function1{
background-color: #ff0000;
width: 60%;
height: 30px;
}
.function2{
background-color: #00ff00;
width: 60%;
height: 30px;
}
.function3{
background-color: #0000ff;
width: 100%;
height: 30px;
}
.function4 {
flex-direction: row;
width: 60%;
height: 10px;
overflow: scroll;
}
\ No newline at end of file
arkui/ace_standard/src/main/js/default/pages/camera/router/index.hml 0 → 100644
浏览文件 @ 23355eee
<!--/**
* 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">
camera通用样式1
</text>
<camera id="style1" class="style1" >
</camera>
<text class="sub-title">
camera通用样式2
</text>
<camera id="style2" class="style2" >
</camera>
<text class="sub-title">
camera通用样式3
</text>
<camera id="style3" class="style3" >
</camera>
<text class="sub-title">
camera通用样式4
</text>
<camera id="style4" class="style4" >
</camera>
<text class="sub-title">
camera通用样式5
</text>
<div class="contain1">
<camera id="style5" class="style5">
</camera>
<camera id="style6" class="style6">
</camera>
</div>
<text class="sub-title">
camera特有样式
</text>
<camera id="style7" class="style7" >
</camera>
</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">
camera通用属性1
</text>
<camera id="prop1"
class="prop1"
disabled = "true"
focusable ="true"
data-name ="prop1"
click-effect="spring-medium"
dir ="rtl" >
</camera>
<text class="sub-title">
camera通用属性2
</text>
<camera id="prop2"
class="prop2"
ref ="prop2"
disabled = "false"
focusable ="false"
data-name ="prop2"
click-effect="spring-large"
dir ="ltr"
>
</camera>
<text class="sub-title">
camera通用属性3
</text>
<camera id="prop3" style="color: #679855; margin: 5px;width: 100%;height: 40px;" >
</camera>
<text class="sub-title">
camera特有属性4
</text>
<camera id="prop4"
class="prop4"
flash="on"
>
</camera>
<text class="sub-title">
camera特有属性5
</text>
<camera id="prop5"
class="prop5"
flash="off">
</camera>
<text class="sub-title">
camera特有属性6
</text>
<camera id="prop6"
class="prop6"
flash="torch"
>
</camera>
<text class="sub-title">
camera特有属性7
</text>
<camera id="prop7"
class="prop7"
deviceposition="front">
</camera>
<text class="sub-title">
camera特有属性7
</text>
<camera id="prop8"
class="prop8"
deviceposition="back">
</camera>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用事件 -->
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
camera通用事件1
</text>
<camera id="event1" class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel" >
</camera>
<text class="sub-title">
camera通用事件2
</text>
<camera id="event2" class="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached" >
</camera>
<text class="sub-title">
camera通用事件3
</text>
<camera id="event3" class="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop" >
</camera>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 通用方法 -->
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
camera通用方法1
</text>
<camera id="function1" class="function1" ontouchstart="functionTest1" >
</camera>
<text class="sub-title">
camera通用方法2
</text>
<camera id="function2" class="function2" ontouchstart="functionTest2" >
</camera>
<text class="sub-title">
camera通用方法3
</text>
<camera id="function3" class="function3" ontouchstart="functionTest3" >
</camera>
<text class="sub-title">
camera特有事件1
</text>
<camera id="function4" class="function4" ref="linecamera">
</camera>
<button value="Add data" onclick="addData"></button>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<!-- 渐变样式 -->
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
camera渐变样式1
</text>
<camera id="gradient1" class="gradient1" >
</camera>
<text class="sub-title">
camera渐变样式2
</text>
<camera id="gradient2" class="gradient2" >
</camera>
<text class="sub-title">
camera渐变样式3
</text>
<camera id="gradient3" class="gradient3" >
</camera>
<text class="sub-title">
camera渐变样式4
</text>
<camera id="gradient4" class="gradient4" >
</camera>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 无障碍 -->
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
camera无障碍1
</text>
<camera id="access1" class="access1"
onaccessibility="onAccessibility"
accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"
>
</camera>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<!-- 原子布局和多模输入 -->
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
camera原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<camera id="atomA1" class="atom1">
</camera>
<camera id="atomA2" class="atom2">
</camera>
<camera id="atomA3" class="atom3">
</camera>
</div>
<text class="sub-title">
camera原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<camera id="atomB1" class="atom1">
</camera>
<camera id="atomB2" class="atom2">
</camera>
<camera id="atomB3" class="atom3">
</camera>
</div>
<text class="sub-title">
camera原子布局3
</text>
<div style="flex-direction: row;height:40px;width: 100%;">
<camera id="atomC1" class="atom1">
</camera>
<camera id="atomC2" class="atom2">
</camera>
<camera id="atomC3" class="atom3">
</camera>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
camera多模输入1
</text>
<camera id="multiMode1"
class="multimode1"
voicelabel = "voice"
subscriptflag="on"
subscriptlabel="div"
scenelabel="common"
>
</camera>
</div>
</div>
</div>
</div>
arkui/ace_standard/src/main/js/default/pages/camera/router/index.js 0 → 100644
浏览文件 @ 23355eee
/**
* 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 {
data: {
lineData: [
{
strokeColor: '#0081ff',
fillColor: '#cce5ff',
data: [763, 550, 551, 554, 731, 654, 525, 696,
595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
gradient: true,
}
],
lineOps: {
xAxis: {
min: 0,
max: 20,
display: false,
},
yAxis: {
min: 0,
max: 1000,
display: false,
},
series: {
lineStyle: {
width: "5px",
smooth: true,
},
headPoint: {
shape: "circle",
size: 20,
strokeWidth: 5,
fillColor: '#ffffff',
strokeColor: '#007aff',
display: true,
},
loop: {
margin: 2,
gradient: true,
}
}
},
lineSeg:{
startColor:'#f7ce00',
endColor:'#d9542b',
value:50,
name:'蔬菜'
},
lineRain:[
{
startColor:'#f7ce00',
endColor:'#d9542b',
value:50,
name:'蔬菜'
},
{
startColor:'#f7ce00',
endColor:'#d9542b',
value:50,
name:'水果'
}
]
},
onAccessibility(event) {
if (event.eventType == 1) {
// Do Something
}
console.log("onAccessibility" + JSON.stringify(event));
},
addData() {
this.$refs.linechart.append({
serial: 0,
data: [Math.floor(Math.random() * 400) + 400]
})
},
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
});
},
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
});
},
functionTest1(event){
var function1 = this.$element('function1');
function1.focus(true)
var rect = function1.getBoundingClientRect();
var width = rect.width;
var height = rect.height;
var left = rect.left;
var top = rect.top;
var message = 'width--' + width + ',height--' + height +
',left--' + left + ',top--' + top;
prompt.showToast({
message: 'function1 rect:\n' + message
});
},
functionTest2(event){
var function2 = this.$element('function2');
let observer = function2.createIntersectionObserver({
ratios: [0.2, 0], // number
});
observer.observe((isVisible, ratio)=> {
console.info('this element is ' + isVisible + 'ratio is ' + ratio)
prompt.showToast({
message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio
});
})
observer.unobserve()
},
functionTest3(event){
var function3 = this.$element('function3');
var animation = function3.animate(frames, options);
animation.play()
animation.onfinish = function(){
prompt.showToast({
message: 'The animation is finished.'
});
};
animation.oncancel = function(){
prompt.showToast({
message: 'The animation is canceled.'
});
};
animation.onrepeat = function(){
prompt.showToast({
message: 'The animation is repeated.'
});
};
setTimeout(() => {
animation.reverse()
}, 500)
setTimeout(() => {
animation.pause()
}, 1000)
setTimeout(() => {
animation.cancel()
}, 1500)
},
functionTest4(event){
var function4 = this.$element('function4');
var scrollOffset = function4.getScrollOffset();
var x = scrollOffset.x;
var y = scrollOffset.y;
var message = 'x--' + x + ',y--' + y;
prompt.showToast({
message: 'functionTest4 scrollOffset:\n' + message
});
var scrollParam = {
dx:60,
dy:0,
smooth:true
}
function4.scrollBy(scrollParam)
},
reachStart(){
prompt.showToast({
message: 'reachStart'
});
},
reachEnd(){
prompt.showToast({
message: 'reachEnd'
});
},
reachTop(){
prompt.showToast({
message: 'reachTop'
});
},
reachBottom(){
prompt.showToast({
message: 'reachBottom'
});
}
}
arkui/ace_standard/src/main/js/default/pages/camera/style/index.css 0 → 100644
浏览文件 @ 23355eee
/**
* 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 '../../../common/style.css';
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style-container{
flex-direction: column;
width: 50%;
}
#styleOne{
width: 150px;
height: 150px;
position: absolute;
left: 10px;
top: 20px;
}
#styleTwo{
width: 150px;
height: 200px;
position: absolute;
left: 10px;
top: 20px;
}
#styleThree{
width: 50px;
height: 20px;
padding: 2px;
margin:1px;
border-left: 1px solid #ff0000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
opacity: 1;
align-self:baseline;
}
#styleFour{
width: 50px;
height: 20px;
align-self:center;
border: 2px solid #00ff00;
}
#styleFive{
width: 150px;
height: 40px;
border: 5px;
border-image-source: url('/common/images/image.png');
border-image-slice: 5px 10px 10px 5px;
border-image-width: 10px 5px 5px 10px;
border-image-outset: 10px 5px 10px 5px;
border-image-repeat: repeat;
}
#styleSix{
width: 100%;
height: 2%;
background-color: #ff0000;
padding-top: 1%;
padding-left: 2%;
padding-right: 3%;
padding-bottom: 0.5%;
margin-left: 1%;
margin-top: 2%;
margin-right: 1.5%;
margin-bottom: 0.5%;
}
#styleSeven{
width: 70%;
height: 1%;
padding-start: 1%;
padding-end: 2%;
margin-start: 1%;
margin-end: 2%;
background-color: #00ff00;
}
#styleEight{
width: 60%;
height: 1%;
margin: 1%;
padding: 2%;
background-color: #0000ff;
}
#styleNine{
width: 100%;
height: 40px;
display:flex;
}
#styleFive{
width: 100%;
height: 40px;
border: 5px;
border-image-source: url('/common/images/image.png');
border-image-slice: 5px 10px 10px 5px;
border-image-width: 10px 5px 5px 10px;
border-image-outset: 10px 5px 10px 5px;
border-image-repeat: repeat;
}
#styleTen{
width: 100%;
height: 400%;
display: none;
background-color: #ff0000;
}
#styleEleven{
height: 40%;
background-color: #00ff00;
flex:1 1 20px;
z-index:10;
}
#styleTwelve{
height: 50%;
background-color: #ff00ff;
flex-grow:2;
flex-shrink: 3;
flex-basis: 30px;
z-index:13;
}
#styleThirteen{
position: absolute;
left: 10px;
top: 20px;
width: 10px;
height: 10px;
background-color: #00ff00;
z-index:12;
}
#styleFourteen{
position: absolute;
right: 10px;
bottom: 20px;
width: 10px;
height: 10px;
background-color: #0000ff;
z-index:3;
}
#styleFifteen{
position: absolute;
left: 10%;
top: 20%;
width: 10px;
height: 10px;
background-color: #fff000;
z-index:5;
font-weight:800;
}
#styleSixteen{
position: absolute;
right: 10%;
bottom: 20%;
width: 10px;
height: 10px;
background-color: #00ffff;
z-index:15;
font-weight:900;
}
#styleSeventeen{
position: absolute;
start: 50px;
width: 10px;
height: 10px;
background-color: #ffff00;
z-index:7;
}
#styleEighteen{
position: absolute;
end: 20px;
width: 10px;
height: 10px;
background-color: #00ffff;
z-index:4;
}
#styleNineteen{
position: absolute;
start: 20%;
width: 10px;
height: 10px;
background-color: #ffff00;
z-index:1;
}
#styleTwenty{
position: absolute;
end: 20%;
width: 10px;
height: 10px;
background-color: #00ffff;
z-index:17;
}
#styleTwentyOne{
height: 20px;
box-shadow: 2px 4px;
flex-weight: 1;
margin:5px;
}
#styleTwentyTwo{
flex-weight: 1;
height: 20px;
box-shadow: 2px 4px 6px 8px;
margin:5px;
}
#styleTwentyThree{
flex-weight: 1;
height: 20px;
box-shadow: 1px 2px 3px 4px #ff0000;
margin:5px;
}
#styleTwentyFour{
width: 150px;
height: 20px;
background-color: #00ffff;
clip-path:inset(2 23);
visibility: visible;
}
#styleTwentyFive{
width: 150px;
height: 20px;
background-color: #00ffff;
visibility: hidden;
}
#styleTwentySix{
width: 150px;
height: 20px;
background-color: #999999;
}
#styleTwentySeven{
width: 150px;
height: 20px;
background: linear-gradient(pink,#fff000);
}
#styleTwentyNine{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:contain;
background-repeat: repeat-x;
background-position: center;
}
#styleThirty{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:50px 10px;
background-repeat: no-repeat;
background-position: 10px 10px;
}
#styleThirtyOne{
width: 150px;
height: 20px;
background-image:url('common/images/image.png');
background-size:10% 20%;
background-repeat: repeat;
background-position: 30% 40%;
mask-image:linear-gradient(pink,#fff000);
}
#styleThirtyTwo{
width: 150px;
height: 20px;
background: linear-gradient(pink,#fff000);
clip-path: margin-box;
image-fill: #000fff;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
#specificOne{
width: 70px;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificTwo{
width: 100%;
height: 50px;
flex-direction: column;
flex-wrap:wrap;
justify-content:flex-start;
align-items: flex-start;
align-content: flex-start;
}
#specificThree{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:flex-end;
align-items: flex-end;
align-content: flex-end;
margin: 1%;
}
#specificFour{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:center;
align-items: center;
align-items: center;
margin: 1%;
}
#specificFive{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:space-between;
align-items:stretch;
align-content: space-between;
margin: 1%;
}
#specificSix{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:space-around;
align-items: baseline;
align-content: space-around;
margin: 1%;
}
#specificSeven{
width: 50px;
height: 10px;
background-color: #ff0000;
overflow: hidden;
}
#specificEight{
width: 70px;
height: 10px;
background-color: #00ff00;
overflow: visible;
margin-left: 10px;
}
#specificNine{
width: 100%;
height: 50px;
margin-top: 10px;
overflow: scroll;
flex-direction: column;
scrollbar-color:#ff0000;
scrollbar-width:2px;
overscroll-effect:spring;
}
#specificTen{
width: 100%;
height: 10px;
margin-top: 10px;
overflow: scroll;
scrollbar-color:#ff0000;
scrollbar-width:2px;
overscroll-effect:fade;
}
#specificEleven{
width: 100%;
height: 10px;
margin-top: 10px;
overflow: scroll;
scrollbar-color:#ff0000;
scrollbar-width:2px;
overscroll-effect:none;
}
#specificTwelve{
width: 100%;
height: 30px;
display: grid;
background-color: #000fff;
grid-template-rows: 50px 100px 60px;
grid-rows-gap:10px;
grid-row-start: 1;
grid-row-end: 2;
grid-auto-flow:row;
}
#specificThirteen{
width: 100%;
height: 30px;
background-color: #fff000;
display: grid;
grid-template-columns: 50px 100px 60px;
grid-columns-gap:10px;
grid-column-start: 1;
grid-column-end: 2;
grid-auto-flow:column;
}
.flex-item{
width: 40%;
height: 10px;
}
.red-item{
background-color: #ff0000;
}
.green-item{
background-color: #00ff00;
}
.blue-item{
background-color: #0000ff;
}
.yellow-item{
background-color: #fff000;
}
#addOne{
width: 10%;
height: 20px;
background-image:url('common/images/image.png');
background-size:cover;
align-self:stretch;
position:fixed;
transform: none;
animation-timing-function:cubic-bezier(0.4, 0.0, 0.4, 1.0);
shared-transition-effect:static;
shared-transition-name:ani;
shared-transition-timing-function:friction;
transition-enter:ani;
transition-exit: ani;
transition-duration:10;
transition-timing-function:friction;
clip-path:border-box;
display-index:1;
filter:blur(10px);
backdrop-filter:blur(10px);
window-filter:blur(10%);
align-items:center;
font-weight:lighter;
overflow:hidden;
}
#addTwo{
width: 100px;
height: 15px;
background-image:url('common/images/image.png');
background-size:auto;
position:relative;
transform: matrix(0.5,0.1,0.2,0.9,20,10);
animation-timing-function:steps(4);
shared-transition-effect:exchange;
clip-path:padding-box;
align-items:flex-end;
font-weight:normal;
overflow:visible;
}
#addThree{
width: 100px;
height: 15px;
background-color:#000000;
transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2);
clip-path:content-box;
align-items:flex-start;
font-weight:bolder;
}
#addFour{
width: 100px;
height: 15px;
background-color:#000000;
transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px);
clip-path:circle(1);
align-items:baseline;
font-weight:medium;
}
#addFive{
width: 100px;
height: 15px;
background-color:#000000;
transform: translateY(1px) translateZ(10px)
scale(1,2) scaleZ(0.4)
rotateX(10deg) rotateY(10deg) rotateZ(10deg)
skewX(1deg) skewY(2deg);
clip-path:ellipse(1);
align-items:stretch;
font-weight:regular;
}
#addSix{
width: 100px;
height: 15px;
background-color:#000000;
transform: scaleX(1) scaleY(0.4);
clip-path:ellipse(1);
font-weight:300;
}
#addSeven{
width: 100px;
height: 15px;
background-color:#000000;
clip-path:path(1);
aspect-ratio:2;
font-weight:400;
}
#addSeven:disabled{
width: 100px;
height: 15px;
background-color:#ff0000;
font-weight:500;
}
#addSeven:active{
width: 100px;
height: 15px;
background-color:#ff0000;
font-weight:600;
}
#addSeven:focus{
width: 100px;
height: 15px;
background-color:#ff0000;
font-weight:700;
}
@font-face {
font-family: SimSunfont;
src: url('/common/simsun.ttf');
}
@media (device-type: tv) {
.addSeven {
width: 500px;
height: 500px;
background-color: #fa8072;
}
}
arkui/ace_standard/src/main/js/default/pages/camera/style/index.hml 0 → 100644
浏览文件 @ 23355eee
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="style-container">
<text class="title">
camera通用样式
</text>
<text class="sub-title">
通用样式 1-2 \n width height position [left|top]
</text>
<camera id="styleOne">
</camera>
<camera id="styleTwo">
</camera>
</div>
</div>
arkui/ace_standard/src/main/js/default/pages/camera/style/index.js 0 → 100644
浏览文件 @ 23355eee
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data:{
styleOne : null,
styleTwo : null,
},
onShow(){
this.getCommonStyleValues();
globalThis.value = {
styleOne : this.styleOne,
styleTwo : this.styleTwo,
}
},
getCommonStyleValues(){
this.styleOne = this.$element("styleOne").getInspector()
this.styleTwo = this.$element("styleTwo").getInspector()
},
}
arkui/ace_standard/src/main/js/default/pages/canvas/style/index.hml
浏览文件 @ 23355eee
......@@ -113,123 +113,6 @@
<text class="title">
canvas特有样式
</text>
<text class="sub-title">
特有样式 flex-direction flex-wrap justify-content align-items align-content
</text>
<div id="specificOne">
<canvas class="flex-item red-item">
</canvas>
<canvas class="flex-item blue-item">
</canvas>
<canvas class="flex-item green-item">
</canvas>
</div>
<div id="specificTwo">
<div id="specificThree" >
<canvas class="flex-item red-item">
</canvas>
</div>
<div id="specificFour" >
<canvas class="flex-item blue-item">
</canvas>
</div>
<div id="specificFive" >
<canvas class="flex-item yellow-item">
</canvas>
<canvas class="flex-item blue-item">
</canvas>
</div>
<div id="specificSix" >
<text style="font-size: 6px;">
文本
</text>
<canvas class="flex-item blue-item">
</canvas>
</div>
</div>
<text class="sub-title">
特有样式 overflow scrollbar-color scrollbar-width overscroll-effect
</text>
<div id="specificSeven" >
<div id="specificEight" >
<canvas style="margin-left:10px;width: 80px; height: 10px; background-color: #0000ff;"></canvas>
</div>
</div>
<div id="specificNine">
<canvas class="flex-item red-item">
</canvas>
<canvas class="flex-item blue-item">
</canvas>
<canvas class="flex-item green-item">
</canvas>
<canvas class="flex-item red-item">
</canvas>
<canvas class="flex-item blue-item">
</canvas>
<canvas class="flex-item green-item">
</canvas>
</div>
<div id="specificTen">
<canvas class="flex-item red-item">
</canvas>
<canvas class="flex-item blue-item">
</canvas>
<canvas class="flex-item green-item">
</canvas>
<canvas class="flex-item red-item">
</canvas>
<canvas class="flex-item blue-item">
</canvas>
<canvas class="flex-item green-item">
</canvas>
</div>
<div id="specificEleven">
<canvas class="flex-item red-item">
</canvas>
<canvas class="flex-item blue-item">
</canvas>
<canvas class="flex-item green-item">
</canvas>
<canvas class="flex-item red-item">
</canvas>
<canvas class="flex-item blue-item">
</canvas>
<canvas class="flex-item green-item">
</canvas>
</div>
<text class="sub-title">
特有样式 grid
</text>
<canvas id="specificTwelve">
</canvas>
<canvas id="specificThirteen">
</canvas>
<div style="width: 100%;flex-weight: 1;overflow: scroll;flex-direction: column;">
<text class="sub-title">
补充样式
</text>
<canvas id="addOne">
</canvas>
<canvas id="addTwo">
</canvas>
<canvas id="addThree">
</canvas>
<canvas id="addFour">
</canvas>
<canvas id="addFive">
</canvas>
<canvas id="addSix">
</canvas>
<canvas id="addSeven">
</canvas>
</div>
</div>
</div>
arkui/ace_standard/src/main/js/default/pages/canvas/style/index.js
浏览文件 @ 23355eee
......@@ -14,6 +14,108 @@
*/
export default {
data:{
styleOne : null,
styleTwo : null,
styleThree : null,
styleFour : null,
styleFive : null,
styleSix : null,
styleSeven : null,
styleEight : null,
styleNine : null,
styleTen : null,
styleEleven : null,
styleTwelve : null,
styleThirteen : null,
styleFourteen : null,
styleFifteen : null,
styleSixteen : null,
styleSeventeen : null,
styleEighteen : null,
styleNineteen : null,
styleTwenty : null,
styleTwentyOne : null,
styleTwentyTwo : null,
styleTwentyThree : null,
styleTwentyFour : null,
styleTwentyFive : null,
styleTwentySix : null,
styleTwentySeven : null,
styleTwentyNine : null,
styleThirty : null,
styleThirtyOne : null,
styleThirtyTwo : null,
},
onShow(){
this.getCommonStyleValues();
globalThis.value = {
styleOne : this.styleOne,
styleTwo : this.styleTwo,
styleThree : this.styleThree,
styleFour : this.styleFour,
styleFive : this.styleFive,
styleSix : this.styleSix,
styleSeven : this.styleSeven,
styleEight : this.styleEight,
styleNine : this.styleNine,
styleTen : this.styleTen,
styleEleven : this.styleEleven,
styleTwelve : this.styleTwelve,
styleThirteen : this.styleThirteen,
styleFourteen : this.styleFourteen,
styleFifteen : this.styleFifteen,
styleSixteen : this.styleSixteen,
styleSeventeen : this.styleSeventeen,
styleEighteen : this.styleEighteen,
styleNineteen : this.styleNineteen,
styleTwenty : this.styleTwenty,
styleTwentyOne : this.styleTwentyOne,
styleTwentyTwo : this.styleTwentyTwo,
styleTwentyThree : this.styleTwentyThree,
styleTwentyFour : this.styleTwentyFour,
styleTwentyFive : this.styleTwentyFive,
styleTwentySix : this.styleTwentySix,
styleTwentySeven : this.styleTwentySeven,
styleTwentyNine : this.styleTwentyNine,
styleThirty : this.styleThirty,
styleThirtyOne : this.styleThirtyOne,
styleThirtyTwo : this.styleThirtyTwo,
}
},
getCommonStyleValues(){
this.styleOne = this.$element("styleOne").getInspector()
this.styleTwo = this.$element("styleTwo").getInspector()
this.styleThree = this.$element("styleThree").getInspector()
this.styleFour = this.$element("styleFour").getInspector()
this.styleFive = this.$element("styleFive").getInspector()
this.styleSix = this.$element("styleSix").getInspector()
this.styleSeven = this.$element("styleSeven").getInspector()
this.styleEight = this.$element("styleEight").getInspector()
this.styleNine = this.$element("styleNine").getInspector()
this.styleTen = this.$element("styleTen").getInspector()
this.styleEleven = this.$element("styleEleven").getInspector()
this.styleTwelve = this.$element("styleTwelve").getInspector()
this.styleThirteen = this.$element("styleThirteen").getInspector()
this.styleFourteen = this.$element("styleFourteen").getInspector()
this.styleFifteen = this.$element("styleFifteen").getInspector()
this.styleSixteen = this.$element("styleSixteen").getInspector()
this.styleSeventeen = this.$element("styleSeventeen").getInspector()
this.styleEighteen = this.$element("styleEighteen").getInspector()
this.styleNineteen = this.$element("styleNineteen").getInspector()
this.styleTwenty = this.$element("styleTwenty").getInspector()
this.styleTwentyOne = this.$element("styleTwentyOne").getInspector()
this.styleTwentyTwo = this.$element("styleTwentyTwo").getInspector()
this.styleTwentyThree = this.$element("styleTwentyThree").getInspector()
this.styleTwentyFour = this.$element("styleTwentyFour").getInspector()
this.styleTwentyFive = this.$element("styleTwentyFive").getInspector()
this.styleTwentySix = this.$element("styleTwentySix").getInspector()
this.styleTwentySeven = this.$element("styleTwentySeven").getInspector()
this.styleTwentyNine = this.$element("styleTwentyNine").getInspector()
this.styleThirty = this.$element("styleThirty").getInspector()
this.styleThirtyOne = this.$element("styleThirtyOne").getInspector()
this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector()
},
}
arkui/ace_standard/src/main/js/default/pages/chart/style/index.css
浏览文件 @ 23355eee
......@@ -77,7 +77,6 @@
#styleTwo{
width: 150px;
height: 20px;
font-size:10px;
padding-start: 1px;
padding-end: 2px;
margin-start: 1px;
......@@ -357,6 +356,11 @@
mask-size: cover;
mask-position: center;
}
#styleThirtyThree{
filter:blur(10px);
backdrop-filter:blur(10px);
window-filter:blur(10%);
}
.specific-container{
flex-direction: column;
......@@ -545,6 +549,11 @@
#addTwo{
width: 100px;
height: 15px;
font-size:14px;
stroke-width:34px;
start-angle:100;
total-angle:200;
allow-scale:true;
background-image:url('common/images/image.png');
background-size:auto;
position:relative;
......@@ -560,6 +569,11 @@
#addThree{
width: 100px;
height: 15px;
font-size:13px;
stroke-width:24px;
start-angle:150;
total-angle:250;
allow-scale:false;
background-color:#000000;
transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2);
clip-path:content-box;
......@@ -570,6 +584,15 @@
#addFour{
width: 100px;
height: 15px;
stroke-width:30px;
start-angle:0;
total-angle:360;
center-x:38px;
center-y:8px;
colors: #ff0000, #00ff00;
radius:6px;
weights:1,1;
font-style:normal;
background-color:#000000;
transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px);
clip-path:circle(1);
......@@ -580,6 +603,14 @@
#addFive{
width: 100px;
height: 15px;
start-angle:0;
total-angle:90;
center-x:30px;
center-y:7.5px;
radius:7.5px;
colors: #ff0000, #00ff00;
weights:2,2;
font-style:italic;
background-color:#000000;
transform: translateY(1px) translateZ(10px)
scale(1,2) scaleZ(0.4)
......@@ -593,6 +624,13 @@
#addSix{
width: 100px;
height: 15px;
start-angle:0;
total-angle:180;
center-x:35px;
center-y:7px;
radius:7px;
weights:3,1;
colors: #ff0000, #00ff00;
background-color:#000000;
transform: scaleX(1) scaleY(0.4);
clip-path:ellipse(1);
......@@ -602,43 +640,97 @@
#addSeven{
width: 100px;
height: 15px;
start-angle:90;
total-angle:180;
text-color:#ff0000;
font-family:sans-serif;
background-color:#000000;
clip-path:path(1);
aspect-ratio:2;
font-weight:400;
}
#addSeven:disabled{
#addEight{
width: 100px;
height: 15px;
background-color:#ff0000;
font-weight:500;
}
#addSeven:active{
#addNine{
width: 100px;
height: 15px;
background-color:#ff0000;
font-weight:600;
}
#addSeven:focus{
width: 100px;
height: 15px;
#addTen{
width: 90px;
height: 16px;
background-color:#ff0000;
font-weight:700;
}
@font-face {
font-family: SimSunfont;
src: url('/common/simsun.ttf');
#addEleven{
width: 91px;
height: 17px;
background-color:#ff0000;
font-weight:500;
}
#addTwelve{
width: 93px;
height: 18px;
background-color:#ff0000;
font-weight:600;
}
@media (device-type: tv) {
.addSeven {
width: 500px;
height: 500px;
background-color: #fa8072;
}
#addThirteen{
width: 93px;
height: 18px;
background-color:#ff0000;
font-weight:600;
}
#addFourteen{
width: 93px;
height: 18px;
background-color:#ff0000;
font-weight:600;
}
#addFifteen{
width: 93px;
height: 18px;
background-color:#ff0000;
font-weight:600;
}
#addSixteen{
width: 93px;
height: 18px;
start-angle:80;
total-angle:90;
background-color:#ff0000;
font-weight:600;
}
#addSeventeen{
width: 93px;
height: 18px;
start-angle:120;
total-angle:180;
background-color:#ff0000;
font-weight:600;
}
#addEighteen{
width: 93px;
height: 18px;
start-angle:20;
total-angle:80;
background-color:#ff0000;
font-weight:600;
}
arkui/ace_standard/src/main/js/default/pages/chart/style/index.hml
浏览文件 @ 23355eee
......@@ -124,29 +124,42 @@
特有样式 color
</text>
<div id="specificOne">
<chart id="addOne">
<chart id="addOne" type="gauge">
</chart>
<chart id="addTwo">
<chart id="addTwo" type="gauge">
</chart>
<chart id="addThree">
<chart id="addThree" type="gauge">
</chart>
<chart id="addFour">
<chart id="addFour" type="gauge">
</chart>
<chart id="addFive">
<chart id="addFive" type="gauge">
</chart>
<chart id="addSix">
<chart id="addSix" type="gauge">
</chart>
<chart id="addSeven">
<chart id="addSeven" type="gauge">
</chart>
<chart id="addSeven:disabled">
<chart id="addEight" type="gauge">
</chart>
<chart id="addSeven:active">
<chart id="addNine" type="gauge">
</chart>
<chart id="addSeven:focus">
<chart id="addTen" type="gauge">
</chart>
<chart id="addFive">
<chart id="addEleven" type="gauge">
</chart>
<chart id="addFive">
<chart id="addTwelve" type="gauge">
</chart>
<chart id="addThirteen" type="rainbow">
</chart>
<chart id="addFourteen" type="rainbow">
</chart>
<chart id="addFifteen" type="rainbow">
</chart>
<chart id="addSixteen" type="rainbow">
</chart>
<chart id="addSeventeen" type="rainbow">
</chart>
<chart id="addEighteen" type="rainbow">
</chart>
</div>
</div>
......
arkui/ace_standard/src/main/js/default/pages/chart/style/index.js
浏览文件 @ 23355eee
......@@ -14,6 +14,165 @@
*/
export default {
data:{
styleOne : null,
styleTwo : null,
styleThree : null,
styleFour : null,
styleFive : null,
styleSix : null,
styleSeven : null,
styleEight : null,
styleNine : null,
styleTen : null,
styleEleven : null,
styleTwelve : null,
styleThirteen : null,
styleFourteen : null,
styleFifteen : null,
styleSixteen : null,
styleSeventeen : null,
styleEighteen : null,
styleNineteen : null,
styleTwenty : null,
styleTwentyOne : null,
styleTwentyTwo : null,
styleTwentyThree : null,
styleTwentyFour : null,
styleTwentyFive : null,
styleTwentySix : null,
styleTwentySeven : null,
styleTwentyNine : null,
styleThirty : null,
styleThirtyOne : null,
styleThirtyTwo : null,
addOne : null,
addTwo : null,
addThree : null,
addFour : null,
addFive : null,
addSix : null,
addSeven : null,
addEight : null,
addNine : null,
addTen : null,
addEleven : null,
addTwelve : null,
addThirteen : null,
addFourteen : null,
addFifteen : null,
addSixteen : null,
addSeventeen : null,
addEighteen : null
},
onShow(){
this.getCommonStyleValues();
globalThis.value = {
styleOne : this.styleOne,
styleTwo : this.styleTwo,
styleThree : this.styleThree,
styleFour : this.styleFour,
styleFive : this.styleFive,
styleSix : this.styleSix,
styleSeven : this.styleSeven,
styleEight : this.styleEight,
styleNine : this.styleNine,
styleTen : this.styleTen,
styleEleven : this.styleEleven,
styleTwelve : this.styleTwelve,
styleThirteen : this.styleThirteen,
styleFourteen : this.styleFourteen,
styleFifteen : this.styleFifteen,
styleSixteen : this.styleSixteen,
styleSeventeen : this.styleSeventeen,
styleEighteen : this.styleEighteen,
styleNineteen : this.styleNineteen,
styleTwenty : this.styleTwenty,
styleTwentyOne : this.styleTwentyOne,
styleTwentyTwo : this.styleTwentyTwo,
styleTwentyThree : this.styleTwentyThree,
styleTwentyFour : this.styleTwentyFour,
styleTwentyFive : this.styleTwentyFive,
styleTwentySix : this.styleTwentySix,
styleTwentySeven : this.styleTwentySeven,
styleTwentyNine : this.styleTwentyNine,
styleThirty : this.styleThirty,
styleThirtyOne : this.styleThirtyOne,
styleThirtyTwo : this.styleThirtyTwo,
addOne : this.addOne,
addTwo : this.addTwo,
addThree : this.addThree,
addFour : this.addFour,
addFive : this.addFive,
addSix : this.addSix,
addSeven : this.addSeven,
addEight : this.addEight,
addNine : this.addNine,
addTen : this.addTen,
addEleven : this.addEleven,
addTwelve : this.addTwelve,
addThirteen : this.addThirteen,
addFourteen : this.addFourteen,
addFifteen : this.addFifteen,
addSixteen : this.addSixteen,
addSeventeen : this.addSeventeen,
addEighteen : this.addEighteen
}
},
getCommonStyleValues(){
this.styleOne = this.$element("styleOne").getInspector()
this.styleTwo = this.$element("styleTwo").getInspector()
this.styleThree = this.$element("styleThree").getInspector()
this.styleFour = this.$element("styleFour").getInspector()
this.styleFive = this.$element("styleFive").getInspector()
this.styleSix = this.$element("styleSix").getInspector()
this.styleSeven = this.$element("styleSeven").getInspector()
this.styleEight = this.$element("styleEight").getInspector()
this.styleNine = this.$element("styleNine").getInspector()
this.styleTen = this.$element("styleTen").getInspector()
this.styleEleven = this.$element("styleEleven").getInspector()
this.styleTwelve = this.$element("styleTwelve").getInspector()
this.styleThirteen = this.$element("styleThirteen").getInspector()
this.styleFourteen = this.$element("styleFourteen").getInspector()
this.styleFifteen = this.$element("styleFifteen").getInspector()
this.styleSixteen = this.$element("styleSixteen").getInspector()
this.styleSeventeen = this.$element("styleSeventeen").getInspector()
this.styleEighteen = this.$element("styleEighteen").getInspector()
this.styleNineteen = this.$element("styleNineteen").getInspector()
this.styleTwenty = this.$element("styleTwenty").getInspector()
this.styleTwentyOne = this.$element("styleTwentyOne").getInspector()
this.styleTwentyTwo = this.$element("styleTwentyTwo").getInspector()
this.styleTwentyThree = this.$element("styleTwentyThree").getInspector()
this.styleTwentyFour = this.$element("styleTwentyFour").getInspector()
this.styleTwentyFive = this.$element("styleTwentyFive").getInspector()
this.styleTwentySix = this.$element("styleTwentySix").getInspector()
this.styleTwentySeven = this.$element("styleTwentySeven").getInspector()
this.styleTwentyNine = this.$element("styleTwentyNine").getInspector()
this.styleThirty = this.$element("styleThirty").getInspector()
this.styleThirtyOne = this.$element("styleThirtyOne").getInspector()
this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector()
this.addOne = this.$element("addOne").getInspector()
this.addTwo = this.$element("addTwo").getInspector()
this.addThree = this.$element("addThree").getInspector()
this.addFour = this.$element("addFour").getInspector()
this.addFive = this.$element("addFive").getInspector()
this.addSix = this.$element("addSix").getInspector()
this.addSeven = this.$element("addSeven").getInspector()
this.addEight = this.$element("addEight").getInspector()
this.addNine = this.$element("addNine").getInspector()
this.addTen = this.$element("addTen").getInspector()
this.addEleven = this.$element("addEleven").getInspector()
this.addTwelve = this.$element("addTwelve").getInspector()
this.addThirteen = this.$element("addThirteen").getInspector()
this.addFourteen = this.$element("addFourteen").getInspector()
this.addFifteen = this.$element("addFifteen").getInspector()
this.addSixteen = this.$element("addSixteen").getInspector()
this.addSeventeen = this.$element("addSeventeen").getInspector()
this.addEighteen = this.$element("addEighteen").getInspector()
},
}
arkui/ace_standard/src/main/js/default/pages/dialog/style/index.css
浏览文件 @ 23355eee
......@@ -12,4 +12,780 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@import '../../../common/style.css';
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style-container{
flex-direction: column;
width: 50%;
}
#styleOne{
width: 150px;
height: 20px;
margin-left: 1px;
margin-top: 2px;
margin-right: 1.5px;
margin-bottom: 0.5px;
margin-start: 1px;
margin-end: 2px;
}
#styleTwo{
width: 149px;
height: 19px;
margin-left: 2px;
margin-top: 1px;
margin-right: 2px;
margin-bottom: 1px;
margin-start: 2px;
margin-end: 1px;
}
#styleThree{
width: 148px;
height: 18px;
margin-left: 1.1px;
margin-top: 1.1px;
margin-right: 1.1px;
margin-bottom: 1.1px;
margin-start: 1.1px;
margin-end: 1.1px;
}
#styleFour{
width: 147px;
height: 17px;
margin-left: 1.2px;
margin-top: 1.2px;
margin-right: 1.2px;
margin-bottom: 1.2px;
margin-start: 1.2px;
margin-end: 1.2px;
}
#styleFive{
width: 146px;
height: 16px;
margin-left: 1.3px;
margin-top: 1.3px;
margin-right: 1.3px;
margin-bottom: 1.3px;
margin-start: 1.3px;
margin-end: 1.3px;
}
#styleSix{
width: 145px;
height: 15px;
margin-left: 1.4px;
margin-top: 1.4px;
margin-right: 1.4px;
margin-bottom: 1.4px;
margin-start: 1.4px;
margin-end: 1.4px;
}
#styleSeven{
width: 144px;
height: 14px;
margin-left: 1.5px;
margin-top: 1.5px;
margin-right: 1.5px;
margin-bottom: 1.5px;
margin-start: 1.5px;
margin-end: 1.5px;
}
#styleEight{
width: 143px;
height: 13px;
margin-left: 1.6px;
margin-top: 1.6px;
margin-right: 1.6px;
margin-bottom: 1.6px;
margin-start: 1.6px;
margin-end: 1.6px;
}
#styleNine{
width: 142px;
height: 12px;
margin-left: 1.7px;
margin-top: 1.7px;
margin-right: 1.7px;
margin-bottom: 1.7px;
margin-start: 1.7px;
margin-end: 1.7px;
}
#styleTen{
width: 141px;
height: 11px;
margin-left: 1.8px;
margin-top: 1.8px;
margin-right: 1.8px;
margin-bottom: 1.8px;
margin-start: 1.8px;
margin-end: 1.8px;
}
#styleEleven{
width: 140px;
height: 10px;
margin-left: 1.9px;
margin-top: 1.9px;
margin-right: 1.9px;
margin-bottom: 1.9px;
margin-start: 1.9px;
margin-end: 1.9px;
}
#styleTwelve{
width: 139px;
height: 11px;
margin-left: 2.0px;
margin-top: 2.0px;
margin-right: 2.0px;
margin-bottom: 2.0px;
margin-start: 2.0px;
margin-end: 2.0px;
}
#styleThirteen{
width: 138px;
height: 12px;
margin-left: 2.1px;
margin-top: 2.1px;
margin-right: 2.1px;
margin-bottom: 2.1px;
margin-start: 2.1px;
margin-end: 2.1px;
}
#styleFourteen{
width: 137px;
height: 13px;
margin-left: 2.2px;
margin-top: 2.2px;
margin-right: 2.2px;
margin-bottom: 2.2px;
margin-start: 2.2px;
margin-end: 2.2px;
}
#styleFifteen{
width: 136px;
height: 14px;
margin-left: 2.3px;
margin-top: 2.3px;
margin-right: 2.3px;
margin-bottom: 2.3px;
margin-start: 2.3px;
margin-end: 2.3px;
}
#styleSixteen{
width: 135px;
height: 15px;
margin-left: 2.4px;
margin-top: 2.4px;
margin-right: 2.4px;
margin-bottom: 2.4px;
margin-start: 2.4px;
margin-end: 2.4px;
}
#styleSeventeen{
width: 134px;
height: 16px;
margin-left: 2.5px;
margin-top: 2.5px;
margin-right: 2.5px;
margin-bottom: 2.5px;
margin-start: 2.5px;
margin-end: 2.5px;
}
#styleEighteen{
width: 133px;
height: 17px;
margin-left: 2.6px;
margin-top: 2.6px;
margin-right: 2.6px;
margin-bottom: 2.6px;
margin-start: 2.6px;
margin-end: 2.6px;
}
#styleNineteen{
width: 132px;
height: 18px;
margin-left: 2.7px;
margin-top: 2.7px;
margin-right: 2.7px;
margin-bottom: 2.7px;
margin-start: 2.7px;
margin-end: 2.7px;
}
#styleTwenty{
width: 132px;
height: 18px;
margin-left: 2.8px;
margin-top: 2.8px;
margin-right: 2.8px;
margin-bottom: 2.8px;
margin-start: 2.8px;
margin-end: 2.8px;
}
#styleTwentyOne{
width: 132px;
height: 18px;
margin-left: 2.9px;
margin-top: 2.9px;
margin-right: 2.9px;
margin-bottom: 2.9px;
margin-start: 2.9px;
margin-end: 2.9px;
}
#styleTwentyTwo{
width: 132px;
height: 18px;
margin-left: 3.0px;
margin-top: 3.0px;
margin-right: 3.0px;
margin-bottom: 3.0px;
margin-start: 3.0px;
margin-end: 3.0px;
}
#styleTwentyThree{
width: 132px;
height: 18px;
margin-left: 3.1px;
margin-top: 3.1px;
margin-right: 3.1px;
margin-bottom: 3.1px;
margin-start: 3.1px;
margin-end: 3.1px;
}
#styleTwentyFour{
width: 132px;
height: 18px;
margin-left: 3.2px;
margin-top: 3.2px;
margin-right: 3.2px;
margin-bottom: 3.2px;
margin-start: 3.2px;
margin-end: 3.2px;
}
#styleTwentyFive{
width: 132px;
height: 18px;
margin-left: 3.3px;
margin-top: 3.3px;
margin-right: 3.3px;
margin-bottom: 3.3px;
margin-start: 3.3px;
margin-end: 3.3px;
}
#styleTwentySix{
width: 132px;
height: 18px;
margin-left: 3.4px;
margin-top: 3.4px;
margin-right: 3.4px;
margin-bottom: 3.4px;
margin-start: 3.4px;
margin-end: 3.4px;
}
#styleTwentySeven{
width: 132px;
height: 18px;
margin-left: 3.5px;
margin-top: 3.5px;
margin-right: 3.5px;
margin-bottom: 3.5px;
margin-start: 3.5px;
margin-end: 3.5px;
}
#styleTwentyNine{
width: 132px;
height: 18px;
margin-left: 3.6px;
margin-top: 3.6px;
margin-right: 3.6px;
margin-bottom: 3.6px;
margin-start: 3.6px;
margin-end: 3.6px;
}
#styleThirty{
width: 132px;
height: 18px;
margin-left: 3.7px;
margin-top: 3.7px;
margin-right: 3.7px;
margin-bottom: 3.7px;
margin-start: 3.7px;
margin-end: 3.7px;
}
#styleThirtyOne{
width: 132px;
height: 18px;
margin-left: 3.8px;
margin-top: 3.8px;
margin-right: 3.8px;
margin-bottom: 3.8px;
margin-start: 3.8px;
margin-end: 3.8px;
}
#styleThirtyTwo{
width: 132px;
height: 18px;
margin-left: 3.9px;
margin-top: 3.9px;
margin-right: 3.9px;
margin-bottom: 3.9px;
margin-start: 3.9px;
margin-end: 3.9px;
}
#styleThirtyThree{
width: 132px;
height: 18px;
margin-left: 4.0px;
margin-top: 4.0px;
margin-right: 4.0px;
margin-bottom: 4.0px;
margin-start: 4.0px;
margin-end: 4.0px;
}
.specific-container{
flex-direction: column;
flex-weight: 1;
}
#specificOne{
width: 70px;
height: 25px;
flex-direction: row;
flex-wrap:nowrap;
}
#specificTwo{
width: 100%;
height: 50px;
flex-direction: column;
flex-wrap:wrap;
justify-content:flex-start;
align-items: flex-start;
align-content: flex-start;
}
#specificThree{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:flex-end;
align-items: flex-end;
align-content: flex-end;
margin: 1%;
}
#specificFour{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:center;
align-items: center;
align-items: center;
margin: 1%;
}
#specificFive{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:space-between;
align-items:stretch;
align-content: space-between;
margin: 1%;
}
#specificSix{
width: 18%;
height: 48%;
border: 1px solid pink;
flex-direction: row;
justify-content:space-around;
align-items: baseline;
align-content: space-around;
margin: 1%;
}
#specificSeven{
width: 50px;
height: 10px;
background-color: #ff0000;
overflow: hidden;
}
#specificEight{
width: 70px;
height: 10px;
background-color: #00ff00;
overflow: visible;
margin-left: 10px;
}
#specificNine{
width: 100%;
height: 50px;
margin-top: 10px;
overflow: scroll;
flex-direction: column;
scrollbar-color:#ff0000;
scrollbar-width:2px;
overscroll-effect:spring;
}
#specificTen{
width: 100%;
height: 10px;
margin-top: 10px;
overflow: scroll;
scrollbar-color:#ff0000;
scrollbar-width:2px;
overscroll-effect:fade;
}
#specificEleven{
width: 100%;
height: 10px;
margin-top: 10px;
overflow: scroll;
scrollbar-color:#ff0000;
scrollbar-width:2px;
overscroll-effect:none;
}
#specificTwelve{
width: 100%;
height: 30px;
display: grid;
background-color: #000fff;
grid-template-rows: 50px 100px 60px;
grid-rows-gap:10px;
grid-row-start: 1;
grid-row-end: 2;
grid-auto-flow:row;
}
#specificThirteen{
width: 100%;
height: 30px;
background-color: #fff000;
display: grid;
grid-template-columns: 50px 100px 60px;
grid-columns-gap:10px;
grid-column-start: 1;
grid-column-end: 2;
grid-auto-flow:column;
}
.flex-item{
width: 40%;
height: 10px;
}
.red-item{
background-color: #ff0000;
}
.green-item{
background-color: #00ff00;
}
.blue-item{
background-color: #0000ff;
}
.yellow-item{
background-color: #fff000;
}
#addOne{
width: 10%;
height: 20px;
background-image:url('common/images/image.png');
background-size:cover;
align-self:stretch;
position:fixed;
transform: none;
animation-timing-function:cubic-bezier(0.4, 0.0, 0.4, 1.0);
shared-transition-effect:static;
shared-transition-name:ani;
shared-transition-timing-function:friction;
transition-enter:ani;
transition-exit: ani;
transition-duration:10;
transition-timing-function:friction;
clip-path:border-box;
display-index:1;
filter:blur(10px);
backdrop-filter:blur(10px);
window-filter:blur(10%);
align-items:center;
font-weight:lighter;
overflow:hidden;
}
#addTwo{
width: 100px;
height: 15px;
font-size:14px;
stroke-width:34px;
start-angle:240;
total-angle:240;
allow-scale:true;
background-image:url('common/images/image.png');
background-size:auto;
position:relative;
transform: matrix(0.5,0.1,0.2,0.9,20,10);
animation-timing-function:steps(4);
shared-transition-effect:exchange;
clip-path:padding-box;
align-items:flex-end;
font-weight:normal;
overflow:visible;
}
#addThree{
width: 100px;
height: 15px;
font-size:13px;
stroke-width:24px;
start-angle:120;
total-angle:120;
allow-scale:false;
background-color:#000000;
transform: matrix3d(1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2);
clip-path:content-box;
align-items:flex-start;
font-weight:bolder;
}
#addFour{
width: 100px;
height: 15px;
stroke-width:30px;
start-angle:100;
total-angle:100;
center-x:38px;
center-y:8px;
radius:6px;
font-style:normal;
background-color:#000000;
transform: translate3d(1px,2px,1px) scale3d(1,2,1) rotate3d(10,10,10,10deg) skew(1deg,2deg) perspective(10px);
clip-path:circle(1);
align-items:baseline;
font-weight:medium;
}
#addFive{
width: 100px;
height: 15px;
start-angle:150;
total-angle:80;
center-x:30px;
center-y:7.5px;
radius:7.5px;
font-style:italic;
background-color:#000000;
transform: translateY(1px) translateZ(10px)
scale(1,2) scaleZ(0.4)
rotateX(10deg) rotateY(10deg) rotateZ(10deg)
skewX(1deg) skewY(2deg);
clip-path:ellipse(1);
align-items:stretch;
font-weight:regular;
}
#addSix{
width: 100px;
height: 15px;
start-angle:360;
total-angle:360;
center-x:35px;
center-y:7px;
radius:7px;
background-color:#000000;
transform: scaleX(1) scaleY(0.4);
clip-path:ellipse(1);
font-weight:300;
}
#addSeven{
width: 100px;
height: 15px;
start-angle:0;
total-angle:70;
text-color:#ff0000;
font-family:sans-serif;
background-color:#000000;
clip-path:path(1);
aspect-ratio:2;
font-weight:400;
}
#addEight{
width: 100px;
height: 15px;
total-angle:0;
background-color:#ff0000;
font-weight:500;
}
#addNine{
width: 100px;
height: 15px;
radius:5px;
background-color:#ff0000;
font-weight:600;
}
#addTen{
width: 90px;
height: 16px;
radius:3px;
background-color:#ff0000;
font-weight:700;
}
#addEleven{
width: 91px;
height: 17px;
radius:4px;
background-color:#ff0000;
font-weight:500;
}
#addTwelve{
width: 93px;
height: 18px;
radius:6px;
start-angle:60;
background-color:#ff0000;
font-weight:600;
}
#addThirteen{
width: 93px;
height: 18px;
start-angle:50;
radius:6px;
background-color:#ff0000;
font-weight:600;
}
#addFourteen{
width: 93px;
height: 18px;
start-angle:15;
total-angle:60;
radius:6px;
background-color:#ff0000;
font-weight:600;
}
#addFifteen{
width: 93px;
height: 18px;
start-angle:60;
total-angle:120;
radius:6px;
background-color:#ff0000;
font-weight:600;
}
#addSixteen{
width: 93px;
height: 18px;
start-angle:80;
total-angle:90;
radius:6px;
background-color:#ff0000;
font-weight:600;
}
#addSeventeen{
width: 93px;
height: 18px;
start-angle:180;
total-angle:180;
radius:6px;
background-color:#ff0000;
font-weight:600;
}
#addEighteen{
width: 93px;
height: 18px;
start-angle:40;
total-angle:80;
radius:6px;
background-color:#ff0000;
font-weight:600;
}
@font-face {
font-family: SimSunfont;
src: url('/common/simsun.ttf');
}
@media (device-type: tv) {
.addSeven {
width: 500px;
height: 500px;
background-color: #fa8072;
}
}
arkui/ace_standard/src/main/js/default/pages/dialog/style/index.hml
浏览文件 @ 23355eee
......@@ -13,3 +13,174 @@
* limitations under the License.
*/-->
<div class="container">
<div class="style-container">
<text class="title">
dialog通用样式
</text>
<text class="sub-title">
通用样式 1-8
</text>
<button style="background-color: skyblue;width:90%;" @click="styleOne">
</button>
<dialog id="styleOne">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleTwo">
</button>
<dialog id="styleTwo">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleThree">
</button>
<dialog id="styleThree">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleFour">
</button>
<dialog id="styleFour">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleFive">
</button>
<dialog id="styleFive">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleSix">
</button>
<dialog id="styleSix">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleSeven">
</button>
<dialog id="styleSeven">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleEight">
</button>
<dialog id="styleEight">
</dialog>
<text class="sub-title">
通用样式9-20
</text>
<div id="styleNine">
<button style="background-color: skyblue;width:90%;" @click="styleTen">
</button>
<dialog id="styleTen">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleEleven">
</button>
<dialog id="styleEleven">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleTwelve">
</button>
<dialog id="styleTwelve">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleThirteen">
</button>
<dialog id="styleThirteen">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleFourteen">
</button>
<dialog id="styleFourteen">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleFifteen">
</button>
<dialog id="styleFifteen">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleSixteen">
</button>
<dialog id="styleSixteen">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleSeventeen">
</button>
<dialog id="styleSeventeen">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleEighteen">
</button>
<dialog id="styleEighteen">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleNineteen">
</button>
<dialog id="styleNineteen">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleTwenty">
</button>
<dialog id="styleTwenty">
</dialog>
</div>
<text class="sub-title">
通用样式21-23
</text>
<div style="width: 100%;flex-direction: row;">
<button style="background-color: skyblue;width:90%;" @click="styleTwentyOne">
</button>
<dialog id="styleTwentyOne">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleTwentyTwo">
</button>
<dialog id="styleTwentyTwo">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleTwentyThree">
</button>
<dialog id="styleTwentyThree">
</dialog>
</div>
<text class="sub-title">
通用样式23-25
</text>
<button style="background-color: skyblue;width:90%;" @click="styleTwentyFour">
</button>
<dialog id="styleTwentyFour">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleTwentyFive">
</button>
<dialog id="styleTwentyFive">
</dialog>
<text class="sub-title">
通用样式26-31
</text>
<button style="background-color: skyblue;width:90%;" @click="styleTwentySix">
</button>
<dialog id="styleTwentySix">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleTwentySeven">
</button>
<dialog id="styleTwentySeven">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleTwentyNine">
</button>
<dialog id="styleTwentyNine">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleThirty">
</button>
<dialog id="styleThirty">
</dialog>
<button style="background-color: skyblue;width:90%;" @click="styleThirtyOne">
</button>
<dialog id="styleThirtyOne">
</dialog>
<text class="sub-title">
通用样式32
</text>
<button style="background-color: skyblue;width:90%;" @click="styleThirtyTwo">
</button>
<dialog id="styleThirtyTwo">
</dialog>
<text class="sub-title">
通用样式33
</text>
<button style="background-color: skyblue;width:90%;" @click="styleThirtyThree">
</button>
<dialog id="styleThirtyThree">
</dialog>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="specific-container">
<text class="title">
dialog特有样式
</text>
</div>
</div>
arkui/ace_standard/src/main/js/default/pages/dialog/style/index.js
浏览文件 @ 23355eee
......@@ -12,3 +12,207 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data:{
styleOne : null,
styleTwo : null,
styleThree : null,
styleFour : null,
styleFive : null,
styleSix : null,
styleSeven : null,
styleEight : null,
styleNine : null,
styleTen : null,
styleEleven : null,
styleTwelve : null,
styleThirteen : null,
styleFourteen : null,
styleFifteen : null,
styleSixteen : null,
styleSeventeen : null,
styleEighteen : null,
styleNineteen : null,
styleTwenty : null,
styleTwentyOne : null,
styleTwentyTwo : null,
styleTwentyThree : null,
styleTwentyFour : null,
styleTwentyFive : null,
styleTwentySix : null,
styleTwentySeven : null,
styleTwentyNine : null,
styleThirty : null,
styleThirtyOne : null,
styleThirtyTwo : null,
styleThirtyThree : null,
},
styleOne(){
this.$element('styleOne').show()
},
styleTwo(){
this.$element('styleTwo').show()
},
styleThree(){
this.$element('styleThree').show()
},
styleFour(){
this.$element('styleFour').show()
},
styleFive(){
this.$element('styleFive').show()
},
styleSix(){
this.$element('styleSix').show()
},
styleSeven(){
this.$element('styleSeven').show()
},
styleEight(){
this.$element('styleEight').show()
},
styleTen(){
this.$element('styleTen').show()
},
styleEleven(){
this.$element('styleEleven').show()
},
styleTwelve(){
this.$element('styleTwelve').show()
},
styleThirteen(){
this.$element('styleThirteen').show()
},
styleFourteen(){
this.$element('styleFourteen').show()
},
styleFifteen(){
this.$element('styleFifteen').show()
},
styleSixteen(){
this.$element('styleSixteen').show()
},
styleSeventeen(){
this.$element('styleSeventeen').show()
},
styleEighteen(){
this.$element('styleEighteen').show()
},
styleNineteen(){
this.$element('styleNineteen').show()
},
styleTwenty(){
this.$element('styleTwenty').show()
},
styleTwentyOne(){
this.$element('styleTwentyOne').show()
},
styleTwentyTwo(){
this.$element('styleTwentyTwo').show()
},
styleTwentyThree(){
this.$element('styleTwentyThree').show()
},
styleTwentyFour(){
this.$element('styleTwentyFour').show()
},
styleTwentyFive(){
this.$element('styleTwentyFive').show()
},
styleTwentySix(){
this.$element('styleTwentySix').show()
},
styleTwentySeven(){
this.$element('styleTwentySeven').show()
},
styleTwentyNine(){
this.$element('styleTwentyNine').show()
},
styleThirty(){
this.$element('styleThirty').show()
},
styleThirtyOne(){
this.$element('styleThirtyOne').show()
},
styleThirtyTwo(){
this.$element('styleThirtyTwo').show()
},
styleThirtyThree(){
this.$element('styleThirtyThree').show()
},
onShow(){
this.getCommonStyleValues();
globalThis.value = {
styleOne : this.styleOne,
styleTwo : this.styleTwo,
styleThree : this.styleThree,
styleFour : this.styleFour,
styleFive : this.styleFive,
styleSix : this.styleSix,
styleSeven : this.styleSeven,
styleEight : this.styleEight,
styleNine : this.styleNine,
styleTen : this.styleTen,
styleEleven : this.styleEleven,
styleTwelve : this.styleTwelve,
styleThirteen : this.styleThirteen,
styleFourteen : this.styleFourteen,
styleFifteen : this.styleFifteen,
styleSixteen : this.styleSixteen,
styleSeventeen : this.styleSeventeen,
styleEighteen : this.styleEighteen,
styleNineteen : this.styleNineteen,
styleTwenty : this.styleTwenty,
styleTwentyOne : this.styleTwentyOne,
styleTwentyTwo : this.styleTwentyTwo,
styleTwentyThree : this.styleTwentyThree,
styleTwentyFour : this.styleTwentyFour,
styleTwentyFive : this.styleTwentyFive,
styleTwentySix : this.styleTwentySix,
styleTwentySeven : this.styleTwentySeven,
styleTwentyNine : this.styleTwentyNine,
styleThirty : this.styleThirty,
styleThirtyOne : this.styleThirtyOne,
styleThirtyTwo : this.styleThirtyTwo,
styleThirtyThree : this.styleThirtyTwo,
}
},
getCommonStyleValues(){
this.styleOne = this.$element("styleOne").getInspector()
this.styleTwo = this.$element("styleTwo").getInspector()
this.styleThree = this.$element("styleThree").getInspector()
this.styleFour = this.$element("styleFour").getInspector()
this.styleFive = this.$element("styleFive").getInspector()
this.styleSix = this.$element("styleSix").getInspector()
this.styleSeven = this.$element("styleSeven").getInspector()
this.styleEight = this.$element("styleEight").getInspector()
this.styleNine = this.$element("styleNine").getInspector()
this.styleTen = this.$element("styleTen").getInspector()
this.styleEleven = this.$element("styleEleven").getInspector()
this.styleTwelve = this.$element("styleTwelve").getInspector()
this.styleThirteen = this.$element("styleThirteen").getInspector()
this.styleFourteen = this.$element("styleFourteen").getInspector()
this.styleFifteen = this.$element("styleFifteen").getInspector()
this.styleSixteen = this.$element("styleSixteen").getInspector()
this.styleSeventeen = this.$element("styleSeventeen").getInspector()
this.styleEighteen = this.$element("styleEighteen").getInspector()
this.styleNineteen = this.$element("styleNineteen").getInspector()
this.styleTwenty = this.$element("styleTwenty").getInspector()
this.styleTwentyOne = this.$element("styleTwentyOne").getInspector()
this.styleTwentyTwo = this.$element("styleTwentyTwo").getInspector()
this.styleTwentyThree = this.$element("styleTwentyThree").getInspector()
this.styleTwentyFour = this.$element("styleTwentyFour").getInspector()
this.styleTwentyFive = this.$element("styleTwentyFive").getInspector()
this.styleTwentySix = this.$element("styleTwentySix").getInspector()
this.styleTwentySeven = this.$element("styleTwentySeven").getInspector()
this.styleTwentyNine = this.$element("styleTwentyNine").getInspector()
this.styleThirty = this.$element("styleThirty").getInspector()
this.styleThirtyOne = this.$element("styleThirtyOne").getInspector()
this.styleThirtyTwo = this.$element("styleThirtyTwo").getInspector()
this.styleThirtyThree = this.$element("styleThirtyThree").getInspector()
},
}
arkui/ace_standard/src/main/js/default/pages/div/prop/index.hml
浏览文件 @ 23355eee
......@@ -40,7 +40,7 @@
通用属性 -- style
</text>
<div id="styleProp"
style="width:10%;height:20px;background-color:red">
style="width:10%">
</div>
<text class="sub-title">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或