diff --git a/ETSUI/eTSComponent/README.md b/ETSUI/eTSComponent/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..28d03206525cb917ef3d841f100749dab7f6935a
--- /dev/null
+++ b/ETSUI/eTSComponent/README.md
@@ -0,0 +1,47 @@
+
+
+# Ets组件测试Demo
+
+### 简介
+
+本示例展示了基础组件和容器组件的实现方式。
+
+### 使用说明
+
+- 基础组件
+ - [Blank](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/blank/blankPage.ets)
+ - [Button](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/button/buttonPage.ets)
+ - [DataPanel](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/dataPanel/dataPanelPage.ets)
+ - [Divider](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/divider/dividerPage.ets)
+ - [Gauge](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/gauge/gaugePage.ets)
+ - [Image](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/image/imagePage.ets)
+ - [Marquee](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/marquee/marqueePage.ets)
+ - [Menu](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/menu/menuPage.ets)
+ - [Progress](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/progress/progressPage.ets)
+ - [QRCode](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/qrCode/QRCodePage.ets)
+ - [Rating](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/rating/ratingPage.ets)
+ - [Span](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/span/spanPage.ets)
+ - [Slider](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/slider/sliderPage.ets)
+ - [Text](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/text/textPage.ets)
+ - [TextArea](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/textArea/textAreaPage.ets)
+ - [TextInput](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/textInput/textInputPage.ets)
+ - [Toggle](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/toggle/togglePage.ets)
+- 容器组件
+ - [Badge](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/badge/badgePage.ets)
+ - [Column](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/Column/ColumnPage.ets)
+ - [Counter](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/Counter/counterPage.ets)
+ - [Flex](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/flex/flexPage.ets)
+ - [Grid](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridPage.ets)
+ - [List](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/list/listPage.ets)
+ - [Navigator](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorPage.ets)
+ - [Panel](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/panel/panelPage.ets)
+ - [Row](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/row/rowPage.ets)
+ - [Scroll](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/scroll/scrollPage.ets)
+ - [Stack](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/stack/stackPage.ets)
+ - [Swiper](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/swiper/swiperPage.ets)
+ - [Tabs](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/tab/tabsPage.ets)
+-
+
+### 约束与限制
+
+本示例仅支持在标准系统上运行。
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/build.gradle b/ETSUI/eTSComponent/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..5fbd8b9a1b491fe66f37871edb85c627710da8ea
--- /dev/null
+++ b/ETSUI/eTSComponent/build.gradle
@@ -0,0 +1,34 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+ compileSdkVersion 8
+ supportSystem "standard"
+}
+
+buildscript {
+ repositories {
+ maven {
+ url 'https://repo.huaweicloud.com/repository/maven/'
+ }
+ maven {
+ url 'https://developer.huawei.com/repo/'
+ }
+ }
+ dependencies {
+ classpath 'com.huawei.ohos:hap:3.0.5.2'
+ classpath 'com.huawei.ohos:decctest:1.2.7.2'
+ }
+}
+
+allprojects {
+ repositories {
+ maven {
+ url 'https://repo.huaweicloud.com/repository/maven/'
+ }
+ maven {
+ url 'https://developer.huawei.com/repo/'
+ }
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/.gitignore b/ETSUI/eTSComponent/entry/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..f77260b1509284d42a7f8a2449ad1e8f4b489a3a
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/.gitignore
@@ -0,0 +1,2 @@
+/build
+/node_modules
diff --git a/ETSUI/eTSComponent/entry/build.gradle b/ETSUI/eTSComponent/entry/build.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..f104aa556203da6c8747ad6b6a2481d3f9bd3abd
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/build.gradle
@@ -0,0 +1,21 @@
+apply plugin: 'com.huawei.ohos.hap'
+//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510
+ohos {
+ compileSdkVersion 8
+ defaultConfig {
+ compatibleSdkVersion 8
+ }
+ buildTypes {
+ release {
+ proguardOpt {
+ proguardEnabled false
+ rulesFiles 'proguard-rules.pro'
+ }
+ }
+ }
+}
+
+dependencies {
+ implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+ testImplementation 'junit:junit:4.13.1'
+}
diff --git a/ETSUI/eTSComponent/entry/proguard-rules.pro b/ETSUI/eTSComponent/entry/proguard-rules.pro
new file mode 100644
index 0000000000000000000000000000000000000000..f7666e47561d514b2a76d5a7dfbb43ede86da92a
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/proguard-rules.pro
@@ -0,0 +1 @@
+# config module specific ProGuard rules here.
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/config.json b/ETSUI/eTSComponent/entry/src/main/config.json
new file mode 100644
index 0000000000000000000000000000000000000000..e3baf4abdc264191ba2141dcef1a713aaf4ff1d8
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/config.json
@@ -0,0 +1,103 @@
+{
+ "app": {
+ "bundleName": "com.openharmony.openacetest",
+ "vendor": "openharmony",
+ "version": {
+ "code": 1000000,
+ "name": "1.0.0"
+ }
+ },
+ "deviceConfig": {},
+ "module": {
+ "package": "com.openharmony.openacetest",
+ "name": ".MyApplication",
+ "mainAbility": ".MainAbility",
+ "srcPath": ".MainAbility",
+ "deviceType": [
+ "phone"
+ ],
+ "distro": {
+ "deliveryWithInstall": true,
+ "moduleName": "entry",
+ "moduleType": "entry",
+ "installationFree": false
+ },
+ "abilities": [
+ {
+ "skills": [
+ {
+ "entities": [
+ "entity.system.home"
+ ],
+ "actions": [
+ "action.system.home"
+ ]
+ }
+ ],
+ "orientation": "unspecified",
+ "visible": true,
+ "srcPath": "MainAbility",
+ "name": ".MainAbility",
+ "srcLanguage": "ets",
+ "icon": "$media:icon",
+ "description": "$string:description_mainability",
+ "formsEnabled": false,
+ "label": "$string:entry_MainAbility",
+ "type": "page",
+ "launchType": "standard"
+ }
+ ],
+ "js": [
+ {
+ "mode": {
+ "syntax": "ets",
+ "type": "pageAbility"
+ },
+ "pages": [
+ "pages/index",
+ "pages/component_basis/index",
+ "pages/component_container/index",
+ "pages/component_basis/button/buttonPage",
+ "pages/component_basis/divider/dividerPage",
+ "pages/component_basis/blank/blankPage",
+ "pages/component_basis/qrCode/QRCodePage",
+ "pages/component_basis/span/spanPage",
+ "pages/component_basis/text/textPage",
+ "pages/component_basis/toggle/togglePage",
+ "pages/component_basis/progress/progressPage",
+ "pages/component_basis/slider/sliderPage",
+ "pages/component_basis/rating/ratingPage",
+ "pages/component_basis/dataPanel/dataPanelPage",
+ "pages/component_basis/textArea/textAreaPage",
+ "pages/component_basis/gauge/gaugePage",
+ "pages/component_basis/marquee/marqueePage",
+ "pages/component_basis/image/imagePage",
+ "pages/component_basis/menu/menuPage",
+ "pages/component_basis/textInput/textInputPage",
+ "pages/component_container/Column/ColumnPage",
+ "pages/component_container/grid/gridIndex",
+ "pages/component_container/flex/flexPage",
+ "pages/component_container/grid/gridPage",
+ "pages/component_container/grid/gridItemPage",
+ "pages/component_container/list/listPage",
+ "pages/component_container/navigator/navigatorPage",
+ "pages/component_container/navigator/navigatorDetail1",
+ "pages/component_container/navigator/navigatorDetail2",
+ "pages/component_container/row/rowPage",
+ "pages/component_container/panel/panelPage",
+ "pages/component_container/scroll/scrollPage",
+ "pages/component_container/stack/stackPage",
+ "pages/component_container/swiper/swiperPage",
+ "pages/component_container/tab/tabsPage",
+ "pages/component_container/Counter/counterPage",
+ "pages/component_container/badge/badgePage"
+ ],
+ "name": ".MainAbility",
+ "window": {
+ "designWidth": 720,
+ "autoDesignWidth": false
+ }
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/app.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/app.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b7a0995c8e441cac86e21e06e7c9071664482b1c
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/app.ets
@@ -0,0 +1,8 @@
+export default {
+ onCreate() {
+ console.info('Application onCreate')
+ },
+ onDestroy() {
+ console.info('Application onDestroy')
+ },
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/blank/blankPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/blank/blankPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b475939976e76858877272dfb36ffe36707daaf9
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/blank/blankPage.ets
@@ -0,0 +1,97 @@
+import lottie from 'lottie-web'
+@Entry
+@Component
+struct BlankPage {
+ @State minLength: number = 0
+ @State blankFront: boolean = true
+ @State blankMiddle: boolean = true
+ @State blankBehind: boolean = true
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Row() {
+ if (this.blankFront) {
+ Blank(this.minLength)
+ .width(0)
+ .backgroundColor(Color.Orange)
+ }
+ Image($r('app.media.test'))
+ .width(80)
+ .height(80)
+ .objectFit(ImageFit.Contain)
+ if (this.blankMiddle) {
+ Blank(this.minLength)
+ .width(0)
+ .backgroundColor(Color.Orange)
+ }
+ Image($r('app.media.test'))
+ .width(80)
+ .height(80)
+ .objectFit(ImageFit.Contain)
+ if (this.blankBehind) {
+ Blank(this.minLength)
+ .width(0)
+ .backgroundColor(Color.Orange)
+ }
+ }
+ .width('100%')
+ .border({ width: 1 })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Text('blank组件是否存在：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button(`front：${this.blankFront}`)
+ .fontSize(15)
+ .margin({right:10})
+ .onClick(() => {
+ this.blankFront = !this.blankFront
+ })
+ Button(`middle：${this.blankMiddle}`)
+ .fontSize(15)
+ .margin({right:10})
+ .onClick(() => {
+ this.blankMiddle = !this.blankMiddle
+ })
+ Button(`behind：${this.blankBehind}`)
+ .fontSize(15)
+ .onClick(() => {
+ this.blankBehind = !this.blankBehind
+ })
+ }
+ .margin({ top: 5, bottom: 5,left: 10 })
+
+ Text(`blank组件的min值：${this.minLength}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.minLength, step: 1, min: -10, max: 300 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.minLength = Math.round(e)
+ })
+ }
+ .margin({ top: 5, bottom: 5,left: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ .width('100%')
+ }
+ .margin(5)
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/button/buttonPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/button/buttonPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..1c1b88628c22b3fa0fdf20e2ff5f896fdb81ffb0
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/button/buttonPage.ets
@@ -0,0 +1,164 @@
+@Entry
+@Component
+struct ButtonPage {
+ @State types: ButtonType[] = [ButtonType.Capsule, ButtonType.Circle, ButtonType.Normal]
+ @State typeBtn: ButtonType = ButtonType.Normal
+ @State effect: boolean = true
+ @State btnText: boolean = true
+ @State label: string = '纯文本按钮'
+ @State temporary: string = ''
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ if (this.btnText) {
+ Button('Button', { type: this.typeBtn, stateEffect: this.effect }) {
+ Column() {
+
+ Text('Button')
+ .fontSize(15)
+ .fontColor(Color.White)
+ .fontWeight(FontWeight.Bold)
+ }
+ }
+ .width(180)
+ .height(70)
+ } else {
+ Button(this.label, { type: this.typeBtn, stateEffect: this.effect })
+ .fontSize(15)
+ .width(180)
+ .height(70)
+ }
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Column() {
+ Text('包含子组件：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('true')
+ .fontSize(15)
+ .width(100)
+ .margin({ right: 10 })
+ .onClick(() => {
+ this.btnText = true
+ })
+ Button('false')
+ .width(100)
+ .fontSize(15)
+ .onClick(() => {
+ this.btnText = false
+ })
+ }
+ .width('100%')
+ .margin({ top: 10, bottom: 5 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ if (!this.btnText) {
+ Column() {
+ Text('label取值：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ TextInput({ placeholder: '', text: this.temporary })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(40)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary = value
+ })
+ .onSubmit(() => {
+ this.label = this.temporary
+ this.temporary = ''
+ })
+ }
+ .width('100%')
+ .margin({ top: 10, bottom: 5, right: 10 })
+ }
+ }
+ Column() {
+ Text('切换效果：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('true')
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.effect = true
+ })
+ Button('false')
+ .width(100)
+ .fontSize(15)
+ .onClick(() => {
+ this.effect = false
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Text('按钮类型：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('Capsule')
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.typeBtn = this.types[0]
+ })
+ Button('Circle')
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.typeBtn = this.types[1]
+ })
+ Button('Arc')
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.typeBtn = this.types[2]
+ })
+ Button('Normal')
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.typeBtn = this.types[3]
+ })
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5 })
+
+ }.alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }.width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/dataPanel/dataPanelPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/dataPanel/dataPanelPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c4a94d200e503e03b1de589224557aecf23f2827
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/dataPanel/dataPanelPage.ets
@@ -0,0 +1,127 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct DataPanelPage {
+ @State temporary: string = ''
+ @State values: number[] = [10, 20, 40, 30]
+ @State max: number = 100
+ @State closeEffect: boolean = false
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Column() {
+ DataPanel({ values: this.values, max: this.max })
+ .closeEffect(this.closeEffect)
+ }.height('80%')
+
+ Column() {
+ Text(`数据值：${this.values}`)
+ .fontSize(15)
+ .margin({ top: 20 })
+ }.alignItems(HorizontalAlign.Center)
+ .width('100%')
+ .margin({ left: 20 })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Column() {
+ Text('追加选择数据：')
+ .fontSize(15)
+ .width('100%')
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('清空')
+ .margin({right:10})
+ .fontSize(15)
+ .width(80)
+ .onClick(() => {
+ this.values = []
+ })
+ TextInput({ placeholder: '', text: this.temporary })
+ .type(InputType.Number)
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(40)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary = value
+ })
+ .onSubmit(() => {
+ let len = this.values.length
+ if (len < 9) {
+ this.values.push(Number(this.temporary))
+ } else {
+ prompt.showToast({
+ message: '最大9个数据'
+ })
+ }
+ this.temporary = ''
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text(`数据最大值：${this.max}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.max, step: 1, min: -1, max: 115 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.max = Math.round(e)
+ })
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('是否关闭占比图特效：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('true')
+ .width(80)
+ .margin({right:2})
+ .fontSize(15)
+ .onClick(() => {
+ this.closeEffect = true
+ })
+ Button('false')
+ .width(80)
+ .fontSize(15)
+ .onClick(() => {
+ this.closeEffect = false
+ })
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5 ,left:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }
+ .width('100%').margin({ top: 5 })
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/divider/dividerPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/divider/dividerPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f65b8cb3df7037bbe856816c2321a866d69df1dc
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/divider/dividerPage.ets
@@ -0,0 +1,154 @@
+@Entry
+@Component
+struct DividerPage {
+ @State vertical: boolean = false
+ @State color: Color = Color.Red
+ @State strokeWidth: number = 5
+ @State lineCap: LineCapStyle = LineCapStyle.Butt
+ @State lineCaps: LineCapStyle[] = [LineCapStyle.Butt, LineCapStyle.Round, LineCapStyle.Square]
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Divider()
+ .vertical(this.vertical)
+ .color(this.color)
+ .strokeWidth(`${this.strokeWidth}`)
+ .lineCap(this.lineCap)
+ .width(300)
+ .height(300)
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Text(`divider组件的宽度：${this.strokeWidth}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.strokeWidth, step: 1, min: -10, max: 100 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.strokeWidth = Math.round(e)
+ })
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+
+ Column() {
+ Text('分割线方向：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('vertical')
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(110)
+ .onClick(() => {
+ this.vertical = true
+ })
+ Button('horizontal')
+ .width(110)
+ .fontSize(15)
+ .onClick(() => {
+ this.vertical = false
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('端点样式：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('Butt')
+ .margin({ right: 10 })
+ .width(110)
+ .fontSize(15)
+
+ .onClick(() => {
+ this.lineCap = LineCapStyle.Butt
+ })
+ Button('Round')
+ .margin({ right: 10 })
+ .width(110)
+ .fontSize(15)
+
+ .onClick(() => {
+ this.lineCap = LineCapStyle.Round
+ })
+ Button('Square')
+ .margin({ right: 10 })
+ .width(110)
+ .fontSize(15)
+
+ .onClick(() => {
+ this.lineCap = LineCapStyle.Square
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('分割线颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('红色')
+ .margin({ right: 10 })
+ .width(110)
+ .fontSize(15)
+
+ .onClick(() => {
+ this.color = Color.Red
+ })
+ Button('黄色')
+ .margin({ right: 10 })
+ .width(110)
+ .fontSize(15)
+
+ .onClick(() => {
+ this.color = Color.Yellow
+ })
+ Button('绿色')
+ .margin({ right: 10 })
+ .width(110)
+ .fontSize(15)
+
+ .onClick(() => {
+ this.color = Color.Green
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/gauge/gaugePage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/gauge/gaugePage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ce51a0697488081753ffd27491c265b6fd6bba30
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/gauge/gaugePage.ets
@@ -0,0 +1,133 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct GaugePage {
+ @State value: number = 60
+ @State min: number = 0
+ @State max: number = 360
+ @State startAngle: number = 0
+ @State endAngle: number = 360
+ @State strokeWidth: number = 5
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Gauge({ value: this.value, min: this.min, max: this.max })
+ .width('100%')
+ .height('90%')
+ .startAngle(this.startAngle)
+ .endAngle(this.endAngle)
+ .colors([
+ [Color.Red, 0.5],
+ [Color.Blue, 0.5],
+ [Color.Yellow, 0.5]
+ ])
+ .strokeWidth(this.strokeWidth)
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Row() {
+ Text(`当前数据值：${this.value}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.value, step: 1, min: -1, max: this.max })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.value = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`当前数据段最小值：${this.min}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.min, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.min = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`当前数据段最大值：${this.max}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.max, step: 1, min: -1, max: 365 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.max = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`起始角度：${this.startAngle}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.startAngle, step: 1, min: -360, max: 360 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.startAngle = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`终止角度：${this.endAngle}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.endAngle, step: 1, min: -36, max: 360 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.endAngle = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/image/imagePage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/image/imagePage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..407dc51b5c3092c31741fa9a8da451c09a24c7cc
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/image/imagePage.ets
@@ -0,0 +1,387 @@
+// @ts-nocheck
+import image from '@ohos.multimedia.image_napi_plugin';
+import fileio from '@ohos.fileio';
+
+@Entry
+@Component
+struct GridItemExample {
+ @State uri: string = 'string'
+ @State imgId: number = 0
+ @State imgNum: number[] = [...Array(6).keys()]
+ @State img: string[] = ['/common/rawfile/basi6a16.png', '/common/rawfile/test.jpg', '/common/rawfile/0.bmp', '/common/rawfile/ic_huaweiid.svg', '/common/rawfile/ic_huaweiid.vg']
+ @State imgDescribe: string[] = ['png', 'jpg', 'bmp', 'svg', 'network', 'error']
+ @State altId: number = 0
+ @State altNum: number[] = [...Array(3).keys()]
+ @State isAlt: boolean = false
+ @State alt: string[] = ['/common/rawfile/loading.gif', '/common/rawfile/loading.jpg', '/common/rawfile/loading.png']
+ @State altDescribe: string[] = ['gif', 'jpg', 'png']
+ @State objectId: number = 2
+ @State objectFitNum: number[] = [...Array(5).keys()]
+ @State objectFit: ImageFit[] = [ImageFit.Cover, ImageFit.Contain, ImageFit.Fill, ImageFit.None, ImageFit.ScaleDown]
+ @State objectFitDescribe: string[] = ['Cover', 'Contain', 'Fill', 'None', 'ScaleDown']
+ @State repeatId: number = 0
+ @State repeatNum: number[] = [...Array(4).keys()]
+ @State objectRepeat: ImageRepeat[] = [ImageRepeat.NoRepeat, ImageRepeat.X, ImageRepeat.Y, ImageRepeat.XY]
+ @State objectRepeatDescribe: string[] = ['NoRepeat', 'X', 'Y', 'XY']
+ @State interpolationId: number = 0
+ @State interpolationNum: number[] = [...Array(4).keys()]
+ @State interpolation: ImageInterpolation[]= [ImageInterpolation.None, ImageInterpolation.High, ImageInterpolation.Medium, ImageInterpolation.Low]
+ @State interpolationDescribe: string[] = ['None', 'High', 'Medium', 'Low']
+ @State renderModeId: number = 0
+ @State renderModeNum: number[] = [...Array(2).keys()]
+ @State renderMode: ImageRenderMode[] = [ImageRenderMode.Original, ImageRenderMode.Template]
+ @State renderModeDescribe: string[]= ['Original', 'Template']
+ @State sourceId: number = 0
+ @State sourceNum: number[] = [...Array(5).keys()]
+ @State sourceSize: Array<{
+ width: number,
+ height: number
+ }> = [{ width: 200, height: 100 }, { width: 50, height: 80 }, { width: 0, height: 0 }, {
+ width: -100,
+ height: -100
+ }, { width: 300, height: 320 }]
+ @State sourceSizeDescribe: string[] = ['(200,100)', '(50.80)', '(0,0)', '(-100,-100)', '(300,320)']
+ @State isSvg: boolean = false
+ @State rowsGap: number = 0
+ @State barWidth: number = 0
+ @State barHeight: number = 0
+ @State scrollBarId: number = 0
+
+ build() {
+ Column() {
+ if (this.uri == 'string') {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Image(this.img[this.imgId])
+ .alt(this.alt[this.altId])
+ .objectFit(this.objectFit[this.objectId])
+ .objectRepeat(this.objectRepeat[this.repeatId])
+ .interpolation(this.interpolation[this.interpolationId])
+ .renderMode(this.renderMode[this.renderModeId])
+ .sourceSize(this.sourceSize[this.sourceId])
+ .width(350)
+ .height(300)
+ .onComplete((e) => {
+ console.log('www data complete ' + JSON.stringify(e))
+ })
+ .onError(() => {
+ console.info('www data error ' + '图片加载错误')
+ })
+ .onFinish(() => {
+ console.log('www data finish ' + '图片加载完成')
+ })
+ }
+ .height('45%')
+ .width('90%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+ } else {
+ image_PixelMapPage()
+ }
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Button('uri:string')
+ .fontSize(15)
+ .onClick(() => {
+ this.uri = 'string'
+ })
+ Button('uri:PixelMap')
+ .fontSize(15)
+ .visibility(Visibility.Hidden)
+ .onClick(() => {
+ this.uri = 'PixelMap'
+ })
+
+
+ }
+ .margin({ top: 5, bottom: 5 })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text('图片uri及格式')
+ .width('100%')
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontSize(15)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5)
+
+ ForEach(this.imgNum, item => {
+ GridItem() {
+ Button(this.imgDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.imgId = item
+ if (item == 5) {
+ this.isAlt = true
+ } else {
+ this.isAlt = false
+ }
+ if (item == 3) {
+ this.isSvg = true
+ } else {
+ this.isSvg = false
+ }
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('缩放类型')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5)
+
+ ForEach(this.objectFitNum, item => {
+ GridItem() {
+ Button(this.objectFitDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+
+ .onClick(() => {
+ this.objectId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('重复样式')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.repeatNum, item => {
+ GridItem() {
+ Button(this.objectRepeatDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.repeatId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('插值效果')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.interpolation, item => {
+ GridItem() {
+ Button(this.interpolationDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.repeatId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('渲染模式')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.renderModeNum, item => {
+ GridItem() {
+ Button(this.renderModeDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.repeatId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('解码尺寸')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.sourceNum, item => {
+ GridItem() {
+ Button(this.sourceSizeDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.repeatId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('占位图格式')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.altNum, item => {
+ GridItem() {
+ Button(this.altDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.repeatId = item
+ })
+ }
+ }, item => item.toString())
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .scrollBarWidth(this.barWidth)
+ .scrollBar(BarState.Auto)
+ .onScrollIndex((e) => {
+ console.log('www data ' + e)
+ prompt.showToast({
+ message: String(e),
+ duration: 2000
+ })
+ })
+ }.height('45%')
+ .width('100%')
+ }.width('100%').margin({ top: 5 })
+ }
+}
+
+
+@Component
+struct image_PixelMapPage {
+ @State pixmapObj: PixelMap = undefined
+ @State pixmapObj1: PixelMap = undefined
+ @State pixmapObj2: PixelMap = undefined
+ @State pixmapObj3: PixelMap = undefined
+ @State show: number= 0
+
+ private aboutToAppear(): void {
+ console.error(' ---------before----- PixelMapNapi createImageSource ');
+ this.testImage1()
+ console.error(' ---------after----- PixelMapNapi createImageSource ');
+ }
+
+ build() {
+
+ Column() {
+ Text("test Image PixelMap")
+ .width(150)
+ .height(50)
+ .margin(10)
+
+ Image(this.pixmapObj)
+ .width(300)
+ .height(300)
+ .backgroundColor('rgb(255, 0, 0)')
+ .border({ width: 2, color: 'rgb(0, 255, 0)', radius: 10, style: BorderStyle.Dashed })
+ .objectFit(ImageFit.Contain)
+ .objectRepeat(ImageRepeat.XY)
+ .renderMode(ImageRenderMode.Template)
+ .onClick((event) => {
+ if (this.show == 0) {
+ this.pixmapObj = this.pixmapObj1;
+ this.show =+1;
+ console.info("cd test pixmap" + this.show);
+ }
+ else if (this.show == 1) {
+ this.pixmapObj = this.pixmapObj2;
+ this.show =+1;
+ console.info("cd test pixmap" + this.show);
+ }
+ else if (this.show == 2) {
+ this.pixmapObj = this.pixmapObj3;
+ this.show =+1;
+ console.info("cd test pixmap" + this.show);
+ }
+ else {
+ this.pixmapObj = this.pixmapObj;
+ this.show = 0;
+ console.info("cd test pixmap" + this.show);
+ }
+ });
+
+ // 这里是column的结尾
+ }.alignItems(HorizontalAlign.Center)
+ .width(500)
+ .height(2000)
+ }
+
+ testImage1() {
+ console.error('PixelMapNapi testImage');
+ var fd1 = fileio.openSync("/system/test1.png");
+ var fd2 = fileio.openSync("/system/test2.jpg");
+ var fd3 = fileio.openSync("/system/test3.bmp");
+ var fd4 = fileio.openSync("/system/test4.webp");
+ let opts = {
+ "sampleSize": 1,
+ "rotateDegrees": 0,
+ "editable": false,
+ "desiredSize": {
+ "width": 0,
+ "height": 0
+ },
+ "desiredRegion": {
+ "size": {
+ "width": 0,
+ "height": 0
+ },
+ "x": 0,
+ "y": 0
+ },
+ "desiredPixelFormat": 3,
+ };
+ image.createPixelMap(fd1, 0, opts).then((data) => {
+ this.pixmapObj = data;
+ }).catch((InfoErr) => {
+ console.error('PixelMapNapi CreatePixelByFd error msg is ' + InfoErr.message);
+ });
+ image.createPixelMap(fd2, 0, opts).then((data) => {
+ this.pixmapObj1 = data;
+ }).catch((InfoErr) => {
+ console.error('PixelMapNapi CreatePixelByFd error msg is ' + InfoErr.message);
+ });
+ image.createPixelMap(fd3, 0, opts).then((data) => {
+ this.pixmapObj2 = data;
+ }).catch((InfoErr) => {
+ console.error('PixelMapNapi CreatePixelByFd error msg is ' + InfoErr.message);
+ });
+ image.createPixelMap(fd4, 0, opts).then((data) => {
+ this.pixmapObj3 = data;
+ }).catch((InfoErr) => {
+ console.error('PixelMapNapi CreatePixelByFd error msg is ' + InfoErr.message);
+ });
+ }
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/index.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b6f63140009e7bfba4037f006689257772e1844b
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/index.ets
@@ -0,0 +1,68 @@
+import router from '@system.router'
+
+const componentBasisItems = [
+ { title: 'Button', uri: 'pages/component_basis/button/buttonPage' },
+ { title: 'Text', uri: 'pages/component_basis/text/textPage' },
+ { title: 'Span', uri: 'pages/component_basis/span/spanPage' },
+ { title: 'Image', uri: 'pages/component_basis/image/imagePage' },
+ { title: 'TextArea', uri: 'pages/component_basis/textArea/textAreaPage' },
+ { title: "Divider", uri: 'pages/component_basis/divider/dividerPage' },
+ { title: "QRCode", uri: 'pages/component_basis/qrCode/QRCodePage' },
+ { title: "Blank", uri: 'pages/component_basis/blank/blankPage' },
+ { title: "Marquee", uri: 'pages/component_basis/marquee/marqueePage' },
+ { title: "toggle", uri: 'pages/component_basis/toggle/togglePage' },
+ { title: "Slider", uri: 'pages/component_basis/slider/sliderPage' },
+ { title: "Menu", uri: 'pages/component_basis/menu/menuPage' },
+ { title: "Gauge", uri: 'pages/component_basis/gauge/gaugePage' },
+ { title: "DataPanel", uri: 'pages/component_basis/dataPanel/dataPanelPage' },
+ { title: "Progress", uri: 'pages/component_basis/progress/progressPage' },
+ { title: "Rating", uri: 'pages/component_basis/rating/ratingPage' },
+ { title: "TextInput", uri: 'pages/component_basis/textInput/textInputPage' },
+]
+
+@Entry
+@Component
+struct component_basis {
+ @State basisActive: boolean = false
+ @State statusActive: boolean = false
+ @State containerActive: boolean = false
+
+ build() {
+ Flex({
+ direction: FlexDirection.Column,
+ alignItems: ItemAlign.Center
+ }) {
+ List() {
+ ForEach(componentBasisItems, (item) => {
+ ListItem() {
+ Row() {
+ Text(item.title)
+ .fontSize(16)
+ .padding({ left: 10 })
+
+ }
+ .padding({ left: 10 })
+ .width("100%")
+ .height(55)
+ .alignItems(VerticalAlign.Center)
+ .backgroundColor(0xfff5deb3)
+ .margin({ top: 5, bottom: 5 })
+ .borderRadius(12)
+ .onClick(() => {
+ router.push({
+ uri: item.uri
+ })
+ })
+ }
+ }, item => item.title)
+ }
+ .width('100%')
+ }
+ }
+}
+
+
+
+
+
+
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/marquee/marqueePage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/marquee/marqueePage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..57e5035df48932e8c93ef44c82db143c676722b1
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/marquee/marqueePage.ets
@@ -0,0 +1,182 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct MarqueePage {
+ @State start: boolean = true
+ @State step: number = 30
+ @State loop: number = -1
+ @State fromStart: boolean = true
+ @State src: string = ''
+ @State temporary: string = ''
+
+ build() {
+ Column() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Marquee({
+ start: this.start,
+ step: this.step,
+ loop: this.loop,
+ fromStart: this.fromStart,
+ src: this.src
+ })
+ .fontSize(15)
+ .onStart(() => {
+ prompt.showToast({
+ message: '开始滚动',
+ duration: 2000
+ })
+ })
+ .onBounce(() => {
+ prompt.showToast({
+ message: '滚动到底',
+ duration: 2000
+ })
+ })
+ .onFinish(() => {
+ prompt.showToast({
+ message: '滚动完成',
+ duration: 2000
+ })
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+ }
+
+ Column() {
+ Row() {
+ Text('文本内容：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ TextInput({ placeholder: '', text: this.temporary })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(40)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary = value
+ })
+ .onSubmit(() => {
+ this.src = this.temporary
+ this.temporary = ''
+ })
+ .onEditChanged((isEditing) => {
+ console.log('www data ' + JSON.stringify(isEditing))
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Column() {
+ Text('是否播放：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('true')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.start = true
+ })
+ Button('false')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.start = false
+ })
+ }
+ .width('95%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Row() {
+ Text(`滚动步长：${this.step}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.step, step: 1, min: -10, max: 100 })
+ .blockColor(Color.Orange)
+ .height(40)
+ .onChange((e) => {
+ this.step = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`滚动次数：${this.loop}`)
+ .fontSize(15)
+ .width('30%')
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.loop, step: 1, min: -5, max: 15 })
+ .height(40)
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.loop = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Column() {
+ Text('滚动方向：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start}) {
+ Button('true')
+ .fontSize(15)
+ .margin({right:10})
+ .width(90)
+ .onClick(() => {
+ this.start = true
+ })
+ Button('false')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.start = false
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/menu/menuPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/menu/menuPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f1cb3d71d6e38c09af168cd4ae5774db834c182c
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/menu/menuPage.ets
@@ -0,0 +1,126 @@
+import router from '@system.router';
+@Entry
+@Component
+struct menu_testcase {
+ @State bindMenuStyle:boolean=true
+ @State valueMenu:string='null'
+ @Builder MenuBuilder() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text('text1')
+ .fontSize(20)
+ .width(150)
+ .height(50)
+ .textAlign(TextAlign.Center)
+ .onClick(() => {
+ this.valueMenu='menu1'
+ })
+
+ Divider().height(10)
+ Text('text2')
+ .fontSize(20)
+ .width(150)
+ .height(50)
+ .textAlign(TextAlign.Center)
+ .onClick(() => {
+ this.valueMenu='menu2'
+ })
+
+ Divider().height(10)
+
+ Button('BackPage')
+ .fontSize(15)
+ .width(150)
+ .height(50)
+ .onClick(() => {
+ router.push({ uri: 'pages/component_basis/menu/menuIndex' })
+ })
+
+ }.width(100)
+ }
+
+ build() {
+ Column() {
+ Column() {
+ if (this.bindMenuStyle == true) {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text('click for menu1')
+ .fontSize(15)
+ .width('40%')
+ .height('40%')
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+ } else if (this.bindMenuStyle == false) {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Column() {
+ Text('click for menu2')
+ .fontSize(15)
+ .width('40%')
+ .height('40%')
+ }
+ .bindMenu([
+ {
+ value: 'Menu1',
+ action: () => {
+ console.info('handle Menu1 select')
+ this.valueMenu = 'menu1'
+ }
+ },
+ {
+ value: 'Menu2',
+ action: () => {
+ console.info('handle Menu2 select')
+ this.valueMenu = 'menu2'
+ }
+ },
+ ])
+ }
+ .height('45%')
+ .width('90%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+ }
+ }
+ Column(){
+ Text(`菜单项文本:${this.valueMenu}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('90%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ Text('bindMenuStyle：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('90%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('CustomBuilder')
+ .margin({right:10})
+ .fontSize(15)
+ .width(140)
+ .onClick(() => {
+ this.bindMenuStyle = true
+ })
+ Button('MenuItem')
+ .width(140)
+ .fontSize(15)
+ .onClick(() => {
+ this.bindMenuStyle = false
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }
+ .width('100%')
+ .margin({ top: 5 })
+ .bindMenu(this.MenuBuilder)
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/progress/progressPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/progress/progressPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..cf36b6eaf0937485c7eae44e3c09bae7cfc17b99
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/progress/progressPage.ets
@@ -0,0 +1,196 @@
+@Entry
+@Component
+struct ProgressPage {
+ @State currentValue: number = 30
+ @State total: number = 100
+ @State num1: number[] = [...Array(4).keys()]
+ @State progressStyleId: number = 0
+ @State progressStyle: ProgressStyle[] = [ProgressStyle.Linear, ProgressStyle.Eclipse]
+ @State progressStyleDescribe: string[] = ['Linear', 'Eclipse', 'Circular', 'Capsule']
+ @State colorId: number = 0
+ @State color: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Pink', 'Yellow']
+ @State strokeWidth: number = 30
+ @State scaleCount: number = 30
+ @State scaleWidth: number = 30
+ @State isCircular: boolean = false
+ @State isStrokeWidth: boolean = true
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Progress({ value: this.currentValue, total: this.total, style: this.progressStyle[this.progressStyleId] })
+ .color(this.color[this.colorId])
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Scroll() {
+ Column() {
+ Column() {
+ Text('进度条类型：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.progressStyleDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.progressStyleId = item
+ if (item != 2) {
+ this.isCircular = false
+ } else {
+ this.isCircular = true
+ }
+ if (item != 1) {
+ this.isStrokeWidth = true
+ } else {
+ this.isStrokeWidth = false
+ }
+ })
+ }, item => item.toString())
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('选中颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.colorId = item
+ })
+ }, item => item.toString())
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Row() {
+ Text(`当前进度：${this.currentValue}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.currentValue, step: 1, min: -1, max: 110 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.currentValue = Math.round(e)
+ })
+ }
+ .width('60%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ Row() {
+ Text(`进度总长：${this.total}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.total, step: 1, min: -1, max: 110 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.total = Math.round(e)
+ })
+ }
+ .width('60%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ if (this.isCircular || this.isStrokeWidth) {
+ Row() {
+ Text(`进度条宽度：${this.strokeWidth}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.strokeWidth, step: 1, min: -1, max: 110 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.strokeWidth = Math.round(e)
+ })
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ }
+ if (this.isCircular) {
+ Row() {
+ Text(`刻度数量：${this.scaleCount}`)
+ .fontSize(12)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.scaleCount, step: 1, min: -1, max: 110 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.scaleCount = Math.round(e)
+ })
+ }
+ .width('60%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ Row() {
+ Text(`刻度粗细：${this.scaleWidth}`)
+ .fontSize(12)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.scaleWidth, step: 1, min: -1, max: 110 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.scaleWidth = Math.round(e)
+ })
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ }
+ }.alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }.height("60%")
+ .scrollable(ScrollDirection.Vertical)
+ .scrollBar(BarState.On)
+ .scrollBarColor(Color.Gray)
+ .scrollBarWidth(10)
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/qrCode/QRCodePage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/qrCode/QRCodePage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..755f83bf5ea6caff0cf7124a4c2d9063d7fe52a2
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/qrCode/QRCodePage.ets
@@ -0,0 +1,87 @@
+@Entry
+@Component
+struct QRCodePage {
+ @State value: string = ''
+ @State temporary: string = ''
+ @State color: Color = Color.Black
+ build() {
+ Column(){
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ QRCode(this.value)
+ .color(this.color)
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column(){
+ Row(){
+ Text('二维码内容：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ TextInput({placeholder: '', text: this.temporary })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({size:15})
+ .height(40)
+ .border({width:3,radius:20,color:'#88000000'})
+ .onChange((value)=>{
+ this.temporary = value
+ })
+ .onSubmit(()=>{
+ this.value = this.temporary
+ this.temporary = ''
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ Text('二维码颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('Red')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.color = Color.Red
+ })
+ Button('Yellow')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.color = Color.Yellow
+ })
+ Button('Green')
+ .margin({right:2})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.color = Color.Green
+ })
+ Button('Blue')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.color = Color.Blue
+ })
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }.alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+
+ }.width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/rating/ratingPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/rating/ratingPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..40865a0910012bf41e057ed6eb7db68ce113acc8
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/rating/ratingPage.ets
@@ -0,0 +1,240 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct RatingPage {
+ @State rating: number = 2
+ @State indicator: boolean = false
+ @State stars: number = 5
+ @State stepSize: number = 0.5
+ @State backgroundUriId: number = -1
+ @State foregroundUriId: number = -1
+ @State secondaryUriId: number = -1
+ @State backgroundUri: string[] = ['/common/star/star-1-1.png', '/common/star/star-2-1.png', '/common/star/star-3-1.png', '/common/star/star-4-1.png']
+ @State foregroundUri: string[] = ['/common/star/star-1-3.png', '/common/star/star-2-3.png', '/common/star/star-3-3.png', '/common/star/star-4-3.png']
+ @State secondaryUri: string[] = ['/common/star/star-1-2.png', '/common/star/star-2-2.png', '/common/star/star-3-2.png', '/common/star/star-4-2.png']
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Rating({ rating: this.rating, indicator: this.indicator })
+ .stars(this.stars)
+ .stepSize(this.stepSize)
+ .starStyle({
+ backgroundUri: this.backgroundUri[this.backgroundUriId],
+ foregroundUri: this.foregroundUri[this.foregroundUriId],
+ secondaryUri: this.secondaryUri[this.secondaryUriId]
+ })
+ .onChange((value) => {
+ prompt.showToast({
+ message: 'value：' + value
+ })
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Row() {
+ Text(`评分值：${this.rating}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.rating, step: this.stepSize, min: -1, max: 6 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.rating = Number(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`评星总数：${this.stars}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.stars, step: this.stepSize, min: -1, max: 10 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.stars =Math.round((Number(e))*100)/100
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`评级步长：${this.stepSize}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.stepSize, step: 0.1, min: -1, max: 6 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.stepSize = Number(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Column() {
+ Text('是否为指示器：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('true')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.indicator = true
+ })
+ Button('false')
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.indicator = false
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Row() {
+ Text(`未选中图片:${this.backgroundUriId}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Image($r('app.media.add'))
+ .margin({right:10})
+ .width(30).height(30).objectFit(ImageFit.Contain)
+ .onClick(() => {
+ if (this.backgroundUriId >= 3) {
+ this.backgroundUriId = 3
+ } else {
+ this.backgroundUriId += 1
+ }
+ })
+ Image($r('app.media.cut'))
+ .margin({right:10})
+ .width(30).height(30).objectFit(ImageFit.Contain)
+ .onClick(() => {
+ if (this.backgroundUriId <= 0) {
+ this.backgroundUriId = 0
+ } else {
+ this.backgroundUriId -= 1
+ }
+ })
+ Image($r('app.media.reset'))
+ .width(30).height(30).objectFit(ImageFit.Contain)
+ .onClick(() => {
+ this.backgroundUriId = -1
+ })
+ }.width('70%')
+ }
+
+ Row() {
+ Text(`已选中图片:${this.foregroundUriId}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Image($r('app.media.add'))
+ .margin({right:10})
+ .width(30).height(30).objectFit(ImageFit.Contain)
+ .onClick(() => {
+ if (this.foregroundUriId >= 3) {
+ this.foregroundUriId = 3
+ } else {
+ this.foregroundUriId += 1
+ }
+ })
+ Image($r('app.media.cut'))
+ .margin({right:10})
+ .width(30).height(30).objectFit(ImageFit.Contain)
+ .onClick(() => {
+ if (this.foregroundUriId <= 0) {
+ this.foregroundUriId = 0
+ } else {
+ this.foregroundUriId -= 1
+ }
+ })
+ Image($r('app.media.reset'))
+ .margin({right:2})
+ .width(30).height(30).objectFit(ImageFit.Contain)
+ .onClick(() => {
+ this.foregroundUriId = -1
+ })
+ }.width('70%')
+ }
+
+ Row() {
+ Text(`部分选中图片:${this.secondaryUriId}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Image($r('app.media.add'))
+ .margin({right:10})
+ .width(30).height(30).objectFit(ImageFit.Contain)
+ .onClick(() => {
+ if (this.secondaryUriId >= 3) {
+ this.secondaryUriId = 3
+ } else {
+ this.secondaryUriId += 1
+ }
+ })
+ Image($r('app.media.cut'))
+ .margin({right:10})
+ .width(30).height(30).objectFit(ImageFit.Contain)
+ .onClick(() => {
+ if (this.secondaryUriId <= 0) {
+ this.secondaryUriId = 0
+ } else {
+ this.secondaryUriId -= 1
+ }
+ })
+ Image($r('app.media.reset'))
+ .width(30).height(30).objectFit(ImageFit.Contain)
+ .onClick(() => {
+ this.secondaryUriId = -1
+ })
+ }.width('70%')
+ }
+ }.alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/slider/sliderPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/slider/sliderPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..d2ac8a024fb3b18d10f17a6536e6f566960a2233
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/slider/sliderPage.ets
@@ -0,0 +1,282 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct SliderPage {
+ scroller: Scroller = new Scroller()
+ @State num1: number[] = [...Array(4).keys()]
+ @State currentValue: number = 10
+ @State min: number = 0
+ @State max: number = 100
+ @State step: number = 1
+ @State SliderStyleId: number = 0
+ @State SliderStyles: SliderStyle[] = [SliderStyle.OutSet, SliderStyle.InSet]
+ @State blockId: number = 0
+ @State trackId: number = 1
+ @State selectedId: number = 2
+ @State sliderColor: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Pink', 'Yellow']
+ @State showSteps: boolean = false
+ @State showTips: boolean = false
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text(`${this.currentValue}`)
+ .fontSize(20)
+ Slider({
+ value: this.currentValue,
+ min: this.min,
+ max: this.max,
+ step: this.step,
+ style: this.SliderStyles[this.SliderStyleId]
+ })
+ .blockColor(this.sliderColor[this.blockId])
+ .trackColor(this.sliderColor[this.trackId])
+ .selectedColor(this.sliderColor[this.selectedId])
+ .showSteps(this.showSteps)
+ .showTips(this.showTips)
+ .onChange((value: number, mode: SliderChangeMode) => {
+ this.currentValue = Math.round(value)
+ prompt.showToast({
+ message: 'value：' + value + ',mode：' + mode,
+ duration: 2000
+ })
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Scroll(this.scroller){
+ Column() {
+ Row() {
+ Text(`当前进度：${this.currentValue}`)
+ .fontSize(12)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.currentValue, step: 1, min: -1, max: this.max })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.currentValue = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`最小值：${this.min}`)
+ .fontSize(12)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.min, step: 1, min: -1, max: 20 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.min = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`最大值：${this.max}`)
+ .fontSize(12)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.max, step: 1, min: -1, max: 500 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.max = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`滑动跳动值：${this.step}`)
+ .fontSize(12)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.step, step: 1, min: -1, max: 20 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.step = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Column() {
+ Text('滑块样式：')
+ .fontSize(12)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('Outset')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.SliderStyleId = 0
+ })
+ Button('Inset')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.SliderStyleId = 1
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+ Column(){
+ Text('滑块颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.blockId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+ Column(){
+ Text('滑轨背景颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.trackId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+ Column(){
+ Text('已滑动颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start}) {
+ ForEach(this.num1, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.selectedId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column(){
+ Text('显示刻度：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start}) {
+ Button(`${this.showSteps}`)
+ .margin({right:2})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.showSteps = !this.showSteps
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+ Column() {
+ Text('显示气泡：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button(`${this.showTips}`)
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.showTips = !this.showTips
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+
+ }
+ .height("60%")
+ .scrollable(ScrollDirection.Vertical)
+ .scrollBar(BarState.On)
+ .scrollBarColor(Color.Gray)
+ .scrollBarWidth(10)
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/span/spanPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/span/spanPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..75aa35063316b5eec3f3580c6a7fecd38213f356
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/span/spanPage.ets
@@ -0,0 +1,130 @@
+@Entry
+@Component
+struct SpanPage {
+ @State spanText: string = 'span组件'
+ @State temporary: string = ''
+ @State num: number[] = [...Array(4).keys()]
+ @State textCaseNum: number[] = [...Array(3).keys()]
+ @State decorationId: number = 0
+ @State decoration: TextDecorationType[] = [TextDecorationType.Underline, TextDecorationType.LineThrough, TextDecorationType.Overline, TextDecorationType.None]
+ @State decorationDescribe: string[] = ['Underline', 'LineThrough', 'Overline', 'None']
+ @State colorId: number = 0
+ @State color: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Pink', 'Yellow']
+ @State textCaseId: number = 0
+ @State textCase: TextCase[]= [TextCase.Normal, TextCase.LowerCase, TextCase.UpperCase]
+ @State textCaseDescribe: string[]= ["Normal", "LowerCase", "UpperCase"]
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text() {
+ Span(this.spanText)
+ .fontSize(30)
+ .decoration({ type: this.decoration[this.decorationId], color: this.color[this.colorId] })
+ .textCase(this.textCase[this.textCaseId])
+ }
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Row() {
+ Text('文本内容：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ TextInput({ placeholder: '', text: this.temporary })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(40)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary = value
+ })
+ .onSubmit(() => {
+ this.spanText = this.temporary
+ this.temporary = ''
+ })
+ .onEditChanged((isEditing) => {
+ console.log('www data ' + JSON.stringify(isEditing))
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Text('文本装饰线样式：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num, item => {
+ Button(this.decorationDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(120)
+ .onClick(() => {
+ this.decorationId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+
+ Text('文本装饰线颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(120)
+ .onClick(() => {
+ this.colorId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+
+ Text('文本大小写：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .width('100%')
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.textCaseNum, item => {
+ Button(this.textCaseDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(120)
+ .onClick(() => {
+ this.textCaseId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }.width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/text/textPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/text/textPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e6df5315789bcc9279fc0ff4e243716bcb4af7a6
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/text/textPage.ets
@@ -0,0 +1,265 @@
+@Entry
+@Component
+struct TextPage {
+ scroller: Scroller = new Scroller()
+ @State value: string = 'This framework is a framework for application development based on front-end development technology stacks. It adopts popular front-end development models and fits the thinking habits of mainstream front-end developers.'
+ @State temporary: string = ''
+ @State textAlignId: number = 0
+ @State textAlign: TextAlign[] = [TextAlign.Start, TextAlign.End, TextAlign.Center]
+ @State textAlignDescribe: string[] = ['Start', 'End', 'Center']
+ @State textOverflowId: number = 0
+ @State textOverflow: TextOverflow[] = [TextOverflow.Clip, TextOverflow.Ellipsis, TextOverflow.None]
+ @State textOverflowDescribe: string[] = ['Clip', 'Ellipsis', 'None']
+ @State decorationId: number = 0
+ @State decoration: TextDecorationType[] = [TextDecorationType.Underline, TextDecorationType.LineThrough, TextDecorationType.Overline, TextDecorationType.None]
+ @State decorationDescribe: string[] = ['Underline', 'LineThrough', 'Overline', 'None']
+ @State num1: number[] = [...Array(3).keys()]
+ @State num2: number[] = [...Array(4).keys()]
+ @State lines: number = 5
+ @State lineHeight: number = 40
+ @State colorId: number = 0
+ @State color: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Pink', 'Yellow']
+ @State baselineOffset: number = 0
+ @State textCaseId: number = 0
+ @State textCase: TextCase[]= [TextCase.Normal, TextCase.LowerCase, TextCase.UpperCase]
+ @State textCaseDescribe: string[]= ["Normal", "LowerCase", "UpperCase"]
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Scroll() {
+ Text(this.value)
+ .fontSize(30)
+ .textAlign(this.textAlign[this.textAlignId])
+ .textOverflow({ overflow: this.textOverflow[this.textOverflowId] })
+ .maxLines(this.lines)
+ .lineHeight(this.lineHeight)
+ .decoration({ type: this.decoration[this.decorationId], color: this.color[this.colorId] })
+ .baselineOffset(this.baselineOffset)
+ .textCase(this.textCase[this.textCaseId])
+ }
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Scroll(this.scroller) {
+ Column() {
+ Row() {
+ Text(`maxLines：${this.lines}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.lines, step: 1, min: -1, max: 15 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.lines = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ Row() {
+ Text(`lineHeight：${this.lineHeight}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.lineHeight, step: 1, min: -1, max: 99 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.lineHeight = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ Row() {
+ Text(`baselineOffset：${this.baselineOffset}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.baselineOffset, step: 1, min: -1, max: 99 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.baselineOffset = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ Row() {
+ Text('文本内容：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ TextInput({ placeholder: '', text: this.temporary })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(40)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary = value
+ })
+ .onSubmit(() => {
+ this.value = this.temporary
+ this.temporary = ''
+ })
+ .onEditChanged((isEditing) => {
+ console.log('www data ' + JSON.stringify(isEditing))
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ Column() {
+ Text('多行文本对齐：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.textAlignDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(120)
+ .onClick(() => {
+ this.textAlignId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('超长文本显示方式：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.textOverflowDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(120)
+ .onClick(() => {
+ this.textOverflowId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('文本装饰线样式：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num2, item => {
+ Button(this.decorationDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(120)
+ .onClick(() => {
+ this.decorationId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('文本装饰线颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num2, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(120)
+ .onClick(() => {
+ this.colorId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('文本大小写：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.textCaseDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(120)
+ .onClick(() => {
+ this.textCaseId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }
+ .height("60%")
+ .scrollable(ScrollDirection.Vertical)
+ .scrollBar(BarState.On)
+ .scrollBarColor(Color.Gray)
+ .scrollBarWidth(10)
+ }.width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/textArea/textAreaPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/textArea/textAreaPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ae935a0a1076f8e702d7e349a0dcef68aaf3f90e
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/textArea/textAreaPage.ets
@@ -0,0 +1,295 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct TextAreaPage {
+ scroller: Scroller = new Scroller()
+ @State num1: number[] = [...Array(6).keys()]
+ @State num2: number[] = [...Array(4).keys()]
+ @State num3: number[] = [...Array(3).keys()]
+ @State placeholder: string = '三生三世'
+ @State text: string = ''
+ @State temporary1: string = ''
+ @State temporary2: string = ''
+ @State size: number = 15
+ @State colorId: number = 0
+ @State color: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Pink', 'Yellow']
+ @State fontStyle: FontStyle = FontStyle.Normal
+ @State isNumber: boolean = true
+ @State fontWeight: number = 500
+ @State fontWeightId: number = 0
+ @State fontWeights: FontWeight[] = [FontWeight.Bold, FontWeight.Normal, FontWeight.Bolder, FontWeight.Lighter, FontWeight.Medium, FontWeight.Regular]
+ @State fontWeightDescribe: string[] = ['Bold', 'Normal', 'Bolder', 'Lighter', 'Medium', 'Regular']
+ @State textAlignId: number = 0
+ @State textAlign: TextAlign[] = [TextAlign.Start, TextAlign.End, TextAlign.Center]
+ @State textAlignDescribe: string[] = ['Start', 'End', 'Center']
+ @State caretColorId: number = 0
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ TextArea({ placeholder: this.placeholder, text: this.text })
+ .placeholderColor(this.color[this.colorId])
+ .placeholderFont({
+ size: this.size,
+ weight: this.isNumber == true ? this.fontWeight : this.fontWeights[this.fontWeightId],
+ style: this.fontStyle
+ })
+ .textAlign(this.textAlign[this.textAlignId])
+ .caretColor(this.color[this.caretColorId])
+ .onChange((value) => {
+ prompt.showToast({
+ message: 'value：' + value
+ })
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Scroll(this.scroller) {
+ Column() {
+ Row() {
+ Text('placeholder：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ TextInput({ placeholder: '', text: this.temporary1 })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(40)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary1 = value
+ })
+ .onSubmit(() => {
+ this.placeholder = this.temporary1
+ this.temporary1 = ''
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text('text：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ TextInput({ placeholder: '', text: this.temporary2 })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(40)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary2 = value
+ })
+ .onSubmit(() => {
+ this.text = this.temporary2
+ this.temporary2 = ''
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Row() {
+ Text(`placeholder size：${this.size}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.size, step: 1, min: -1, max: 100 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.size = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+
+ Column() {
+ Text('placeholder颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num2, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.colorId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('字体样式：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('Normal')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.fontStyle = FontStyle.Normal
+ })
+ Button('Italic')
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.fontStyle = FontStyle.Italic
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Column() {
+ Text('fontWeight：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('Number')
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.isNumber = true
+ })
+ Button('String')
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.isNumber = false
+ })
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ if (!this.isNumber) {
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.fontWeightDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.fontWeightId = item
+ })
+ }, item => item.toString())
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ } else {
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Start }) {
+ Slider({ value: this.fontWeight, step: 100, min: -100, max: 1000 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .onChange((e) => {
+ this.fontWeight = Math.round(e)
+ })
+ Text(`${this.fontWeight}`)
+ .fontSize(15)
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('文本水平对齐方式：')
+ .fontSize(12)
+ .backgroundColor(0xFAEEE0)
+ .width('90%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num3, item => {
+ Button(this.textAlignDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.textAlignId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('光标颜色：')
+ .fontSize(12)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num2, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({right:10})
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.caretColorId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5 ,left:10,right:10})
+ }
+ .alignItems(HorizontalAlign.Start)
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }
+ .height("50%")
+ .scrollable(ScrollDirection.Vertical)
+ .scrollBar(BarState.On)
+ .scrollBarColor(Color.Gray)
+ .scrollBarWidth(10)
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/textInput/textInputPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/textInput/textInputPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4c7cf73faf30e6e77731d8149d4cc5f957831031
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/textInput/textInputPage.ets
@@ -0,0 +1,345 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct TextInputPage {
+ scroller: Scroller = new Scroller()
+ @State num1: number[] = [...Array(6).keys()]
+ @State num2: number[] = [...Array(4).keys()]
+ @State num3: number[] = [...Array(3).keys()]
+ @State num4: number[] = [...Array(5).keys()]
+ @State placeholder: string = '三生三世'
+ @State text: string = ''
+ @State temporary1: string = ''
+ @State temporary2: string = ''
+ @State size: number = 15
+ @State colorId: number = 0
+ @State color: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Pink', 'Yellow']
+ @State fontStyle: FontStyle = FontStyle.Normal
+ @State isNumber: boolean = true
+ @State fontWeight: number = 500
+ @State fontWeightId: number = 0
+ @State fontWeights: FontWeight[] = [FontWeight.Bold, FontWeight.Normal, FontWeight.Bolder, FontWeight.Lighter, FontWeight.Medium, FontWeight.Regular]
+ @State fontWeightDescribe: string[] = ['Bold', 'Normal', 'Bolder', 'Lighter', 'Medium', 'Regular']
+ @State textAlignId: number = 0
+ @State textAlign: TextAlign[] = [TextAlign.Start, TextAlign.End, TextAlign.Center]
+ @State textAlignDescribe: string[] = ['Start', 'End', 'Center']
+ @State caretColorId: number = 0
+ @State typeId: number = 0
+ @State type: InputType[] = [InputType.Normal, InputType.Password, InputType.Email, InputType.Number]
+ @State typeDescribe: string[] = ['Normal', 'Password', 'Email', 'Number']
+ @State enterKeyTypeId: number = 1
+ @State enterKeyType: EnterKeyType[] = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Next, EnterKeyType.Done]
+ @State enterKeyTypeDescribe: string[] = ['Go', 'Search', 'Send', 'Next', 'Done']
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ TextInput({ placeholder: this.placeholder, text: this.text })
+ .type(this.type[this.typeId])
+ .placeholderColor(this.color[this.colorId])
+ .placeholderFont({
+ size: this.size,
+ weight: this.isNumber == true ? this.fontWeight : this.fontWeights[this.fontWeightId],
+ style: this.fontStyle,
+ family: 'sans-serif'
+ })
+ .enterKeyType(this.enterKeyType[this.enterKeyTypeId])
+ .caretColor(this.color[this.caretColorId])
+ .height(50)
+ .width('80%')
+ .border({ width: 1, radius: 25, color: '#80000000' })
+ .onChange((value) => {
+ prompt.showToast({
+ message: 'value：' + value
+ })
+ })
+ .onSubmit((enterKey: EnterKeyType) => {
+ prompt.showToast({
+ message: 'enterKey：' + enterKey
+ })
+ })
+ .onEditChanged((isEditing: boolean) => {
+ prompt.showToast({
+ message: 'isEditing：' + isEditing
+ })
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Scroll(this.scroller) {
+ Column() {
+ Row() {
+ Text('placeholder：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ TextInput({ placeholder: '', text: this.temporary1 })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(35)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary1 = value
+ })
+ .onSubmit(() => {
+ this.placeholder = this.temporary1
+ this.temporary1 = ''
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ Row() {
+ Text('text：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ TextInput({ placeholder: '', text: this.temporary2 })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(35)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary2 = value
+ })
+ .onSubmit(() => {
+ this.text = this.temporary2
+ this.temporary2 = ''
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ Row() {
+ Text(`placeholder size：${this.size}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('30%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Slider({ value: this.size, step: 1, min: -1, max: 100 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.size = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+
+ Column() {
+ Text('type：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num2, item => {
+ Button(this.typeDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.typeId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('enterKeyType：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num4, item => {
+ Button(this.enterKeyTypeDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.enterKeyTypeId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('placeholder颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('90%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num2, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.colorId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('字体样式：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('90%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('Normal')
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.fontStyle = FontStyle.Normal
+ })
+ Button('Italic')
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.fontStyle = FontStyle.Italic
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('fontWeight：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('90%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('Number')
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.isNumber = true
+ })
+ Button('String')
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.isNumber = false
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ if (!this.isNumber) {
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.fontWeightDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.fontWeightId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ } else {
+ Flex({
+ direction: FlexDirection.Row,
+ justifyContent: FlexAlign.SpaceAround,
+ alignItems: ItemAlign.Start
+ }) {
+ Slider({ value: this.fontWeight, step: 100, min: -100, max: 1000 })
+ .blockColor(Color.Orange)
+ .width('90%')
+ .onChange((e) => {
+ this.fontWeight = Math.round(e)
+ })
+ Text(`${this.fontWeight}`)
+ .fontSize(15)
+ }
+ .width('100%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('光标颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('90%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num2, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(100)
+ .onClick(() => {
+ this.caretColorId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 20 })
+ }
+ .height("50%")
+ .scrollable(ScrollDirection.Vertical)
+ .scrollBar(BarState.On)
+ .scrollBarColor(Color.Gray)
+ .scrollBarWidth(10)
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/toggle/togglePage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/toggle/togglePage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..10a21e50f7ee8dd0f7b683dd243dfae2b052d7e9
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_basis/toggle/togglePage.ets
@@ -0,0 +1,111 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct TogglePage {
+ @State num1: number[] = [...Array(3).keys()]
+ @State num2: number[] = [...Array(4).keys()]
+ @State toggleId: number = 0
+ @State toggleType: ToggleType[] = [ToggleType.Checkbox, ToggleType.Button, ToggleType.Switch]
+ @State toggleTypeDescribe: string[] = ['Checkbox', 'Checkbox', 'Switch']
+ @State colorId: number = 0
+ @State color: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Pink', 'Yellow']
+ @State isOn: boolean = true
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Toggle({ type: this.toggleType[this.toggleId], isOn: this.isOn })
+ .selectedColor(this.color[this.colorId])
+ .width(150)
+ .height(100)
+ .onChange(() => {
+ prompt.showToast({ message: '开关切换', duration: 2000 })
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Column() {
+ Text('初始状态：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ Button('true')
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(110)
+ .onClick(() => {
+ this.isOn = true
+ })
+ Button('false')
+ .fontSize(15)
+ .width(110)
+ .onClick(() => {
+ this.isOn = false
+ })
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('组件类型：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num1, item => {
+ Button(this.toggleTypeDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(110)
+ .onClick(() => {
+ this.toggleId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+
+ Column() {
+ Text('选中颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .fontWeight(FontWeight.Bolder)
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
+ ForEach(this.num2, item => {
+ Button(this.colorDescribe[`${item}`])
+ .margin({ right: 10 })
+ .fontSize(15)
+ .width(110)
+ .onClick(() => {
+ this.colorId = item
+ })
+ }, item => item.toString())
+ }
+ .width('90%')
+ .margin({ top: 5, bottom: 5, left: 10, right: 10 })
+ }
+ .alignItems(HorizontalAlign.Start)
+ }
+ .margin({ top: 20 })
+ }.width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/Column/ColumnPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/Column/ColumnPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..252a6dda6f6682dc2653d9bd5240e28536d78ddb
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/Column/ColumnPage.ets
@@ -0,0 +1,211 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct ColumnPage {
+ @State num1: number[] = [...Array(3).keys()]
+ @State num2: number[] = [...Array(4).keys()]
+ @State alignItemsId: number = 0
+ @State alignItems: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End]
+ @State alignItemsDescribe: string[] = ['Start', 'Center', 'End']
+ @State space: number = 0
+ @State useAlign: string = 'Start'
+ @State edgeId: number = 0
+ @State edge: Edge[] = [Edge.Start, Edge.Center, Edge.End, Edge.Middle]
+ @State edgeDescribe: string[] = ['Start', 'Center', 'End', 'Middle']
+ @State offset: number = 0
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ if (this.useAlign == 'Start') {
+ Column({ space: this.space }) {
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Orange)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Yellow)
+
+ Row() {
+ }.width(40).height(50).backgroundColor(Color.Green)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Red)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Pink)
+ }
+ .width(300)
+ .height(300)
+ .border({ width: 1 })
+ .alignItems(this.alignItems[this.alignItemsId])
+ } else if (this.useAlign == 'Center') {
+ Column({ space: this.space }) {
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Orange)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Yellow)
+
+ Row() {
+ }.width(50).height(40).backgroundColor(Color.Green)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Red)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Pink)
+ }
+ .width(300)
+ .height(300)
+ .border({ width: 1 })
+ .alignItems(this.alignItems[this.alignItemsId])
+ } else {
+ Column({ space: this.space }) {
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Orange)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Yellow)
+
+ Row() {
+ }.width(50).height(40).backgroundColor(Color.Green)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Red)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Pink)
+ }
+ .width(300)
+ .height(300)
+ .border({ width: 1 })
+ .alignItems(this.alignItems[this.alignItemsId])
+ }
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text('对齐方式')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .width('100%')
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num1, item => {
+ GridItem() {
+ Button(this.alignItemsDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.alignItemsId = item
+ })
+ }
+ }, item => item.toString())
+ GridItem() {
+ Text(`space：${this.space}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.space, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .onChange((e) => {
+ this.space = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Text('自定义纵向对齐方式')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num1, item => {
+ GridItem() {
+ Button(this.alignItemsDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+
+ .onClick(() => {
+ this.alignItemsId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('Edge位置')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num2, item => {
+ GridItem() {
+ Button(this.edgeDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.edgeId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text(`offset：${this.offset}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.space, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width("100%")
+ .onChange((e) => {
+ this.offset = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .rowsGap(5)
+ .scrollBar(BarState.Auto)
+ .margin({bottom:10})
+ }.height('60%')
+ .width('100%')
+ .margin({ top: 10 })
+ }
+ .width('100%').margin({ top: 5})
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/Counter/counterPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/Counter/counterPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..ddb221ee6f366a48aad9430ab52f4c9546bd9654
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/Counter/counterPage.ets
@@ -0,0 +1,39 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct CounterPage {
+ @State value: number = 0
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Counter() {
+ Text(`${this.value}`)
+ .fontSize(15)
+ }
+ .onInc(() => {
+ this.value++
+ prompt.showToast({
+ message: '数值增加'
+ })
+ })
+ .onDec(() => {
+ this.value--
+ prompt.showToast({
+ message: '数值减少'
+ })
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 10 })
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/badge/badgePage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/badge/badgePage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e32d260cde01d53ba518d6cac3436fe2e1720352
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/badge/badgePage.ets
@@ -0,0 +1,283 @@
+// @ts-nocheck
+import image from '@ohos.multimedia.image_napi_plugin';
+import fileio from '@ohos.fileio';
+
+@Entry
+@Component
+struct BadgeItemExample {
+ @State type: string = 'Number'
+ @State temporary: string = ''
+ @State value: string = ''
+ @State num1: number[] = [...Array(3).keys()]
+ @State num2: number[] = [...Array(4).keys()]
+ @State count: number = 10
+ @State maxCount: number = 100
+ @State positionId: number = 0
+ @State position: BadgePosition[] = [BadgePosition.Right, BadgePosition.RightTop, BadgePosition.Left]
+ @State positionDescribe: string[] = ['Right', 'RightTop', 'Left']
+ @State colorId: number = 2
+ @State color: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Red', 'Yellow']
+ @State fontSize: number = 12
+ @State badgeSize: number = 30
+ @State badgeColorId: number = 0
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ if (this.type == 'Number') {
+ Badge({
+ count: this.count,
+ maxCount: this.maxCount,
+ position: this.position[this.positionId],
+ style: {
+ color: this.color[this.colorId],
+ fontSize: this.fontSize,
+ badgeSize: this.badgeSize,
+ badgeColor: this.color[this.badgeColorId]
+ }
+ }) {
+ Row() {
+ }
+ .width(200).height(200)
+ .border({ width: 2, radius: 10 })
+ }
+ .width(200).height(200)
+ } else {
+ Badge({
+ value: this.value,
+ position: this.position[this.positionId],
+ style: {
+ color: this.color[this.colorId],
+ fontSize: this.fontSize,
+ badgeSize: this.badgeSize,
+ badgeColor: this.color[this.badgeColorId]
+ }
+ }) {
+ Row() {
+ }
+ .width(200).height(200)
+ .border({ width: 2, radius: 10 })
+ }
+ .width(200).height(200)
+ }
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Row() {
+ Text('提示类型：')
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontSize(15)
+ .fontWeight(FontWeight.Bolder)
+ .margin({ left: 5 })
+ .width('23%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Button('String')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.type = 'String'
+ })
+ Button('Number')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.type = 'Number'
+ })
+ }
+ .margin({ top: 2, bottom: 2 })
+ .width('75%')
+ }
+
+ if (this.type == 'String') {
+ Grid() {
+ GridItem() {
+ Text('文本内容')
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontSize(15)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ TextInput({ placeholder: '', text: this.temporary })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 12 })
+ .height(40)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary = value
+ })
+ .onSubmit(() => {
+ this.value = this.temporary
+ this.temporary = ''
+ })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Text('提醒消息数')
+ .backgroundColor(0xFAEEE0)
+ .fontSize(15)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.count, step: 1, min: -1, max: this.maxCount + 50 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.count = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Text('最大消息数')
+ .backgroundColor(0xFAEEE0)
+ .fontSize(15)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.maxCount, step: 1, min: -1, max: 1000 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.maxCount = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+ }.columnsTemplate('1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ }
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text('文本大小：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3)
+
+ GridItem() {
+ Slider({ value: this.fontSize, step: 1, min: -1, max: 100 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.fontSize = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3)
+
+ GridItem() {
+ Text('badge大小：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3)
+
+ GridItem() {
+ Slider({ value: this.fontSize, step: 1, min: -1, max: 200 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.badgeSize = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3)
+
+ GridItem() {
+ Text('提示点显示位置')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num1, item => {
+ GridItem() {
+ Button(this.positionDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.positionId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('文本颜色:')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num2, item => {
+ GridItem() {
+ Button(this.colorDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.colorId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('badge颜色:')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num2, item => {
+ GridItem() {
+ Button(this.colorDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.badgeColorId = item
+ })
+ }
+ }, item => item.toString())
+
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .rowsGap(5)
+ .scrollBarWidth(this.barWidth)
+ .scrollBar(BarState.Auto)
+ }.height('45%')
+ .width('100%')
+ }.width('100%').margin({ top: 5 })
+ }
+}
+
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/flex/flexPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/flex/flexPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..f06815194fc7c9e7db5a546df03d01374c32c372
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/flex/flexPage.ets
@@ -0,0 +1,177 @@
+import prompt from '@system.prompt';
+@Entry
+@Component
+struct FlexPage {
+ @State num1: number[] = [...Array(3).keys()]
+ @State num2: number[] = [...Array(4).keys()]
+ @State num3: number[] = [...Array(6).keys()]
+ @State directionId: number = 0
+ @State direction: FlexDirection[] = [FlexDirection.Row,FlexDirection.RowReverse,FlexDirection.Column,FlexDirection.ColumnReverse]
+ @State directionDescribe: string[] = ['Row','RowReverse','Column','ColumnReverse']
+ @State flexWrapId: number = 1
+ @State flexWrap: FlexWrap[] = [FlexWrap.NoWrap,FlexWrap.Wrap,FlexWrap.WrapReverse]
+ @State flexWrapDescribe: string[] = ['NoWrap','Wrap','WrapReverse']
+ @State justifyContentId: number = 0
+ @State alignContentId: number = 0
+ @State flexAlign: FlexAlign[] = [FlexAlign.Start,FlexAlign.Center,FlexAlign.End,FlexAlign.SpaceBetween,FlexAlign.SpaceAround,FlexAlign.SpaceEvenly]
+ @State flexAlignDescribe: string[] = ['Start','Center','End','SpaceBetween','SpaceAround','SpaceEvenly']
+ @State itemAlignId: number = 0
+ @State itemAlign: ItemAlign[] = [ItemAlign.Auto,ItemAlign.Start,ItemAlign.Center,ItemAlign.End,ItemAlign.Stretch,ItemAlign.Baseline]
+ @State itemAlignDescribe: string[] = ['Auto','Start','Center','End','Stretch','Baseline']
+ @State isAlignItems: boolean = false
+ @State isAlignContent: boolean = true
+
+ build() {
+ Column(){
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Flex({direction:this.direction[this.directionId],wrap:this.flexWrap[this.flexWrapId],justifyContent:this.flexAlign[this.justifyContentId],alignItems:this.itemAlign[this.itemAlignId],alignContent:this.flexAlign[this.alignContentId]}){
+ Row(){}.width(50).height(50).backgroundColor(Color.Orange)
+ Row(){}.width(50).height(50).backgroundColor(Color.Yellow)
+ Row(){}.width(50).height(50).backgroundColor(Color.Green)
+ Row(){}.width(50).height(50).backgroundColor(Color.Red)
+ Row(){}.width(50).height(50).backgroundColor(Color.Pink)
+ Row(){}.width(50).height(50).backgroundColor(Color.Gray)
+ Row(){}.width(50).height(50).backgroundColor(Color.Blue)
+ Row(){}.width(50).height(50).backgroundColor(Color.Brown)
+ }.width('100%').height('100%')
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Grid() {
+ GridItem() {
+ Text('排列方向')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.num2, item => {
+ GridItem() {
+ Button(this.directionDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.directionId = item
+ })
+ }
+ }, item => item.toString())
+
+
+ GridItem() {
+ Text('单行多行')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.num1, item => {
+ GridItem() {
+ Button(this.flexWrapDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.flexWrapId = item
+ if(item == 0){
+ this.isAlignItems = true
+ this.isAlignContent = false
+ }else{
+ this.isAlignItems = false
+ this.isAlignContent = true
+ }
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('主轴对齐')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.num3, item => {
+ GridItem() {
+ Button(this.flexAlignDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.justifyContentId = item
+ })
+ }
+ }, item => item.toString())
+ if(this.isAlignItems) {
+ GridItem() {
+ Text('交叉轴对齐')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.num3, item => {
+ GridItem() {
+ Button(this.itemAlignDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.itemAlignId = item
+ })
+ }
+ }, item => item.toString())
+ }
+
+ if(this.isAlignContent) {
+ GridItem() {
+ Text('多行对齐')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(5).forceRebuild(true)
+
+ ForEach(this.num3, item => {
+ GridItem() {
+ Button(this.flexAlignDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.alignContentId = item
+ })
+ }
+ }, item => item.toString())
+ }
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .rowsGap(5)
+ .scrollBar(BarState.Auto)
+ }
+ .height('60%')
+ .width('100%')
+ .margin({top:10})
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridIndex.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridIndex.ets
new file mode 100644
index 0000000000000000000000000000000000000000..3aab837154f26211c55d34cd6a2ec3e6d94893da
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridIndex.ets
@@ -0,0 +1,47 @@
+import router from '@system.router'
+
+const GridIndexContents = [
+ { title: "Grid", uri: 'pages/component_container/grid/gridPage' },
+ { title: "GridItem", uri: 'pages/component_container/grid/gridItemPage' }
+]
+
+@Entry
+@Component
+struct GridIndex {
+ build() {
+ Flex({
+ direction: FlexDirection.Column,
+ alignItems: ItemAlign.Center
+ }) {
+ List() {
+ ForEach(GridIndexContents, (item) => {
+ ListItem() {
+ Row() {
+ Text(item.title)
+ .fontSize(16)
+ .padding({ left: 10 })
+
+ }
+ .padding({ left: 10 })
+ .width('100%')
+ .height(55)
+ .alignItems(VerticalAlign.Center)
+ .backgroundColor(0xfff5deb3)
+ .margin({ top: 5, bottom: 5, left: 10 })
+ .borderRadius(12)
+ .onClick(() => {
+ router.push({
+ uri: item.uri
+ })
+ })
+ }
+ }, item => item.title)
+ }
+ .width('100%')
+ }
+ }
+}
+
+
+
+
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridItemPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridItemPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4dba81968f79840b054a044dc3fa64b1d938fac6
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridItemPage.ets
@@ -0,0 +1,179 @@
+import prompt from '@system.prompt';
+
+class AppInfoItem {
+ src: string;
+ name: string;
+
+ constructor(src: string, name: string) {
+ this.src = src
+ this.name = name
+ }
+}
+
+@Entry
+@Component
+struct GridItemPage {
+ private mItemInfoList: AppInfoItem[] = [
+ new AppInfoItem('/common/system/huawei_music.png', '音乐'),
+ new AppInfoItem('/common/system/huawei_himovie.png', '视频'),
+ new AppInfoItem('/common/system/huawei_browser.png', '浏览器'),
+ new AppInfoItem('/common/system/huawei_appmarket.png', '应用市场'),
+ new AppInfoItem('/common/system/huawei_calendar.png', '日历'),
+ new AppInfoItem('/common/system/huawei_meetime.png', '畅连'),
+ new AppInfoItem('/common/system/android_FMRadio.png', '收音机'),
+ new AppInfoItem('/common/system/vmall_client.png', '智慧生活'),
+ new AppInfoItem('/common/system/android_email.png', '邮件'),
+ ]
+ @State rowStart: number = 0
+ @State rowEnd: number = 0
+ @State columnStart: number = 0
+ @State columnEnd: number = 0
+ @State forceRebuild: boolean = false
+ @State num: number = 1
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Grid() {
+ GridItem(){
+ Column(){}
+ .backgroundColor(Color.Orange)
+ .width(100)
+ .height(100)
+ }
+ .rowStart(this.rowStart)
+ .rowEnd(this.rowEnd)
+ .columnStart(this.columnStart)
+ .columnEnd(this.columnEnd)
+ .forceRebuild(this.forceRebuild)
+ ForEach(this.mItemInfoList, (item) => {
+ GridItem() {
+ Column() {
+ Image(item.src)
+ .objectFit(ImageFit.Contain)
+ }
+ }
+ .border({ width: 1, color:'#30000000'})
+ }, item => item.toString())
+ }
+ .columnsTemplate('1fr 1fr 1fr')
+ .rowsTemplate('1fr 1fr 1fr')
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Row() {
+ Text(`起始行号：${this.rowStart}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.rowStart, step: 1, min: -1, max: 2 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.rowStart = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+
+ Row() {
+ Text(`终点行号：${this.rowEnd}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.rowEnd, step: 1, min: -1, max: 2 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.rowEnd = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+
+ Row() {
+ Text(`起始列号：${this.columnStart}`)
+ .fontSize(15)
+ .fontWeight(FontWeight.Bolder)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.columnStart, step: 1, min: -1, max: 2 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.columnStart = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+
+ Row() {
+ Text(`终止列号：${this.columnEnd}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.columnEnd, step: 1, min: -1, max: 2 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.columnEnd = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+
+ Row() {
+ Text('是否重建节点：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround,alignItems:ItemAlign.Center }) {
+ Button('true')
+ .fontSize(15)
+ .margin({right:10})
+ .width(90)
+ .onClick(() => {
+ this.forceRebuild = true
+ })
+ Button('false')
+ .fontSize(15)
+ .margin({right:10})
+ .width(90)
+ .onClick(() => {
+ this.forceRebuild = false
+ })
+ Text(`${this.num}`)
+ Button('++++')
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.num++
+ })
+ }
+ .margin({ top: 2, bottom: 2 })
+ .width('70%')
+ }
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 10 })
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..899a621fea5527a3c5cbaa9bc6bc598e50b20831
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/grid/gridPage.ets
@@ -0,0 +1,236 @@
+import prompt from '@system.prompt';
+
+class AppInfo {
+ src: string;
+ name: string;
+
+ constructor(src: string, name: string) {
+ this.src = src
+ this.name = name
+ }
+}
+
+@Entry
+@Component
+struct GridPage {
+ private mItemInfoList: AppInfo[] = [
+ new AppInfo('/common/system/huawei_music.png', '音乐'),
+ new AppInfo('/common/system/huawei_himovie.png', '视频'),
+ new AppInfo('/common/system/huawei_browser.png', '浏览器'),
+ new AppInfo('/common/system/huawei_appmarket.png', '应用市场'),
+ new AppInfo('/common/system/huawei_calendar.png', '日历'),
+ new AppInfo('/common/system/huawei_meetime.png', '畅连'),
+ new AppInfo('/common/system/android_FMRadio.png', '收音机'),
+ new AppInfo('/common/system/vmall_client.png', '智慧生活'),
+ new AppInfo('/common/system/android_settings.png', '华为商城'),
+ new AppInfo('/common/system/android_notepad.png', '备忘录'),
+ new AppInfo('/common/system/android_deskclock.png', '时钟'),
+ new AppInfo('/common/system/android_mms.png', '短信'),
+ new AppInfo('/common/system/huawei_mycenter.png', '服务'),
+ new AppInfo('/common/system/huawei_camera.png', '相机'),
+ new AppInfo('/common/system/huawei_calendar.png', '日历'),
+ new AppInfo('/common/system/android_calculator2.png', '计算器'),
+ new AppInfo('/common/system/huawei_gamebox.png', '游戏中心'),
+ new AppInfo('/common/system/huawei_health.png', '运动健康'),
+ new AppInfo('/common/system/huawei_wallet.png', '钱包'),
+ new AppInfo('/common/system/huawei_systemmanager.png', '安全中心'),
+ new AppInfo('/common/system/huawei_photos.png', '图库'),
+ new AppInfo('/common/system/android_DialtactsActivity.png', '通话'),
+ new AppInfo('/common/system/huawei_contacts.png', '联系人'),
+ new AppInfo('/common/system/huawei_compass.png', '指南针'),
+ new AppInfo('/common/system/android_totemweather.png', '天气'),
+ new AppInfo('/common/system/android_email.png', '邮件'),
+ new AppInfo('/common/system/huawei_educenter.png', '教育中心'),
+ new AppInfo('/common/system/android_tips.png', '玩机技巧'),
+ ]
+ @State num1: number[] = [...Array(3).keys()]
+ @State num2: number[] = [...Array(4).keys()]
+ @State num3: number[] = [...Array(6).keys()]
+ @State cols: number = 2
+ @State rows: number = 0
+ @State ColTemplate: string = '1fr 1fr'
+ @State RowTemplate: string = ''
+ @State columnsGap: number = 0
+ @State rowsGap: number = 0
+ @State barWidth: number = 0
+ @State barHeight: number = 0
+ @State scrollBarId: number = 0
+ @State scrollBar: BarState[] = [BarState.Auto, BarState.Off, BarState.On]
+ @State scrollBarDescribe: string[] = ['Auto', 'Off', 'On']
+ @State isScrollBar: boolean = true
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Grid() {
+ ForEach(this.mItemInfoList, (item) => {
+ GridItem() {
+ Column() {
+ Image(item.src)
+ .objectFit(ImageFit.Contain)
+ .height(50)
+ }
+ }.border({ width: 1 }).height(60)
+ }, item => item.toString())
+ }.margin(5)
+ .columnsTemplate(this.ColTemplate)
+ .rowsTemplate(this.RowTemplate)
+ .columnsGap(this.columnsGap)
+ .rowsGap(this.rowsGap)
+ .scrollBarWidth(this.barWidth)
+ .scrollBarColor(this.barHeight)
+ .scrollBar(BarState.Auto)
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Column() {
+ Row() {
+ Text(`布局列数：${this.cols}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.cols, step: 1, min: -1, max: 9 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.cols = Math.round(e)
+ this.ColTemplate = '1fr '.repeat(this.cols)
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+
+ Row() {
+ Text(`布局行数：${this.rows}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.rows, step: 1, min: -1, max: 9 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.rows = Math.round(e)
+ if (this.rows == 0) {
+ this.RowTemplate = null
+ } else {
+ this.RowTemplate = '1fr '.repeat(this.rows)
+ }
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+
+ Row() {
+ Text(`行与行间距：${this.rowsGap}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.rowsGap, step: 1, min: -1, max: 9 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.rowsGap = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+
+ Row() {
+ Text(`列与列间距：${this.columnsGap}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.columnsGap, step: 1, min: -1, max: 9 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.columnsGap = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+
+ Row() {
+ Text('滚动条状态：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ ForEach(this.num1, item => {
+ Button(this.scrollBarDescribe[`${item}`])
+ .fontSize(15)
+ .width(90)
+ .onClick(() => {
+ this.scrollBarId = item
+ if (item != 1) {
+ this.isScrollBar = true
+ } else {
+ this.isScrollBar = false
+ }
+ })
+ }, item => item.toString())
+ }
+ .margin({ top: 2, bottom: 2 })
+ .width('70%')
+ }
+
+ if (this.isScrollBar) {
+ Row() {
+ Text(`滚动条宽度：${this.barWidth}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.barWidth, step: 1, min: -1, max: 9 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.barWidth = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+
+ Row() {
+ Text(`滚动条高度：${this.barHeight}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('30%')
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Slider({ value: this.barHeight, step: 1, min: -1, max: 9 })
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.barHeight = Math.round(e)
+ })
+ }
+ .width('70%')
+ .margin({ top: 2, bottom: 2 })
+ }
+ }
+ }
+ .alignItems(HorizontalAlign.Start)
+ .margin({ top: 10 })
+ }
+ .width('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/index.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..134ff5f21dc2204a2f23ee1ad75c09ffe54023f7
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/index.ets
@@ -0,0 +1,59 @@
+import router from '@system.router'
+
+const componentContainerItems = [
+
+ { title: 'Panel', uri: 'pages/component_container/panel/panelPage' },
+ { title: 'Navigator', uri: 'pages/component_container/navigator/navigatorPage' },
+ { title: "Swiper", uri: 'pages/component_container/swiper/swiperPage' },
+ { title: "Grid", uri: 'pages/component_container/grid/gridIndex' },
+ { title: "Stack", uri: 'pages/component_container/stack/stackPage' },
+ { title: "Column", uri: 'pages/component_container/Column/ColumnPage' },
+ { title: "Row", uri: 'pages/component_container/row/rowPage' },
+ { title: "flex", uri: 'pages/component_container/flex/flexPage' },
+ { title: "Scroll", uri: 'pages/component_container/scroll/scrollPage' },
+ { title: "list", uri: 'pages/component_container/list/listPage' },
+ { title: "Badge", uri: 'pages/component_container/badge/badgePage' },
+ { title: "tab", uri: 'pages/component_container/tab/tabsPage' },
+ { title: "Counter", uri: 'pages/component_container/Counter/counterPage' },
+]
+
+@Entry
+@Component
+struct component_container {
+ @State basisActive: boolean = false
+ @State statusActive: boolean = false
+ @State containerActive: boolean = false
+
+ build() {
+ Flex({
+ direction: FlexDirection.Column,
+ alignItems: ItemAlign.Center
+ }) {
+ List() {
+ ForEach(componentContainerItems, (item) => {
+ ListItem() {
+ Row() {
+ Text(item.title)
+ .fontSize(16)
+ .padding({ left: 10 })
+
+ }
+ .padding({ left: 10 })
+ .width('100%')
+ .height(55)
+ .alignItems(VerticalAlign.Center)
+ .backgroundColor(0xfff5deb3)
+ .margin({ top: 5, bottom: 5})
+ .borderRadius(12)
+ .onClick(() => {
+ router.push({
+ uri: item.uri
+ })
+ })
+ }
+ }, item => item.title)
+ }
+ .width('100%')
+ }
+ }
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/list/listPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/list/listPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9530c986eefbf29818c92c002b9e320fc166c903
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/list/listPage.ets
@@ -0,0 +1,370 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct ListPage {
+ @State num1: number[] = [...Array(4).keys()]
+ @State num2: number[] = [...Array(3).keys()]
+ @State listCount: number[] = [...Array(100).keys()].slice(1)
+ @State space: number = 10
+ @State initialIndex: number = 10
+ @State num3: number[] = [...Array(2).keys()]
+ @State listDirection: Axis = Axis.Vertical
+ @State strokeWidth: number = 0
+ @State startMargin: number = 0
+ @State endMargin: number = 0
+ @State colorId: number = 0
+ @State color: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Pink', 'Yellow']
+ @State editMode: boolean = false
+ @State edgeEffectId: number = 0
+ @State edgeEffect: EdgeEffect[] = [EdgeEffect.Spring, EdgeEffect.None, EdgeEffect.Fade]
+ @State edgeEffectDescribe: string[] = ['Spring', 'None', 'Fade']
+ @State chainAnimation: boolean = false
+ @State sticky: Sticky = Sticky.None
+ @State editable: boolean = false
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ List({ space: this.space, initialIndex: this.initialIndex }) {
+ ListItem() {
+ Text('吸顶')
+ }
+ .sticky(this.sticky)
+ .height(50)
+ .width('100%')
+ .border({ radius: 15 })
+ .backgroundColor(Color.Green)
+ .editable(this.editable)
+
+ ForEach(this.listCount, (item) => {
+ ListItem() {
+ Text(`${item}`)
+ .fontSize(15)
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .width('100%')
+ .margin({ left: 10 })
+ }
+ .height(50)
+ .width('100%')
+ .border({ radius: 15 })
+ .backgroundColor(Color.Orange)
+ .editable(this.editable)
+ }, item => item.toString())
+ }
+ .listDirection(this.listDirection)
+ .divider({
+ strokeWidth: this.strokeWidth,
+ color: this.color[this.colorId],
+ startMargin: this.startMargin,
+ endMargin: this.endMargin
+ })
+ .editMode(this.editMode)
+ .edgeEffect(this.edgeEffect[this.edgeEffectId])
+ .chainAnimation(this.chainAnimation)
+ .onItemDelete((index: number) => {
+ console.log('www data delete: ' + 123)
+ return true
+ })
+ .onScrollIndex((e) => {
+ console.info("on Scroll index " + String(e))
+ })
+ .onScroll((scrollOffset: number, scrollState: ScrollState) => {
+ console.info('状态：' + String(scrollState))
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text(`space：${this.space}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.space, step: 5, min: -10, max: 100 })
+ .blockColor(Color.Orange)
+ .width("100%")
+ .onChange((e) => {
+ this.space = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Text('排列方向：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Button("Vertical")
+ .fontSize(15)
+ .height(40)
+ .width('100%')
+ .onClick(() => {
+ this.listDirection = Axis.Vertical
+ })
+ }
+
+ GridItem() {
+ Button("Horizontal")
+ .fontSize(15)
+ .height(40)
+ .width('100%')
+ .onClick(() => {
+ this.listDirection = Axis.Horizontal
+ })
+ }
+
+ GridItem() {
+ Text(`strokeWidth：${this.strokeWidth}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.space, step: 5, min: -10, max: 100 })
+ .width("100%")
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.strokeWidth = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Text(`startMargin：${this.startMargin}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.space, step: 5, min: -10, max: 100 })
+ .width("100%")
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.startMargin = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+
+ GridItem() {
+ Text(`endMargin：${this.endMargin}`)
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.space, step: 5, min: -10, max: 100 })
+ .width("100%")
+ .blockColor(Color.Orange)
+ .onChange((e) => {
+ this.endMargin = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Text('分割线颜色：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num1, item => {
+ GridItem() {
+ Button(this.colorDescribe[`${item}`])
+ .width('100%')
+ .fontSize(15)
+ .height(40)
+ .onClick(() => {
+ this.colorId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('editMode：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Button('true')
+ .width('100%')
+ .fontSize(15)
+ .onClick(() => {
+ this.editMode = true
+ })
+ }
+
+ GridItem() {
+ Button('false')
+ .width('100%')
+ .fontSize(15)
+ .onClick(() => {
+ this.editMode = false
+ })
+ }
+
+ GridItem() {
+ Text('链式动效：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Button('true')
+ .width('100%')
+ .fontSize(15)
+ .onClick(() => {
+ this.chainAnimation = true
+ })
+ }
+
+ GridItem() {
+ Button('false')
+ .width('100%')
+ .fontSize(15)
+ .onClick(() => {
+ this.chainAnimation = false
+ })
+ }
+
+ GridItem() {
+ Text('edgeEffect：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num2, item => {
+ GridItem() {
+ Button(this.edgeEffectDescribe[`${item}`])
+ .width('100%')
+ .fontSize(15)
+ .onClick(() => {
+ this.edgeEffectId = item
+ })
+ }
+ }, item => item.toString())
+
+
+ GridItem() {
+ Text('吸顶效果：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .width('100%')
+ .height(40)
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Button("None")
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.sticky = Sticky.None
+ })
+ }
+
+ GridItem() {
+ Button("Normal")
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.sticky = Sticky.Normal
+ })
+ }
+
+ GridItem() {
+ Text('editable：')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ .height(40)
+ .width('100%')
+ .textAlign(TextAlign.Start)
+ .margin({ left: 20 })
+ .fontWeight(FontWeight.Bolder)
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Button("true")
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.editable = true
+ })
+ }
+
+ GridItem() {
+ Button("false")
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.editable = false
+ })
+ }
+
+ GridItem() {
+ Button('删除')
+ .fontSize(15)
+ .width("100%")
+ .onClick(() => {
+ this.listCount.splice(0, 1)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .rowsGap(5)
+ .scrollBar(BarState.Auto)
+ .margin({bottom:10})
+ }.height('60%')
+ .width('100%')
+ .margin({top:10})
+ }
+ .width('100%').margin({ top: 5 })
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorDetail1.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorDetail1.ets
new file mode 100644
index 0000000000000000000000000000000000000000..13cc00b82cd78fbfc96fa0dbd6a64cf5f12f721d
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorDetail1.ets
@@ -0,0 +1,20 @@
+import router from '@system.router';
+var params = router.getParams().message
+@Entry
+@Component
+struct NavigatorDetail1 {
+ AboutToAppear(){
+ console.log('www data ' + params)
+ }
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Text('目标页面1')
+ .fontSize(50)
+ .fontWeight(FontWeight.Bold)
+ Text(`接收参数：${params}`)
+ .fontSize(20)
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorDetail2.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorDetail2.ets
new file mode 100644
index 0000000000000000000000000000000000000000..563e3e7d5655bc03e7fee6b231a36c8629c1b1e9
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorDetail2.ets
@@ -0,0 +1,17 @@
+import router from '@system.router';
+var params = router.getParams().message
+@Entry
+@Component
+struct NavigatorDetail2 {
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Text('目标页面2')
+ .fontSize(50)
+ .fontWeight(FontWeight.Bold)
+ Text(`接收参数：${params}`)
+ .fontSize(20)
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6930a3d91ae86fdd55e0b676ecc87cc49fbd366d
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/navigator/navigatorPage.ets
@@ -0,0 +1,142 @@
+@Entry
+@Component
+struct NavigatorPage {
+ @State temporary: string = ''
+ @State value: string = '默认传参值'
+ @State num1: number[] = [...Array(3).keys()]
+ @State target: string = 'pages/component_container/navigator/navigatorDetail1'
+ @State active: boolean = false
+ @State NavigationTypeId: number = 0
+ @State NavigationType: NavigationType[] = [NavigationType.Push, NavigationType.Replace, NavigationType.Back]
+ @State NavigationTypeDescribe: string[] = ['Push', 'Replace', 'Back']
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Navigator({ target: this.target, type: this.NavigationType[this.NavigationTypeId] }) {
+ Text('路由容器组件')
+ .fontSize(15)
+ .backgroundColor(0xFAEEE0)
+ }.active(this.active)
+ .params({
+ message: this.value
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text('target：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ GridItem() {
+ Button('目标页面1')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.target = 'pages/component_container/navigator/navigatorDetail1'
+ })
+ }
+
+ GridItem() {
+ Button('目标页面2')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.target = 'pages/component_container/navigator/navigatorDetail2'
+ })
+ }
+
+ GridItem() {
+ Text('路由方式：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ ForEach(this.num1, item => {
+ GridItem() {
+ Button(this.NavigationTypeDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.NavigationTypeId = item
+ })
+ }
+ }, item => item.toString())
+ GridItem() {
+ Text('active：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ GridItem() {
+ Button('true')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.active = true
+ })
+ }
+
+ GridItem() {
+ Button('false')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.active = false
+ })
+ }
+ GridItem() {
+ Text('文本内容：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ GridItem() {
+ TextInput({ placeholder: '', text: this.temporary })
+ .enterKeyType(EnterKeyType.Send)
+ .placeholderFont({ size: 15 })
+ .height(40)
+ .border({ width: 3, radius: 20, color: '#88000000' })
+ .onChange((value) => {
+ this.temporary = value
+ })
+ .onSubmit(() => {
+ this.value = this.temporary
+ this.temporary = ''
+ })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ }.columnsTemplate('1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .rowsGap(5)
+ }
+ .margin({top:10})
+ .height('60%')
+ .width('100%')
+ }
+ .width('100%').margin({ top: 5 })
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/panel/panelPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/panel/panelPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e3995f759518ebc6ba7130513c0fa83e134396c6
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/panel/panelPage.ets
@@ -0,0 +1,154 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct PanelPage {
+ @State num: number[] = [...Array(3).keys()]
+ @State showPanel: boolean = true
+ @State typeId: number = 0
+ @State type: PanelType[] = [PanelType.Minibar, PanelType.Foldable, PanelType.Temporary]
+ @State typeDescribe: string[] = ['Minibar', 'Foldable', 'Temporary']
+ @State modeId: number = 0
+ @State mode: PanelMode[] = [PanelMode.Mini, PanelMode.Half, PanelMode.Full]
+ @State modeDescribe: string[] = ['Mini', 'Half', 'Full']
+ @State dragBar: boolean = true
+ @State fullHeight: number = 300
+ @State halfHeight: number = 150
+ @State miniHeight: number = 50
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Panel(this.showPanel) {
+ Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text('Panel组件')
+ .fontSize(20)
+ }
+ }
+ .type(this.type[this.typeId])
+ .mode(this.mode[this.modeId])
+ .dragBar(this.dragBar)
+ .fullHeight(this.fullHeight)
+ .halfHeight(this.halfHeight)
+ .miniHeight(this.miniHeight)
+ .onChange((e) => {
+ console.info('width：' + e.width + ',height：' + e.height + ',mode：' + e.mode)
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text('是否显示：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ GridItem() {
+ Button('true')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.showPanel = true
+ })
+ }
+
+ GridItem() {
+ Button('false')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.showPanel = false
+ })
+ }
+
+ GridItem() {
+ Text('可滑动面板类型：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ ForEach(this.num, item => {
+ GridItem() {
+ Button(this.typeDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.typeId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('可滑动面板初始状态：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ ForEach(this.num, item => {
+ GridItem() {
+ Button(this.modeDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.modeId = item
+ })
+ }
+ }, item => item.toString())
+ GridItem() {
+ Text('dragBar：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ GridItem() {
+ Button('true')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.dragBar = true
+ })
+ }
+
+ GridItem() {
+ Button('false')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.dragBar = false
+ })
+ }
+
+ }
+ .columnsTemplate('1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .rowsGap(5)
+ .scrollBar(BarState.Auto)
+ }
+ .margin({top:20})
+ .height('60%')
+ .width('100%')
+ }
+ .width('100%').margin({ top: 5 })
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/row/rowPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/row/rowPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..dce0d80d9af554dc6e14a6314ee87b5b6c291878
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/row/rowPage.ets
@@ -0,0 +1,219 @@
+@Entry
+@Component
+struct RowPage {
+ @State num1: number[] = [...Array(3).keys()]
+ @State num3: number[] = [...Array(3).keys()]
+ @State alignItemsId: number = 0
+ @State alignItems: VerticalAlign[] = [VerticalAlign.Top, VerticalAlign.Center, VerticalAlign.Bottom]
+ @State alignItemsDescribe: string[] = ['Top', 'Center', 'Bottom']
+ @State space: number = 0
+ @State useAlign: string = 'Top'
+ @State edgeId: number = 0
+ @State edge: Edge[] = [Edge.Bottom, Edge.Top, Edge.Baseline, Edge.Center, Edge.Middle]
+ @State edgeDescribe: string[] = ['Top', 'Center', 'Bottom']
+ @State offset: number = 0
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ if (this.useAlign == 'Top') {
+ Row({ space: this.space }) {
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Orange)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Yellow)
+
+ Row() {
+ }.width(40).height(40).backgroundColor(Color.Green)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Red)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Pink)
+ }
+ .width(300)
+ .height(300)
+ .border({ width: 1 })
+ .alignItems(this.alignItems[this.alignItemsId])
+ } else if (this.useAlign == 'Center') {
+ Row({ space: this.space }) {
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Orange)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Yellow)
+
+ Row() {
+ }.width(50).height(40).backgroundColor(Color.Green)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Red)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Pink)
+ }
+ .width(300)
+ .height(300)
+ .border({ width: 1 })
+ .alignItems(this.alignItems[this.alignItemsId])
+ } else {
+ Row({ space: this.space }) {
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Orange)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Yellow)
+
+ Row() {
+ }.width(50).height(40).backgroundColor(Color.Green)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Red)
+
+ Row() {
+ }.width(50).height(50).backgroundColor(Color.Pink)
+ }
+ .width(300)
+ .height(300)
+ .border({ width: 1 })
+ .alignItems(this.alignItems[this.alignItemsId])
+ }
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text('对齐方式：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ ForEach(this.num1, item => {
+ GridItem() {
+ Button(this.alignItemsDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.alignItemsId = item
+ })
+ }
+ }, item => item.toString())
+ GridItem() {
+ Text('space：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.space, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width("100%")
+ .onChange((e) => {
+ this.space = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ GridItem() {
+ Text('自定义横向对齐方式：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ GridItem() {
+ Button('Top')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.useAlign = 'Top'
+ })
+ }
+
+ GridItem() {
+ Button('Center')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.useAlign = 'Center'
+ })
+ }
+
+ GridItem() {
+ Button('Bottom')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.useAlign = 'Bottom'
+ })
+ }
+
+ GridItem() {
+ Text('Edge位置：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ ForEach(this.num3, item => {
+ GridItem() {
+ Button(this.edgeDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.edgeId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text(`offset：${this.offset}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.space, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width("100%")
+ .onChange((e) => {
+ this.offset = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(2).forceRebuild(true)
+ }
+ .columnsTemplate('1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .rowsGap(5)
+ .scrollBar(BarState.Auto)
+ .margin({bottom:10})
+ }
+ .height('60%')
+ .width('100%')
+ .margin({top:10})
+ }
+ .width('100%').margin({ top: 5,bottom:10 })
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/scroll/scrollPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/scroll/scrollPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..83c2376f2e7ce70b3d2aed3ea998ea8db423519f
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/scroll/scrollPage.ets
@@ -0,0 +1,207 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct ScrollPage {
+ scroller: Scroller = new Scroller()
+ @State scrollNum: number[] = [...Array(100).keys()]
+ @State num1: number[] = [...Array(3).keys()]
+ @State num2: number[] = [...Array(4).keys()]
+ @State scrollableId: number = 1
+ @State scrollable: ScrollDirection[] = [ScrollDirection.Horizontal, ScrollDirection.Vertical, ScrollDirection.None]
+ @State scrollableDescribe: string[] = ['Horizontal', 'Vertical', 'None']
+ @State barStateId: number = 1
+ @State barState: BarState[] = [BarState.Off, BarState.On, BarState.Auto]
+ @State barStateDescribe: string[] = ['Horizontal', 'Vertical', 'None']
+ @State colorId: number = 0
+ @State color: Color[] = [Color.Green, Color.Orange, Color.Pink, Color.Yellow]
+ @State colorDescribe: string[] = ['Green', 'Orange', 'Pink', 'Yellow']
+ @State scrollWidth: number = 20
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Scroll(this.scroller) {
+ Column() {
+ ForEach(this.scrollNum, (item) => {
+ Row() {
+ Text(`${item}`)
+ .fontSize(20)
+ }
+ .height(50)
+ .width('100%')
+ .backgroundColor(Color.Orange)
+ .margin(10)
+ .border({ radius: 10 })
+ }, item => item.toString())
+ }.padding(10)
+ }
+ .scrollable(this.scrollable[this.scrollableId])
+ .scrollBar(this.barState[this.barStateId])
+ .scrollBarWidth(this.scrollWidth)
+ .scrollBarColor(this.color[this.colorId])
+ .onScroll((xOffset: number, yOffset: number) => {
+ console.log('yOffset:' + yOffset)
+ })
+ .onScrollEdge((side) => {
+ console.info('side:' + side)
+ })
+ .onScrollEnd(() => {
+ console.info('滑动停止')
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text('滚动方法：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num1, item => {
+ GridItem() {
+ Button(this.scrollableDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.scrollableId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text('滚动条状态：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num1, item => {
+ GridItem() {
+ Button(this.barStateDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.barStateId = item
+ })
+ }
+ }, item => item.toString())
+ GridItem() {
+ Text('滚动条颜色：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ ForEach(this.num2, item => {
+ GridItem() {
+ Button(this.colorDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.colorId = item
+ })
+ }
+ }, item => item.toString())
+
+ GridItem() {
+ Text(`scrollWidth：${this.scrollWidth}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.scrollWidth, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width("100%")
+ .onChange((e) => {
+ this.scrollWidth = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Button('滑动到指定位置')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.scroller.scrollTo({
+ xOffset: 0,
+ yOffset: 200,
+ animation: {
+ duration: 1000,
+ curve: Curve.Linear
+ }
+ })
+ })
+ }
+
+ GridItem() {
+ Button('滑动到容器边缘')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.scroller.scrollEdge(Edge.End)
+ })
+ }
+
+ GridItem() {
+ Button('滑动到下一页')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.scroller.scrollPage({
+ next: true,
+ direction: Axis.Vertical
+ })
+ })
+ }
+
+ GridItem() {
+ Button('滑动偏移量')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.scroller.scrollTo({
+ xOffset: 0,
+ yOffset: this.scroller.currentOffset()
+ .yOffset + 150
+ })
+ })
+ }
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .rowsGap(5)
+ .scrollBar(BarState.Auto)
+ .onScrollIndex((e) => {
+ console.info('www data ' + String(e))
+ })
+ .margin({bottom:10})
+ }
+ .height('60%')
+ .width('100%')
+ .margin({ top: 10})
+ }
+ .width('100%').margin({ top: 5 })
+ }
+}
+
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/stack/stackPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/stack/stackPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..6618d4d64bf6641ef0317e8b83ac2a1adc7d1ebf
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/stack/stackPage.ets
@@ -0,0 +1,61 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct StackPage {
+ @State num: number[] = [...Array(9).keys()]
+ @State alignContentId: number = 0
+ @State alignContent: Alignment[] = [Alignment.TopStart, Alignment.Top, Alignment.TopEnd, Alignment.Start, Alignment.Center, Alignment.End, Alignment.BottomStart, Alignment.Bottom, Alignment.BottomEnd]
+ @State alignContentDescribe: string[] = ['TopStart', 'Top', 'TopEnd', 'Start', 'Center', 'End', 'BottomStart', 'Bottom', 'BottomEnd']
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Stack({ alignContent: this.alignContent[this.alignContentId] }) {
+ Image($r('app.media.test'))
+ .width(320)
+ .height(340)
+ .objectFit(ImageFit.Contain)
+ }.width('100%')
+ .height('100%')
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text('可滑动面板类型：')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(4).forceRebuild(true)
+
+ ForEach(this.num, item => {
+ GridItem() {
+ Button(this.alignContentDescribe[`${item}`])
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.alignContentId = item
+ })
+ }
+ }, item => item.toString())
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(5)
+ .rowsGap(5)
+ .scrollBar(BarState.Auto)
+ }
+ .margin({ top: 10 })
+ .height('60%')
+ .width('100%')
+ }
+ .width('100%').margin({ top: 5 })
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/swiper/swiperPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/swiper/swiperPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..672ef5e78602befee346718adae13e5fc9ecbf56
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/swiper/swiperPage.ets
@@ -0,0 +1,286 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct SwiperPage {
+ SwiperController: SwiperController = new SwiperController()
+ @State index: number = 0
+ @State interval: number = 2000
+ @State duration: number = 1000
+ @State itemSpace: number = 0
+ @State autoPlay: boolean = true
+ @State indicator: boolean = true
+ @State loop: boolean = false
+ @State vertical: boolean = false
+ @State displayMode: SwiperDisplayMode = SwiperDisplayMode.AutoLinear
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Swiper(this.SwiperController) {
+ Image($r('app.media.test'))
+ Column() {
+ Text('Swiper文本1')
+ .fontSize(30)
+ .textAlign(TextAlign.Center)
+ .height('100%')
+ .width('100%')
+ }
+ Column() {
+ Text('Swiper文本2')
+ .fontSize(30)
+ .textAlign(TextAlign.Center)
+ .height('100%')
+ .width('100%')
+ }
+ Column() {
+ Text('Swiper文本3')
+ .fontSize(30)
+ .textAlign(TextAlign.Center)
+ .height('100%')
+ .width('100%')
+ }
+ }
+ .index(this.index)
+ .autoPlay(this.autoPlay)
+ .interval(this.interval)
+ .indicator(this.indicator)
+ .loop(this.loop)
+ .duration(this.duration)
+ .vertical(this.vertical)
+ .itemSpace(this.itemSpace)
+ .onChange((index: number) => {
+ console.info('当前索引：' + index)
+ })
+ }
+ .height('40%')
+ .width('90%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text(`当前索引：${this.index}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.itemSpace, step: 1, min: 1, max: 2 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .showSteps(true)
+ .onChange((e) => {
+ this.index = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Text(`播放间隔：${this.interval}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.itemSpace, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .showSteps(true)
+ .onChange((e) => {
+ this.interval = Math.round(e)*1000
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Text(`切换间隔：${this.duration}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.itemSpace, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .showSteps(true)
+ .onChange((e) => {
+ this.duration = Math.round(e)*1000
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Text(`组件间隙：${this.itemSpace}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.itemSpace, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .showSteps(true)
+ .onChange((e) => {
+ this.itemSpace = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(3).forceRebuild(true)
+
+ GridItem() {
+ Text('自动播放:')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }
+
+ GridItem() {
+ Button(`${this.autoPlay}`)
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.autoPlay = !this.autoPlay
+ })
+ }
+
+ GridItem() {
+ Text('循环播放:')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }
+
+ GridItem() {
+ Button(`${this.loop}`)
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.loop = !this.loop
+ })
+ }
+
+ GridItem() {
+ Text('导航指示:')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }
+
+ GridItem() {
+ Button(`${this.indicator}`)
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.indicator = !this.indicator
+ })
+ }
+
+ GridItem() {
+ Text('纵向滑动:')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }
+
+ GridItem() {
+ Button(`${this.vertical}`)
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.vertical = !this.vertical
+ })
+ }
+
+ GridItem() {
+ Text('呈现方式:')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(0).forceRebuild(true)
+
+ GridItem() {
+ Button('Stretch')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.displayMode = SwiperDisplayMode.Stretch
+ })
+ }
+
+ GridItem() {
+ Button('AutoLinear')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.displayMode = SwiperDisplayMode.AutoLinear
+ })
+ }
+
+ GridItem() {
+ Text('控制器:')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.rowStart(11).columnStart(0).columnEnd(0).forceRebuild(true)
+
+ GridItem() {
+ Button('翻至下一页')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.SwiperController.showNext()
+ })
+ }.rowStart(11).columnStart(1).columnEnd(1)
+
+ GridItem() {
+ Button('翻至上一页')
+ .fontSize(15)
+ .width('100%')
+ .onClick(() => {
+ this.SwiperController.showPrevious()
+ })
+ }.rowStart(11).columnStart(2).columnEnd(2)
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr')
+ .rowsTemplate("")
+ .columnsGap(10)
+ .rowsGap(5)
+ .scrollBar(BarState.Auto)
+ }
+ .height('60%')
+ .width('100%')
+ .margin({top:10})
+ }
+ .width('100%').margin({ top: 5,bottom:10 })
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/tab/tabsPage.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/tab/tabsPage.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9c02d4d123ea9ba16870e7c1845f3e212e01f910
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/component_container/tab/tabsPage.ets
@@ -0,0 +1,269 @@
+import prompt from '@system.prompt';
+
+@Entry
+@Component
+struct TabsPage {
+ controller: TabsController = new TabsController()
+ @State barPosition: BarPosition = BarPosition.End
+ @State changeIndex: number = 1
+ @State vertical: boolean = false
+ @State scrollable: boolean = true
+ @State barMode: BarMode = BarMode.Scrollable
+ @State barWidth: number = 350
+ @State barHeight: number = 50
+ @State animationDuration: number = 200
+
+ build() {
+ Column() {
+ Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Tabs({ barPosition: this.barPosition, index: 0, controller: this.controller }) {
+ TabContent() {
+ Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text('One')
+ .fontSize(25)
+ }.height('100%')
+ }.tabBar('One')
+
+ TabContent() {
+ Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text('Two')
+ .fontSize(25)
+ }.height('100%')
+ }.tabBar({
+
+ text: 'Two'
+ })
+
+ TabContent() {
+ Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text('Three')
+ .fontSize(25)
+ }.height('100%')
+ }.tabBar('Three')
+
+ TabContent() {
+ Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text('Four')
+ .fontSize(25)
+ }.height('100%')
+ }.tabBar({
+
+ text: "Four"
+ })
+
+ TabContent() {
+ Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text('Five')
+ .fontSize(25)
+ }.height('100%')
+ }.tabBar('Five')
+
+ TabContent() {
+ Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+ Text('Six')
+ .fontSize(25)
+ }.height('100%')
+ }.tabBar('Six')
+ }
+ .vertical(this.vertical)
+ .scrollable(this.scrollable)
+ .barMode(this.barMode)
+ .barWidth(this.barWidth)
+ .barHeight(this.barHeight)
+ .animationDuration(this.animationDuration)
+ .onChange((index: number) => {
+ console.info('页签变化：' + (index+1))
+ })
+ }
+ .height('40%')
+ .width('100%')
+ .border({ width: 5, color: Color.Orange, radius: 10, style: BorderStyle.Dotted })
+
+ Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround }) {
+ Grid() {
+ GridItem() {
+ Text('页签位置')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Button("Start")
+ .fontSize(15)
+ .width('80%')
+ .onClick(() => {
+ this.barPosition = BarPosition.Start
+ })
+ }
+
+ GridItem() {
+ Button("End")
+ .fontSize(15)
+ .width('80%')
+ .onClick(() => {
+ this.barPosition = BarPosition.End
+ })
+ }
+
+ GridItem() {
+ Text(`控制器：${this.changeIndex}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.changeIndex, step: 1, min: 1, max: 6 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .showSteps(true)
+ .onChange((e) => {
+ this.changeIndex = Math.round(e)
+ this.controller.changeIndex(this.changeIndex-1)
+ })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Text('切换方向')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }
+
+ GridItem() {
+ Button(`${this.vertical}`)
+ .fontSize(15)
+ .width('80%')
+ .onClick(() => {
+ this.vertical = !this.vertical
+ })
+ }
+
+ GridItem() {
+ Text('scrollable')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }
+
+ GridItem() {
+ Button(`${this.vertical}`)
+ .fontSize(15)
+ .width('80%')
+ .onClick(() => {
+ this.scrollable = !this.scrollable
+ })
+ }
+
+ GridItem() {
+ Text('布局模式')
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Button('Scrollable')
+ .fontSize(15)
+ .width('80%')
+ .onClick(() => {
+ this.barMode = BarMode.Scrollable
+ })
+ }
+
+ GridItem() {
+ Button('Fixed')
+ .fontSize(15)
+ .width('80%')
+ .onClick(() => {
+ this.barMode = BarMode.Fixed
+ })
+ }
+
+ GridItem() {
+ Text(`TabBar宽：${this.barWidth}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.changeIndex, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .showSteps(true)
+ .onChange((e) => {
+ this.barWidth = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Text(`TabBar高：${this.barWidth}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.changeIndex, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .showSteps(true)
+ .onChange((e) => {
+ this.barHeight = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Text(`滑动时长：${this.barWidth}`)
+ .fontSize(15)
+ .height(40)
+ .backgroundColor(0xFAEEE0)
+ .fontWeight(FontWeight.Bolder)
+ .width('100%')
+ .margin({ left: 5 })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+
+ GridItem() {
+ Slider({ value: this.changeIndex, step: 1, min: -10, max: 50 })
+ .blockColor(Color.Orange)
+ .width('100%')
+ .showSteps(true)
+ .onChange((e) => {
+ this.animationDuration = Math.round(e)
+ })
+ }.columnStart(0).columnEnd(1).forceRebuild(true)
+ }
+ .columnsTemplate('1fr 1fr')
+
+ .columnsGap(5)
+ .rowsGap(5)
+ .scrollBar(BarState.Auto)
+ }.height('60%')
+ .width('100%')
+ }
+ .width('100%').margin({ top: 5 })
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/index.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/index.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e9ce6703f5a674b7ca089174cf272d82a7d28cd2
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/index.ets
@@ -0,0 +1,47 @@
+import router from '@system.router'
+
+const HomeContents = [
+ { title: '基础组件', uri: 'pages/component_basis/index' },
+ { title: '容器组件', uri: 'pages/component_container/index' }
+]
+
+@Entry
+@Component
+struct HomePage {
+ build() {
+ Flex({
+ direction: FlexDirection.Column,
+ alignItems: ItemAlign.Center
+ }) {
+ List() {
+ ForEach(HomeContents, (item) => {
+ ListItem() {
+ Row() {
+ Text(item.title)
+ .fontSize(16)
+ .padding({ left: 10 })
+
+ }
+ .padding({ left: 10 })
+ .width('100%')
+ .height(55)
+ .alignItems(VerticalAlign.Center)
+ .backgroundColor(0xfff5deb3)
+ .margin({ top: 5, bottom: 5, left: 10 })
+ .borderRadius(12)
+ .onClick(() => {
+ router.push({
+ uri: item.uri
+ })
+ })
+ }
+ }, item => item.title)
+ }
+ .width('100%')
+ }
+ }
+}
+
+
+
+
diff --git a/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/second.ets b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/second.ets
new file mode 100644
index 0000000000000000000000000000000000000000..4d58355c7bc371caa970c161280b27b4ce8bf437
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/ets/MainAbility/pages/second.ets
@@ -0,0 +1,29 @@
+import router from '@system.router';
+
+@Entry
+@Component
+struct Second {
+ private content: string = "Second Page"
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Text(`${this.content}`)
+ .fontSize(50)
+ .fontWeight(FontWeight.Bold)
+ Button() {
+ Text('back to index')
+ .fontSize(20)
+ .fontWeight(FontWeight.Bold)
+ }.type(ButtonType.Capsule)
+ .margin({
+ top: 20
+ })
+ .backgroundColor('#0D9FFB')
+ .onClick(() => {
+ router.back()
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/am/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/am/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..17dd39a3e9016ca89087cc5cf124af733709ba96
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/am/element/string.json
@@ -0,0 +1,44 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability"
+ },
+ {
+ "name": "hello",
+ "value": "Hello"
+ },
+ {
+ "name": "world",
+ "value": "World"
+ },
+ {
+ "name": "add",
+ "value": "አክል"
+ },
+ {
+ "name": "not_set",
+ "value": "አልተዘጋጀም"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "ምንም እውቂያ አልተዘጋጀም"
+ },
+ {
+ "name": "add_contacts",
+ "value": "እውቂያን አክል"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "ባለፉት 24 ሰዓታት ውስጥ"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "ያመለጡ ጥሪዎች የሉም"
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/ar/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/ar/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..2570ce7196bdc3ae64023e95513e4f78b3514520
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/ar/element/string.json
@@ -0,0 +1,44 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability"
+ },
+ {
+ "name": "hello",
+ "value": "Hello"
+ },
+ {
+ "name": "world",
+ "value": "World"
+ },
+ {
+ "name": "add",
+ "value": "إضافة"
+ },
+ {
+ "name": "not_set",
+ "value": "بدون تعيين"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "لم يتم تعيين جهات اتصال"
+ },
+ {
+ "name": "add_contacts",
+ "value": "إضافة جهة اتصال"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "في آخر فور ساعة"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "لا توجد مكالمات فائتة"
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/as/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/as/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..d374b3f337c04a8b7a8daa5e0d5546affdd747bb
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/as/element/string.json
@@ -0,0 +1,44 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability"
+ },
+ {
+ "name": "hello",
+ "value": "Hello"
+ },
+ {
+ "name": "world",
+ "value": "World"
+ },
+ {
+ "name": "add",
+ "value": "যোগ কৰক"
+ },
+ {
+ "name": "not_set",
+ "value": "ছেট নাই"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "কোনো সম্পৰ্ক ছেট কৰা নাই"
+ },
+ {
+ "name": "add_contacts",
+ "value": "সম্পৰ্ক যোগ কৰক"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "যোৱা 24 ঘণ্টাত"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "িচড কল নাই"
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/az/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/az/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..510351a3f36735b53327ed8088565ac7bf3165bf
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/az/element/string.json
@@ -0,0 +1,44 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability"
+ },
+ {
+ "name": "hello",
+ "value": "Hello"
+ },
+ {
+ "name": "world",
+ "value": "World"
+ },
+ {
+ "name": "add",
+ "value": "Əlavə edin"
+ },
+ {
+ "name": "not_set",
+ "value": "አTəyin edilməyib"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "Heç bir əlaqə təyin edilməyib"
+ },
+ {
+ "name": "add_contacts",
+ "value": "Əlaqə əlavə edin"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "Son 24 saatda"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "Cavabsız zəng yoxdur"
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/base/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..c3c18f1e4990cc72fba7f18b9fb3d3ad0b0a20e9
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/base/element/string.json
@@ -0,0 +1,12 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility"
+ },
+ {
+ "name": "description_mainability",
+ "value": "ETS_Empty Ability"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/add.png b/ETSUI/eTSComponent/entry/src/main/resources/base/media/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..a953c2345848399629a0a467990946f732dcc2e7
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/base/media/add.png differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/cut.png b/ETSUI/eTSComponent/entry/src/main/resources/base/media/cut.png
new file mode 100644
index 0000000000000000000000000000000000000000..168a7e64bd7ede8de146eb6c8f191a563032c056
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/base/media/cut.png differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/delete.svg b/ETSUI/eTSComponent/entry/src/main/resources/base/media/delete.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7958b0ac2b756da83830ada2b97a14abeb68e819
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/base/media/delete.svg
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/edit.svg b/ETSUI/eTSComponent/entry/src/main/resources/base/media/edit.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cc72f7926479daf861170373eef8e36ef61db671
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/base/media/edit.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/icon.png b/ETSUI/eTSComponent/entry/src/main/resources/base/media/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/base/media/icon.png differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/landscape.jpg b/ETSUI/eTSComponent/entry/src/main/resources/base/media/landscape.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..07fce38690f23bd3a9c0495058fd048b58f1c900
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/base/media/landscape.jpg differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/rawfile_test.jpg b/ETSUI/eTSComponent/entry/src/main/resources/base/media/rawfile_test.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6c62af06c9d8c9436cc6ad2e55aa0e51d3e79e8b
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/base/media/rawfile_test.jpg differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/reset.png b/ETSUI/eTSComponent/entry/src/main/resources/base/media/reset.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4ac8c93f7d5552f478962f3d46cf51aa15cbd0b
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/base/media/reset.png differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/show.mp4 b/ETSUI/eTSComponent/entry/src/main/resources/base/media/show.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..e627b9243401547b4888e0878bc26724044f7f2a
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/base/media/show.mp4
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b2825ae00be69de0a82e022ad63cb59ab6484e4494ed7db83b1d0d36be32273b
+size 43794336
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/base/media/test.jpg b/ETSUI/eTSComponent/entry/src/main/resources/base/media/test.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..42bacde6c40d3c76489ea826f49344470fcd8639
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/base/media/test.jpg differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/be/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/be/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..80669799f162a7ade63f7616931cc83e15d02b43
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/be/element/string.json
@@ -0,0 +1,44 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability"
+ },
+ {
+ "name": "hello",
+ "value": "Hello"
+ },
+ {
+ "name": "world",
+ "value": "World"
+ },
+ {
+ "name": "add",
+ "value": "Дадаць"
+ },
+ {
+ "name": "not_set",
+ "value": "Не зададзены"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "Кантакт не зададзены"
+ },
+ {
+ "name": "add_contacts",
+ "value": "Дадаць кантакт"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "За апошнія 24 гадзіны"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "Прапушчаных выклікаў няма"
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/dark/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/dark/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..3fe37d11c50193bd99cba663c959b058f6f5ebd8
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/dark/element/string.json
@@ -0,0 +1,8 @@
+{
+ "string": [
+ {
+ "name": "string_1",
+ "value": "hello"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..11ba98650df0a3261fe22e72ee87d5de207896ae
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#FF6347"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#FF69B4"
+ },
+ {
+ "name": "button_color",
+ "value": "#D02090"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#8A2BE2"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..88cc10529ba07336767853d831e1c48af1b1ceb2
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "18.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"18px"
+ },
+ {
+ "name":"radius_button",
+ "value":"18px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..a482b4d79d731f92a8a221b67dec7821e07acfbf
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 12"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 12"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 12"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 12"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..87f7d2b68954c793517eda6befbdc60f2018f1bf
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US-horizontal-light/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility 12"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 12"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 12"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 12 ."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..20089ce50f2a12227a8edc7e8adb29ff9942e034
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#ff0ff00"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#00f0f00"
+ },
+ {
+ "name": "button_color",
+ "value": "#ff00f00f"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#ffff0000"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..5c171cc356c44a5b5949e2e926c7dad385b5e3ab
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "9.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"9px"
+ },
+ {
+ "name":"radius_button",
+ "value":"9px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..a913a871db37ac70fd7322d1732f8f8b36dc46b3
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..605466b8ea6171f22ce3d20dc846c4df4b094031
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US-vertical-phone-light-ldpi/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s ."
+ },
+ {
+ "name": "hello",
+ "value": "Hello"
+ },
+ {
+ "name": "world",
+ "value": "World"
+ },
+ {
+ "name": "add",
+ "value": "Agregar"
+ },
+ {
+ "name": "not_set",
+ "value": "Sin configurar"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "No hay contactos configurados"
+ },
+ {
+ "name": "add_contacts",
+ "value": "Agregar contacto"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "En las últimas 24 horas"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "No hay llamadas perdidas"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..844d5339521739a74ac55b3755a56390a9c449ef
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#ff0000"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#00ff00"
+ },
+ {
+ "name": "button_color",
+ "value": "#ff0000"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#ffff00"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..6324cc13cded3badb99a698854507df5dad1aff8
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/float.json
@@ -0,0 +1,16 @@
+{
+ "color": [
+ {
+ "name": "my_font",
+ "value": "12.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"15px"
+ },
+ {
+ "name":"radius_button",
+ "value":"15px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..a913a871db37ac70fd7322d1732f8f8b36dc46b3
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..e0e169df323ea61fdcff330e6543022cbf94ff89
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/en_US/element/string.json
@@ -0,0 +1,52 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability"
+ },
+ {
+ "name": "textString",
+ "value": "My Text String"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "My Text String is %s ."
+ },
+ {
+ "name": "hello",
+ "value": "Hello"
+ },
+ {
+ "name": "world",
+ "value": "World"
+ },
+ {
+ "name": "add",
+ "value": "Agregar"
+ },
+ {
+ "name": "not_set",
+ "value": "Sin configurar"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "No hay contactos configurados"
+ },
+ {
+ "name": "add_contacts",
+ "value": "Agregar contacto"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "En las últimas 24 horas"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "No hay llamadas perdidas"
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/he/element/he.json b/ETSUI/eTSComponent/entry/src/main/resources/he/element/he.json
new file mode 100644
index 0000000000000000000000000000000000000000..cd9444f49760a5c0aa5660da94eaed8fe6593363
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/he/element/he.json
@@ -0,0 +1,16 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability"
+ },
+ {
+ "name": "string_1",
+ "value": "hello"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..863f0e0b858f19a15eb3085e7228a9418094f9b1
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#ff00ff00"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#f00000"
+ },
+ {
+ "name": "button_color",
+ "value": "#f0f00f"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#f02ff00"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..181b9a24fdb5be1a80af4b785f4ccf4dccd1db2b
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "15.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"15px"
+ },
+ {
+ "name":"radius_button",
+ "value":"15px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..625f1f6b26a827edfafbabca0654bfde57ae1bfa
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 2"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 2"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 2"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 2"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..b2938c181b4165ed32a60eeda7702b730411d847
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-dark-xxldpi/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility 2"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 2"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 2"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 2 ."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..28e9cb28a33cd63a2db626f8c00ae57990c0a1e7
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#FFF5EE"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#8EE5EE"
+ },
+ {
+ "name": "button_color",
+ "value": "#FFE4C4"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#7FFFD4"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..b1c44da09d06f1ccd2dfdca049fd749fe802db86
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "20.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"20px"
+ },
+ {
+ "name":"radius_button",
+ "value":"20px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..4cde745d3f13cb348bc950fa5a7f400531f9e4ec
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 3"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 3"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 3"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 3"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..04f4135437ecf11767bdfdf53cbee5fae986bc0c
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/horizontal-light-ldpi/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility 3"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 3"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 3"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 3 ."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/rawfile/Thumbs.db b/ETSUI/eTSComponent/entry/src/main/resources/rawfile/Thumbs.db
new file mode 100644
index 0000000000000000000000000000000000000000..f1c4910fe2be5105fe430c3994052415111cb4b9
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/rawfile/Thumbs.db differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/rawfile/dark.jpg b/ETSUI/eTSComponent/entry/src/main/resources/rawfile/dark.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/rawfile/icon.jpg b/ETSUI/eTSComponent/entry/src/main/resources/rawfile/icon.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..09086306ac3b874f934532028c2bf646e7f47eeb
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/rawfile/icon.jpg differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/rawfile/iconxxx.png b/ETSUI/eTSComponent/entry/src/main/resources/rawfile/iconxxx.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c
Binary files /dev/null and b/ETSUI/eTSComponent/entry/src/main/resources/rawfile/iconxxx.png differ
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/rawfile/video/show.mp4 b/ETSUI/eTSComponent/entry/src/main/resources/rawfile/video/show.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..e9f8c507ece85ea125bb8170450560fc92a81653
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#0000ff"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#0fffff"
+ },
+ {
+ "name": "button_color",
+ "value": "#ff0000ff"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#ffff00ff"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..ade3900d1256609593853766c857e25a81579409
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "13.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"13px"
+ },
+ {
+ "name":"radius_button",
+ "value":"13px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..310b12ab7a1480f3b78d3c80bcb873989a559433
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 1"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 1"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 1"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 1"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..8fe523d8a1931019d1424d1c069d8f1e6091dfa3
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/vertical-phone-light-sdpi/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility1"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability1"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串1"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 1."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..28ce7c50e524f4d580037b63a400489da75ffdaf
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#6495ED"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#43CD80"
+ },
+ {
+ "name": "button_color",
+ "value": "#7FFF00"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#2E8B57"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..ab012f2ee6218affe45cd816b753f705186f918e
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "30.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"30px"
+ },
+ {
+ "name":"radius_button",
+ "value":"30px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..09c2b8de9b951a122c8c816e705ac3f3db7516e7
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 6"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 6"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 6"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 6"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..b79e0194f25dd502eeb34a837c752619054da52d
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-dark-ldpi/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility 6"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 6"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 6"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 6 ."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..1d91160b6d1eaf849dbdffc1e7c95ef7d9deae8f
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#ff000ff"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#FFF5EE"
+ },
+ {
+ "name": "button_color",
+ "value": "#ff000000"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#ffff00"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..7b00f2d9d51a482660a8e002ec75cc12d91c114a
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "12.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"12px"
+ },
+ {
+ "name":"radius_button",
+ "value":"12px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..8c474ed5bdc0a31b69de3e6f350d87afc028caa5
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 5"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 5"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 5"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 5"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..d6c905bcfa10331a2c283554e6ec029df3fc4c69
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-horizontal-phone-light-mdpi/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility 5"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 5"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 5"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s ."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..f3c7388345947256eb90bc56d09abd58e7acec96
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#528B8B"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#F0FFF0"
+ },
+ {
+ "name": "button_color",
+ "value": "#4169E1"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#00BFFF"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..282a90f185f31e0b590d8a1c3c6746fa070fa9ed
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "10.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"10px"
+ },
+ {
+ "name":"radius_button",
+ "value":"10px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..ade2b8d6a6a6e04d625f3c1a98898bb9ebf83a1d
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 14"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 14"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 14"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 14"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..fd13b1dc498f6b06b0583a49544369efcb4123e5
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-phone-dark/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility 14"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 14"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 14"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 14."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..0adf3fed33a1ed591a62973910d7db3d86f84ef9
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#00FF7F"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#8FBC8F"
+ },
+ {
+ "name": "button_color",
+ "value": "#66CDAA"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#C0FF3E"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..fed4dbd0ec956608d490f505d252f6091ff0c1cb
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "14.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"14px"
+ },
+ {
+ "name":"radius_button",
+ "value":"14px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..26a8c18bcc3a1d5ac1df3cdae206ef057669cbe5
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 13"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 13"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 13"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 13"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..a2fb937edf313d74796bca49573204dcf1c2e7bf
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-light/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility 13"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 13"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 13"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 13 ."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..d6a21556a21478e2ea2159e8069ff4a25a98b90e
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#EECFA1"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#EE0000"
+ },
+ {
+ "name": "button_color",
+ "value": "#8B0A50"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#EE0000"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..96b4a97c6eb6e90e97ce0faa78eb8a3d394e9ba4
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "6.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"6px"
+ },
+ {
+ "name":"radius_button",
+ "value":"6px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..940ee142eed867c817c2468cf0a018da0b9cd340
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 9"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 9"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 9"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 9"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..484a70645d5ced445f3e187060b7792717ded346
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxldpi/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "ACE_ETS"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 9"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 9"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 9."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..3cf9af7df10f16d61bf78d4ae003533b26d855fc
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#FF00FF"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#00008B"
+ },
+ {
+ "name": "button_color",
+ "value": "#8DB6CD"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#90EE90"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..1f12abe202d9af2bd354059113289cd886df70a8
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "8.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"8px"
+ },
+ {
+ "name":"radius_button",
+ "value":"8px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..511e3bf207a7727c0f454b7db9cc1b65ef4d4eb8
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 0"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 0"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 0"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 0"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..5b49feb0c3ba3d50060a2bb002354cea2a58c68c
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN-vertical-phone-light-xxxldpi/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility 0"
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 0"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 0"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 0."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/color.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/color.json
new file mode 100644
index 0000000000000000000000000000000000000000..16e94eb5d12bdd4cbe0a059b4dfda4f62ced5b4f
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/color.json
@@ -0,0 +1,20 @@
+{
+ "color": [
+ {
+ "name": "my_color_aaa",
+ "value": "#ff0000"
+ },
+ {
+ "name": "my_color_bbb",
+ "value": "#00ff00"
+ },
+ {
+ "name": "button_color",
+ "value": "#ff0000"
+ },
+ {
+ "name": "color_emphasize",
+ "value": "#ffff00d"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/float.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/float.json
new file mode 100644
index 0000000000000000000000000000000000000000..88cc10529ba07336767853d831e1c48af1b1ceb2
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/float.json
@@ -0,0 +1,16 @@
+{
+ "float": [
+ {
+ "name": "my_font",
+ "value": "18.0vp"
+ },
+ {
+ "name":"text_headline1",
+ "value":"18px"
+ },
+ {
+ "name":"radius_button",
+ "value":"18px"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/plural.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/plural.json
new file mode 100644
index 0000000000000000000000000000000000000000..1c0e210a022a6a5b1525de753fc3fed5b03e1167
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/plural.json
@@ -0,0 +1,30 @@
+{
+ "plural": [
+ {
+ "name":"pluralstring",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"%1$s apple %2$d day 4"
+ },
+ {
+ "quantity":"other",
+ "value":"%1$s apples %2$d days 4"
+ }
+ ]
+ },
+ {
+ "name":"pluralstringfirst",
+ "value":[
+ {
+ "quantity":"one",
+ "value":"pluralstringfirst one 4"
+ },
+ {
+ "quantity":"other",
+ "value":"pluralstringfirst other 4"
+ }
+ ]
+ }
+ ]
+}
diff --git a/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/string.json b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/string.json
new file mode 100644
index 0000000000000000000000000000000000000000..b2fc18853084150aaed9e36acf03e4369b3a8650
--- /dev/null
+++ b/ETSUI/eTSComponent/entry/src/main/resources/zh_CN/element/string.json
@@ -0,0 +1,53 @@
+{
+ "string": [
+ {
+ "name": "entry_MainAbility",
+ "value": "entry_MainAbility 4 "
+ },
+ {
+ "name": "mainability_description",
+ "value": "ETS_Empty Feature Ability 4"
+ },
+ {
+ "name": "textString",
+ "value": "我的文本字符串 4"
+ },
+ {
+ "name": "textPlaceHolder",
+ "value": "我的文本字符串 is %s 4 ."
+ },
+ {
+ "name": "hello",
+ "value": "您好"
+ },
+ {
+ "name": "world",
+ "value": "世界"
+ },
+ {
+ "name": "add",
+ "value": "添加"
+ },
+ {
+ "name": "not_set",
+ "value": "未设置"
+ },
+ {
+ "name": "no_contact_set",
+ "value": "未设置联系人"
+ },
+ {
+ "name": "add_contacts",
+ "value": "点击添加联系人"
+ },
+ {
+ "name": "in_the_last_day",
+ "value": "无未接来电"
+ },
+ {
+ "name": "no_missed_calls",
+ "value": "近 24 小时内"
+ }
+
+ ]
+}
diff --git a/ETSUI/eTSComponent/gradle.properties b/ETSUI/eTSComponent/gradle.properties
new file mode 100644
index 0000000000000000000000000000000000000000..3966a047e62927da1d39dba17e4d7353d8576f43
--- /dev/null
+++ b/ETSUI/eTSComponent/gradle.properties
@@ -0,0 +1,13 @@
+# Project-wide Gradle settings.
+# IDE (e.g. DevEco Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# If the Chinese output is garbled, please configure the following parameter.
+# This function is enabled by default when the DevEco Studio builds the hap/app,if you need disable gradle parallel,you should set org.gradle.parallel false.
+# more information see https://docs.gradle.org/current/userguide/performance.html
+# org.gradle.parallel=false
+# org.gradle.jvmargs=-Dfile.encoding=GBK
\ No newline at end of file
diff --git a/ETSUI/eTSComponent/gradle/wrapper/gradle-wrapper.jar b/ETSUI/eTSComponent/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 0000000000000000000000000000000000000000..db7e15256ccfe45b8e858ffab67f2187102381b3
--- /dev/null
+++ b/ETSUI/eTSComponent/gradle/wrapper/gradle-wrapper.jar
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1cef53de8dc192036e7b0cc47584449b0cf570a00d560bfaa6c9eabe06e1fc06
+size 58694
diff --git a/ETSUI/eTSComponent/gradle/wrapper/gradle-wrapper.properties b/ETSUI/eTSComponent/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 0000000000000000000000000000000000000000..f59159e865d4b59feb1b8c44b001f62fc5d58df4
--- /dev/null
+++ b/ETSUI/eTSComponent/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://repo.huaweicloud.com/gradle/gradle-6.3-bin.zip
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
diff --git a/ETSUI/eTSComponent/gradlew b/ETSUI/eTSComponent/gradlew
new file mode 100644
index 0000000000000000000000000000000000000000..536f0272dd995f3afdb5e34e0f42bdf3d1986c22
--- /dev/null
+++ b/ETSUI/eTSComponent/gradlew
@@ -0,0 +1,183 @@
+#!/usr/bin/env sh
+
+#
+# Copyright 2015 the original author or authors.
+#
+# 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
+#
+# https://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.
+#
+
+##############################################################################
+##
+## Gradle start up script for UN*X
+##
+##############################################################################
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ]; do
+ ls=$(ls -ld "$PRG")
+ link=$(expr "$ls" : '.*-> \(.*\)$')
+ if expr "$link" : '/.*' >/dev/null; then
+ PRG="$link"
+ else
+ PRG=$(dirname "$PRG")"/$link"
+ fi
+done
+SAVED="$(pwd)"
+cd "$(dirname \"$PRG\")/" >/dev/null
+APP_HOME="$(pwd -P)"
+cd "$SAVED" >/dev/null
+
+APP_NAME="Gradle"
+APP_BASE_NAME=$(basename "$0")
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn() {
+ echo "$*"
+}
+
+die() {
+ echo
+ echo "$*"
+ echo
+ exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$(uname)" in
+CYGWIN*)
+ cygwin=true
+ ;;
+Darwin*)
+ darwin=true
+ ;;
+MINGW*)
+ msys=true
+ ;;
+NONSTOP*)
+ nonstop=true
+ ;;
+esac
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ]; then
+ if [ -x "$JAVA_HOME/jre/sh/java" ]; then
+ # IBM's JDK on AIX uses strange locations for the executables
+ JAVACMD="$JAVA_HOME/jre/sh/java"
+ else
+ JAVACMD="$JAVA_HOME/bin/java"
+ fi
+ if [ ! -x "$JAVACMD" ]; then
+ die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+ fi
+else
+ JAVACMD="java"
+ which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ]; then
+ MAX_FD_LIMIT=$(ulimit -H -n)
+ if [ $? -eq 0 ]; then
+ if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ]; then
+ MAX_FD="$MAX_FD_LIMIT"
+ fi
+ ulimit -n $MAX_FD
+ if [ $? -ne 0 ]; then
+ warn "Could not set maximum file descriptor limit: $MAX_FD"
+ fi
+ else
+ warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+ fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+ GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if [ "$cygwin" = "true" -o "$msys" = "true" ]; then
+ APP_HOME=$(cygpath --path --mixed "$APP_HOME")
+ CLASSPATH=$(cygpath --path --mixed "$CLASSPATH")
+ JAVACMD=$(cygpath --unix "$JAVACMD")
+
+ # We build the pattern for arguments to be converted via cygpath
+ ROOTDIRSRAW=$(find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null)
+ SEP=""
+ for dir in $ROOTDIRSRAW; do
+ ROOTDIRS="$ROOTDIRS$SEP$dir"
+ SEP="|"
+ done
+ OURCYGPATTERN="(^($ROOTDIRS))"
+ # Add a user-defined pattern to the cygpath arguments
+ if [ "$GRADLE_CYGPATTERN" != "" ]; then
+ OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+ fi
+ # Now convert the arguments - kludge to limit ourselves to /bin/sh
+ i=0
+ for arg in "$@"; do
+ CHECK=$(echo "$arg" | egrep -c "$OURCYGPATTERN" -)
+ CHECK2=$(echo "$arg" | egrep -c "^-") ### Determine if an option
+
+ if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ]; then ### Added a condition
+ eval $(echo args$i)=$(cygpath --path --ignore --mixed "$arg")
+ else
+ eval $(echo args$i)="\"$arg\""
+ fi
+ i=$(expr $i + 1)
+ done
+ case $i in
+ 0) set -- ;;
+ 1) set -- "$args0" ;;
+ 2) set -- "$args0" "$args1" ;;
+ 3) set -- "$args0" "$args1" "$args2" ;;
+ 4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+ 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+ 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+ 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+ 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+ 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+ esac
+fi
+
+# Escape application args
+save() {
+ for i; do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/"; done
+ echo " "
+}
+APP_ARGS=$(save "$@")
+
+# Collect all arguments for the java command, following the shell quoting and substitution rules
+eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
+
+exec "$JAVACMD" "$@"
diff --git a/ETSUI/eTSComponent/gradlew.bat b/ETSUI/eTSComponent/gradlew.bat
new file mode 100644
index 0000000000000000000000000000000000000000..62bd9b9ccefea2b65ae41e5d9a545e2021b90a1d
--- /dev/null
+++ b/ETSUI/eTSComponent/gradlew.bat
@@ -0,0 +1,103 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windows variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
diff --git a/ETSUI/eTSComponent/package.json b/ETSUI/eTSComponent/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..69a88e3b65423624fe7ea8b0f8beefcc62cc3d5f
--- /dev/null
+++ b/ETSUI/eTSComponent/package.json
@@ -0,0 +1 @@
+{}
diff --git a/ETSUI/eTSComponent/settings.gradle b/ETSUI/eTSComponent/settings.gradle
new file mode 100644
index 0000000000000000000000000000000000000000..28d595f2fba0d06b2025da200383d15f87c4e9f0
--- /dev/null
+++ b/ETSUI/eTSComponent/settings.gradle
@@ -0,0 +1 @@
+include ':entry'