From 1b24a1a1379464b000ef902b282b52491ca3ff3c Mon Sep 17 00:00:00 2001 From: luoying_ace_admin Date: Mon, 21 Nov 2022 17:02:58 +0800 Subject: [PATCH] revise doc Signed-off-by: luoying_ace_admin --- .../ts-basic-components-checkboxgroup.md | 22 +-- .../arkui-ts/ts-basic-components-datapanel.md | 40 +++- .../arkui-ts/ts-basic-components-marquee.md | 45 ++--- .../ts-basic-components-navigation.md | 177 ++++++++---------- .../arkui-ts/ts-basic-components-rating.md | 52 +++-- .../arkui-ts/ts-basic-components-stepper.md | 52 ++--- .../arkui-ts/ts-basic-components-textarea.md | 18 +- .../arkui-ts/ts-basic-components-toggle.md | 29 ++- .../arkui-ts/ts-container-tabcontent.md | 141 ++++++++++---- .../reference/arkui-ts/ts-container-tabs.md | 52 +++-- .../arkui-ts/ts-universal-attributes-size.md | 2 +- 11 files changed, 383 insertions(+), 247 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md index b7e2b5b79c..24270b6677 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md @@ -69,42 +69,42 @@ struct CheckboxExample { // 全选按钮 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { CheckboxGroup({ group: 'checkboxGroup' }) - .selectedColor(0xed6f21) + .selectedColor('#007DFF') .onChange((itemName: CheckboxGroupResult) => { console.info("checkbox group content" + JSON.stringify(itemName)) }) - Text('Select All').fontSize(20) + Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) } // 选项1 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) - .selectedColor(0x39a2db) + .selectedColor('#007DFF') .onChange((value: boolean) => { console.info('Checkbox1 change is' + value) }) - Text('Checkbox1').fontSize(20) - } + Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) + }.margin({ left: 36 }) // 选项2 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) - .selectedColor(0x39a2db) + .selectedColor('#007DFF') .onChange((value: boolean) => { console.info('Checkbox2 change is' + value) }) - Text('Checkbox2').fontSize(20) - } + Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) + }.margin({ left: 36 }) // 选项3 Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) - .selectedColor(0x39a2db) + .selectedColor('#007DFF') .onChange((value: boolean) => { console.info('Checkbox3 change is' + value) }) - Text('Checkbox3').fontSize(20) - } + Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500) + }.margin({ left: 36 }) } } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md index bcabffd14a..cf8c4b75be 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md @@ -41,15 +41,43 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) @Entry @Component struct DataPanelExample { - public values1: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] + public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] build() { Column({ space: 5 }) { - Text('Circle').fontSize(9).fontColor(0xCCCCCC).margin({ top: 20, right: '80%' }) - DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }).width(200).height(200) - - Text('Line').fontSize(9).fontColor(0xCCCCCC).margin({ bottom: 20, right: '80%' }) - DataPanel({ values: this.values1, max: 100, type: DataPanelType.Line }).width(300).height(10) + Row() { + Stack() { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168) + Column() { + Text('30').fontSize(35).fontColor('#182431') + Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6) + } + + Text('%') + .fontSize(9.33) + .lineHeight(12.83) + .fontWeight(500) + .opacity(0.6) + .position({ x: 104.42, y: 78.17 }) + }.margin({ right: 44 }) + + Stack() { + DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168) + Column() { + Text('75').fontSize(35).fontColor('#182431') + Text('已使用98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6) + } + + Text('%') + .fontSize(9.33) + .lineHeight(12.83) + .fontWeight(500) + .opacity(0.6) + .position({ x: 104.42, y: 78.17 }) + } + }.margin({ bottom: 59 }) + + DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10) }.width('100%').margin({ top: 5 }) } } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md index e1bb411247..a727332704 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md @@ -51,10 +51,10 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole @Component struct MarqueeExample { @State start: boolean = false - @State fromStart: boolean = true - @State step: number = 50 - @State loop: number = 3 - @State src: string = "Running Marquee starts rolling" + private fromStart: boolean = true + private step: number = 50 + private loop: number = Infinity + private src: string = "Running Marquee starts rolling" build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { @@ -65,29 +65,31 @@ struct MarqueeExample { fromStart: this.fromStart, src: this.src }) - .width(400) - .fontColor(Color.White) - .fontSize(50) - .allowScale(false) - .fontWeight(FontWeight.Bold) - .backgroundColor(Color.Black) - .margin({bottom:40}) + .width(360) + .height(80) + .fontColor('#FFFFFF') + .fontSize(48) + .fontWeight(700) + .backgroundColor('#182431') + .margin({ bottom: 40 }) .onStart(() => { - console.log('Marquee animation complete onStart') + console.info('Marquee animation complete onStart') }) .onBounce(() => { - console.log('Marquee animation complete onBounce') + console.info('Marquee animation complete onBounce') }) .onFinish(() => { - console.log('Marquee animation complete onFinish') + console.info('Marquee animation complete onFinish') }) - Button('start') - .onClick(() => { - this.start = true - }) - .width(200) - .height(60) - .margin({bottom:20}) + Button('Start') + .onClick(() => { + this.start = true + }) + .width(120) + .height(40) + .fontSize(16) + .fontWeight(500) + .backgroundColor('#007DFF') } .width('100%') .height('100%') @@ -95,4 +97,3 @@ struct MarqueeExample { } ``` -![zh-cn_image_0000001193499234](figures/zh-cn_image_0000001193499234.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index 69a4680cbb..94f780abe0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -119,143 +119,112 @@ Navigation() @Component struct NavigationExample { private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - @State hideBar: boolean = true - - @Builder NavigationTitle() { - Column() { - Text('title') - .width(80) - .height(60) - .fontColor(Color.Blue) - .fontSize(30) - } - .onClick(() => { - console.log("title") - }) - } - - @Builder NavigationMenus() { - Row() { - Image('images/add.png') - .width(25) - .height(25) - Image('comment/more.png') - .width(25) - .height(25) - .margin({ left: 30 }) - }.width(100) - } - - build() { - Column() { - Navigation() { - Search({ value: '', placeholder: "" }).width('85%').margin(26) - List({ space: 5, initialIndex: 0 }) { - ForEach(this.arr, (item) => { - ListItem() { - Text('' + item) - .width('90%') - .height(80) - .backgroundColor('#3366CC') - .borderRadius(15) - .fontSize(16) - .textAlign(TextAlign.Center) - }.editable(true) - }, item => item) - } - .listDirection(Axis.Vertical) - .height(300) - .margin({ top: 10, left: 18 }) - .width('100%') - - Button(this.hideBar ? "tool bar" : "hide bar") - .onClick(() => { - this.hideBar = !this.hideBar - }) - .margin({ left: 135, top: 60 }) - } - .title(this.NavigationTitle) - .subTitle('subtitle') - .menus(this.NavigationMenus) - .titleMode(NavigationTitleMode.Free) - .hideTitleBar(false) - .hideBackButton(false) - .onTitleModeChange((titleModel: NavigationTitleMode) => { - console.log('titleMode') - }) - .toolBar({ items: [ - { value: 'app', icon: 'images/grid.svg', action: () => { - console.log("app") - } }, - { value: 'add', icon: 'images/add.svg', action: () => { - console.log("add") - } }, - { value: 'collect', icon: 'images/collect.svg', action: () => { - console.log("collect") - } }] }) - .hideToolBar(this.hideBar) - } - } -} -``` - -![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif) - -```ts -// xxx.ets -@Entry -@Component -struct ToolbarBuilderExample { @State currentIndex: number = 0 @State Build: Array = [ { - icon: $r('app.media.ic_public_add'), - icon_after: $r('app.media.ic_public_addcolor'), text: 'add', num: 0 }, { - icon: $r('app.media.ic_public_app'), - icon_after: $r('app.media.ic_public_appcolor'), text: 'app', num: 1 }, { - icon: $r('app.media.ic_public_collect'), - icon_after: $r('app.media.ic_public_collectcolor'), text: 'collect', num: 2 } ] + @Builder NavigationTitle() { + Column() { + Text('Title') + .fontColor('#182431') + .fontSize(30) + .lineHeight(41) + .fontWeight(700) + Text('subtitle') + .fontColor('#182431') + .fontSize(14) + .lineHeight(19) + .opacity(0.4) + .margin({ top: 2 }) + }.alignItems(HorizontalAlign.Start) + } + + @Builder NavigationMenus() { + Row() { + Image('common/navigation_icon1.svg') + .width(24) + .height(24) + Image('common/navigation_icon1.svg') + .width(24) + .height(24) + .margin({ left: 24 }) + Image('common/navigation_icon2.svg') + .width(24) + .height(24) + .margin({ left: 24 }) + } + } + @Builder NavigationToolbar() { Row() { ForEach(this.Build, item => { Column() { - Image(this.currentIndex == item.num ? item.icon_after : item.icon) - .width(25) - .height(25) + Image(this.currentIndex == item.num ? 'common/public_icon_selected.svg' : 'common/public_icon.svg') + .width(24) + .height(24) Text(item.text) - .fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000") - } + .fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431') + .fontSize(10) + .lineHeight(14) + .fontWeight(500) + .margin({ top: 3 }) + }.width(104).height(56) .onClick(() => { this.currentIndex = item.num }) - .margin({ left: 70 }) }) - } + }.margin({ left: 24 }) } build() { Column() { Navigation() { - Flex() { + TextInput({ placeholder: 'search...' }) + .width(336) + .height(40) + .backgroundColor('#FFFFFF') + .margin({ top: 8, left: 12 }) + + List({ space: 12, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width(336) + .height(72) + .backgroundColor('#FFFFFF') + .borderRadius(24) + .fontSize(16) + .fontWeight(500) + .textAlign(TextAlign.Center) + }.editable(true) + }, item => item) } + .height(324) + .width('100%') + .margin({ top: 12, left: 12 }) } + .title(this.NavigationTitle) + .menus(this.NavigationMenus) + .titleMode(NavigationTitleMode.Free) .toolBar(this.NavigationToolbar) - } + .hideTitleBar(false) + .hideToolBar(false) + .onTitleModeChange((titleModel: NavigationTitleMode) => { + console.info('titleMode' + titleModel) + }) + }.width('100%').height('100%').backgroundColor('#F1F3F5') } } ``` - -![zh-cn_image_0000001192655288](figures/zh-cn_image_0000001192655288.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md index 605f333d3a..89ab48be89 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md @@ -47,19 +47,49 @@ Rating(options?: { rating: number, indicator?: boolean }) @Entry @Component struct RatingExample { - @State rating: number = 1 - @State indicator: boolean = false + @State rating: number = 3.5 build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { - Text('current score is ' + this.rating).fontSize(20) - Rating({ rating: this.rating, indicator: this.indicator }) - .stars(5) - .stepSize(0.5) - .onChange((value: number) => { - this.rating = value - }) - }.width(350).height(200).padding(35) + Column() { + Column() { + Rating({ rating: this.rating, indicator: false }) + .stars(5) + .stepSize(0.5) + .margin({ top: 24 }) + .onChange((value: number) => { + this.rating = value + }) + Text('current score is ' + this.rating) + .fontSize(16) + .fontColor('rgba(24,36,49,0.60)') + .margin({ top: 16 }) + }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 }) + + Row() { + Image('common/testImage.jpg') + .width(40) + .height(40) + .borderRadius(20) + .margin({ left: 24 }) + Column() { + Text('Yue') + .fontSize(16) + .fontColor('#182431') + .fontWeight(500) + Row() { + Rating({ rating: 3.5, indicator: true }).margin({ top: 1, right: 8 }) + Text('2021/06/02') + .fontSize(10) + .fontColor('#182431') + } + }.margin({ left: 12 }).alignItems(HorizontalAlign.Start) + + Text('1st Floor') + .fontSize(10) + .fontColor('#182431') + .position({ x: 295, y: 8 }) + }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 }) + }.width('100%').height('100%').backgroundColor('#F1F3F5') } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md index d289dd65cb..2ebcee38ba 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md @@ -45,6 +45,22 @@ Stepper(value?: { index?: number }) ```ts // xxx.ets +@Styles function itemStyle () { + .width(336) + .height(621) + .margin({ top: 48, left: 12 }) + .borderRadius(24) + .backgroundColor('#FFFFFF') +} + +@Extend(Text) function itemTextStyle () { + .fontColor('#182431') + .fontSize(36) + .fontWeight(500) + .opacity(0.4) + .margin({ top: 82, bottom: 40 }) +} + @Entry @Component struct StepperExample { @@ -61,15 +77,13 @@ struct StepperExample { StepperItem() { Column() { Text('Page One') - .fontSize(35) - .fontColor(Color.Blue) - .lineHeight(50) - .margin({ top: 250, bottom: 50 }) + .itemTextStyle() Button('change status:' + this.firstState) + .backgroundColor('#007dFF') .onClick(() => { this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip }) - }.width('100%') + }.itemStyle() } .nextLabel('Next') .status(this.firstState) @@ -77,15 +91,13 @@ struct StepperExample { StepperItem() { Column() { Text('Page Two') - .fontSize(35) - .fontColor(Color.Blue) - .lineHeight(50) - .margin({ top: 250, bottom: 50 }) + .itemTextStyle() Button('change status:' + this.secondState) + .backgroundColor('#007dFF') .onClick(() => { this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled }) - }.width('100%') + }.itemStyle() } .nextLabel('Next') .prevLabel('Previous') @@ -94,29 +106,25 @@ struct StepperExample { StepperItem() { Column() { Text('Page Three') - .fontSize(35) - .fontColor(Color.Blue) - .lineHeight(50) - .margin({ top: 250, bottom: 50 }) + .itemTextStyle() Button('change status:' + this.thirdState) + .backgroundColor('#007dFF') .onClick(() => { this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting }) - }.width('100%') + }.itemStyle() } .status(this.thirdState) // 第四个步骤页 StepperItem() { - Text('Page four') - .fontSize(35) - .fontColor(Color.Blue) - .width('100%') - .textAlign(TextAlign.Center) - .lineHeight(50) - .margin({ top: 250 }) + Column() { + Text('Page four') + .itemTextStyle() + }.itemStyle() } .nextLabel('Finish') } + .backgroundColor('#F1F3F5') .onFinish(() => { // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等 console.info('onFinish') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md index a36b7afae8..223e021f12 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md @@ -85,23 +85,29 @@ struct TextAreaExample { build() { Column() { - TextArea({ placeholder: 'The text area can hold an unlimited amount of text. input your word', controller: this.controller }) - .placeholderFont({ size: 14, weight: 400 }) - .width(400) - .height(50) + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...', + controller: this.controller + }) + .placeholderFont({ size: 16, weight: 400 }) + .width(336) + .height(56) .margin(20) - .fontSize(14) + .fontSize(16) + .fontColor('#182431') + .backgroundColor('#FFFFFF') .onChange((value: string) => { this.text = value }) Text(this.text) Button('Set caretPosition 1') + .backgroundColor('#007DFF') .margin(15) .onClick(() => { // 设置光标位置到第一个字符后 this.controller.caretPosition(1) }) - }.width('100%') + }.width('100%').height('100%').backgroundColor('#F1F3F5') } } ``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index bf56800c5b..6bed87416f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -57,21 +57,20 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) @Entry @Component struct ToggleExample { - build() { Column({ space: 10 }) { Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Switch, isOn: false }) - .selectedColor(0xed6f21) - .switchPointColor(0xe5ffffff) + .selectedColor('#007DFF') + .switchPointColor('#FFFFFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) Toggle({ type: ToggleType.Switch, isOn: true }) - .selectedColor(0x39a2db) - .switchPointColor(0xe5ffffff) + .selectedColor('#007DFF') + .switchPointColor('#FFFFFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) @@ -80,15 +79,15 @@ struct ToggleExample { Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Checkbox, isOn: false }) - .size({ width: 28, height: 28 }) - .selectedColor(0xed6f21) + .size({ width: 20, height: 20 }) + .selectedColor('#007DFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) Toggle({ type: ToggleType.Checkbox, isOn: true }) - .size({ width: 28, height: 28 }) - .selectedColor(0x39a2db) + .size({ width: 20, height: 20 }) + .selectedColor('#007DFF') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) @@ -97,17 +96,17 @@ struct ToggleExample { Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Button, isOn: false }) { - Text('status button').padding({ left: 12, right: 12 }) - } - .selectedColor(0xed6f21) + Text('status button').fontColor('#182431').fontSize(12) + }.width(106) + .selectedColor('rgba(0,125,255,0.20)') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) Toggle({ type: ToggleType.Button, isOn: true }) { - Text('status button').padding({ left: 12, right: 12 }) - } - .selectedColor(0x39a2db) + Text('status button').fontColor('#182431').fontSize(12) + }.width(106) + .selectedColor('rgba(0,125,255,0.20)') .onChange((isOn: boolean) => { console.info('Component status:' + isOn) }) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md index ac63672ce5..e635e30aef 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md @@ -33,84 +33,161 @@ TabContent() ## 示例 +示例1： + ```ts // xxx.ets @Entry @Component struct TabContentExample { - @State fontColor: string = 'rgba(0, 0, 0, 0.4)' - @State selectedFontColor: string = 'rgba(10, 30, 255, 1)' + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' @State currentIndex: number = 0 private controller: TabsController = new TabsController() @Builder TabBuilder(index: number) { Column() { - Image(this.currentIndex === index ? '/resources/ic_public_contacts_filled_selected.png' : '/resources/ic_public_contacts_filled.png') + Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') .width(24) .height(24) - .margin(6) - .opacity(this.currentIndex === index ? 1 : 0.4) + .margin({ bottom: 4 }) .objectFit(ImageFit.Contain) - Text(`Tab${(index > 2 ? (index - 1) : index) + 1}`) + Text(`Tab${index + 1}`) .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) .fontSize(10) + .fontWeight(500) + .lineHeight(14) }.width('100%') } - @Builder AddBuilder() { - Column() { - Image(this.currentIndex === 2 ? '/resources/ic_public_add_norm_filled_selected.png' : '/resources/ic_public_add_norm_filled.png') - .width(this.currentIndex === 2 ? 26 : 24) - .height(this.currentIndex === 2 ? 26 : 24) - .opacity(this.currentIndex === 2 ? 1 : 0.4) - .objectFit(ImageFit.Contain) - }.width('100%').height('100%').justifyContent(FlexAlign.Center) - } - build() { Column() { Tabs({ barPosition: BarPosition.End, controller: this.controller }) { TabContent() { Column() { - Text('Tab1').fontSize(32) + Text('Tab1') + .fontSize(36) + .fontColor('#182431') + .fontWeight(500) + .opacity(0.4) + .margin({ top: 30, bottom: 56.5 }) + Divider() + .strokeWidth(0.5) + .color('#182431') + .opacity(0.05) }.width('100%') }.tabBar(this.TabBuilder(0)) TabContent() { Column() { - Text('Tab2').fontSize(32) + Text('Tab2') + .fontSize(36) + .fontColor('#182431') + .fontWeight(500) + .opacity(0.4) + .margin({ top: 30, bottom: 56.5 }) + Divider() + .strokeWidth(0.5) + .color('#182431') + .opacity(0.05) }.width('100%') }.tabBar(this.TabBuilder(1)) TabContent() { Column() { - Text('Add').fontSize(32) + Text('Tab3') + .fontSize(36) + .fontColor('#182431') + .fontWeight(500) + .opacity(0.4) + .margin({ top: 30, bottom: 56.5 }) + Divider() + .strokeWidth(0.5) + .color('#182431') + .opacity(0.05) }.width('100%') - }.tabBar(this.AddBuilder()) + }.tabBar(this.TabBuilder(2)) TabContent() { Column() { - Text('Tab3').fontSize(32) + Text('Tab4') + .fontSize(36) + .fontColor('#182431') + .fontWeight(500) + .opacity(0.4) + .margin({ top: 30, bottom: 56.5 }) + Divider() + .strokeWidth(0.5) + .color('#182431') + .opacity(0.05) }.width('100%') }.tabBar(this.TabBuilder(3)) - - TabContent() { - Column() { - Text('Tab4').fontSize(32) - }.width('100%') - }.tabBar(this.TabBuilder(4)) } .vertical(false) - .barWidth(300) .barHeight(56) .onChange((index: number) => { this.currentIndex = index }) - .width('90%') - .backgroundColor('rgba(241, 243, 245, 0.95)') - }.width('100%').height(200).margin({ top: 15 }) + .width(360) + .height(190) + .backgroundColor('#F1F3F5') + .margin({ top: 38 }) + }.width('100%') } } ``` -![tabContent](figures/tabContent.gif) \ No newline at end of file + +示例2： + +```ts +// xxx.ets +@Entry +@Component +struct TabContentExample { + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' + @State currentIndex: number = 0 + private controller: TabsController = new TabsController() + + @Builder TabBuilder(index: number) { + Column() { + Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg') + .width(24) + .height(24) + .margin({ bottom: 4 }) + .objectFit(ImageFit.Contain) + Text('Tab') + .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) + .fontSize(10) + .fontWeight(500) + .lineHeight(14) + }.width('100%').height('100%').justifyContent(FlexAlign.Center) + } + + build() { + Column() { + Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { + TabContent() + .tabBar(this.TabBuilder(0)) + TabContent() + .tabBar(this.TabBuilder(1)) + TabContent() + .tabBar(this.TabBuilder(2)) + TabContent() + .tabBar(this.TabBuilder(3)) + } + .vertical(true) + .barWidth(96) + .barHeight(414) + .onChange((index: number) => { + this.currentIndex = index + }) + .width(96) + .height(414) + .backgroundColor('#F1F3F5') + .margin({ top: 52 }) + }.width('100%') + } +} +``` diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md index 05eef1bf72..10ab3f073c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md @@ -91,41 +91,59 @@ changeIndex(value: number): void @Entry @Component struct TabsExample { + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' + @State currentIndex: number = 0 private controller: TabsController = new TabsController() + @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() { Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { TabContent() { - Column().width('100%').height('100%').backgroundColor(Color.Pink) - }.tabBar('pink') + Column().width('100%').height('100%').backgroundColor('#00CB87') + }.tabBar(this.TabBuilder(0, 'green')) TabContent() { - Column().width('100%').height('100%').backgroundColor(Color.Yellow) - }.tabBar('yellow') + Column().width('100%').height('100%').backgroundColor('#007DFF') + }.tabBar(this.TabBuilder(1, 'blue')) TabContent() { - Column().width('100%').height('100%').backgroundColor(Color.Blue) - }.tabBar('blue') + Column().width('100%').height('100%').backgroundColor('#FFBF00') + }.tabBar(this.TabBuilder(2, 'yellow')) TabContent() { - Column().width('100%').height('100%').backgroundColor(Color.Green) - }.tabBar('green') + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.TabBuilder(3, 'pink')) } - .vertical(true) - .scrollable(true) + .vertical(false) .barMode(BarMode.Fixed) - .barWidth(70) - .barHeight(150) + .barWidth(360) + .barHeight(56) .animationDuration(400) .onChange((index: number) => { - console.info(index.toString()) + this.currentIndex = index }) - .width('90%') - .backgroundColor(0xF5F5F5) - }.width('100%').height(150).margin({ top: 5 }) + .width(360) + .height(296) + .margin({ top: 52 }) + .backgroundColor('#F1F3F5') + }.width('100%') } } ``` -![zh-cn_image_0000001174264360](figures/zh-cn_image_0000001174264360.gif) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md index e46f3861c8..a4e65b50d2 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md @@ -17,7 +17,7 @@ | size | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} | 设置高宽尺寸。 | | padding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | 设置内边距属性。
参数为Length类型时，四个方向内边距同时生效。
默认值：0
padding设置百分比时，上下左右内边距均以父容器的width作为基础值。 | | margin | [Margin](ts-types.md#margin) \| [Length](ts-types.md#length) | 设置外边距属性。
参数为Length类型时，四个方向外边距同时生效。
默认值：0
margin设置百分比时，上下左右外边距均以父容器的width作为基础值。| -| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。
默认值：
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | +| constraintSize | {
minWidth?: [Length](ts-types.md#length),
maxWidth?: [Length](ts-types.md#length),
minHeight?: [Length](ts-types.md#length),
maxHeight?: [Length](ts-types.md#length)
} | 设置约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。若设置的minWidth大于maxWidth，则minWidth生效，minHeight与maxHeight同理。
默认值：
{
minWidth: 0,
maxWidth: Infinity,
minHeight: 0,
maxHeight: Infinity
} | | layoutWeight | number \| string | 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。
**说明：**
仅在Row/Column/Flex布局中生效。| -- GitLab