openharmony/applications_app_samples
1
0
Fork 0
mirror of https://gitee.com/openharmony/applications_app_samples synced 2024-11-27 18:50:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

【Sample】【基础能力】组件及布局能力增强

Browse Source 
Signed-off-by: 13415019609 <minyin.weng@unionman.com.cn>
This commit is contained in:
13415019609 2023-08-25 11:02:35 +08:00
parent d02aab8189
commit 25afe5bac0
35 changed files with 2574 additions and 664 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md
View File

@ -173,6 +173,8 @@ entry/src/main/ets/
| | | | |---GaugeSample.ets // 仪表盘
| | | |---loadingProgressSample
| | | | |---LoadingProgressSample.ets
| | | |---listSample // 列表
| | | | |---ListSample.ets
| | | |---marqueeSample
| | | | |---MarqueeSample.ets // 跑马灯
| | | |---radioSample
@ -202,6 +204,8 @@ entry/src/main/ets/
| | | | |---NavigationSample.ets // 导航
| | | | |---NavigationSecondPage.ets
| | | | |---NavigationThirdPage.ets
| | | |---navRouterSample
| | | | |---NavRouterSample.ets // 导航
| | | |---stepperAndStepperItemSample
| | | | |---StepperAndStepperItemSample.ets // 步骤导航器
| | | |---tabContentSample
@ -368,6 +372,8 @@ entry/src/main/ets/
| | | | |---ScaleSample.ets // 缩放
| | | |---shapeCropSample
| | | | |---ShapeCropSample.ets // 形状裁剪
| | | |---safeAreaSample
| | | | |---SafeAreaSample.ets // 安全区域
| | | |---sizeSample
| | | | |---SizeSample.ets // 尺寸
| | | |---transformSample

2
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/animations/TransitionAnimations/floatingSample/FloatingWindowSample.ets
View File

