From 141c4376b8dfc75b32b18ae59c037f8699e0b427 Mon Sep 17 00:00:00 2001 From: Ilya Erokhin Date: Tue, 23 Jan 2024 17:53:39 +0300 Subject: [PATCH] Add steps to Slider Demo & add Button page --- .../ets/pages/components/ButtonThemePage.ets | 69 +++++++++++++++++++ .../components/ComponentsNavigationPage.ets | 4 ++ .../ets/pages/components/SliderThemePage.ets | 60 ++++++++++++---- .../resources/base/profile/main_pages.json | 1 + theme/ThemeDemoBaseline/build-profile.json5 | 15 +--- 5 files changed, 122 insertions(+), 27 deletions(-) create mode 100644 theme/ThemeDemo/entry/src/main/ets/pages/components/ButtonThemePage.ets diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/ButtonThemePage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/ButtonThemePage.ets new file mode 100644 index 0000000..4190e69 --- /dev/null +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/ButtonThemePage.ets @@ -0,0 +1,69 @@ +import { AlertDialog } from '@ohos.arkui.advanced.Dialog' +import { BrownThemeColors, GreenThemeColors, RedThemeColors } from '../../theme/CustomColorsImlp' +import { CustomThemeImpl } from '../../theme/CustomThemeImpl' + +@Entry +@Component +struct SliderThemePage { + @State customTheme: Theme = new CustomThemeImpl(RedThemeColors) + count = 0 + + build() { + Row() { + Scroll() { + Column({ space: '8vp' }) { + Button('Default Button with System Theme') + .buttonStyleEx(ButtonStyleEx.Default) + Button('Emphasize Button with System Theme') + .buttonStyleEx(ButtonStyleEx.Emphasize) + Button('Text Button with System Theme') + .buttonStyleEx(ButtonStyleEx.Text) + Button('Small Default Button with System Theme') + .buttonStyleEx(ButtonStyleEx.SmallDefault) + Button('Small Emphasize Button with System Theme') + .buttonStyleEx(ButtonStyleEx.SmallEmphasize) + Button('Small Text Button with System Theme') + .buttonStyleEx(ButtonStyleEx.SmallText) + + WithTheme(this.customTheme) { + Column({ space: '8vp' }) { + Button('Default Button with Custom Theme') + .buttonStyleEx(ButtonStyleEx.Default) + Button('Emphasize Button with Custom Theme') + .buttonStyleEx(ButtonStyleEx.Emphasize) + Button('Text Button with Custom Theme') + .buttonStyleEx(ButtonStyleEx.Text) + Button('Small Default Button with Custom Theme') + .buttonStyleEx(ButtonStyleEx.SmallDefault) + Button('Small Emphasize Button with Custom Theme') + .buttonStyleEx(ButtonStyleEx.SmallEmphasize) + Button('Small Text Button with Custom Theme') + .buttonStyleEx(ButtonStyleEx.SmallText) + } + .width('100%') + } + } + } + .width('100%') + } + .height('100%') + .onClick(() => { + this.count++ + if (this.count > 2) { + this.count = 0 + } + switch (this.count) { + case 0: + this.customTheme = new CustomThemeImpl(RedThemeColors) + break + case 1: + this.customTheme = new CustomThemeImpl(GreenThemeColors) + break + case 2: + default: + this.customTheme = new CustomThemeImpl(BrownThemeColors) + break + } + }) + } +} \ No newline at end of file diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets index aed6eae..e070588 100644 --- a/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/ComponentsNavigationPage.ets @@ -9,6 +9,10 @@ export interface DataClass { @Component struct ComponentsNavigationPage { data: DataClass[] = [ + { + title: 'Button', + page: 'pages/components/ButtonThemePage' + }, { title: 'Slider', page: 'pages/components/SliderThemePage' diff --git a/theme/ThemeDemo/entry/src/main/ets/pages/components/SliderThemePage.ets b/theme/ThemeDemo/entry/src/main/ets/pages/components/SliderThemePage.ets index 5dc9192..7b36249 100644 --- a/theme/ThemeDemo/entry/src/main/ets/pages/components/SliderThemePage.ets +++ b/theme/ThemeDemo/entry/src/main/ets/pages/components/SliderThemePage.ets @@ -11,28 +11,62 @@ struct SliderThemePage { @State v2: number = 50 @State v3: number = 50 @State v4: number = 50 + @State v5: number = 50 + @State v6: number = 50 + @State v7: number = 50 + @State v8: number = 50 build() { Row() { - Column() { - Text('Slider, OutSet, SystemTheme').padding('8vp') - Slider({ value: this.v1 }).onChange((value) => { this.v1 = value }) + Scroll() { + Column() { + Text('Slider, OutSet, SystemTheme').padding('8vp') + Slider({ value: this.v1 }).onChange((value) => { + this.v1 = value + }) - Text('Slider, InSet, SystemTheme').padding('8vp') - Slider({ value: this.v2, style: SliderStyle.InSet }).onChange((value) => { this.v2 = value }) + Text('Slider, InSet, SystemTheme').padding('8vp') + Slider({ value: this.v2, style: SliderStyle.InSet }).onChange((value) => { + this.v2 = value + }) - WithTheme(this.customTheme) { - Column() { - Text('Slider, OutSet, CustomTheme').padding('8vp') - Slider({ value: this.v3 }).onChange((value) => { this.v3 = value }) + Text('Slider, OutSet, SystemTheme, Steps on').padding('8vp') + Slider({ value: this.v3, step: 5 }).showSteps(true).onChange((value) => { + this.v3 = value + }) - Text('Slider, InSet, CustomTheme').padding('8vp') - Slider({ value: this.v4, style: SliderStyle.InSet }).onChange((value) => { this.v4 = value }) + Text('Slider, InSet, SystemTheme, Steps on').padding('8vp') + Slider({ value: this.v4, step: 5, style: SliderStyle.InSet }).showSteps(true).onChange((value) => { + this.v4 = value + }) + + WithTheme(this.customTheme) { + Column() { + Text('Slider, OutSet, CustomTheme').padding('8vp') + Slider({ value: this.v5 }).onChange((value) => { + this.v5 = value + }) + + Text('Slider, InSet, CustomTheme').padding('8vp') + Slider({ value: this.v6, style: SliderStyle.InSet }).onChange((value) => { + this.v6 = value + }) + + Text('Slider, InSet, CustomTheme, Steps on').padding('8vp') + Slider({ value: this.v7, step: 5 }).showSteps(true).onChange((value) => { + this.v7 = value + }) + + Text('Slider, InSet, CustomTheme, Steps on').padding('8vp') + Slider({ value: this.v8, step: 5, style: SliderStyle.InSet }).showSteps(true).onChange((value) => { + this.v8 = value + }) + } + .width('100%') } - .width('100%') } + .width('100%') } - .width('100%') } .height('100%') .onClick(() => { diff --git a/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json b/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json index e6a414d..3918e09 100644 --- a/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json +++ b/theme/ThemeDemo/entry/src/main/resources/base/profile/main_pages.json @@ -19,6 +19,7 @@ "pages/tests/TestsNavigationPage", "pages/tests/demo1/Demo1NavigationPage", "pages/tests/demo2/Demo2NavigationPage", + "pages/components/ButtonThemePage", "pages/components/SliderThemePage", "pages/components/ComponentsNavigationPage" ] diff --git a/theme/ThemeDemoBaseline/build-profile.json5 b/theme/ThemeDemoBaseline/build-profile.json5 index 634ed9d..e5dbeca 100644 --- a/theme/ThemeDemoBaseline/build-profile.json5 +++ b/theme/ThemeDemoBaseline/build-profile.json5 @@ -1,19 +1,6 @@ { "app": { - "signingConfigs": [ - { - "name": "default", - "material": { - "certpath": "C:\\Users\\Ilya\\.ohos\\config\\openharmony\\auto_ohos_default_ThemeDemoBaseline_com.example.themedemobaseline.cer", - "storePassword": "0000001BC64DE4BADE8D91DB4C69AAC2CB979699BFB48DDE529C9411F16EC065F83AA468AF438C73E349E5", - "keyAlias": "debugKey", - "keyPassword": "0000001BD22B68A12B35B6336BF350EDC064220F5E95A6B52004BAECFAB6AFDB20AEBE99515EE7AE6333FF", - "profile": "C:\\Users\\Ilya\\.ohos\\config\\openharmony\\auto_ohos_default_ThemeDemoBaseline_com.example.themedemobaseline.p7b", - "signAlg": "SHA256withECDSA", - "storeFile": "C:\\Users\\Ilya\\.ohos\\config\\openharmony\\auto_ohos_default_ThemeDemoBaseline_com.example.themedemobaseline.p12" - } - } - ], + "signingConfigs": [], "compileSdkVersion": 9, "compatibleSdkVersion": 9, "products": [ -- Gitee