@ -56,6 +56,8 @@ struct FloatingWindowSample {
Column() {
TitleBar({ title: $r('app.string.Floating_window') })
.id('target')
TextInput({ placeholder: $r('app.string.avoiding_input_method_testing') })
.width('95%').height(50).enableKeyboardOnFocus(false).id('test_input')
Row() {
Row() {
FloatingWindowComponent()

8
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets
View File

@ -151,6 +151,10 @@ const INFORMATION_PRESENTATION_AND_DYNAMIC_EFFECTS: ThirdLevelCategory =
{
title: $r('app.string.qrcode_title'),
url: 'pages/components/informationPresentationAndDynamicEffects/qrCodeSample/QRCodeSample'
},
{
title: $r('app.string.list'),
url: 'pages/components/informationPresentationAndDynamicEffects/listSample/ListSample'
},
{
title: $r('app.string.loading_progress'),
@ -329,6 +333,10 @@ const NAVIGATION: ThirdLevelCategory =
image: $r('app.media.ic_navigation'),
title: $r('app.string.navigation'),
childNodes : [
{
title: $r('app.string.navRouter_title'),
url: 'pages/components/navigation/navRouterSample/NavRouterSample'
},
{
title: $r('app.string.navigation_title'),
url: 'pages/components/navigation/navigationSample/NavigationSample'

16
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/auxiliary/refreshSample/RefreshSample.ets
View File

@ -51,11 +51,22 @@ struct RefreshSample {
@State mFriction: number = 62
private dataArray: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@Builder refreshBuilder() {
Column() {
Text($r('app.string.auxiliary_refresh_refreshing'))
.fontSize(16)
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.padding(16)
.borderRadius(12)
}
build() {
Column() {
TitleBar({ title: $r('app.string.auxiliary_refresh') })
Column() {
Refresh({ refreshing: $$this.isRefreshing, offset: this.mOffset, friction: this.mFriction }) {
Refresh({ refreshing: $$this.isRefreshing, offset: this.mOffset, friction: this.mFriction, builder:this.refreshBuilder }) {
Scroll() {
Column() {
ForEach(this.dataArray, (item) => {
@ -69,10 +80,11 @@ struct RefreshSample {
Blank(6)
})
}.width('80%')
}.width('100%')
}.width('100%')
.height(300)
}
.width('100%')
.height(300)
.onRefreshing(() => {
setTimeout(() => {

36
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/buttonAndSelection/counterSample/CounterSample.ets
View File

@ -33,6 +33,9 @@ import { TitleBar } from '../../../../common/TitleBar'
@Entry
@Component
struct CounterSample {
@State mEnableInc: boolean = true
@State mEnableDec: boolean = true
@State enableCount: number = 0
@State count: number = 0
@State imageCount: number = 0
private images: Resource[] = [$r('app.media.ic_button_circle_add'), $r('app.media.ic_blank_and_divider'),
@ -71,6 +74,39 @@ struct CounterSample {
this.imageCount--
})
}.cardStyle()
Text('EnableInc And EnableDec')
.leftTitleStyle()
Column() {
Row() {
Text('enableInc')
.fontSize(15)
Checkbox()
.id('inc')
.select(this.mEnableInc)
.onChange((value) => {
this.mEnableInc = value
})
Text('enableDec')
.fontSize(15)
Checkbox()
.id('dec')
.select(this.mEnableDec)
.onChange((value) => {
this.mEnableDec = value
})
}.alignSelf(ItemAlign.Start)
Counter() {
Text(this.enableCount.toString())
}.onInc(() => {
this.enableCount++
})
.onDec(() => {
this.enableCount--
})
.enableDec(this.mEnableDec)
.enableInc(this.mEnableInc)
}.cardStyle()
}
.backgroundColor($r('app.color.background_light_gray'))
.height('100%')

87
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/informationPresentationAndDynamicEffects/listSample/ListSample.ets Executable file
View File

@ -0,0 +1,87 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { TitleBar } from '../../../../common/TitleBar'
@Extend(Text) function leftTitleStyle() {
.fontColor($r('app.color.font_color_shallow'))
.fontSize(18)
.height(22)
.alignSelf(ItemAlign.Start)
.margin({ left: 12, bottom: 8 })
}
@Extend(Column) function cardStyle() {
.backgroundColor(Color.White)
.borderRadius(24)
.width('100%')
.padding(12)
.margin({ bottom: 12 })
}
@Entry
@Component
struct ListSample {
@State arr: number[] = [0, 1, 2, 3, 4]
@Builder itemEnd() {
Row() {
Button('Delete').margin('4vp')
Button('Set').margin('4vp')
}.padding('4vp').justifyContent(FlexAlign.SpaceEvenly)
}
build() {
Column() {
TitleBar({ title: $r('app.string.list') })
Text($r('app.string.delete_list_item'))
.leftTitleStyle()
Column() {
List({ space: 10 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('item' + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
.transition({ type: TransitionType.Delete, opacity: 0 })
.swipeAction({
end: {
useDefaultDeleteAnimation: true,
onDelete: () => {
animateTo({ duration: 1000 }, () => {
let index = this.arr.indexOf(item)
this.arr.splice(index, 1)
})
},
deleteAreaDistance: 80,
}
})
}, item => item)
}
}
.cardStyle()
.width('100%')
}
.height('100%')
.width('100%')
.backgroundColor($r('app.color.background_light_gray'))
.padding({ left: 20, right: 20 })
}
}

72
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/navigation/navRouterSample/NavRouterSample.ets Executable file
View File

@ -0,0 +1,72 @@
/*
* Copyright (c) 2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { TitleBar } from '../../../../common/TitleBar'
import { getStringData } from '../../../../data/ResourceDataHandle'
@Entry
@Component
struct NavRouterSample {
private arr: number[] = [1, 2, 3];
build() {
Column() {
TitleBar({ title: $r('app.string.navRouter_title') })
Navigation() {
List({ space: 12 }) {
ForEach(this.arr, (item) => {
ListItem() {
NavRouter() {
Text(getStringData($r('app.string.nav_router')) + item)
.width("100%")
.height(72)
.backgroundColor('#FFFFFF')
.borderRadius(24)
.fontSize(16)
.fontWeight(500)
.textAlign(TextAlign.Center)
NavDestination() {
Text("NavDestinationContent" + item)
}
.title("NavDestinationTitle" + item)
}
}
.id('Navigation'+item)
}, item => item)
}
.width("90%")
.margin({ top: 12 })
}
.title("主标题")
.mode(NavigationMode.Stack)
.menus([
{value: "", icon: "./image/ic_public_search.svg", action: ()=> {}},
{value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
{value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
{value: "", icon: "./image/ic_public_add.svg", action: ()=> {}},
{value: "", icon: "./image/ic_public_add.svg", action: ()=> {}}
])
.toolBar({items: [
{value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
{value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}},
{value: "func", icon: "./image/ic_public_highlights.svg", action: ()=> {}}
]})
}
.height('100%')
.width('100%')
.backgroundColor('#F1F3F5')
}
}

86
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/scrollSample/ScrollSample.ets
View File

@ -17,13 +17,14 @@ import { TitleBar } from '../../../../common/TitleBar'
@Extend(Text) function leftTitleStyle() {
.fontColor($r('app.color.sub_title_color'))
.fontSize(14)
.fontSize(18)
.height(22)
.alignSelf(ItemAlign.Start)
.margin({ left: 12, top: 12 })
.margin({ left: 12, bottom: 8 })
}
@Extend(Column) function cardStyle() {
.margin({ bottom: 12 })
.backgroundColor(Color.White)
.borderRadius(24)
.width('100%')
@ -53,36 +54,59 @@ struct ScrollSample {
build() {
Column() {
TitleBar({ title: $r('app.string.scroll_name') })
Text($r('app.string.scroll_horizontal'))
.leftTitleStyle()
Column() {
Scroll() {
Image($r('app.media.banner'))
.width('150%')
.height('100%')
.objectFit(ImageFit.Contain)
}
.scrollable(this.scroll_direction)
.width('100%')
.height(200)
}.cardStyle()
Text($r('app.string.scroll_vertical'))
.leftTitleStyle()
Column() {
Scroll() {
Image($r('app.media.banner'))
Scroll() {
Column() {
Text($r('app.string.scroll_horizontal'))
.leftTitleStyle()
Column() {
Scroll() {
Image($r('app.media.banner'))
.width('150%')
.height('100%')
.objectFit(ImageFit.Contain)
}
.scrollable(this.scroll_direction)
.width('100%')
.height('150%')
.objectFit(ImageFit.Contain)
.height(200)
}.cardStyle()
Text($r('app.string.scroll_vertical'))
.leftTitleStyle()
Column() {
Scroll() {
Image($r('app.media.banner'))
.width('100%')
.height('150%')
.objectFit(ImageFit.Contain)
}
.scrollable(ScrollDirection.Vertical)
.width('100%')
.height(200)
}.cardStyle()
Text($r('app.string.avoiding_input_method_testing'))
.leftTitleStyle()
Column() {
TextInput({ placeholder: $r('app.string.avoiding_input_method_testing') })
.width('95%').height(50).enableKeyboardOnFocus(false).id('test_input')
Scroll() {
Image($r('app.media.banner'))
.width('100%')
.height('150%')
.objectFit(ImageFit.Contain)
}
.id('avoiding_input_scroll')
.scrollable(ScrollDirection.Vertical)
.width('100%')
.height(200)
}.cardStyle()
.margin({ bottom: 80 })
}
.scrollable(ScrollDirection.Vertical)
.width('100%')
.height(200)
}.cardStyle()
}.backgroundColor($r('app.color.background_light_gray'))
.width('100%')
.height('100%')
.padding({ left: 20, right: 20 })
.constraintSize({ minHeight: '100%' })
}
.backgroundColor($r('app.color.background_light_gray'))
.width('100%')
.padding({ left: 20, right: 20 })
}
}
}

18
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperControlPanel.ets
View File

@ -24,6 +24,8 @@ export struct PropertiesControlPanel {
@Link loop: boolean;
@Link autoPlay: boolean;
@Link interval: number;
@Link nextMarginLength: number;
@Link prevMarginLength: number;
build() {
Column() {
@ -60,6 +62,22 @@ export struct PropertiesControlPanel {
testId:"swiper_005"
})
CommonItemSlider({
changeValue: $nextMarginLength,
min: 0,
max: 50,
name: $r('app.string.swiper_next_margin'),
testId:"swiper_008"
})
CommonItemSlider({
changeValue: $prevMarginLength,
min: 0,
max: 50,
name: $r('app.string.swiper_previous_margin'),
testId:"swiper_009"
})
CommonItemSelect({
name: $r('app.string.swiper_properties_duration'),
selects: ['400', '1000', '2000'],

8
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/scrollAndSwipe/swiperSample/SwiperSample.ets
View File

@ -45,6 +45,8 @@ struct SwiperSample {
@State loop: boolean = false;
@State autoPlay: boolean = false;
@State interval : number = 1000;
@State nextMarginLength: number = 0
@State prevMarginLength: number = 0
private controller: SwiperController = new SwiperController();
private data: number[] = [];
@ -77,6 +79,8 @@ struct SwiperSample {
}
})
}
.nextMargin(this.nextMarginLength)
.prevMargin(this.prevMarginLength)
.disableSwipe(this.isDisableSwipe)
.itemSpace(this.itemSpace)
.vertical(this.isVertical)
@ -122,7 +126,9 @@ struct SwiperSample {
duration: $duration,
loop: $loop,
autoPlay: $autoPlay,
interval : $interval
interval : $interval,
nextMarginLength: $nextMarginLength,
prevMarginLength: $prevMarginLength
})
}
.backgroundStyle()

2
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/searchSample/SearchSample.ets
View File

@ -47,7 +47,7 @@ struct SearchSample {
Text('onCopy:' + this.copyValue).fontSize(18).margin(15)
Text('onCut:' + this.cutValue).fontSize(18).margin(15)
Text('onPaste:' + this.pasteValue).fontSize(18).margin(15)
Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
Search({ value: this.changeValue, placeholder: $r('app.string.search_placeholder'), controller: this.controller })
.searchButton('SEARCH')
.id('search_001')
.width('95%')

18
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/ChangePanel.ets
View File

@ -16,13 +16,13 @@
import { CommonItemSlider, CommonItemSelect, CommonItemColorSelect } from '../../../../common/AttributeModificationTool'
import { selectData } from '../../ComponentData'
import { getStringArrayData } from '../../../../data/ResourceDataHandle'
import { TestType } from '@ohos/hypium'
@Component
export struct ChangePanel {
@Link letterSpacing: number
@Link decoration: TextDecorationType
@Link decorationColor: Color
@Link lineHeight: number
build() {
Column() {
@ -31,7 +31,15 @@ export struct ChangePanel {
min: 0,
max: 12,
name: $r('app.string.span_letter_spacing'),
testId: `span_001`,
testId:'Slider1'
})
CommonItemSlider({
changeValue: $lineHeight,
min: 0,
max: 100,
name: $r('app.string.span_line_height'),
testId:'Slider2'
})
CommonItemSelect({
@ -51,14 +59,12 @@ export struct ChangePanel {
default:
this.decoration = TextDecorationType.None
}
},
testId: `test_itemSelect`
}
})
CommonItemColorSelect({
name: $r('app.string.span_decoration_color'),
selectColor: $decorationColor,
testId: `test_colorSelect`
selectColor: $decorationColor
})
}
}

33
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/spanSample/SpanSample.ets
View File

@ -32,6 +32,7 @@ struct SpanSample {
@State decoration: TextDecorationType = TextDecorationType.None
@State textCase: TextCase = TextCase.Normal
@State decorationColor: Color = Color.Red
@State lineHeight: number = 3
build() {
Column() {
@ -59,25 +60,47 @@ struct SpanSample {
Column() {
Text() {
Span($r('app.string.span_text_decoration'))
.fontSize(20)
.font({
size: 20
})
.height(50)
.lineHeight(this.lineHeight)
.decoration({
type: this.decoration, // Decoration type
color: this.decorationColor // Line color
})
Span($r('app.string.span_text_spacing'))
.fontSize(20)
.font({
size: 20
})
.lineHeight(this.lineHeight)
.letterSpacing(this.letterSpacing) // Letter spacing
}
.height(50)
.height(60)
.fontSize(50)
ChangePanel({
letterSpacing: $letterSpacing,
decoration: $decoration,
decorationColor: $decorationColor
decorationColor: $decorationColor,
lineHeight: $lineHeight
})
}
.backgroundStyle()
IntroductionTitle({ introduction: $r('app.string.span_inherits_text_attribute') })
Column() {
Text() {
Span($r('app.string.span_does_not_inherit_text_attribute'))
.fontSize(20)
.height(50)
Span($r('app.string.span_inherits_text_attribute'))
}
.height(70)
.fontSize(10)
}
.backgroundStyle()
.margin({ bottom: 80 })
}
.constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least

91
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textAreaSample/TextAreaSample.ets
View File

@ -17,9 +17,10 @@ import { IntroductionTitle } from '../../../../common/IntroductionTitle';
import ShowToast from '../../../../util/ShowToast';
import { TitleBar } from '../../../../common/TitleBar';
import { LEFT_PADDING, RIGHT_PADDING } from '../../ComponentData';
import {textAreaControlPanel} from './ChangePanel';
import { textAreaControlPanel } from './ChangePanel';
import Logger from '../../../../util/Logger'
@Extend(Column) function cardStyle(){
@Extend(Column) function cardStyle() {
.borderRadius(24)
.backgroundColor($r('app.color.white'))
.width('100%')
@ -29,29 +30,33 @@ import {textAreaControlPanel} from './ChangePanel';
@Entry
@Component
struct TextAreaSample {
@State startSelect: number = 0
@State endSelect: number = 0
@State maxSelect: number = 0
@State selects: string[] = ['0']
private select: number = 1
@State textAreaSet: string = '';
@State placeholderColor: Color = Color.Blue;
@State textAlign: TextAlign = TextAlign.Start;
@State caretColor:Color = Color.Blue;
@State caretColor: Color = Color.Blue;
@State copyOptions: CopyOptions = CopyOptions.None;
controller: TextAreaController = new TextAreaController();
build() {
Column(){
TitleBar({title:$r('app.string.textarea_title')})
Scroll(){
Column() {
TitleBar({ title: $r('app.string.textarea_title') })
Scroll() {
Column() {
IntroductionTitle({introduction:$r('app.string.textarea_show')})
Column(){
IntroductionTitle({ introduction: $r('app.string.textarea_show') })
Column() {
TextArea({
text:this.textAreaSet,
text: this.textAreaSet,
placeholder: 'This textArea can contain more than one line, please input your word.',
controller:this.controller
controller: this.controller
})
.id(`textarea_001`)
.placeholderColor(this.placeholderColor)
.placeholderFont({size: 16,weight:400})
.placeholderFont({ size: 16, weight: 400 })
.textAlign(this.textAlign)
.caretColor(this.caretColor)
.copyOption(this.copyOptions)
@ -60,23 +65,71 @@ struct TextAreaSample {
.margin(20)
.fontSize(16)
.enableKeyboardOnFocus(false)
.onChange(()=>{
.onChange((value: string) => {
ShowToast.shortToast('The input have changed.')
this.textAreaSet = value
this.maxSelect = value.length
for (let i = 0;i < this.maxSelect; i++) {
this.selects[i] = i.toString()
}
})
.onCopy(()=>{
.onCopy(() => {
ShowToast.shortToast('copy')
})
.onCut(()=>{
.onCut(() => {
ShowToast.shortToast('cut')
})
.onPaste(()=>{
.onPaste(() => {
ShowToast.shortToast('paste')
})
}.cardStyle()
IntroductionTitle({introduction:$r('app.string.textarea_control')})
Column(){
textAreaControlPanel({placeholderColor:$placeholderColor,textAlign:$textAlign,caretColor:$caretColor,copyOption:$copyOptions})
IntroductionTitle({ introduction: $r('app.string.textarea_control') })
Column() {
textAreaControlPanel({
placeholderColor: $placeholderColor,
textAlign: $textAlign,
caretColor: $caretColor,
copyOption: $copyOptions
})
}.cardStyle()
IntroductionTitle({ introduction: $r('app.string.text_area_set_text_selection') })
Column() {
Row() {
Text($r('app.string.text_input_set_text_selection_start_select'))
Column() {
TextPicker({ range: this.selects, selected: this.select })
.onChange((value: string, index: number) => {
this.startSelect = parseInt(value)
Logger.info(`Picker item changed, value: ${value}, index: ${index}`)
})
}
.height(90)
.width(100)
Text($r('app.string.text_input_set_text_selection_end_select'))
Column() {
TextPicker({ range: this.selects, selected: this.select })
.onChange((value: string, index: number) => {
this.endSelect = parseInt(value)
Logger.info(`Picker item changed, value: ${value}, index: ${index}`)
})
}
.id('end_select')
.height(90)
.width(100)
Button($r('app.string.text_area_set_text_selection'))
.id('button_to_select')
.onClick(() => {
this.controller.setTextSelection(this.startSelect, this.endSelect)
Logger.info(`startSelect: ${this.startSelect}, endSelect: ${this.endSelect}`)
})
}
.justifyContent(FlexAlign.SpaceAround)
.width('100%')
}.cardStyle()
}
.width('100%')

55
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textInputSample/TextInputSample.ets
View File

@ -16,6 +16,7 @@
import { CommonItemSelect } from '../../../../common/AttributeModificationTool';
import { IntroductionTitle } from '../../../../common/IntroductionTitle';
import ShowToast from '../../../../util/ShowToast';
import Logger from '../../../../util/Logger';
import { TitleBar } from '../../../../common/TitleBar';
@Extend(Column) function backgroundStyle() {
@ -35,9 +36,16 @@ struct TextInputSample {
@State inputType: InputType = InputType.Normal
@State inputContent: string = ''
@State typePlaceholder: Resource = $r('app.string.text_input_normal_type')
@State inputSelectContent: string = ''
@State startSelect: number = 0
@State endSelect: number = 0
@State maxSelect: number = 0
@State selects: string[] = ['0']
private select: number = 1
private maxLength: number = 12
private context: any = getContext(this)
private inputController: TextInputController = new TextInputController()
private inputSelectController: TextInputController = new TextInputController()
build() {
Column() {
@ -189,6 +197,53 @@ struct TextInputSample {
}
})
}
IntroductionTitle({ introduction: $r('app.string.text_input_set_text_selection') })
Column() {
TextInput({ controller: this.inputSelectController })
.enableKeyboardOnFocus(false)
.id('test_input_to_select')
.onChange((value: string) => {
this.inputSelectContent = value
this.maxSelect = value.length
for (let i = 0;i < this.maxSelect; i++) {
this.selects[i] = i.toString()
}
})
Row() {
Text($r('app.string.text_input_set_text_selection_start_select'))
Column() {
TextPicker({ range: this.selects, selected: this.select })
.onChange((value: string, index: number) => {
this.startSelect = parseInt(value)
Logger.info(`Picker item changed, value: ${value}, index: ${index}`)
})
}
.height(90)
.width(100)
Text($r('app.string.text_input_set_text_selection_end_select'))
Column() {
TextPicker({ range: this.selects, selected: this.select })
.onChange((value: string, index: number) => {
this.endSelect = parseInt(value)
Logger.info(`Picker item changed, value: ${value}, index: ${index}`)
})
.id('end_select')
}
.height(90)
.width(100)
Button($r('app.string.text_area_set_text_selection'))
.id('button_to_select')
.onClick(() => {
this.inputSelectController.setTextSelection(this.startSelect, this.endSelect)
Logger.info(`startSelect: ${this.startSelect}, endSelect: ${this.endSelect}`)
})
}
.justifyContent(FlexAlign.SpaceAround)
.width('100%')
}
.backgroundStyle()
.margin({ bottom: 70 })
}
.constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least

20
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/ChangePanel.ets
View File

@ -13,7 +13,7 @@
* limitations under the License.
*/
import { CommonItemSlider, CommonItemSelect, CommonItemColorSelect } from '../../../../common/AttributeModificationTool';
import { CommonItemSlider, CommonItemSelect, CommonItemColorSelect } from '../../../../common/AttributeModificationTool'
@Component
export struct ChangeTextCase {
@ -25,8 +25,8 @@ export struct ChangeTextCase {
testId: 'select5',
name: $r('app.string.text_text_case'),
selects: [$r('app.string.text_text_case_normal'),
$r('app.string.text_text_case_uppercase'),
$r('app.string.text_text_case_lowercase')],
$r('app.string.text_text_case_uppercase'),
$r('app.string.text_text_case_lowercase')],
callback: (index) => {
switch (index) {
case 1:
@ -75,8 +75,8 @@ export struct ChangeTextAttribute {
testId: 'select1',
name: $r('app.string.text_text_align_type'),
selects: [$r('app.string.text_text_align_start'),
$r('app.string.text_text_align_center'),
$r('app.string.text_text_align_end')],
$r('app.string.text_text_align_center'),
$r('app.string.text_text_align_end')],
callback: (index) => {
switch (index) {
case 1:
@ -95,8 +95,8 @@ export struct ChangeTextAttribute {
testId: 'select2',
name: $r('app.string.text_overflow'),
selects: [$r('app.string.text_none'),
$r('app.string.text_text_over_flow_clip'),
$r('app.string.text_text_over_flow_ellipsis')],
$r('app.string.text_text_over_flow_clip'),
$r('app.string.text_text_over_flow_ellipsis')],
callback: (index) => {
switch (index) {
case 1:
@ -119,9 +119,9 @@ export struct ChangeTextAttribute {
testId: 'select3',
name: $r('app.string.text_decoration_type'),
selects: [$r('app.string.text_none'),
$r('app.string.text_decoration_type_line_through'),
$r('app.string.text_decoration_type_over_line'),
$r('app.string.text_decoration_type_under_line')],
$r('app.string.text_decoration_type_line_through'),
$r('app.string.text_decoration_type_over_line'),
$r('app.string.text_decoration_type_under_line')],
callback: (index) => {
switch (index) {
case 1:

38
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/textSample/TextSample.ets
View File

@ -13,8 +13,9 @@
* limitations under the License.
*/
import { ChangeTextCase, ChangeTextAttribute } from './ChangePanel';
import { TitleBar } from '../../../../common/TitleBar';
import measure from '@ohos.measure'
import { ChangeTextCase, ChangeTextAttribute } from './ChangePanel'
import { TitleBar } from '../../../../common/TitleBar'
@Extend(Column) function backgroundStyle() {
.size({ width: '100%' })
@ -31,12 +32,16 @@ struct TextSample {
@State lineHeight: number = 23
@State textMaxLines: number = -1
@State letterSpacing: number = 2
@State fontColor: Color = Color.Blue
@State fontColor: string = '#FF000000'
@State textCase: TextCase = TextCase.Normal
@State textAlign: TextAlign = TextAlign.Start
@State textOverFlow: TextOverflow = TextOverflow.None
@State styleForDecorative: TextDecorationType = TextDecorationType.None
@State textContent: Resource = $r('app.string.text_content')
textSize : SizeOptions = measure.measureTextSize({
textContent: $r('app.string.text_content'),
})
build() {
Column() {
@ -66,6 +71,33 @@ struct TextSample {
textOverFlow: $textOverFlow,
styleForDecorative: $styleForDecorative,
})
Row(){
Text($r('app.string.text_width'))
Blank()
Text(this.textSize.width.toString() + ' px')
.width(150)
.fontSize(20)
.textAlign(TextAlign.Center)
}
.size({ width: '100%', height: 42 })
.padding({ left: 0 , right: 0 })
.borderRadius(0 )
.backgroundColor( Color.Transparent)
Row(){
Text($r('app.string.text_height'))
Blank()
Text(this.textSize.height.toString() + ' px')
.width(150)
.fontSize(20)
.textAlign(TextAlign.Center)
}
.size({ width: '100%', height: 42 })
.padding({ left: 0 , right: 0 })
.borderRadius(0 )
.backgroundColor( Color.Transparent)
}
.backgroundStyle()

69
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/actionSheetDialogSample/ActionSheetDialogSample.ets
View File

@ -24,6 +24,15 @@ import { TitleBar } from '../../../../common/TitleBar';
.justifyContent(FlexAlign.SpaceBetween)
}
@Extend(Column) function columnStyle() {
.width('100%')
.borderRadius(24)
.margin({ top: 8, bottom: 8 })
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(Color.White)
.padding(15)
}
@Extend(Button) function buttonStyle() {
.margin(8)
.fontSize(16)
@ -34,6 +43,8 @@ import { TitleBar } from '../../../../common/TitleBar';
@Entry
@Component
struct ListDialogSample {
private mTextInputController: TextInputController = new TextInputController()
build() {
Column() {
TitleBar({ title: $r('app.string.action_sheet_dialog') })
@ -384,7 +395,65 @@ struct ListDialogSample {
.id('sheet_click_contentButton')
}
.rowStyle()
IntroductionTitle({ introduction: $r('app.string.avoiding_input_method_testing') })
Column() {
Row() {
TextInput({
controller: this.mTextInputController,
placeholder: $r('app.string.avoiding_input_method_testing')
})
.layoutWeight(1).height(50).id('test_input')
}.rowStyle()
Row() {
Button($r('app.string.alert_dialog_bottom'))
.id('btn_test_input')
.buttonStyle()
.onClick(() => {
this.mTextInputController.setTextSelection(1, 2)
ActionSheet.show(
{
title: $r('app.string.alert_dialog_prompt'),
message: $r('app.string.alert_dialog_bottom'),
confirm: {
value: $r('app.string.alert_dialog_confirm'),
action: () => {
ShowToast.shortToast($r('app.string.alert_dialog_bottom'));
}
},
sheets: [
{
title: $r('app.string.text_picker_text_apple'),
action: () => {
ShowToast.shortToast($r('app.string.text_picker_text_apple'));
}
},
{
title: $r('app.string.text_picker_text_banana'),
action: () => {
ShowToast.shortToast($r('app.string.text_picker_text_banana'));
}
},
{
title: $r('app.string.text_picker_text_peach'),
action: () => {
ShowToast.shortToast($r('app.string.text_picker_text_peach'));
}
}
],
cancel: () => {
ShowToast.shortToast($r('app.string.alert_dialog_cancel'));
},
alignment: DialogAlignment.Bottom
}
);
})
.id('sheet_bottomButton')
}.rowStyle()
}.columnStyle().margin({ bottom: 80 })
}
.padding(12)
.constraintSize({ minHeight: '100%' })
}
}

50
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/globalMethods/dialogs/alertDialogSample/AlertDialogSample.ets
View File

@ -24,6 +24,15 @@ import { TitleBar } from '../../../../common/TitleBar'
.justifyContent(FlexAlign.SpaceBetween)
}
@Extend(Column) function columnStyle() {
.width('100%')
.borderRadius(24)
.margin({ top: 8, bottom: 8 })
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor(Color.White)
.padding(15)
}
@Extend(Button) function buttonStyle() {
.margin(8)
.fontSize(16)
@ -36,6 +45,8 @@ import { TitleBar } from '../../../../common/TitleBar'
@Entry
@Component
struct WarningDialogSample {
private mTextInputController: TextInputController = new TextInputController()
build() {
Column() {
TitleBar({ title: $r('app.string.alert_dialog') })
@ -249,7 +260,7 @@ struct WarningDialogSample {
cancel: () => {
ShowToast.shortToast($r('app.string.alert_dialog_cancel'))
},
offset: { dx: 20, dy: 30 }
offset: { dx: 20, dy: 150 }
}
)
}).id('test_lowRightButton')
@ -323,7 +334,44 @@ struct WarningDialogSample {
}).id('test_4GridButton')
}
.rowStyle()
IntroductionTitle({ introduction: $r('app.string.avoiding_input_method_testing') })
Column() {
Row() {
TextInput({
controller: this.mTextInputController,
placeholder: $r('app.string.avoiding_input_method_testing')
})
.layoutWeight(1).height(50).id('test_input')
}.rowStyle()
Row() {
Button($r('app.string.alert_dialog_bottom'))
.buttonStyle()
.onClick(() => {
this.mTextInputController.setTextSelection(1, 2)
AlertDialog.show(
{
title: $r('app.string.alert_dialog_prompt'),
message: $r('app.string.alert_dialog_bottom'),
confirm: {
value: $r('app.string.alert_dialog_confirm'),
backgroundColor: $r('app.color.background_grey'),
action: () => {
ShowToast.shortToast($r('app.string.alert_dialog_bottom'))
}
},
cancel: () => {
ShowToast.shortToast($r('app.string.alert_dialog_cancel'))
},
alignment: DialogAlignment.Bottom
}
)
}).id('test_bottomButton')
}.rowStyle()
}.columnStyle().margin({ bottom: 80 })
}
.padding(12)
.constraintSize({ minHeight: '100%' })
}
}

7
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/UniversialData.ets
View File

@ -17,6 +17,11 @@ import { SecondLevelCategory, ThirdLevelCategory } from '../../model/Categorical
const GRAPHIC_TRANSFORMATION: ThirdLevelCategory[] =
[
{
image: $r('app.media.ic_prop_background'),
title: $r('app.string.safe_area'),
url: 'pages/universal/properties/safeAreaSample/SafeAreaSample'
},
{
image: $r('app.media.ic_prop_background'),
title: $r('app.string.prop_foreground'),
@ -257,7 +262,7 @@ export let visibileTypes: { value: Resource }[] =
export let placementsNameData = ['TopLeft', 'Top', 'TopRight', 'RightTop', 'Right', 'RightBottom', 'LeftTop', 'Left', 'LeftBottom', 'BottomLeft', 'Bottom', 'BottomRight']
export let hitTestModeNameData = ['Default', 'Block', 'Transparent', 'None']
export let hoverEffectNameData = ['None', 'Highlight', 'Auto', 'Scale']
export let pointerStyleNameData = ['DEFAULT', 'EAST', 'WEST', 'SOUTH','NORTH','WEST_EAST','NORTH_SOUTH','NORTH_EAST','NORTH_WEST','SOUTH_EAST','SOUTH_WEST','NORTH_EAST_SOUTH_WEST','NORTH_WEST_SOUTH_EAST','CROSS','CURSOR_COPY','CURSOR_FORBID','COLOR_SUCKER','HAND_GRABBING','HAND_OPEN','HAND_POINTING','HELP','MOVE','RESIZE_LEFT_RIGHT','RESIZE_UP_DOWN','SCREENSHOT_CHOOSE','SCREENSHOT_CURSOR','TEXT_CURSOR','ZOOM_IN','ZOOM_OUT','MIDDLE_BTN_EAST','MIDDLE_BTN_WEST','MIDDLE_BTN_SOUTH','MIDDLE_BTN_NORTH','MIDDLE_BTN_NORTH_SOUTH','MIDDLE_BTN_NORTH_EAST','MIDDLE_BTN_NORTH_WEST','MIDDLE_BTN_SOUTH_EAST','MIDDLE_BTN_SOUTH_WEST','MIDDLE_BTN_NORTH_SOUTH_WEST_EAST']
export let selectImageSizeData: Resource[] = [$r('app.string.background_image_size_cover'), $r('app.string.background_image_size_contain')]

192
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/gridSettingsSample/GridSettingsSample.ets
View File

@ -15,6 +15,7 @@
import { IntroductionTitle } from '../../../../common/IntroductionTitle';
import { TitleBar } from '../../../../common/TitleBar';
import Logger from '../../../../util/Logger';
@Extend(Row) function rowStyle() {
.borderRadius(24)
@ -22,99 +23,142 @@ import { TitleBar } from '../../../../common/TitleBar';
.backgroundColor(Color.White)
.margin({ left: 12, right: 12 })
}
@Extend(Column) function columnStyle() {
.borderRadius(24)
.width('100%')
.backgroundColor(Color.White)
.margin({ left: 12, right: 12 })
}
@Entry
@Component
struct GridSettingsSample {
@State Number: String[] = ['0', '1', '2', '3']
build() {
Column() {
TitleBar({ title: $r('app.string.grid_settings') })
IntroductionTitle({ introduction: $r('app.string.grid_settings_useSize') })
Column() {
GridContainer() {
Row() {
Row() {
Text($r('app.string.mouse_event_mouseBtn_left'))
.fontSize(16)
}
.useSizeType({
xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 },
md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 }
})
.height('100%')
.backgroundColor(0x66bbb2cb)
Scroll() {
Column() {
IntroductionTitle({ introduction: $r('app.string.grid_settings_useSize') })
Column() {
GridContainer() {
Row() {
Row() {
Text($r('app.string.mouse_event_mouseBtn_left'))
.fontSize(16)
}
.useSizeType({
xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 },
md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 }
})
.height('100%')
.backgroundColor(0x66bbb2cb)
Row() {
Text($r('app.string.location_settings_center'))
.fontSize(16)
}
.useSizeType({
xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
})
.height('100%')
.backgroundColor(0x66b6c5d1)
Row() {
Text($r('app.string.location_settings_center'))
.fontSize(16)
}
.useSizeType({
xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
})
.height('100%')
.backgroundColor(0x66b6c5d1)
Row() {
Text($r('app.string.mouse_event_mouseBtn_right'))
.fontSize(16)
Row() {
Text($r('app.string.mouse_event_mouseBtn_right'))
.fontSize(16)
}
.useSizeType({
xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 },
md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 }
})
.height('100%')
.backgroundColor(0x66bbb2cb)
}
.height(180)
.rowStyle()
}
.useSizeType({
xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 },
md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 }
})
.height('100%')
.backgroundColor(0x66bbb2cb)
.height(200)
}
.height(180)
.rowStyle()
}
.height(200)
}
.width('100%')
.width('100%')
IntroductionTitle({ introduction: $r('app.string.grid_settings_gridSpan') })
Column() {
GridContainer() {
Row() {
Row() {
Text($r('app.string.mouse_event_mouseBtn_left'))
.fontSize(16)
}
.gridSpan(1)
.height('100%')
.backgroundColor(0x66bbb2cb)
IntroductionTitle({ introduction: $r('app.string.grid_settings_gridSpan') })
Column() {
GridContainer() {
Row() {
Row() {
Text($r('app.string.mouse_event_mouseBtn_left'))
.fontSize(16)
}
.gridSpan(1)
.height('100%')
.backgroundColor(0x66bbb2cb)
Row() {
Text($r('app.string.location_settings_center'))
.fontSize(16)
}
.useSizeType({
xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
})
.height('100%')
.gridSpan(2)
.gridOffset(1)
.backgroundColor(0x66b6c5d1)
Row() {
Text($r('app.string.location_settings_center'))
.fontSize(16)
}
.useSizeType({
xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
})
.height('100%')
.gridSpan(2)
.gridOffset(1)
.backgroundColor(0x66b6c5d1)
Row() {
Text($r('app.string.mouse_event_mouseBtn_right'))
.fontSize(16)
Row() {
Text($r('app.string.mouse_event_mouseBtn_right'))
.fontSize(16)
}
.gridSpan(1)
.gridOffset(3)
.height('100%')
.backgroundColor(0x66bbb2cb)
}
.height(180)
.rowStyle()
}
.gridSpan(1)
.gridOffset(3)
.height('100%')
.backgroundColor(0x66bbb2cb)
.height(200)
}
.height(180)
.rowStyle()
.width('100%')
IntroductionTitle({ introduction: $r('app.string.grid_edgeEffect_spring') })
Column() {
Grid() {
ForEach(this.Number, (day: string) => {
ForEach(this.Number, (day: string) => {
GridItem() {
Text(day)
.fontSize(16)
.backgroundColor(0x66bbb2cb)
.width('100%')
.height(80)
.textAlign(TextAlign.Center)
}
}, day => day)
}, day => day)
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.edgeEffect(EdgeEffect.Spring)
.onScrollIndex((first: number) => {
Logger.info(first.toString())
})
.width('90%')
.backgroundColor(0x66b6c5d1)
.height(300)
.scrollBar(BarState.On)
}
.columnStyle()
}
.height(200)
.constraintSize({ minHeight: '100%' })
.padding(12)
}
.width('100%')
}
.height('100%')
.width('100%')
.backgroundColor($r('app.color.background_shallow_grey'))
}

221
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/interactionSample/InteractionSample.ets
View File

@ -13,11 +13,15 @@
* limitations under the License.
*/
import { TitleBar } from '../../../../common/TitleBar'
import pointer from '@ohos.multimodalInput.pointer'
import promptAction from '@ohos.prompt'
import prompt from '@ohos.prompt'
import window from '@ohos.window'
import { TitleBar } from '../../../../common/TitleBar'
import { getStringData } from '../../../../data//ResourceDataHandle'
import { placementsNameData, hitTestModeNameData, hoverEffectNameData } from '../../UniversialData'
import { placementsNameData, hitTestModeNameData, hoverEffectNameData, pointerStyleNameData } from '../../UniversialData'
import Logger from '../../../../util/Logger'
import measure from '@ohos.measure'
@Extend(Text) function leftTitleStyle() {
.fontColor($r('app.color.sub_title_color'))
@ -50,6 +54,7 @@ import { placementsNameData, hitTestModeNameData, hoverEffectNameData } from '..
@Entry
@Component
struct Interaction {
@State isMask: boolean = false
@State buttonIsDisabled: boolean = false
@State listIsDisabled: boolean = false
@State alertText: string = ''
@ -65,27 +70,32 @@ struct Interaction {
@State mComponentDisabled: boolean = false
@State mComponentFocused: boolean = false
@State mTabIndex: number = 0
@State mHoverEffect: HoverEffect = HoverEffect.None;
@State mHoverEffect: HoverEffect = HoverEffect.None
@State mPointerStyle: pointer.PointerStyle = pointer.PointerStyle.DEFAULT
private mTouchableTestResult: string = ''
private mToastTimer = null
private mMenuLists = [
{
value: getStringData($r('app.string.components_interaction_menuone')),
icon: $r('app.media.ic_other'),
action: () => {
}
},
{
value: getStringData($r('app.string.components_interaction_menutwo')),
icon: $r('app.media.ic_other'),
action: () => {
}
},
{
value: getStringData($r('app.string.components_interaction_menuthree')),
icon: $r('app.media.ic_other'),
action: () => {
}
},
{
value: getStringData($r('app.string.components_interaction_menufour')),
icon: $r('app.media.ic_other'),
action: () => {
}
}
@ -126,27 +136,46 @@ struct Interaction {
Row({ space: 20 }) {
Image($r("app.media.icon")).width(24).height(24)
Text('Content').fontSize(20).fontColor(Color.White)
}.width(200).height(80).padding(10)
}.width(140).height(40).padding(10)
}
@Builder menuBuilder() {
Menu() {
MenuItem({ startIcon: $r('app.media.ic_other'), content: $r('app.string.components_interaction_menuone') })
MenuItemGroup({ header: $r('app.string.components_interaction_menutwo') }) {
MenuItem({
startIcon: $r('app.media.ic_other'),
content: $r('app.string.components_interaction_menuthree')
})
MenuItem({
startIcon: $r('app.media.ic_other'),
content: $r('app.string.components_interaction_menufour')
})
}
}
}
private context: any = getContext(this)
private placementsNameArray = placementsNameData
private hitTestModeNameArray = hitTestModeNameData
private hoverEffectNameArray = hoverEffectNameData
private pointerStyleNameArray = pointerStyleNameData
@Builder tabbarTitle(name: string | Resource, index: number) {
Stack() {
Column() {
Text(name)
.fontSize(22)
.fontColor(this.mTabIndex === index ? $r('app.color.title_colorone') : $r('app.color.title_colortwo'))
.margin({ bottom: 5 })
if (this.mTabIndex === index) {
Row()
.width(measure.measureTextSize({textContent:name}).width)
.backgroundColor($r('app.color.title_colorone'))
.width('100%')
.height(2)
.position({ y: 48 })
}
}.width(48)
}
.margin(8)
.constraintSize({ minWidth: 32 })
.height(56)
}
@ -283,6 +312,13 @@ struct Interaction {
.onChange((value) => {
this.mPlacementOnTop = value
})
Text($r('app.string.interaction_mask'))
.fontSize(15)
Checkbox()
.select(this.isMask)
.onChange((value) => {
this.isMask = value
})
}.alignSelf(ItemAlign.Start)
Text($r('app.string.interaction_arrowoffset'))
@ -319,7 +355,8 @@ struct Interaction {
action: () => {
this.handlePopup = false
}
}
},
mask: this.isMask
}).id('test_popButton')
}.cardStyle()
@ -343,6 +380,7 @@ struct Interaction {
}.width('100%')
Button($r('app.string.interaction_showcustompopup'))
.margin({ bottom: 30 })
.onClick(() => {
this.handleCustomPopup = true;
})
@ -524,27 +562,93 @@ struct Interaction {
TabContent() {
Column() {
Blank()
Row() {
Blank()
ForEach([1, 2, 3, 4, 5], (item) => {
Scroll() {
Column() {
Text($r('app.string.bind_menu_customBuilder'))
.leftTitleStyle()
Column() {
Image($r('app.media.ic_other'))
.width(30)
.height(30)
Text($r('app.string.option'))
.fontSize(15)
}
.bindMenu(this.mMenuLists)
Text($r('app.string.click_on_any_action_below'))
.leftTitleStyle()
Row() {
Blank()
ForEach([1, 2, 3, 4, 5], (item) => {
Column() {
Image($r('app.media.ic_other'))
.width(30)
.height(30)
Text($r('app.string.option'))
.fontSize(15)
}
.id('menuBuilder' + item)
.bindMenu(this.menuBuilder)
Blank()
})
}.width('100%')
Blank()
})
}.width('100%')
Blank()
}.cardStyle().height(250)
Text($r('app.string.bind_menu_content'))
.leftTitleStyle()
Column() {
Text($r('app.string.click_on_any_action_below'))
.leftTitleStyle()
Row() {
Blank()
ForEach([1, 2, 3, 4, 5], (item) => {
Column() {
Image($r('app.media.ic_other'))
.width(30)
.height(30)
Text($r('app.string.option'))
.fontSize(15)
}
.id('mMenuLists' + item)
.bindMenu(this.mMenuLists)
Blank()
})
}.width('100%')
Blank()
}.cardStyle().height(250)
Text($r('app.string.bind_content_menu'))
.leftTitleStyle()
Column() {
Text($r('app.string.long_press_any_action_below'))
.leftTitleStyle()
Row() {
Blank()
ForEach([1, 2, 3, 4, 5], (item) => {
Column() {
Image($r('app.media.ic_other'))
.width(30)
.height(30)
Text($r('app.string.option'))
.fontSize(15)
}
.id('contextMenu' + item)
.bindContextMenu(
this.menuBuilder,
ResponseType.LongPress,
{
offset: { x: 0, y: 0 }
}
)
Blank()
})
}.width('100%')
Blank()
}.cardStyle().height(250).margin({ bottom: 70 })
}
}
}.height('100%')
.width('100%')
.padding(20)
}.tabBar(this.tabbarTitle($r('app.string.menu'), 5))
.height('100%')
TabContent() {
Column() {
@ -584,10 +688,77 @@ struct Interaction {
}.width('100%')
.padding(12)
}.tabBar(this.tabbarTitle($r('app.string.multiState'), 6))
}.layoutWeight(1)
TabContent() {
Scroll() {
Column() {
Text($r('app.string.multi_short_key'))
.leftTitleStyle()
Column() {
Text($r('app.string.on_short_key'))
.leftTitleStyle()
Button($r('app.string.multi_short_key'))
.onClick(() => {
prompt.showToast({
message: getStringData($r('app.string.short_key_pressed')),
duration: 1000,
});
})
.keyboardShortcut('a', [ModifierKey.CTRL])
}.cardStyle()
Text($r('app.string.set_mouse_style'))
.leftTitleStyle()
Column() {
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.pointerStyleNameArray, (item: string) => {
Row() {
Radio({ value: item, group: 'pointerStyle' })
.id(item)
.checked(this.mPointerStyle === pointer.PointerStyle[item])
.onChange((isChecked: boolean) => {
if (isChecked) {
this.mPointerStyle = pointer.PointerStyle[item];
try {
let promise = window.getLastWindow(this.context);
promise.then((win)=> {
let windowId = win.getWindowProperties().id;
Logger.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(win));
if (windowId < 0) {
Logger.info(`Invalid windowId`);
return;
}
try {
pointer.setPointerStyle(windowId, this.mPointerStyle, error => {
Logger.info(`Set pointer style success`);
});
} catch (error) {
Logger.info(`Set pointer style failed, error: ${JSON.stringify(error, [`code`, `message`])}`);
}
}).catch((err)=>{
Logger.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
});
} catch (exception) {
Logger.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
}
}
})
Text(item)
.fontSize(10)
}.width('50%')
})
}.width('100%')
}.cardStyle()
}.width('100%')
.padding(12)
}
}.tabBar(this.tabbarTitle($r('app.string.multimode_input'), 7))
}
.barOverlap(true)
.onChange((index) => {
this.mTabIndex = index
})
.barOverlap(true)
.barMode(BarMode.Scrollable)
}
.height('100%')

175
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/restoreIdSample/RestoreIdSample.ets
View File

@ -13,8 +13,10 @@
* limitations under the License.
*/
import { IntroductionTitle } from '../../../../common/IntroductionTitle';
import { TitleBar } from '../../../../common/TitleBar';
import { getStringData } from '../../../../data/ResourceDataHandle';
import Logger from '../../../../util/Logger';
@Extend(Button) function buttonStyle() {
.margin(8)
@ -23,9 +25,22 @@ import { getStringData } from '../../../../data/ResourceDataHandle';
.margin({ left: 24, right: 24, top: 12 })
}
@Extend(Column) function cardStyle() {
.backgroundColor(Color.White)
.borderRadius(24)
.width('100%')
.padding(15)
.margin({ left: 12, right: 12, bottom: 12 })
}
@Entry
@Component
struct RestoreIdExample {
@State outSetValueTwo: number = 40
@State fontColor: string = '#182431'
@State selectedFontColor: string = '#007DFF'
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
private apple: string = getStringData($r('app.string.text_picker_text_apple'));
private orange: string = getStringData($r('app.string.text_picker_text_orange'));
private peach: string = getStringData($r('app.string.text_picker_text_peach'));
@ -33,20 +48,160 @@ struct RestoreIdExample {
private banana: string = getStringData($r('app.string.text_picker_text_banana'));
private fruits: string[] = [this.apple, this.orange, this.peach, this.grape, this.banana];
@Builder TabBuilder(index: number, name: string) {
Column() {
Text(name)
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize(16)
.fontWeight(this.currentIndex === index ? 500 : 400)
.lineHeight(22)
.margin({ top: 17, bottom: 7 })
Divider()
.strokeWidth(2)
.color('#007DFF')
.opacity(this.currentIndex === index ? 1 : 0)
}.width('100%')
}
build() {
Column() {
TitleBar({ title: $r('app.string.restore_id') })
List({ space: 8 }) {
ForEach(this.fruits, (item) => {
ListItem() {
Button(item)
.buttonStyle()
}
}, item => item)
Scroll() {
Column() {
IntroductionTitle({ introduction: $r('app.string.list') })
Column() {
List({ space: 8 }) {
ForEach(this.fruits, (item) => {
ListItem() {
Button(item)
.buttonStyle()
}
}, item => item)
}
.alignListItem(ListItemAlign.Center)
.width('100%')
.restoreId(1)
}.cardStyle()
IntroductionTitle({ introduction: $r('app.string.checkbox') })
Column() {
Checkbox()
.select(true)
.selectedColor(0xed6f21)
.restoreId(2)
}.cardStyle()
IntroductionTitle({ introduction: $r('app.string.radio_title') })
Column() {
Radio({ value: 'Radio1', group: 'radioGroup' })
.checked(true)
.restoreId(3)
}.cardStyle()
IntroductionTitle({ introduction: $r('app.string.toggle_title') })
Column() {
Toggle({ type: ToggleType.Switch, isOn: false })
.selectedColor('#007DFF')
.switchPointColor('#FFFFFF')
.restoreId(4)
}.cardStyle()
IntroductionTitle({ introduction: $r('app.string.swiper_name') })
Column() {
Swiper() {
ForEach(['1', '2', '3'], (item: string) => {
Text(item)
.width('90%')
.height(160)
.backgroundColor(0xAFEEEE)
.textAlign(TextAlign.Center)
.fontSize(30)
}, item => item)
}
.cachedCount(2)
.index(1)
.autoPlay(true)
.interval(4000)
.indicator(true)
.loop(true)
.duration(1000)
.itemSpace(0)
.curve(Curve.Linear)
.restoreId(5)
}.cardStyle()
IntroductionTitle({ introduction: $r('app.string.tabs_name') })
Column() {
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor('#00CB87')
}.tabBar(this.TabBuilder(0, 'green'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}.tabBar(this.TabBuilder(1, 'blue'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#FFBF00')
}.tabBar(this.TabBuilder(2, 'yellow'))
TabContent() {
Column().width('100%').height('100%').backgroundColor('#E67C92')
}.tabBar(this.TabBuilder(3, 'pink'))
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.animationDuration(400)
.onChange((index: number) => {
this.currentIndex = index
})
.width(360)
.height(296)
.margin({ top: 52 })
.backgroundColor('#F1F3F5')
.restoreId(6)
}.cardStyle()
IntroductionTitle({ introduction: $r('app.string.tabs_name') })
Column() {
Slider({
value: this.outSetValueTwo,
step: 10,
style: SliderStyle.OutSet
})
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueTwo = value
Logger.info('value:' + value + 'mode:' + mode.toString())
})
.restoreId(7)
Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
}.cardStyle()
IntroductionTitle({ introduction: $r('app.string.select_name') })
Column() {
Select([{ value: 'aaa', icon: $r('app.media.ic_select_global') },
{ value: 'bbb', icon: $r('app.media.ic_select_global') },
{ value: 'ccc', icon: $r('app.media.ic_select_global') },
{ value: 'ddd', icon: $r('app.media.ic_select_global') }])
.selected(2)
.value('TTTTT')
.font({ size: 16, weight: 500 })
.fontColor('#182431')
.selectedOptionFont({ size: 16, weight: 400 })
.optionFont({ size: 16, weight: 400 })
.onSelect((index: number) => {
Logger.info('Select:' + index)
})
.restoreId(8)
}.cardStyle().margin({ bottom: 80 })
}
.padding(12)
.constraintSize({ minHeight: '100%' })
}
.alignListItem(ListItemAlign.Center)
.width('100%')
.restoreId(1)
}
.height('100%')
.width('100%')

166
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/safeAreaSample/ChangePanel.ets Executable file
View File

@ -0,0 +1,166 @@
/*
* Copyright (c) 2022-2023 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { getStringData } from '../../../../data//ResourceDataHandle'
import Logger from '../../../../util/Logger'
@Component
export struct ChangePanel {
@Link mSafeAreaType: SafeAreaType[]
@Link mSafeAreaEdge: SafeAreaEdge[]
build() {
Row() {
Column() {
Row() {
CheckboxGroup({ group: getStringData($r('app.string.safe_area_type')) })
.selectedColor(0xed6f21)
.onChange((itemName: CheckboxGroupResult) => {
this.mSafeAreaType = []
for (let i = 0;i < itemName.name.length; i++) {
if (itemName.name[i] == getStringData($r('app.string.safe_area_type_system'))) {
this.mSafeAreaType.push(SafeAreaType.SYSTEM)
}
else if (itemName.name[i] == getStringData($r('app.string.safe_area_type_cutout'))) {
this.mSafeAreaType.push(SafeAreaType.CUTOUT)
}
else if (itemName.name[i] == getStringData($r('app.string.safe_area_type_keyboard'))) {
this.mSafeAreaType.push(SafeAreaType.KEYBOARD)
}
}
Logger.info(`checkbox group content ${JSON.stringify(this.mSafeAreaType)}`)
}).id('test_selectAll')
Text($r('app.string.checkbox_select_all')).fontSize(20)
}.width('100%')
Row() {
Checkbox({
name: getStringData($r('app.string.safe_area_type_system')),
group: getStringData($r('app.string.safe_area_type'))
})
.id('SYSTEM')
.selectedColor($r('app.color.select_option_font_color'))
.onChange((value: boolean) => {
Logger.info(`Checkbox1 change is ${value}`)
}).margin({ left: 30 })
Text($r('app.string.safe_area_type_system')).fontSize(20)
}.width('100%')
Row() {
Checkbox({
name: getStringData($r('app.string.safe_area_type_cutout')),
group: getStringData($r('app.string.safe_area_type'))
})
.select(true)
.selectedColor($r('app.color.select_option_font_color'))
.onChange((value: boolean) => {
Logger.info(`Checkbox2 change is ${value}`)
}).margin({ left: 30 })
Text($r('app.string.safe_area_type_cutout')).fontSize(20)
}.width('100%')
Row() {
Checkbox({
name: getStringData($r('app.string.safe_area_type_keyboard')),
group: getStringData($r('app.string.safe_area_type'))
})
.selectedColor($r('app.color.select_option_font_color'))
.onChange((value: boolean) => {
Logger.info(`Checkbox3 change is ${value}`)
}).margin({ left: 30 })
Text($r('app.string.safe_area_type_keyboard')).fontSize(20)
}.width('100%')
}
.layoutWeight(1)
Column() {
Row() {
CheckboxGroup({ group: getStringData($r('app.string.safe_area_edge')) })
.selectedColor(0xed6f21)
.onChange((itemName: CheckboxGroupResult) => {
this.mSafeAreaEdge = []
for (let i = 0;i < itemName.name.length; i++) {
if (itemName.name[i] == getStringData($r('app.string.safe_area_edge_bottom'))) {
this.mSafeAreaEdge.push(SafeAreaEdge.BOTTOM)
}
else if (itemName.name[i] == getStringData($r('app.string.safe_area_edge_top'))) {
this.mSafeAreaEdge.push(SafeAreaEdge.TOP)
}
else if (itemName.name[i] == getStringData($r('app.string.safe_area_edge_start'))) {
this.mSafeAreaEdge.push(SafeAreaEdge.START)
}
else if (itemName.name[i] == getStringData($r('app.string.safe_area_edge_end'))) {
this.mSafeAreaEdge.push(SafeAreaEdge.END)
}
}
Logger.info(`checkbox group content ${JSON.stringify(itemName)}`)
}).id('test_selectAll')
Text($r('app.string.checkbox_select_all')).fontSize(20)
}.width('100%')
Row() {
Checkbox({
name: getStringData($r('app.string.safe_area_edge_top')),
group: getStringData($r('app.string.safe_area_edge'))
})
.select(true)
.selectedColor($r('app.color.select_option_font_color'))
.onChange((value: boolean) => {
Logger.info(`Checkbox1 change is ${value}`)
}).margin({ left: 30 })
Text($r('app.string.safe_area_edge_top')).fontSize(20)
}.width('100%')
Row() {
Checkbox({
name: getStringData($r('app.string.safe_area_edge_bottom')),
group: getStringData($r('app.string.safe_area_edge'))
})
.select(true)
.selectedColor($r('app.color.select_option_font_color'))
.onChange((value: boolean) => {
Logger.info(`Checkbox2 change is ${value}`)
}).margin({ left: 30 })
Text($r('app.string.safe_area_edge_bottom')).fontSize(20)
}.width('100%')
Row() {
Checkbox({
name: getStringData($r('app.string.safe_area_edge_start')),
group: getStringData($r('app.string.safe_area_edge'))
})
.selectedColor($r('app.color.select_option_font_color'))
.onChange((value: boolean) => {
Logger.info(`Checkbox3 change is ${value}`)
}).margin({ left: 30 })
Text($r('app.string.safe_area_edge_start')).fontSize(20)
}.width('100%')
Row() {
Checkbox({
name: getStringData($r('app.string.safe_area_edge_end')),
group: getStringData($r('app.string.safe_area_edge'))
})
.selectedColor($r('app.color.select_option_font_color'))
.onChange((value: boolean) => {
Logger.info(`Checkbox3 change is ${value}`)
}).margin({ left: 30 })
Text($r('app.string.safe_area_edge_end')).fontSize(20)
}.width('100%')
}
.layoutWeight(1)
}
}
}

67
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/safeAreaSample/SafeAreaSample.ets Executable file
View File

@ -0,0 +1,67 @@
/*
* Copyright (c) 2023 Hunan OpenValley Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ChangePanel } from './ChangePanel'
import { IntroductionTitle } from '../../../../common/IntroductionTitle'
import { TitleBar } from '../../../../common/TitleBar'
@Extend(Column) function columnStyle() {
.width('100%')
.padding(16)
.borderRadius(24)
.backgroundColor(Color.White)
}
@Entry
@Component
struct SafeAreaSample {
@State mSafeAreaType: SafeAreaType[] = [SafeAreaType.CUTOUT]
@State mSafeAreaEdge: SafeAreaEdge[] = [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]
build() {
Column() {
TitleBar({ title: $r('app.string.safe_area') })
.backgroundColor($r('app.color.background_shallow_grey'))
Stack() {
Row() {
TextInput({ placeholder: $r('app.string.save_area_input_text') })
.placeholderFont({ size: 14, weight: 400 })
.width(320)
.height(40)
.offset({ y: 120 })
.fontSize(14)
.fontColor(Color.Black)
.backgroundColor(Color.White)
.enableKeyboardOnFocus(false)
}.height('100%').alignItems(VerticalAlign.Top)
Column() {
Column() {
IntroductionTitle({ introduction: $r('app.string.safe_area_type_and_safe_area_edge') })
ChangePanel({
mSafeAreaType: $mSafeAreaType,
mSafeAreaEdge: $mSafeAreaEdge
})
}.columnStyle().alignItems(HorizontalAlign.Center)
}.padding(12).width('100%')
}
}
.width('100%')
.height('100%')
.backgroundImage($r('app.media.img_test_1'))
.backgroundImageSize(ImageSize.Cover)
.expandSafeArea(this.mSafeAreaType, this.mSafeAreaEdge)
}
}

42
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/universal/properties/sizeSample/SizeSample.ets
View File

@ -16,11 +16,12 @@
import { IntroductionTitle } from '../../../../common/IntroductionTitle'
import { TitleBar } from '../../../../common/TitleBar'
@Extend(Row) function rowStyle () {
@Extend(Row) function rowStyle() {
.width('100%')
.padding(12)
.borderRadius(24)
.backgroundColor(Color.White)
.margin({ left: 12, right: 12 })
.margin({ bottom: 12 })
.justifyContent(FlexAlign.SpaceBetween)
}
@ -45,6 +46,18 @@ struct Size {
.justifyContent(FlexAlign.Center)
.backgroundColor($r('app.color.background_green'))
Row() {
Text($r('app.string.size_width_fixed_60vw'))
.fontSize(18)
.fontColor(Color.White)
}
.width('60vw')
.height(100)
.margin({ left: 20 })
.borderRadius(5)
.justifyContent(FlexAlign.Center)
.backgroundColor($r('app.color.background_green'))
Row() {
Text($r('app.string.size_width_percent'))
.fontSize(18)
@ -75,6 +88,17 @@ struct Size {
.justifyContent(FlexAlign.Center)
.backgroundColor($r('app.color.background_blue'))
Row() {
Text($r('app.string.size_height_fixed_60vh'))
.fontSize(18)
.fontColor(Color.White)
}
.height('60vh')
.borderRadius(5)
.margin({ left: 20 })
.justifyContent(FlexAlign.Center)
.backgroundColor($r('app.color.background_blue'))
Row() {
Text($r('app.string.size_height_percent'))
.fontSize(18)
@ -92,7 +116,21 @@ struct Size {
.backgroundColor($r('app.color.background_blue'))
}
.rowStyle()
Row() {
Row() {
Text($r('app.string.size_height_fixed_calc'))
.fontSize(18)
.fontColor(Color.White)
}
.height('calc(200vp - 100vp)')
.borderRadius(5)
.justifyContent(FlexAlign.Center)
.backgroundColor($r('app.color.background_blue'))
}
.rowStyle()
}
.margin({ left: 12, right: 12 })
.constraintSize({ minHeight: '100%' })
}
}

212
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json
View File

@ -36,6 +36,7 @@
"name": "prop_background",
"value": "Background"
},
{
"name": "prop_foreground",
"value": "Foreground"
@ -981,6 +982,15 @@
"name": "qrcode_enter_content",
"value": "Enter to change QR code"
},
// Search
{
"name": "search_placeholder",
"value": "Type to search..."
},
{
"name": "search_name",
"value": "search"
},
// Radio
{
"name": "radio_title",
@ -1035,6 +1045,55 @@
"name": "rotate_image_angle",
"value": "Rotate 15°"
},
// SaveArea
{
"name": "safe_area_type_and_safe_area_edge",
"value": "SafeAreaType And SafeAreaEdge"
},
{
"name": "safe_area",
"value": "SafeArea"
},
{
"name": "save_area_input_text",
"value": "input your word ..."
},
{
"name": "safe_area_type",
"value": "SafeAreaType"
},
{
"name": "safe_area_edge",
"value": "SafeAreaEdge"
},
{
"name": "safe_area_edge_top",
"value": "TOP"
},
{
"name": "safe_area_edge_bottom",
"value": "BOTTOM"
},
{
"name": "safe_area_edge_start",
"value": "START"
},
{
"name": "safe_area_edge_end",
"value": "END"
},
{
"name": "safe_area_type_system",
"value": "SYSTEM"
},
{
"name": "safe_area_type_cutout",
"value": "CUTOUT"
},
{
"name": "safe_area_type_keyboard",
"value": "KEYBOARD"
},
// Select
{
"name": "select_title",
@ -1134,10 +1193,18 @@
"name": "size_width_percent",
"value": "width is 60%"
},
{
"name": "size_width_fixed_60vw",
"value": "Width is 60vw"
},
{
"name": "size_height",
"value": "Height"
},
{
"name": "size_height_fixed_60vh",
"value": "Width is 60vh"
},
{
"name": "size_height_fixed_100vp",
"value": "Height is 100vp"
@ -1146,6 +1213,10 @@
"name": "size_height_percent",
"value": "Height is 60%"
},
{
"name": "size_height_fixed_calc",
"value": "Height is calc(200vp-100vp)"
},
// Slider
{
"name": "slider_title",
@ -1248,6 +1319,10 @@
"name": "span_letter_spacing",
"value": "LetterSpacing"
},
{
"name": "span_line_height",
"value": "LineHeight"
},
{
"name": "span_decoration_type",
"value": "Decoration type"
@ -1260,6 +1335,14 @@
"name": "span_text_spacing",
"value": " LetterSpacing test text"
},
{
"name": "span_inherits_text_attribute",
"value": " Span inherits text attribute"
},
{
"name": "span_does_not_inherit_text_attribute",
"value": " Span does not inherits text attribute"
},
{
"name": "span_upper_lower",
"value": "Upper or lower case"
@ -1358,6 +1441,14 @@
"name": "text_content_en",
"value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life."
},
{
"name": "text_width",
"value": "Text width"
},
{
"name": "text_height",
"value": "Text height"
},
{
"name": "text_content_en_first",
"value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. "
@ -1446,7 +1537,32 @@
"name": "text_text_case_lowercase",
"value": "Lowercase"
},
// TextArea
{
"name": "text_area_set_text_selection",
"value": "Set Text Selection"
},
{
"name": "text_area_set_text_selection_start_select_error",
"value": "Set Text Selection Start Select Error"
},
{
"name": "text_area_set_text_selection_end_select_error",
"value": "Set Text Selection End Select Error"
},
{
"name": "text_input_set_text_selection_start_select",
"value": "Start Select:"
},
{
"name": "text_input_set_text_selection_end_select",
"value": "End Select:"
},
// TextInput
{
"name": "avoiding_input_method_testing",
"value": "Avoiding Input Method Testing"
},
{
"name": "text_input_title",
"value": "TextInput"
@ -1515,6 +1631,10 @@
"name": "text_input_only_input_english",
"value": "Only english letters can be entered"
},
{
"name": "text_input_set_text_selection",
"value": "Set Text Selection"
},
{
"name": "text_input_caret_position",
"value": "Caret position"
@ -1927,6 +2047,26 @@
"name": "hovereffect",
"value": "Hover"
},
{
"name": "bind_menu_customBuilder",
"value": "Bind menu customBuilder"
},
{
"name": "bind_content_menu",
"value": "Bind content menu"
},
{
"name": "click_on_any_action_below",
"value": "Click on any action below"
},
{
"name": "long_press_any_action_below",
"value": "Long press any action below"
},
{
"name": "bind_menu_content",
"value": "Bind menu content"
},
{
"name": "menu",
"value": "Menu"
@ -1935,6 +2075,26 @@
"name": "multiState",
"value": "MultiState"
},
{
"name": "multi_short_key",
"value": "multi short key"
},
{
"name": "set_mouse_style",
"value": "Set mouse style"
},
{
"name": "multimode_input",
"value": "multimode input"
},
{
"name": "short_key_pressed",
"value": "Short key pressed"
},
{
"name": "on_short_key",
"value": "Simultaneously press the shortcut key ctrl+a to trigger the following button click event"
},
{
"name": "alert",
"value": "Alert"
@ -2034,6 +2194,10 @@
"name": "auxiliary_refresh",
"value": "Refresh"
},
{
"name": "auxiliary_refresh_refreshing",
"value": "Refreshing"
},
{
"name": "auxiliary_refresh_offset",
"value": "offset:"
@ -2178,6 +2342,10 @@
"name": "checkbox_checkboxgroup",
"value": "Checkbox && CheckboxGroup"
},
{
"name": "checkbox",
"value": "Checkbox"
},
{
"name": "checkbox_title",
"value": "Checkbox"
@ -2246,6 +2414,34 @@
"name": "swiper_name",
"value": "Swiper"
},
{
"name": "nav_router",
"value": "NavRouter"
},
{
"name": "tabs_name",
"value": "Tabs"
},
{
"name": "select_name",
"value": "Select"
},
{
"name": "slider_name",
"value": "Slider"
},
{
"name": "swiper_set_next_margin_and_previous_margin",
"value": "set next margin and previous margin"
},
{
"name": "swiper_next_margin",
"value": "next margin"
},
{
"name": "swiper_previous_margin",
"value": "previous margin"
},
{
"name": "alphabetindexer_an",
"value": "An"
@ -2406,6 +2602,10 @@
"name": "checkbox_select_all",
"value": "Select All"
},
{
"name": "delete_list_item",
"value": "Delete listItem"
},
{
"name": "normal_display",
"value": "Display"
@ -2478,6 +2678,10 @@
"name": "interaction_arrowoffset",
"value": "Change arrowOffset:"
},
{
"name": "interaction_mask",
"value": "isMask:"
},
// ComponentTransitionSample
{
"name": "component_transition",
@ -3066,6 +3270,10 @@
"name": "grid_settings_gridSpan",
"value": "GridSpan gridOffset"
},
{
"name": "grid_edgeEffect_spring",
"value": "Grid edgeEffect spring"
},
{
"name": "focus_control",
"value": "焦点控制"
@ -4404,6 +4612,10 @@
"value": "Previous page"
},
// Navigation
{
"name": "navRouter_title",
"value": "NavRouter"
},
{
"name": "navigation_title",
"value": "Navigation"

3
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json
View File

@ -70,10 +70,12 @@
"pages/universal/properties/displaySample/DisplaySample",
"pages/universal/properties/interactionSample/InteractionSample",
"pages/universal/properties/effectsSample/EffectsSample",
"pages/universal/properties/safeAreaSample/SafeAreaSample",
"pages/components/auxiliary/scrollbarSample/ScrollBarSample",
"pages/components/auxiliary/refreshSample/RefreshSample",
"pages/components/auxiliary/panelSample/PanelSample",
"pages/components/auxiliary/alphabetIndexerSample/AlphabetIndexerSample",
"pages/components/informationPresentationAndDynamicEffects/listSample/ListSample",
"pages/components/informationPresentationAndDynamicEffects/loadingProgressSample/LoadingProgressSample",
"pages/components/informationPresentationAndDynamicEffects/marqueeSample/MarqueeSample",
"pages/components/informationPresentationAndDynamicEffects/textTimerSample/TextTimerSample",
@ -128,6 +130,7 @@
"pages/components/listAndGrid/gridSample/GridSample",
"pages/components/listAndGrid/gridItemSample/GridItemSample",
"pages/components/scrollAndSwipe/swiperSample/SwiperSample",
"pages/components/navigation/navRouterSample/NavRouterSample",
"pages/components/navigation/navigationSample/NavigationSample",
"pages/components/navigation/navigationSample/NavigationSecondPage",
"pages/components/navigation/navigationSample/NavigationThirdPage",

122
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json
View File

@ -36,6 +36,10 @@
"name": "prop_background",
"value": "Background"
},
{
"name": "safe_area",
"value": "SafeArea"
},
{
"name": "prop_foreground",
"value": "Foreground"
@ -866,6 +870,15 @@
"name": "qrcode_enter_content",
"value": "Enter to change QR code"
},
// Search
{
"name": "search_placeholder",
"value": "Type to search..."
},
{
"name": "search_name",
"value": "search"
},
// Radio
{
"name": "radio_title",
@ -1015,10 +1028,18 @@
"name": "size_width_percent",
"value": "width is 60%"
},
{
"name": "size_width_fixed_60vw",
"value": "Width is 60vw"
},
{
"name": "size_height",
"value": "Height"
},
{
"name": "size_height_fixed_60vh",
"value": "Width is 60vh"
},
{
"name": "size_height_fixed_100vp",
"value": "Height is 100vp"
@ -1027,6 +1048,10 @@
"name": "size_height_percent",
"value": "Height is 60%"
},
{
"name": "size_height_fixed_calc",
"value": "Height is calc(200vp-100vp)"
},
// Slider
{
"name": "slider_title",
@ -1129,6 +1154,10 @@
"name": "span_letter_spacing",
"value": "LetterSpacing"
},
{
"name": "span_line_height",
"value": "LineHeight"
},
{
"name": "span_decoration_type",
"value": "Decoration type"
@ -1141,6 +1170,14 @@
"name": "span_text_spacing",
"value": " LetterSpacing test text"
},
{
"name": "span_inherits_text_attribute",
"value": " Span inherits text attribute"
},
{
"name": "span_does_not_inherit_text_attribute",
"value": " Span does not inherits text attribute"
},
{
"name": "span_upper_lower",
"value": "Upper or lower case"
@ -1231,6 +1268,14 @@
"name": "text_title",
"value": "Text"
},
{
"name": "text_width",
"value": "Text width"
},
{
"name": "text_height",
"value": "Text height"
},
{
"name": "text_content",
"value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life."
@ -1315,7 +1360,32 @@
"name": "text_text_case_lowercase",
"value": "Lowercase"
},
// TextArea
{
"name": "text_area_set_text_selection",
"value": "Set Text Selection"
},
{
"name": "text_area_set_text_selection_start_select_error",
"value": "Set Text Selection Start Select Error"
},
{
"name": "text_area_set_text_selection_end_select_error",
"value": "Set Text Selection End Select Error"
},
{
"name": "text_input_set_text_selection_start_select",
"value": "Start Select:"
},
{
"name": "text_input_set_text_selection_end_select",
"value": "End Select:"
},
// TextInput
{
"name": "avoiding_input_method_testing",
"value": "Avoiding Input Method Testing"
},
{
"name": "text_input_title",
"value": "TextInput"
@ -1388,6 +1458,10 @@
"name": "text_input_caret_position",
"value": "Caret position"
},
{
"name": "text_input_set_text_selection",
"value": "Set Text Selection"
},
{
"name": "text_input_max_length",
"value": "Limit the input character length"
@ -1470,6 +1544,10 @@
"name": "toggle_type_switch",
"value": "Switch"
},
{
"name": "checkbox",
"value": "Checkbox"
},
{
"name": "toggle_type_checkbox",
"value": "Check box"
@ -1799,6 +1877,26 @@
"name": "hovereffect",
"value": "Hover"
},
{
"name": "bind_menu_customBuilder",
"value": "Bind menu customBuilder"
},
{
"name": "bind_content_menu",
"value": "Bind content menu"
},
{
"name": "click_on_any_action_below",
"value": "Click on any action below"
},
{
"name": "long_press_any_action_below",
"value": "Long press any action below"
},
{
"name": "bind_menu_content",
"value": "Bind menu content"
},
{
"name": "menu",
"value": "Menu"
@ -1807,6 +1905,26 @@
"name": "multiState",
"value": "MultiState"
},
{
"name": "multi_short_key",
"value": "multi short key"
},
{
"name": "set_mouse_style",
"value": "Set mouse style"
},
{
"name": "multimode_input",
"value": "multimode input"
},
{
"name": "short_key_pressed",
"value": "Short key pressed"
},
{
"name": "on_short_key",
"value": "Simultaneously press the shortcut key ctrl+a to trigger the following button click event"
},
{
"name": "alert",
"value": "Alert"
@ -2532,6 +2650,10 @@
"name": "pinch_scale",
"value": "PinchGesture scale:\n"
},
{
"name": "interaction_mask",
"value": "isMask:"
},
{
"name": "rotation_description",
"value": "Rotate the black box with two fingers"

179
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json
View File

@ -818,6 +818,15 @@
"name": "qrcode_enter_content",
"value": "改变二维码内容"
},
// Search
{
"name": "search_placeholder",
"value": "输入搜索..."
},
{
"name": "search_name",
"value": "search 搜索"
},
// Radio
{
"name": "radio_title",
@ -872,6 +881,23 @@
"name": "rotate_image_angle",
"value": "旋转15°"
},
// SaveArea
{
"name": "safe_area_type_and_safe_area_edge",
"value": "扩展安全区域的类型和方向"
},
{
"name": "safe_area",
"value": "SafeArea 安全区域"
},
{
"name": "safe_area_type",
"value": "扩展类型"
},
{
"name": "safe_area_edge",
"value": "扩展方向"
},
// Select
{
"name": "select_title",
@ -971,10 +997,18 @@
"name": "size_width_percent",
"value": "宽度为60%"
},
{
"name": "size_width_fixed_60vw",
"value": "宽度为60vw"
},
{
"name": "size_height",
"value": "高度"
},
{
"name": "size_height_fixed_60vh",
"value": "高度为60vh"
},
{
"name": "size_height_fixed_100vp",
"value": "高度为100vp"
@ -983,6 +1017,10 @@
"name": "size_height_percent",
"value": "高度为60%"
},
{
"name": "size_height_fixed_calc",
"value": "高度为calc(200vp-100vp)"
},
// Slider
{
"name": "slider_title",
@ -1085,6 +1123,10 @@
"name": "span_letter_spacing",
"value": "字符间距"
},
{
"name": "span_line_height",
"value": "跨度线高度"
},
{
"name": "span_decoration_type",
"value": "装饰线类型"
@ -1097,6 +1139,14 @@
"name": "span_text_spacing",
"value": " 字符间距示例文本"
},
{
"name": "span_inherits_text_attribute",
"value": " Span继承text样式"
},
{
"name": "span_does_not_inherit_text_attribute",
"value": " Span不继承text样式"
},
{
"name": "span_upper_lower",
"value": "配置不同文本属性"
@ -1175,6 +1225,14 @@
"name": "text_content",
"value": "钢是在烈火和急剧冷却里锻炼出来的，所以才能坚硬和什么也不怕。我们的一代也是这样的在斗争中和可怕的考验中锻炼出来的，学习了不在生活面前屈服。"
},
{
"name": "text_width",
"value": "Text 宽"
},
{
"name": "text_height",
"value": "Text 高"
},
{
"name": "text_text_align_center",
"value": "居中"
@ -1255,7 +1313,32 @@
"name": "text_text_case_lowercase",
"value": "小写"
},
// TextArea
{
"name": "text_area_set_text_selection",
"value": "文本选择"
},
{
"name": "text_area_set_text_selection_start_select_error",
"value": "起始位输入错误"
},
{
"name": "text_area_set_text_selection_end_select_error",
"value": "结束位输入错误"
},
{
"name": "text_input_set_text_selection_start_select",
"value": "起始位:"
},
{
"name": "text_input_set_text_selection_end_select",
"value": "结束位:"
},
// TextInput
{
"name": "avoiding_input_method_testing",
"value": "避让输入法测试"
},
{
"name": "text_input_title",
"value": "TextInput 文本输入"
@ -1328,6 +1411,10 @@
"name": "text_input_caret_position",
"value": "光标位置"
},
{
"name": "text_input_set_text_selection",
"value": "文本选择"
},
{
"name": "text_input_max_length",
"value": "限制输入字符长度"
@ -1648,6 +1735,26 @@
"name": "hovereffect",
"value": "悬停"
},
{
"name": "bind_menu_customBuilder",
"value": "绑定自定义菜单"
},
{
"name": "bind_content_menu",
"value": "绑定上下文菜单"
},
{
"name": "click_on_any_action_below",
"value": "点击下方任一操作"
},
{
"name": "long_press_any_action_below",
"value": "长按下方任一操作"
},
{
"name": "bind_menu_content",
"value": "绑定接口菜单"
},
{
"name": "menu",
"value": "菜单"
@ -1656,6 +1763,26 @@
"name": "multiState",
"value": "多态"
},
{
"name": "multi_short_key",
"value": "快捷键"
},
{
"name": "set_mouse_style",
"value": "设置鼠标样式"
},
{
"name": "multimode_input",
"value": "多模输入"
},
{
"name": "short_key_pressed",
"value": "快捷键已按下"
},
{
"name": "on_short_key",
"value": "同时按下快捷键ctrl+a，触发以下按钮点击事件"
},
{
"name": "alert",
"value": "告警弹窗"
@ -1742,6 +1869,10 @@
"name": "auxiliary_refresh",
"value": "下拉刷新"
},
{
"name": "auxiliary_refresh_refreshing",
"value": "刷新中"
},
{
"name": "auxiliary_panel",
"value": "Panel 弹出面板"
@ -1777,6 +1908,10 @@
"name": "data_panel",
"value": "DataPanel 数据面板"
},
{
"name": "checkbox",
"value": "checkbox 勾选框"
},
{
"name": "checkbox_checkboxgroup",
"value": "勾选框"
@ -1813,6 +1948,34 @@
"name": "swiper_name",
"value": "Swiper 翻页"
},
{
"name": "nav_router",
"value": "点击跳转路由页面"
},
{
"name": "tabs_name",
"value": "Tabs 页签"
},
{
"name": "slider_name",
"value": "Slider 滚动条"
},
{
"name": "select_name",
"value": "Select 选择器"
},
{
"name": "swiper_set_next_margin_and_previous_margin",
"value": "设置前后页边距"
},
{
"name": "swiper_next_margin",
"value": "上一页边距"
},
{
"name": "swiper_previous_margin",
"value": "下一页边距"
},
{
"name": "alphabetindexer_an",
"value": "安"
@ -1933,6 +2096,10 @@
"name": "checkbox_select_all",
"value": "全选"
},
{
"name": "delete_list_item",
"value": "左划删除 listItem"
},
{
"name": "normal_display",
"value": "效果展示"
@ -2001,6 +2168,10 @@
"name": "interaction_placementontop",
"value": "显示位置:"
},
{
"name": "interaction_mask",
"value": "屏蔽周边事件:"
},
{
"name": "interaction_arrowoffset",
"value": "调整箭头:"
@ -2625,6 +2796,10 @@
"name": "grid_settings_gridSpan",
"value": "GridSpan gridOffset"
},
{
"name": "grid_edgeEffect_spring",
"value": "Grid edgeEffect spring"
},
{
"name": "focus_control",
"value": "焦点控制"
@ -3806,6 +3981,10 @@
"value": "上一页"
},
// Navigation
{
"name": "navRouter_title",
"value": "NavRouter"
},
{
"name": "navigation_title",
"value": "Navigation"

1088
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets
View File

File diff suppressed because it is too large Load Diff

12
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json
View File

@ -3156,6 +3156,14 @@
"name": "navigation",
"value": "导航"
},
{
"name": "navRouter_title",
"value": "NavRouter"
},
{
"name": "multimode_input",
"value": "multimode input"
},
{
"name": "navigation_title",
"value": "Navigation"
@ -3598,6 +3606,10 @@
{
"name": "particle_spawn_stop",
"value": "Stop"
},
{
"name": "safe_area",
"value": "SafeArea"
}
]
}

4
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json
View File

@ -2470,6 +2470,10 @@
{
"name": "particle_spawn_stop",
"value": "Stop"
},
{
"name": "safe_area",
"value": "SafeArea"
}
]
}

12
code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json
View File

@ -1907,6 +1907,14 @@
"name": "navigation",
"value": "导航"
},
{
"name": "navRouter_title",
"value": "NavRouter"
},
{
"name": "multimode_input",
"value": "多模输入"
},
{
"name": "navigation_title",
"value": "Navigation"
@ -2155,6 +2163,10 @@
{
"name": "particle_spawn_stop",
"value": "停止"
},
{
"name": "safe_area",
"value": "SafeArea 安全区域"
}
]
}

21
code/UI/ArkTsComponentCollection/ComponentCollection/ohosTest.md
View File

@ -14,10 +14,12 @@
| 验证Toggle 切换按钮 | 展开按钮与选择，进入Toggle 切换按钮 | 依次点击Toggle 切换按钮 | 正确响应点击事件 | 是 | Pass |
| 验证勾选框 | 展开按钮与选择，进入勾选框 | 依次点击勾选框 | 正确选中勾选框 | 是 | Pass |
| 验证TimePicker 时间选择器 | 展开按钮与选择，进入TimePicker 时间选择器 | 打开MilitaryTime | 时间选择器变化 | 是 | Pass |
| 验证Rating 评分条 | 展开按钮与选择，进入Rating 评分条 | 更改样式并打分 | 显示打分中间值，正确显示样式 | 是 | Pass |
| 验证Counter 计数器 | 展开按钮与选择，进入Counter 计数器 | 点击enableInc和enableDec使能按钮查看计数器效果 | 计数器加减按钮被禁用 | 是 | Pass |
| 验证Rating 评分条 | 展开按钮与选择，进入Rating 评分条 | 更改样式并打分 | 显示打分中间值，正确显示样式 | 是 | Pass |
| 验证Scroll 滚动 | 展开滚动与滑动，进入Scroll 滚动 | 左右滑动，上下滑动 | 滚动条正确滑动 | 是 | Pass |
| 验证QRCode 二维码 | 展开信息展示与动效，进入QRCode 二维码 | 改变二维码内容，改变颜色 | 正确改变二维码图片，改变颜色 | 是 | Pass |
| 验证LoadingProgress | 展开信息展示与动效，进入LoadingProgress | 更改LoadingProgress的颜色 | 正确更改相应的颜色 | 是 | Pass |
| 验证List | 展开信息展示与动效，进入List | 长按任一ListItem左划 | 呈现正确效果删除该ListItem | 是 | Pass |
| 验证LoadingProgress | 展开信息展示与动效，进入LoadingProgress | 更改LoadingProgress的颜色 | 正确更改相应的颜色 | 是 | Pass |
| 验证Marquee 跑马灯 | 展开信息展示与动效，进入Marquee 跑马灯 | 更改Marquee样式，依次开始，停止跑马灯 | 正确反馈状态，依次运行，停止跑马灯 | 是 | Pass |
| 验证TextTimer 文字计时器 | 展开信息展示与动效，进入TextTimer 文字计时器 | 依次开始、暂停、重置、更换时间格式 | 正确运行状态 | 是 | Pass |
| 验证TextClock 文字时钟 | 展开信息展示与动效，进入TextClock 文字时钟 | 依次点击开始、暂停、更改时钟样式 | 正确运行状态并改变样式 | 是 | Pass |
@ -28,8 +30,8 @@
| 验证Tab 模糊切换 | 展开信息展示与动效，进入Tab 模糊切换 | 点击Tab 进行模糊切换 | Tab 模糊切换成功 | 是 | Pass |
| 验证ImageFit 切换 | 展开信息展示与动效，进入ImageFit 切换 | 依次点击Radius按钮进行ImageFit模式切换 | ImageFit 模式切换成功 | 是 | Pass |
| 验证Particle粒子效果 | 展开信息展示与动效，进入Particle粒子效果 | 点击Particle粒子效果生成按钮 | Particle粒子效果生成成功 | 是 | Pass |
| 验证Span 行内文本 | 展开文本与输入，进入Span 行内文本 | 依次调整字符间距，装饰线类型，颜色 | 依次改变对于属性 | 是 | Pass |
| 验证TextInput 文本输入 | 展开文本与输入，进入TextInput 文本输入 | 在输入框输入文本 | 正确显示输入文本 | 是 | Pass |
| 验证Span 行内文本 | 展开文本与输入，进入Span 行内文本 | 依次调整字符间距，装饰线类型，跨度线高度，颜色 | 依次改变对于属性 | 是 | Pass |
| 验证TextInput 文本输入 | 展开文本与输入，进入TextInput 文本输入 | 在输入框输入文本，可否选择对应文本段选中并高亮 | 正确显示输入文本 | 是 | Pass |
| 验证Text 文本 | 展开文本与输入，进入Text 文本 | 依次更改字符间距，行高，对其类型，超长文本显示方式，装饰线，字体颜色，大小写 | 依次更改对应属性 | 是 | Pass |
| 验证RichText 富文本 | 展开文本与输入，进入RichText 富文本 | | 正确显示富文本 | 是 | Pass |
| 验证ScrollBar 滚动条 | 展开辅助，进入ScrollBar 滚动条 | 依次纵向滚动，横向滚动 | 正确滚动 | 是 | Pass |
@ -42,6 +44,7 @@
| 验证触摸事件 | | 拖动区域(100, 300, 300, 280) | 正确响应拖动 | 是 | Pass |
| 验证拖拽事件 | | 依次拖拽应用图标、GridItem、ListItem、Hyperlink、Text、Image、Video、FormComponent | 正确响应拖动 | 是 | Pass |
| 验证组件区域变化事件 | | 调整宽度，高度 | 正确约束小球运动范围 | 是 | Pass |
| 验证SafeArea 安全区域 | 进入SafeArea 安全区域 | 调整安全区域扩展的类型和方向 | 正确显示效果 | 是 | Pass |
| 验证foreground 前景 | | 进入foreground 前景 | 正确显示背景 | 是 | Pass |
| 验证background 背景 | | 进入background 背景 | 正确显示背景 | 是 | Pass |
| 验证border 边框 | | 进入border 边框页面 | 正确显示边框 | 是 | Pass |
@ -51,8 +54,8 @@
| 验证translate 平移 | 展开图形变化 | 调整图片平移和容器平移的X轴、y轴 | 正确响应调整 | 是 | Pass |
| 验证显示 | | 依次测试Z序，浮层，显隐，透明，测试响应属性 | 正确显示组件，并按调整改变 | 是 | Pass |
| 验证图像效果 | | 依次测试图像模糊，阴影，特效显示效果 | 正确显示效果 | 是 | Pass |
| 验证互动 | | 依次测试禁用、弹窗、点击、热区、悬停、菜单、多态 | 正确显示组件，并按调整改变 | 是 | Pass |
| 验证TarBar 进入动画 | 在通用页面 | 点击下方tab动画 | 跳转到动画页面 | 是 | Pass |
| 验证互动 | | 依次测试禁用、弹窗、点击、热区、悬停、菜单、多态 、多模输入 | 正确显示组件，并按调整改变 | 是 | Pass |
| 验证TarBar 进入动画 | 在通用页面 | 点击下方tab动画 | 跳转到动画页面 | 是 | Pass |
| 验证pageTransition 页面间转场 | 展开转场动画，进入pageTransition 页面间转场 | 依次测试顶部进场/底部退场，左侧进场/右侧退场，缩放进场/退场等 | 正确展示动画 | 是 | Pass |
| 验证sharedTransition 共享元素转场 | 展开转场动画，进入sharedTransition 页面间转场 | 点击一个元素转场，3秒后点击返回 | 正确展示动画并返回 | 是 | Pass |
| 验证sharedTransition 共享元素转场 | 展开转场动画，进入sharedTransition 页面间转场 | 点击一个元素转场，3秒后点击返回 | 正确展示动画并返回 | 是 | Pass |
@ -77,7 +80,7 @@
| 验证flex 布局 | | 进入flex 布局 | 正确显示效果 | 是 | Pass |
| 验证图片边框设置 | | 进入图片边框设 | 正确显示效果 | 是 | Pass |
| 验证形状裁剪 | | 进入形状裁剪 | 正确显示效果 | 是 | Pass |
| 验证栅格设置 | | 进入栅格设置 | 正确显示效果 | 是 | Pass |
| 验证栅格设置 | 进入栅格设置 | 滑动Gird组件到底部查看回弹效果 | 正确显示效果 | 是 | Pass |
| 验证焦点控制 | | 按压外接键盘Tab键，select选择水果后点击聚焦 | 正确显示效果 | 是 | Pass |
| 验证组件标识 | | 任意点击按钮 | 正确显示效果 | 是 | Pass |
| 验证组件背景模糊 | | 进入组件背景模糊 | 正确显示效果 | 是 | Pass |
@ -101,8 +104,8 @@
| 验证ActionSheetDialogSample 列表选择弹框 | 展开弹窗，ActionSheetDialogSample 列表选择弹框 | 依次点击弹窗位置、是否关闭弹窗、偏移量、选项内容 | 正确展示响应弹窗 | 是 | Pass |
| 验证TextPickerDialogSample 文本滑动选择器弹框 | 展开弹窗，TextPickerDialogSample 文本滑动选择器弹框 | 点击文字，滑动列表后点确定 | 正确展示响应弹窗 | 是 | Pass |
| 验证MenuSample 菜单 | 展开弹窗，MenuSample 菜单 | 鼠标右键点击、手指触摸长按 | 正确展示响应弹窗 | 是 | Pass |
| 验证Swiper组件 | 展开滚动与滑动，进入swiper翻页 | 依次点击下一页、上一页、是否被禁用左右滑动切换功能、是否能纵向滑动、是否首尾循环、是否开启自动循环播放、滑动页面间隙、滑动切换的动画时长、自动播放的时间间隔 | 正确显示效果 | 是 | Pass |
| 验证TextArea组件 | 展开文本与输入，进入TextArea多行文本输入框 | 依次点击水平对齐、可否复制、placeholder文本颜色、输入框光标颜色 | 正确显示效果 | 是 | Pass |
| 验证Swiper组件 | 展开滚动与滑动，进入swiper翻页 | 依次点击下一页、上一页、是否被禁用左右滑动切换功能、是否能纵向滑动、是否首尾循环、是否开启自动循环播放、滑动页面间隙、滑动切换的动画时长、自动播放的时间间隔、上下页边距 | 正确显示效果 | 是 | Pass |
| 验证TextArea组件 | 展开文本与输入，进入TextArea多行文本输入框 | 依次点击水平对齐、可否复制、placeholder文本颜色、输入框光标颜色、可否选择对应文本段选中并高亮 | 正确显示效果 | 是 | Pass |
| 验证PatternLock组件 | 展开文本与输入，进入PatternLock图案密码锁 | 依次滑动宫格宽高、圆点半径、连线宽度以及点击圆点未选中状态颜色、圆点激活状态颜色 | 正确显示效果 | 是 | Pass |
| 验证Search组件 | 展开文本与输入，进入Search搜索框 | 依次点击水平对齐、可否复制、搜索框本文颜色 | 正确显示效果 | 是 | Pass |
| 验证Row组件 | 展开行列与分栏，进入Row水平布局 | 依次滑动元素间距以及点击交叉轴对齐样式、主轴对齐样式 | 正确显示效果 | 是 | Pass |