diff --git a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/ButtonCustomStyle.ets b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/ButtonCustomStyle.ets index 6c568de72866ad4c6add5de96bfc73431ca8d468..dfbc79820732da7a70944289750bfd113e8b5222 100644 --- a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/ButtonCustomStyle.ets +++ b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/ButtonCustomStyle.ets @@ -31,27 +31,33 @@ export struct ButtonCustomStyle { title: $r('app.string.ButtonCustomStyle_titleOne'), description: $r('app.string.ButtonCustomStyle_descriptionOne') }) { + // [Start custom_button_border_radius] Button('Button', { type: ButtonType.Normal }) .id('circle_border') .borderRadius(10) + // [End custom_button_border_radius] } ComponentCard({ title: $r('app.string.ButtonCustomStyle_titleTwo'), description: $r('app.string.ButtonCustomStyle_descriptionTwo') }) { + // [Start custom_font_style] Button('Button').id('font_style') .fontSize(20) .fontColor(Color.Pink) .fontWeight(800) + // [End custom_font_style] } ComponentCard({ title: $r('app.string.ButtonCustomStyle_titleThree'), description: $r('app.string.ButtonCustomStyle_descriptionThree') }) { + // [Start custom_background_color] Button('Button').id('background_color') .backgroundColor(Color.Red) + // [End custom_background_color] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/CreateButton.ets b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/CreateButton.ets index b47e7359122f2fce22ae618f984455637a45f77c..d903c8599d0ab0c0d8e93fa44da34b2411ddc72d 100644 --- a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/CreateButton.ets +++ b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/CreateButton.ets @@ -28,20 +28,24 @@ export struct CreateButton { title: $r('app.string.CreateButton_titleOne'), description: $r('app.string.CreateButton_descriptionOne') }) { + // [Start create_button_by_label] Button('Button', { type: ButtonType.Capsule, stateEffect: true }) .id('button') + // [End create_button_by_label] } ComponentCard({ title: $r('app.string.CreateButton_titleTwo'), description: $r('app.string.CreateButton_descriptionTwo') }) { + // [Start create_button_by_button_options] Button() { Row({ space: 4 }) { Image($r('sys.media.ohos_ic_back')).width(20).height(40).fillColor(0xffffff) Text('back').fontColor(0xffffff) }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).width(90).height(40) }.id('button_back') + // [End create_button_by_button_options] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/FloatingButton.ets b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/FloatingButton.ets index 8d8eff8fac4c3b2f0879cbb80adc5dc5248de246..8d8cc3306c0d8817ea76e2569bc4e641e0414f2f 100644 --- a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/FloatingButton.ets +++ b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/FloatingButton.ets @@ -13,18 +13,23 @@ * limitations under the License. */ +// [Start floating_button] @Entry @Component export struct FloatingButton { @State private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; + // [StartExclude floating_button] pathStack: NavPathStack = new NavPathStack(); resourceToString(resource: Resource): string { return getContext(this).resourceManager.getStringSync(resource); } + // [EndExclude floating_button] build() { + // [StartExclude floating_button] NavDestination() { + // [EndExclude floating_button] Stack() { List({ space: 12, initialIndex: 0 }) { ForEach(this.arr, (item: number) => { @@ -46,6 +51,7 @@ export struct FloatingButton { right: 15 }) + // [Start custom_button_function] Button() { Image($r('sys.media.ohos_ic_public_add')) .fillColor(0xffffff) @@ -58,14 +64,18 @@ export struct FloatingButton { .position({ x: '80%', y: 570 }) .onClick(() => { // 需要执行的操作 + // [StartExclude custom_button_function] this.arr.push(this.arr.length); + // [EndExclude custom_button_function] }) + // [End custom_button_function] } .width('100%') .height('100%') .backgroundColor(0xDCDCDC) .padding({ top: 6 }) } + // [End floating_button] .backgroundColor('#f1f2f3') .title(this.resourceToString($r('app.string.FloatingButton_title'))) } diff --git a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/SetButtonType.ets b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/SetButtonType.ets index 243cffb38a64025a7e1a1c7e818843adca7d1c99..489944cc97e22d3f1d81c1e1ce544bc4c10e186c 100644 --- a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/SetButtonType.ets +++ b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/SetButtonType.ets @@ -31,25 +31,31 @@ export struct SetButtonType { title: $r('app.string.SetButtonType_titleOne'), description: $r('app.string.SetButtonType_descriptionOne') }) { + // [Start create_capsule_button] Button('Button', { type: ButtonType.Capsule }) .id('Capsule') + // [End create_capsule_button] } ComponentCard({ title: $r('app.string.SetButtonType_titleTwo'), description: $r('app.string.SetButtonType_descriptionTwo') }) { + // [Start create_circle_button] Button('Button', { type: ButtonType.Circle }) .id('Circle') .width(80) + // [End create_circle_button] } ComponentCard({ title: $r('app.string.SetButtonType_titleThree'), description: $r('app.string.SetButtonType_descriptionThree') }) { + // [Start create_normal_button] Button('Button', { type: ButtonType.Normal }) .id('Normal') + // [End create_normal_button] } ComponentCard({ diff --git a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/SubmitForm.ets b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/SubmitForm.ets index cf20b36b18a23534e22767c4e02905c4f74238a1..8fa9b3a42c08a5da64c3b5767c70a4dad1d477a4 100644 --- a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/SubmitForm.ets +++ b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/button/SubmitForm.ets @@ -13,9 +13,11 @@ * limitations under the License. */ +// [Start button_to_log_in_or_register] @Entry @Component export struct SubmitForm { + // [StartExclude button_to_log_in_or_register] @State username: string = '' @State password: string = '' pathStack: NavPathStack = new NavPathStack(); @@ -23,30 +25,40 @@ export struct SubmitForm { resourceToString(resource: Resource): string { return getContext(this).resourceManager.getStringSync(resource); } + // [EndExclude button_to_log_in_or_register] build() { + // [StartExclude button_to_log_in_or_register] NavDestination() { + // [EndExclude button_to_log_in_or_register] Column({ space: 12 }) { TextInput({ text: this.username, placeholder: 'input your username' }) .id('username') + // [StartExclude button_to_log_in_or_register] .onChange((value: string) => { this.username = value; }) + // [EndExclude button_to_log_in_or_register] TextInput({ text: this.password, placeholder: 'input your password' }) .type(InputType.Password) .id('password') + // [StartExclude button_to_log_in_or_register] .onChange((value: string) => { this.password = value; }) + // [EndExclude button_to_log_in_or_register] Button('Register') .width('100%') .id('register') .onClick(() => { // 需要执行的操作 + // [StartExclude button_to_log_in_or_register] this.username = 'your username'; this.password = 'your password'; + // [EndExclude button_to_log_in_or_register] }) }.padding(12) + // [End button_to_log_in_or_register] } .backgroundColor('#f1f2f3') .title(this.resourceToString($r('app.string.SubmitForm_title'))) diff --git a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/radio/RadioSample.ets b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/radio/RadioSample.ets index f6285254271822fc892a8d4964550e0205f0e2ae..eb388781aedbc0549a2df34f5140b21e56afa3cc 100644 --- a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/radio/RadioSample.ets +++ b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/radio/RadioSample.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start click_radio_to_change_function] import { promptAction } from '@kit.ArkUI'; @Entry @@ -31,26 +32,33 @@ export struct RadioSample { Column({ space: 8 }) { Text(this.message).id('message') Row() { + // [Start set_radio_status] Radio({ value: 'Ringing', group: 'radioGroup' }) .checked(true) + // [End set_radio_status] .id('ringing') .onChange((isChecked: boolean) => { if (isChecked) { // 切换为响铃模式 + // [StartExclude click_radio_to_change_function] this.message = 'Ringing mode'; + // [EndExclude click_radio_to_change_function] promptAction.showToast({ 'message': 'Ringing mode.' }); } }) Text('Ringing') }.width('25%') + // [Start change_radio_function] Row() { Radio({ value: 'Vibration', group: 'radioGroup' }) .id('vibration') .onChange((isChecked: boolean) => { if (isChecked) { // 切换为振动模式 + // [StartExclude change_radio_function] this.message = 'Vibration'; + // [EndExclude change_radio_function] promptAction.showToast({ 'message': 'Vibration mode.' }); } }) @@ -63,12 +71,15 @@ export struct RadioSample { .onChange((isChecked: boolean) => { if (isChecked) { // 切换为静音模式 + // [StartExclude change_radio_function] this.message = 'Silent'; + // [EndExclude change_radio_function] promptAction.showToast({ 'message': 'Silent mode.' }); } }) Text('Silent') }.width('25%') + // [End change_radio_function] } .alignItems(HorizontalAlign.Center) .backgroundColor('#fff') @@ -83,4 +94,5 @@ export struct RadioSample { .backgroundColor('#f1f2f3') .title(this.resourceToString($r('app.string.RadioSample_title'))) } -} \ No newline at end of file +} +// [End click_radio_to_change_function] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/CreateToggle.ets b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/CreateToggle.ets index 91dd2d56afcdbd750cbaad73f9cf1911d853ba19..c930bc32b36cf30f480a5e7c07fe6911c9c26318 100644 --- a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/CreateToggle.ets +++ b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/CreateToggle.ets @@ -30,20 +30,25 @@ export struct CreateToggle { ComponentCard({ title: 'ToggleType is Checkbox', }) { + // [Start create_toggle_with_checkbox] Toggle({ type: ToggleType.Checkbox, isOn: false }).id('toggle1') Toggle({ type: ToggleType.Checkbox, isOn: true }).id('toggle2') + // [End create_toggle_with_checkbox] } ComponentCard({ title: 'ToggleType is Switch', }) { + // [Start create_toggle_with_switch] Toggle({ type: ToggleType.Switch, isOn: false }).id('toggle3') Toggle({ type: ToggleType.Switch, isOn: true }).id('toggle4') + // [End create_toggle_with_switch] } ComponentCard({ title: 'ToggleType is Button', }) { + // [Start create_a_toggle_that_contains_subcomponents] Toggle({ type: ToggleType.Button, isOn: false }) { Text('status button') .fontColor('#182431') @@ -55,6 +60,7 @@ export struct CreateToggle { .fontColor('#182431') .fontSize(12) }.width(100).id('toggle6') + // [End create_a_toggle_that_contains_subcomponents] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/ToggleCaseExample.ets b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/ToggleCaseExample.ets index 4fe1617145d6ff43543388050bf3a63eb649c8d6..10a05aa64686c376e0586b1b6eec411b5e9dccd0 100644 --- a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/ToggleCaseExample.ets +++ b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/ToggleCaseExample.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start the_example_of_bluetooth] import { promptAction } from '@kit.ArkUI'; @Entry @@ -34,17 +35,23 @@ export struct ToggleSample { Row() { Text('Bluetooth') Blank() + // [Start create_toggle_case] Toggle({ type: ToggleType.Switch }) .id('toggle') .onChange((isOn: boolean) => { if (isOn) { + // [StartExclude create_toggle_case] this.message = 'on'; promptAction.showToast({ 'message': 'Bluetooth is on.' }); + // [EndExclude create_toggle_case] } else { + // [StartExclude create_toggle_case] this.message = 'off'; promptAction.showToast({ 'message': 'Bluetooth is off.' }); + // [EndExclude create_toggle_case] } }) + // [End create_toggle_case] }.width('100%') } .alignItems(HorizontalAlign.Start) @@ -60,4 +67,5 @@ export struct ToggleSample { .backgroundColor('#f1f2f3') .title(this.resourceToString($r('app.string.ToggleCaseExample_title'))) } -} \ No newline at end of file +} +// [End the_example_of_bluetooth] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/ToggleCustomStyle.ets b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/ToggleCustomStyle.ets index c6a8d8ffb1982525211d93a7d5d75e383821a205..529b693ebc6283e06161e6bd7e21583fb7a3ee32 100644 --- a/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/ToggleCustomStyle.ets +++ b/code/DocsSample/ArkUISample/ChooseComponent/entry/src/main/ets/pages/toggle/ToggleCustomStyle.ets @@ -31,6 +31,7 @@ export struct CustomStyle { title: $r('app.string.ToggleCustomStyle_titleOne'), description: $r('app.string.ToggleCustomStyle_descriptionOne') }) { + // [Start custom_toggle] Toggle({ type: ToggleType.Button, isOn: true }) { Text('status button') .fontColor(Color.White) @@ -45,18 +46,21 @@ export struct CustomStyle { Toggle({ type: ToggleType.Switch, isOn: true }) .selectedColor(Color.Pink) .id('toggle3') + // [End custom_toggle] } ComponentCard({ title: $r('app.string.ToggleCustomStyle_titleTwo'), description: $r('app.string.ToggleCustomStyle_descriptionTwo') }) { + // [Start custom_switch_point_color] Toggle({ type: ToggleType.Switch, isOn: false }) .switchPointColor(Color.Pink) .id('toggle4') Toggle({ type: ToggleType.Switch, isOn: true }) .switchPointColor(Color.Pink) .id('toggle5') + // [End custom_switch_point_color] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/common/PromptActionClass.ts b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/common/PromptActionClass.ts index f68734fd7740c085dc03aee7fbb3ace1aea54bc7..b76828c66366e8118265b204c86b639463db7626 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/common/PromptActionClass.ts +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/common/PromptActionClass.ts @@ -14,6 +14,7 @@ */ // PromptActionClass.ts +// [Start open_close_update_custom_dialog] import { BusinessError } from '@kit.BasicServicesKit'; import { ComponentContent, window } from '@kit.ArkUI'; import { UIContext } from '@ohos.arkui.UIContext'; @@ -35,6 +36,7 @@ export class PromptActionClass { this.options = options; } + // [Start call_open_custom_dialog] static openDialog() { if (this.contentNode !== null) { this.ctx.getPromptAction().openCustomDialog(this.contentNode, this.options) @@ -48,7 +50,9 @@ export class PromptActionClass { }) } } + // [End call_open_custom_dialog] + // [Start call_close_custom_dialog] static closeDialog() { if (this.contentNode !== null) { this.ctx.getPromptAction().closeCustomDialog(this.contentNode) @@ -62,7 +66,9 @@ export class PromptActionClass { }) } } + // [End call_close_custom_dialog] + // [Start update_custom_dialog_property] static updateDialog(options: Object) { if (this.contentNode !== null) { this.ctx.getPromptAction().updateCustomDialog(this.contentNode, options) @@ -76,4 +82,6 @@ export class PromptActionClass { }) } } -} \ No newline at end of file + // [End update_custom_dialog_property] +} +// [End open_close_update_custom_dialog] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Index2.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Index2.ets index b01bc1145e3714affc0fc17588bf25664cf68154..0573f0b09a3f09f30ececee30f17ce364289ac23 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Index2.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Index2.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start dialog_route_jump_back] @Entry @Component struct Index2 { @@ -31,4 +32,5 @@ struct Index2 { }) }.width('100%').height('100%').margin({ top: 20 }) } -} \ No newline at end of file +} +// [End dialog_route_jump_back] diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Menu/CreateMenu.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Menu/CreateMenu.ets index b6c65808534e46a6b6bd7b1e9dc2430357237d8b..e6c8f9d3123eb4a748aa4871a0a9e1ec16aa2bb7 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Menu/CreateMenu.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Menu/CreateMenu.ets @@ -15,6 +15,7 @@ import { PromptAction } from '@kit.ArkUI'; +// [Start builder_menu_content] class Tmp { private iconStr2: ResourceStr = $r('app.media.app_icon') @@ -75,9 +76,11 @@ export struct menuExample { } } build() { + // [StartExclude builder_menu_content] NavDestination() { Column({ space: 12 }) { + // [Start call_bind_menu] Button($r('app.string.menu_default')) .bindMenu([ { @@ -87,16 +90,21 @@ export struct menuExample { } } ]) + // [End call_bind_menu] .width(160) .height(50) + // [Start bind_menu_property] Button($r('app.string.menu_bind')) .bindMenu(this.MyMenu) + // [End bind_menu_property] .width(160) .height(50) + // [Start create_right_click_menu] Button($r('app.string.menu_rightClick')) .bindContextMenu(this.MyMenu, ResponseType.RightClick) + // [End create_right_click_menu] .width(160) .height(50) @@ -108,4 +116,6 @@ export struct menuExample { .backgroundColor('#f1f2f3') .title($r('app.string.create_menu')) } -} \ No newline at end of file + // [EndExclude builder_menu_content] +} +// [End builder_menu_content] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Toast/CreateToast.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Toast/CreateToast.ets index d137c48a1a8e8661ac419394ffd595d9f3912725..878844d16a59752fb3664e363cad27b69d7e9841 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Toast/CreateToast.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/Toast/CreateToast.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start create_toast] import { PromptAction } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; @@ -49,4 +50,5 @@ export struct CreateToastExample { .backgroundColor('#f1f2f3') .title($r('app.string.CreateToast_title')) } -} \ No newline at end of file +} +// [End create_toast] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/CreateCustomDialog.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/CreateCustomDialog.ets index c249fbd4d283c2a6c3ec8dd0be63aca6e69112ab..55f609efe0d0a6dbe00f3e1543982c1e60af1b64 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/CreateCustomDialog.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/CreateCustomDialog.ets @@ -16,6 +16,7 @@ import { PromptActionClass } from '../../common/PromptActionClass'; import { ComponentContent } from '@kit.ArkUI'; +// [Start create_custom_dialog_example] @CustomDialog struct CustomDialogExample { controller: CustomDialogController = new CustomDialogController({ @@ -34,7 +35,10 @@ struct CustomDialogExample { }) } } +// [End create_custom_dialog_example] +// [Start click_event_pop_dialog] +// [Start create_custom_dialog_controller] @Entry @Component export struct CreateDialog { @@ -42,6 +46,7 @@ export struct CreateDialog { builder: CustomDialogExample(), }) + // [StartExclude create_custom_dialog_controller] build() { NavDestination() { Column({ space: 12 }) { @@ -61,4 +66,7 @@ export struct CreateDialog { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_create')) } + // [EndExclude create_custom_dialog_controller] + // [End create_custom_dialog_controller] + // [End click_event_pop_dialog] } \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogAnimation.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogAnimation.ets index 09484b44ad3ea2d790a59074ad3274a93b8bb683..e8a2125d334a42512265f2cdcfcc54fd66ebd4a8 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogAnimation.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogAnimation.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start set_dialog_animation] @CustomDialog struct CustomDialogExample { controller?: CustomDialogController; @@ -74,4 +75,5 @@ export struct DialogAnimation { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_Animation1')) } -} \ No newline at end of file +} +// [End set_dialog_animation] diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction.ets index 9cd96af5b2b776050e930f6fc3c97fbd4c1fdead..a9982e613173d1b893b5f79cc87e62a988942db2 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction.ets @@ -16,6 +16,7 @@ import { PromptActionClass } from '../../common/PromptActionClass'; import { ComponentContent } from '@kit.ArkUI'; +// [Start custom_dialog_build_button] @CustomDialog struct CustomDialogExample { cancel?: () => void; @@ -62,7 +63,9 @@ struct CustomDialogExample { } } +// [End custom_dialog_build_button] +// [Start dialog_constructor_accept] @Entry @Component export struct DialogInteraction { @@ -104,4 +107,5 @@ export struct DialogInteraction { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_interaction')) } -} \ No newline at end of file + // [End dialog_constructor_accept] +} diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction1.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction1.ets index b9080bc7ef59d1c420e3d8991f766bd6867d8a0d..f2d21b0f986528004cdc7809ffab842e841df639 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction1.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogInteraction1.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start dialog_route_jump] @CustomDialog struct CustomDialogExample { @Link textValue: string; @@ -147,4 +148,5 @@ export struct DialogInteraction1 { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_interaction1')) } -} \ No newline at end of file +} +// [End dialog_route_jump] diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogStyle.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogStyle.ets index 2475a81a05c5a6aa8f3d4b26c3b0bd76d1710641..fe3cc88501af2c73e12c9372f76cf612a6495622 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogStyle.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/DialogStyle.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start set_dialog_style] @CustomDialog struct CustomDialogExample { controller?: CustomDialogController; @@ -82,4 +83,5 @@ export struct DialogStyle { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_style')) } -} \ No newline at end of file +} +// [End set_dialog_style] diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/NestDialog.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/NestDialog.ets index 32f1356c419d36b2e168e9641b3bc27b8d83cb3e..5ce2b1ffb785052718478ba3a1b73d2d725860ba 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/NestDialog.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/customdialog/NestDialog.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start set_dialog_nest] @CustomDialog struct CustomDialogExampleTwo { controllerTwo?: CustomDialogController; @@ -167,4 +168,5 @@ export struct NestDialog { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_nest')) } -} \ No newline at end of file +} +// [End set_dialog_nest] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/ActionSheet.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/ActionSheet.ets index a0f5aa844651bbfa353f8da21912a65db16c42bc..edc3baea8251f17286cc909df2d52b26188d1a94 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/ActionSheet.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/ActionSheet.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start action_sheet_dialog] @Entry @Component export struct showActionSheetExample { @@ -80,4 +81,5 @@ export struct showActionSheetExample { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_ActionSheet')) } -} \ No newline at end of file +} +// [End action_sheet_dialog] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/AlertDialog.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/AlertDialog.ets index 3c662e1a0bd8eff011a6675a6f001d1b6ef67595..825c1f7ed93b7d661c5f189dd8687986f9fd4156 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/AlertDialog.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/AlertDialog.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start alert_dialog] import { PromptAction } from '@kit.ArkUI'; @Entry @@ -70,4 +71,5 @@ export struct showAlertDialogExample { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_AlertDialog')) } -} \ No newline at end of file +} +// [End alert_dialog] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/CalendarPickerDialog.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/CalendarPickerDialog.ets index 5674c4cdc47a3674bf9379474323c6d791a14b04..c12418f2f7f837b719ee5397d8abf7f582edab93 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/CalendarPickerDialog.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/CalendarPickerDialog.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start calender_picker_dialog] import { PromptAction } from '@kit.ArkUI'; @Entry @@ -59,4 +60,5 @@ export struct CalendarDialog { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_calender')) } -} \ No newline at end of file +} +// [End calender_picker_dialog] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/DatePickerDialog.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/DatePickerDialog.ets index 65a9abd17f21093d5e42ec9d8025c6ec5553cc5a..28caa25d66d07d063b681ea5dffbd8df5398b73b 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/DatePickerDialog.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/DatePickerDialog.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start date_picker_dialog] import { PromptAction } from '@kit.ArkUI'; @Entry @@ -50,4 +51,5 @@ export struct DatePickerDialogExample { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_date')) } -} \ No newline at end of file +} +// [End date_picker_dialog] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/TextPickerDialog.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/TextPickerDialog.ets index 150d4fbe57c60f1f864d9cc15fdb52132a824db9..165285fbc1f7f2aba0988c88d2e2f3362c770aa0 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/TextPickerDialog.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/TextPickerDialog.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start text_picker_dialog] import { PromptAction } from '@kit.ArkUI'; @Entry @@ -63,4 +64,5 @@ export struct TextPickerDialogExample { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_text')) } -} \ No newline at end of file +} +// [End text_picker_dialog] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/TimePickerDialog.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/TimePickerDialog.ets index 2b7365809b75930b0c20282147f4a30d1793b25d..7f0393367b4ae9594a1ea01c6ad12f8a11ff8c59 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/TimePickerDialog.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/fixedstyledialog/TimePickerDialog.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start time_picker_dialog] import { PromptAction } from '@kit.ArkUI'; @Entry @@ -56,4 +57,5 @@ export struct TimePickerDialogExample { .backgroundColor('#f1f2f3') .title($r('app.string.CustomDialog_time')) } -} \ No newline at end of file +} +// [End time_picker_dialog] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/opencustomdialog/openCustomDialog.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/opencustomdialog/openCustomDialog.ets index f2b78545ff9d8a63af5c764800da8daa8531f188..4c65b64e1ef59c54bca7f93660fa1f1240079549 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/opencustomdialog/openCustomDialog.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/opencustomdialog/openCustomDialog.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start open_close_component_content] import { PromptActionClass } from '../../common/PromptActionClass'; import { ComponentContent } from '@kit.ArkUI'; @@ -89,8 +90,10 @@ function buildText(params: Params) { export struct openCustomDialog { @State message: string = 'hello' private ctx: UIContext = this.getUIContext(); + // [Start create_component_content] private contentNode: ComponentContent = new ComponentContent(this.ctx, wrapBuilder(buildText), new Params(this.message)); + // [End create_component_content] aboutToAppear(): void { PromptActionClass.setContext(this.ctx); @@ -126,4 +129,5 @@ export struct openCustomDialog { .backgroundColor('#f1f2f3') .title($r('app.string.open_customDialog')) } -} \ No newline at end of file +} +// [End open_close_component_content] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/ButtonPopup.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/ButtonPopup.ets index a67c40277b67aaf3bc9cbed815eee6972c23e663..114fc049e35955c71c3d11ac88db751f19cf9efb 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/ButtonPopup.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/ButtonPopup.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start button_popup] @Entry @Component export struct ButtonPopupExample { @@ -58,4 +59,5 @@ export struct ButtonPopupExample { .backgroundColor('#f1f2f3') .title($r('app.string.button_popup')) } -} \ No newline at end of file +} +// [End button_popup] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/CustomPopup.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/CustomPopup.ets index d8e133aeade78502268c2af3cd4b705cdbe24583..c533a4f49056d7da52b8086304a12e3c1a6a0f5c 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/CustomPopup.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/CustomPopup.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start custom_popup] @Entry @Component export struct CustomPopupExample { @@ -58,4 +59,5 @@ export struct CustomPopupExample { .backgroundColor('#f1f2f3') .title($r('app.string.custom_popup')) } -} \ No newline at end of file +} +// [End custom_popup] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupAnimation.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupAnimation.ets index 686b519bc6ceaa10ac7b5947a02ac28bed55dae7..2ef0e99f872fd0f9298ce1a88b6978aeff8f87a7 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupAnimation.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupAnimation.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start animation_popup] @Entry @Component export struct AnimationPopupExample { @@ -81,4 +82,5 @@ export struct AnimationPopupExample { .backgroundColor('#f1f2f3') .title($r('app.string.AnimationPopup_title')) } -} \ No newline at end of file +} +// [End animation_popup] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupStateChange.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupStateChange.ets index a76171f7b731f9badb933064bfc0836240eb372c..a9fc84f9844ebac1f5f2c79e7ef5b8336be22a42 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupStateChange.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupStateChange.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start state_popup] @Entry @Component export struct StatePopupExample { @@ -46,4 +47,5 @@ export struct StatePopupExample { .backgroundColor('#f1f2f3') .title($r('app.string.onStateChange_title')) } -} \ No newline at end of file +} +// [End state_popup] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupStyle.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupStyle.ets index 34127bc9495fc3a445842e2b8e9d13a1d6e44568..32426e33258fcf5b3976588d19b7bd58eaac91de 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupStyle.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/PopupStyle.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start style_popup] @Entry @Component export struct StylePopupExample { @@ -58,4 +59,5 @@ export struct StylePopupExample { .backgroundColor('#f1f2f3') .title($r('app.string.StylePopup_title')) } -} \ No newline at end of file +} +// [End style_popup] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/TextPrompts.ets b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/TextPrompts.ets index 9e81530b5ae638154f48d662f7b583a2b2b986bc..4ff872db5c2306411b3e34fabc9154d8771fc316 100644 --- a/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/TextPrompts.ets +++ b/code/DocsSample/ArkUISample/DialogProject/entry/src/main/ets/pages/popup/TextPrompts.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start text_popup] @Entry @Component export struct TextPopupExample { @@ -41,4 +42,5 @@ export struct TextPopupExample { .backgroundColor('#f1f2f3') .title($r('app.string.TextPopup_title')) } -} \ No newline at end of file +} +// [End text_popup] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/Touch/ClickEvent.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/Touch/ClickEvent.ets index aa5cf871aecb1a50e5216f5aee4b04533b30d586..84555db100b8e1c1ad81f4dc1be3f189d24286d5 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/Touch/ClickEvent.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/Touch/ClickEvent.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start click_event_handle] @Entry @Component export struct Click { @@ -48,4 +49,5 @@ export struct Click { .backgroundColor('#f1f2f3') .title($r('app.string.Touch_ClickEvent_title')) } -} \ No newline at end of file +} +// [End click_event_handle] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/Touch/TouchEvent.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/Touch/TouchEvent.ets index 435d175e86c6e516e5fae8aba7a6e87416d31081..d423f073d40410c426dba4ca19877c7c52290f7c 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/Touch/TouchEvent.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/Touch/TouchEvent.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start touch_event_handle] @Entry @Component export struct Touch { @@ -70,4 +71,5 @@ export struct Touch { .backgroundColor('#f1f2f3') .title($r('app.string.Touch_TouchEvent_title')) } -} \ No newline at end of file +} +// [End touch_event_handle] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/HoverEffect.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/HoverEffect.ets index 2d9c8e303471c92f1ed63d6cae081b687ddf3a2e..198de86e063fb71801303866048a561921b6471d 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/HoverEffect.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/HoverEffect.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start mouse_hover_effect] @Entry @Component export struct HoverEffectSample { @@ -47,4 +48,5 @@ export struct HoverEffectSample { .backgroundColor('#f1f2f3') .title($r('app.string.HoverEffectSample_title')) } -} \ No newline at end of file +} +// [End mouse_hover_effect] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnHover.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnHover.ets index 1fd6b22d4b518b61ae1f262e00d6636a65893d14..6992c005cee95ca32fa5a6fffdd837e37af9470c 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnHover.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnHover.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start dynamic_response_mouse_hover] @Entry @Component export struct Hover { @@ -46,4 +47,5 @@ export struct Hover { .backgroundColor('#f1f2f3') .title($r('app.string.Device_OnHover_title')) } -} \ No newline at end of file +} +// [End dynamic_response_mouse_hover] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnKey.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnKey.ets index 785cf406e017e591ff1bd0c984c8b0a93b7f127d..eaa8bc571e56996e40634da472ab23320ec88691 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnKey.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnKey.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start listen_response_key_event] @Entry @Component export struct OnKey { @@ -73,4 +74,5 @@ export struct OnKey { .backgroundColor('#f1f2f3') .title($r('app.string.Device_OnKey_title')) } -} \ No newline at end of file +} +// [End listen_response_key_event] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnKeyPreIme.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnKeyPreIme.ets index d5fba8b194ba60c99868d0e2866703303402ffa7..32edef1b979e0a2bcf6ad0dabc73691f2f26872b 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnKeyPreIme.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnKeyPreIme.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start key_event_intercept] import { KeyCode } from '@kit.InputKit'; @Entry @@ -50,4 +51,5 @@ export struct PreIme { .backgroundColor('#f1f2f3') .title($r('app.string.Device_OnKeyPreIme_title')) } -} \ No newline at end of file +} +// [End key_event_intercept] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnMouse.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnMouse.ets index 209e6c58432dbb5d0a4ad11d0195822489ba5135..baab41e24e74633e70a408537ae47d37aa2d4bcb 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnMouse.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/device/OnMouse.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start listen_response_mouse_event] @Entry @Component export struct Mouse { @@ -76,4 +77,5 @@ export struct Mouse { .backgroundColor('#f1f2f3') .title($r('app.string.Device_OnMouse_title')) } -} \ No newline at end of file +} +// [End listen_response_mouse_event] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/drag/DefaultDrag.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/drag/DefaultDrag.ets index 22e6b2e2e81f86a9cfe9a00f3be81069bb5b0b85..ad23de3c804ceb7331bb8b71d5a8a0463ed1caf7 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/drag/DefaultDrag.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/drag/DefaultDrag.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start default_drag] import { unifiedDataChannel, uniformTypeDescriptor } from '@kit.ArkData'; import { promptAction } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit'; @@ -27,6 +28,7 @@ export struct DefaultDrag { @State imgState: Visibility = Visibility.Visible; @State pixmap: image.PixelMap | undefined = undefined; + // [Start generate_pix_map] @Builder pixelMapBuilder() { Column() { @@ -37,6 +39,8 @@ export struct DefaultDrag { } } + // [StartExclude generate_pix_map] + // [Start data_delayed_retry] getDataFromUdmfRetry(event: DragEvent, callback: (data: DragEvent) => void) { try { let data: UnifiedData = event.getData(); @@ -64,6 +68,8 @@ export struct DefaultDrag { this.getDataFromUdmfRetry(event, callback); }, 1500); } + // [End data_delayed_retry] + // [EndExclude generate_pix_map] // 调用componentSnapshot中的createFromBuilder接口截取自定义builder的截图 private getComponentSnapshot(): void { @@ -78,6 +84,7 @@ export struct DefaultDrag { this.pixmap = pixmap; }) } + // [End generate_pix_map] // 长按50ms时提前准备自定义截图的pixmap private PreDragChange(preDragStatus: PreDragStatus): void { @@ -99,15 +106,20 @@ export struct DefaultDrag { .margin(10) .backgroundColor('#008888') Row() { + // [Start module_draggable] Image($r('app.media.app_icon')) .width(100) .height(100) .draggable(true) .margin({ left: 15 }) + // [StartExclude module_draggable] .visibility(this.imgState)// 绑定平行手势，可同时触发应用自定义长按手势 + // [Start bind_parallel_gesture] .parallelGesture(LongPressGesture().onAction(() => { promptAction.showToast({ duration: 100, message: 'Long press gesture trigger' }); })) + // [End bind_parallel_gesture] + // [EndExclude module_draggable] .onDragStart((event) => { let data: unifiedDataChannel.Image = new unifiedDataChannel.Image(); data.imageUri = 'common/pic/img.png'; @@ -119,10 +131,15 @@ export struct DefaultDrag { extraInfo: 'this is extraInfo', }; return dragItemInfo; - })// 提前准备拖拽自定义背板图 + }) + // [End module_draggable] + // 提前准备拖拽自定义背板图 + // [Start set_custom_drag_status] .onPreDrag((status: PreDragStatus) => { this.PreDragChange(status); }) + // [End set_custom_drag_status] + // [Start set_on_drag_end] .onDragEnd((event) => { // onDragEnd里取到的result值在接收方onDrop设置 if (event.getResult() === DragResult.DRAG_SUCCESSFUL) { @@ -131,6 +148,7 @@ export struct DefaultDrag { promptAction.showToast({ duration: 100, message: 'Drag failed' }); } }) + // [End set_on_drag_end] } Text('Drag Target Area') @@ -146,11 +164,16 @@ export struct DefaultDrag { .draggable(true) .margin({ left: 15 }) .border({ color: Color.Black, width: 1 })// 控制角标显示类型为MOVE，即不显示角标 + // [Start set_drag_behavior_move] .onDragMove((event) => { event.setResult(DragResult.DROP_ENABLED) event.dragBehavior = DragBehavior.MOVE + // [End set_drag_behavior_move] }) + // [Start allow_drag_type] .allowDrop([uniformTypeDescriptor.UniformDataType.IMAGE]) + // [End allow_drag_type] + // [Start set_on_drop_call] .onDrop((dragEvent?: DragEvent) => { // 获取拖拽数据 this.getDataFromUdmf((dragEvent as DragEvent), (event: DragEvent) => { @@ -164,6 +187,7 @@ export struct DefaultDrag { event.setResult(DragResult.DRAG_SUCCESSFUL); }) }) + // [End set_on_drop_call] } } .width('100%') @@ -179,4 +203,5 @@ export struct DefaultDrag { .backgroundColor('#f1f2f3') .title($r('app.string.Drag_DefaultDrag_title')) } -} \ No newline at end of file +} +// [End default_drag] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/drag/MoreDrag.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/drag/MoreDrag.ets index 62b030bd7cc540ec6980422ec5e37a5651bbd6a6..85b1a0ed9793fb3ec1f1585146043477cb2e6676 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/drag/MoreDrag.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/drag/MoreDrag.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start more_drag] import { KeyCode } from '@kit.InputKit'; import { image } from '@kit.ImageKit'; @@ -60,6 +61,7 @@ export struct MoreDrag { Column({ space: 12 }) { Column({ space: 5 }) { + // [Start create_grid_item_module] Grid() { ForEach(this.numbers, (idx: number) => { GridItem() { @@ -70,6 +72,7 @@ export struct MoreDrag { .opacity(1.0) .id('grid' + idx) } + // [StartExclude create_grid_item_module] .dragPreview(this.previewData[idx]) .selectable(true) .selected(this.isSelectedGrid[idx]) @@ -78,8 +81,10 @@ export struct MoreDrag { normal: this.normalStyles, selected: this.selectStyles }) + // [Start grid_item_module_selected_true] .onClick(() => { this.isSelectedGrid[idx] = !this.isSelectedGrid[idx]; + // [StartExclude grid_item_module_selected_true] if (this.isSelectedGrid[idx]) { this.numberBadge++; let gridItemName = 'grid' + idx; @@ -95,14 +100,20 @@ export struct MoreDrag { } else { this.numberBadge--; } + // [EndExclude grid_item_module_selected_true] }) + // [End grid_item_module_selected_true] // 使能多选拖拽，右上角数量角标需要应用设置numberBadge参数 + // [EndExclude create_grid_item_module] + // [Start drag_preview_options] .dragPreviewOptions({ numberBadge: this.numberBadge }, { isMultiSelectionEnabled: true, defaultAnimationBeforeLifting: true }) + // [End drag_preview_options] .onDragStart(() => { }) }, (idx: string) => idx) } + // [End create_grid_item_module] .columnsTemplate('1fr 1fr 1fr 1fr 1fr') .columnsGap(5) .rowsGap(10) @@ -117,4 +128,5 @@ export struct MoreDrag { .backgroundColor('#f1f2f3') .title($r('app.string.Drag_MoreDrag_title')) } -} \ No newline at end of file +} +// [End more_drag] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/DefaultFocus.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/DefaultFocus.ets index 17950d8453aeba1abd5c901a2731836790826419..96fe7d74e62b4d7baefe941af59b78203e29ad20 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/DefaultFocus.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/DefaultFocus.ets @@ -15,6 +15,7 @@ import { KeyCode } from '@kit.InputKit'; +// [Start focus_visualization_manage] @Entry @Component export struct DefaultFocus { @@ -81,4 +82,5 @@ export struct DefaultFocus { .backgroundColor('#f1f2f3') .title($r('app.string.Focus_DefaultFocus_title')) } -} \ No newline at end of file +} +// [End focus_visualization_manage] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusAndClick.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusAndClick.ets index 7a745a6606bb42947ab7a74049b87ba33732d70e..f5aebe743e29b644ce9d13c1570b2d3e3a0c67d4 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusAndClick.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusAndClick.ets @@ -16,6 +16,7 @@ import { KeyCode } from '@kit.InputKit'; import { ColorMetrics, LengthMetrics } from '@kit.ArkUI'; +// [Start dynamic_focus_click_count] @Entry @Component export struct FocusAndClick { @@ -49,4 +50,5 @@ export struct FocusAndClick { .backgroundColor('#f1f2f3') .title($r('app.string.Focus_FocusAndClick_title')) } -} \ No newline at end of file +} +// [End dynamic_focus_click_count] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusController.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusController.ets index 20790003985759fb3b7e4eb50e091054278e5a4e..9a282c3093f866dfe7ccbde177ac57bee2000714 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusController.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusController.ets @@ -16,6 +16,7 @@ import { KeyCode } from '@kit.InputKit'; import { ColorMetrics, LengthMetrics } from '@kit.ArkUI'; +// [Start dynamic_focus_control_demo] @Entry @Component export struct FocusControl { @@ -95,4 +96,5 @@ export struct FocusControl { .backgroundColor('#f1f2f3') .title($r('app.string.Focus_FocusController_title')) } -} \ No newline at end of file +} +// [End dynamic_focus_control_demo] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusPriority.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusPriority.ets index e98641f80a174ee0c85ca8a282d1ff6d4262dc57..23e38577d10744c6646b7e14a48721f925a340b6 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusPriority.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusPriority.ets @@ -15,6 +15,7 @@ import { KeyCode } from '@kit.InputKit'; +// [Start focus_priority_manage] @Entry @Component export struct FocusPrioritySample { @@ -43,4 +44,5 @@ export struct FocusPrioritySample { .backgroundColor('#f1f2f3') .title($r('app.string.Focus_FocusPriority_title')) } -} \ No newline at end of file +} +// [End focus_priority_manage] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusScopePriority.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusScopePriority.ets index d4293025b8c5a4ae8f335e9b064b2edf3a67c16d..eae88de81d087426eb3206cbec9568109abaef5d 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusScopePriority.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusScopePriority.ets @@ -16,6 +16,7 @@ import { KeyCode } from '@kit.InputKit'; import { ColorMetrics, LengthMetrics } from '@kit.ArkUI'; +// [Start focus_scope_navigation] @Entry @Component export struct FocusScopePriority { @@ -145,4 +146,5 @@ export struct FocusScopePriority { .backgroundColor('#f1f2f3') .title($r('app.string.Focus_FocusScopePriority_title')) } -} \ No newline at end of file +} +// [End focus_scope_navigation] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusStyle.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusStyle.ets index 29826442789b710f246a79fe15f31ff897b8aa49..2841736de10f5d549f62ef9d926e3379de825a06 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusStyle.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/FocusStyle.ets @@ -16,6 +16,7 @@ import { KeyCode } from '@kit.InputKit'; import { ColorMetrics, LengthMetrics } from '@kit.ArkUI'; +// [Start focus_style_manage] @Entry @Component export struct FocusStyle { @@ -48,4 +49,5 @@ export struct FocusStyle { .backgroundColor('#f1f2f3') .title($r('app.string.Focus_FocusStyle_title')) } -} \ No newline at end of file +} +// [End focus_style_manage] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/Focusable.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/Focusable.ets index 5dae705e3b2a5bc53eba530398882b58beb3f6ab..27a7def39df2e59a8edbc2b4e226db96179e677a 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/Focusable.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/Focusable.ets @@ -12,9 +12,10 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - + import { KeyCode } from '@kit.InputKit'; +// [Start dynamic_focus_control_manage] @Entry @Component export struct FocusableExample { @@ -108,4 +109,5 @@ export struct FocusableExample { .backgroundColor('#f1f2f3') .title($r('app.string.Focus_Focusable_title')) } -} \ No newline at end of file +} +// [End dynamic_focus_control_manage] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/onFocusBlur.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/onFocusBlur.ets index 15d3549b87944bf4c7cd371ad915d25f6b70ba7e..4f993f6bef8dd5b4ac138a13fd380803d05b4748 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/onFocusBlur.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/focus/onFocusBlur.ets @@ -15,6 +15,7 @@ import { KeyCode } from '@kit.InputKit'; +// [Start focus_dynamic_reflect] @Entry @Component export struct OnFocusBlur { @@ -79,4 +80,5 @@ export struct OnFocusBlur { .backgroundColor('#f1f2f3') .title($r('app.string.Focus_OnFocusBlur_title')) } -} \ No newline at end of file +} +// [End focus_dynamic_reflect] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/gesturejudge/GestureJudge.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/gesturejudge/GestureJudge.ets index 08a2fd5be452bf51c898fabe92a3bc67d6f372ee..bce286e8def63f96f3a88484190dc3e8038fe788 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/gesturejudge/GestureJudge.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/gesturejudge/GestureJudge.ets @@ -13,15 +13,19 @@ * limitations under the License. */ +// [Start gesture_judge] +// [Start set_gesture_judge] @Entry @Component export struct GestureJudge { scroller: Scroller = new Scroller(); + // [StartExclude set_gesture_judge] scroller2: Scroller = new Scroller(); private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; private childRecognizer: GestureRecognizer = new GestureRecognizer(); private currentRecognizer: GestureRecognizer = new GestureRecognizer(); private lastOffset: number = 0; + // [EndExclude set_gesture_judge] build() { NavDestination() { @@ -115,6 +119,7 @@ export struct GestureJudge { } return GestureJudgeResult.CONTINUE; }) + // [StartExclude set_gesture_judge] .parallelGesture( // 绑定一个Pan手势作为动态控制器 PanGesture() .onActionUpdate((event: GestureEvent) => { @@ -151,6 +156,7 @@ export struct GestureJudge { this.lastOffset = event.offsetY; }) ) + // [EndExclude set_gesture_judge] }.width('100%').height('90%').backgroundColor(0xDCDCDC) } .width('100%') @@ -160,4 +166,6 @@ export struct GestureJudge { .backgroundColor('#f1f2f3') .title($r('app.string.gesture_GestureJudge_title')) } -} \ No newline at end of file +} +// [End set_gesture_judge] +// [End gesture_judge] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Exclusive.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Exclusive.ets index 628a7f590ad9e5d39e865e00b4d480aa541b0d65..a72dfbf7621f6bdfc0372a6a8093d27657d67be9 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Exclusive.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Exclusive.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start exclusive_recognition_gesture] @Entry @Component export struct Exclusive { @@ -52,4 +53,5 @@ export struct Exclusive { .backgroundColor('#f1f2f3') .title($r('app.string.groupgesture_Exclusive_title')) } -} \ No newline at end of file +} +// [End exclusive_recognition_gesture] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Parallel.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Parallel.ets index 2159c4570a59f2c01443e97784a32d26c58895f0..e08c5b8b0f39a0e7c3f1fd940f071033b311f7eb 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Parallel.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Parallel.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start parallel_recognition_gesture] @Entry @Component export struct Parallel { @@ -52,4 +53,5 @@ export struct Parallel { .backgroundColor('#f1f2f3') .title($r('app.string.groupgesture_Parallel_title')) } -} \ No newline at end of file +} +// [End parallel_recognition_gesture] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Sequence.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Sequence.ets index 9d0269584e25902ff583f948c0f5cdc3ce363e13..9f88c3236bfa63699cb0056f1c62165e458ae999 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Sequence.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/groupgesture/Sequence.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start sequence_recognition_gesture] @Entry @Component export struct Sequence { @@ -88,4 +89,5 @@ export struct Sequence { .backgroundColor('#f1f2f3') .title($r('app.string.groupgesture_Sequence_title')) } -} \ No newline at end of file +} +// [End sequence_recognition_gesture] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/LongPressGesture.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/LongPressGesture.ets index 87adf25560d3d58519f6aa869ee513ba786d17d4..ddf02d55f8e294dec314a645bcc821231df11515 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/LongPressGesture.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/LongPressGesture.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start catch_long_press_event] @Entry @Component export struct LongPress { @@ -51,4 +52,5 @@ export struct LongPress { .backgroundColor('#f1f2f3') .title($r('app.string.singlegesture_LongPressGesture_title')) } -} \ No newline at end of file +} +// [End catch_long_press_event] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/PanGesture.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/PanGesture.ets index 509ace4e30312692104ad555a66307be2d5f4f42..7afb75ff6ca1b5cf15717cd7e7de66d46703d35c 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/PanGesture.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/PanGesture.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start catch_pan_gesture_event] @Entry @Component export struct Pan { @@ -62,4 +63,5 @@ export struct Pan { .backgroundColor('#f1f2f3') .title($r('app.string.singlegesture_PanGesture_title')) } -} \ No newline at end of file +} +// [End catch_pan_gesture_event] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/PinchGesture.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/PinchGesture.ets index deea7cc9e1627d1b5b5f2556602f17f937a62521..9d538513c66b652bdc2f018ab2a6e39680133f94 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/PinchGesture.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/PinchGesture.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start catch_pinch_gesture_event] @Entry @Component export struct Pinch { @@ -62,4 +63,5 @@ export struct Pinch { .backgroundColor('#f1f2f3') .title($r('app.string.singlegesture_PinchGesture_title')) } -} \ No newline at end of file +} +// [End catch_pinch_gesture_event] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/RotationGesture.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/RotationGesture.ets index 959d1ae81909c25d5fd3a54eef3b9a10fd9b5f09..89d5775e8815a222812b4917c7c2244d310c5f7f 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/RotationGesture.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/RotationGesture.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start catch_rotation_gesture_event] @Entry @Component export struct Rotation { @@ -61,4 +62,5 @@ export struct Rotation { .backgroundColor('#f1f2f3') .title($r('app.string.singlegesture_RotationGesture_title')) } -} \ No newline at end of file +} +// [End catch_rotation_gesture_event] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/SwipeGesture.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/SwipeGesture.ets index 1416456ea1526681e55fd4f96c4966476d75e774..4b4363855344f460e3efba6f37bba0e5c8b15bdb 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/SwipeGesture.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/SwipeGesture.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start catch_swipe_gesture_event] @Entry @Component export struct Swipe { @@ -53,4 +54,5 @@ export struct Swipe { .backgroundColor('#f1f2f3') .title($r('app.string.singlegesture_SwipeGesture_title')) } -} \ No newline at end of file +} +// [End catch_swipe_gesture_event] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/TapGesture.ets b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/TapGesture.ets index eec1a1b5bc7403412b51e63adea3ffe7f592da54..bc0f24b52c56514c5b2140e60fb35d3dde4f6769 100644 --- a/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/TapGesture.ets +++ b/code/DocsSample/ArkUISample/EventProject/entry/src/main/ets/pages/singlegesture/TapGesture.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start catch_click_twice_event] @Entry @Component export struct Tap { @@ -46,4 +47,5 @@ export struct Tap { .backgroundColor('#f1f2f3') .title($r('app.string.singlegesture_TapGesture_title')) } -} \ No newline at end of file +} +// [End catch_click_twice_event] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/DataInGrid.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/DataInGrid.ets index fa6df31bb0f8aeb3c3077a622320163e346ae2fa..998e35a9c3588b59688047ef09b801272c69d287 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/DataInGrid.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/DataInGrid.ets @@ -15,15 +15,21 @@ import { ComponentCard } from '../../common/Card'; +// [Start build_a_office_services_grid_of_foreach] @Entry @Component export struct DataInGrid { @State services: Array = ['Meeting', 'Voting', 'Check-in', 'Printing']; build() { + // [StartExclude build_a_office_services_grid_of_foreach] NavDestination() { + // [EndExclude build_a_office_services_grid_of_foreach] Column({ space: 12 }) { + // [StartExclude build_a_office_services_grid_of_foreach] ComponentCard({ title: $r('app.string.DataInGrid_titleOfficeServices') }) { + // [EndExclude build_a_office_services_grid_of_foreach] + // [Start build_a_office_services_grid] Grid() { GridItem() { Text('Meeting') @@ -45,14 +51,19 @@ export struct DataInGrid { .fontSize(24) }.backgroundColor('#FFF1F3F5') } + // [StartExclude build_a_office_services_grid] .height(200) + // [EndExclude build_a_office_services_grid] .columnsGap(6) .rowsGap(6) .rowsTemplate('1fr 1fr') .columnsTemplate('1fr 1fr') + // [End build_a_office_services_grid] } + // [StartExclude build_a_office_services_grid_of_foreach] ComponentCard({ title: $r('app.string.DataInGrid_titleForEach') }) { + // [EndExclude build_a_office_services_grid_of_foreach] Grid() { ForEach(this.services, (service: string) => { GridItem() { @@ -60,13 +71,16 @@ export struct DataInGrid { }.backgroundColor('#FFF1F3F5') }, (service: string): string => service) } + // [StartExclude build_a_office_services_grid_of_foreach] .height(200) .columnsGap(6) .rowsGap(6) + // [EndExclude build_a_office_services_grid_of_foreach] .rowsTemplate(('1fr 1fr') as string) .columnsTemplate(('1fr 1fr') as string) } } + // [End build_a_office_services_grid_of_foreach] .width('100%') .height('100%') .padding({ left: 12, right: 12 }) diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/GridLayout.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/GridLayout.ets index d553ac18b9caa326f9ad22c4d48e658d82a18d63..464b10d7282f3dc3b451609145686325b01240cf 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/GridLayout.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/GridLayout.ets @@ -20,6 +20,7 @@ import { ComponentCard } from '../../common/Card'; export struct GridLayout { @State numbers: String[] = ['0', '1', '2', '3', '4', '5', '6', '7']; scroller: Scroller = new Scroller(); + // [Start set_rows_and_columns_occupied] layoutOptions: GridLayoutOptions = { regularSize: [1, 1], irregularIndexes: [1, 3, 4], // 索引为0和7的GridItem占用的列数由onGetIrregularSizeByIndex指定 @@ -31,11 +32,15 @@ export struct GridLayout { } } + // [StartExclude set_rows_and_columns_occupied] build() { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.GridLayout_titleRowSpacing') }) { + // [EndExclude set_rows_and_columns_occupied] + // [Start build_a_grid] Grid() { + // [StartExclude build_a_grid] GridItem() { }.backgroundColor('#ffe0e2e4') @@ -62,14 +67,19 @@ export struct GridLayout { GridItem() { }.backgroundColor('#ffe0e2e4') + // [EndExclude build_a_grid] } //设置行列间距 + // [StartExclude build_a_grid] .columnsGap(10) .rowsGap(15) .height(150) + // [EndExclude build_a_grid] //设置行列数量与占比 .rowsTemplate('1fr 1fr 1fr') .columnsTemplate('1fr 2fr 1fr') + // [End build_a_grid] + // [End set_rows_and_columns_occupied] } ComponentCard({ title: $r('app.string.GridLayout_titleChildSpan') }) { @@ -94,7 +104,9 @@ export struct GridLayout { } ComponentCard({ title: $r('app.string.GridLayout_titleMainAxis') }) { + // [Start Set_the_direction_of_the_main_axis_of_the_grid] Grid() { + // [StartExclude Set_the_direction_of_the_main_axis_of_the_grid] GridItem() { Text('1') }.backgroundColor('#ffe0e2e4').width(30).height(30) @@ -130,11 +142,15 @@ export struct GridLayout { GridItem() { Text('9') }.backgroundColor('#ffe0e2e4').width(30).height(30) + // [EndExclude Set_the_direction_of_the_main_axis_of_the_grid] } .maxCount(3) + // [StartExclude Set_the_direction_of_the_main_axis_of_the_grid] .columnsGap(4) .rowsGap(4) + // [EndExclude Set_the_direction_of_the_main_axis_of_the_grid] .layoutDirection(GridDirection.Row) + // [End Set_the_direction_of_the_main_axis_of_the_grid] Grid() { GridItem() { diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/ScrollPositionGrid.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/ScrollPositionGrid.ets index 1eb126afee1a98f34fe23cb597bbd58a12e82666..da773f1c37ed27e85c02d98ec3db72585f7fa335 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/ScrollPositionGrid.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/ScrollPositionGrid.ets @@ -20,22 +20,30 @@ import { ComponentCard } from '../../common/Card'; export struct ScrollPosition { @State services: Array = ['Live Streaming', 'Imported', 'Categories', 'Recharge', 'Membership', 'Claim Coupon', 'Lottery', 'Favorites', 'Points', 'More']; + // [Start build_a_private_scrolling_object] private scroller: Scroller = new Scroller(); + // [End build_a_private_scrolling_object] + build() { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.ScrollPosition_titleExample') }) { + // [Start control_the_grid_scroll] Column({ space: 12 }) { Grid(this.scroller) { + // [StartExclude control_the_grid_scroll] ForEach(this.services, (service: string) => { GridItem() { Text(service) }.backgroundColor('#FFF1F3F5').width('25%') }, (service: string): string => service) + // [EndExclude control_the_grid_scroll] } + // [StartExclude control_the_grid_scroll] .height(100) .columnsGap(10) + // [EndExclude control_the_grid_scroll] .rowsTemplate('1fr') Row({ space: 20 }) { @@ -50,6 +58,7 @@ export struct ScrollPosition { }) } } + // [End control_the_grid_scroll] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/ScrollableGrid.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/ScrollableGrid.ets index 84b768233e1df2056d24a276894c4442f3a04cd7..288ed72065440598d7edf5a99e8c68c7e4bfde69 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/ScrollableGrid.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/grid/ScrollableGrid.ets @@ -15,6 +15,7 @@ import { ComponentCard } from '../../common/Card'; +// [Start build_scrollable_horizontally_grid_layouts] @Entry @Component export struct ScrollableGrid { @@ -32,12 +33,15 @@ export struct ScrollableGrid { }.backgroundColor('#FFF1F3F5').width('25%') }, (service: string): string => service) } + // [StartExclude build_scrollable_horizontally_grid_layouts] .height(200) .columnsGap(10) + // [EndExclude build_scrollable_horizontally_grid_layouts] .rowsGap(15) .rowsTemplate('1fr 1fr') // 只设置rowsTemplate属性，当内容超出Grid区域时，可水平滚动。 } } + // [End build_scrollable_horizontally_grid_layouts] .width('100%') .height('100%') .padding({ left: 12, right: 12 }) diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/AddListItem.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/AddListItem.ets index 31c7265c69455a69b728213ea6ec149dae012c88..befa4ca236b5c617a222d87786323ebb9fbb7cd9 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/AddListItem.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/AddListItem.ets @@ -1,4 +1,4 @@ -/* + /* * Copyright (c) 2025 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. @@ -14,6 +14,7 @@ */ import { ComponentCard } from '../../common/Card'; +// [Start define_the_data_to_be_done] import { util } from '@kit.ArkTS'; @@ -25,7 +26,9 @@ export class ToDo { this.name = name; } } +// [End define_the_data_to_be_done] +// [Start build_the_overall_list_layout_and_list_items] @Component export struct ToDoListItem { @Link isEditMode: boolean; @@ -34,10 +37,12 @@ export struct ToDoListItem { build() { Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + // [StartExclude build_the_overall_list_layout_and_list_items] Text(this.toDoItem.name) .fontSize(16) .width('80%') .margin({ left: 20 }) + // [EndExclude build_the_overall_list_layout_and_list_items] } .backgroundColor('#FFF1F3F5') .width('100%') @@ -46,22 +51,28 @@ export struct ToDoListItem { .borderRadius(12) // .linearGradient() 根据具体使用场景设置 .gesture( + // [StartExclude build_the_overall_list_layout_and_list_items] GestureGroup(GestureMode.Exclusive, LongPressGesture() + // [EndExclude build_the_overall_list_layout_and_list_items] .onAction(() => { }) ) ) } } +// [End build_the_overall_list_layout_and_list_items] +// [Start build_list_layouts_and_list_items] @Entry @Component export struct AddListItem { private l1 = 0; private l2 = 0; + // [StartExclude build_list_layouts_and_list_items] @State arr: number[] = [0, 1, 2, 3] @State toDoData: ToDo[] = [] + // [EndExclude build_list_layouts_and_list_items] @Watch('onEditModeChange') @State isEditMode: boolean = false @State selectedItems: ToDo[] = [] private availableThings: string[] = ['Reading', 'Exercise', 'Travel', 'Listening Music', 'Watching Films', 'Singing']; @@ -73,9 +84,13 @@ export struct AddListItem { } build() { + // [StartExclude build_list_layouts_and_list_items] NavDestination() { + // [EndExclude build_list_layouts_and_list_items] Column({ space: 12 }) { + // [StartExclude build_list_layouts_and_list_items] ComponentCard({ title: $r('app.string.AddListItem_titleExample') }) { + // [EndExclude build_list_layouts_and_list_items] Column({ space: 12 }) { Row() { if (this.isEditMode) { @@ -106,10 +121,12 @@ export struct AddListItem { }) } } + // [StartExclude build_list_layouts_and_list_items] .width('100%') .backgroundColor('#FFF1F3F5') .borderRadius(12) .height(45) + // [EndExclude build_list_layouts_and_list_items] List({ space: 12 }) { ForEach(this.toDoData, (toDoItem: ToDo) => { @@ -126,6 +143,7 @@ export struct AddListItem { } } } + // [End build_list_layouts_and_list_items] .width('100%') .height('100%') .padding({ left: 12, right: 12 }) @@ -133,4 +151,4 @@ export struct AddListItem { .backgroundColor('#f1f2f3') .title($r('app.string.AddListItem_title')) } -} +} \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ControlledScrollPositionList.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ControlledScrollPositionList.ets index 2fd386add2c201fe5b13509c567bec6df29e58d1..fe9700cfd7503197f185a9d8299472e3644df987 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ControlledScrollPositionList.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ControlledScrollPositionList.ets @@ -18,18 +18,22 @@ import { ComponentCard } from '../../common/Card'; @Entry @Component export struct ControlledScrollPositionList { + // [Start create_private_list_scroller] private listScroller: Scroller = new Scroller(); + // [End create_private_list_scroller] private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; build() { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.ControlledScrollPositionList_titleExample') }) { + // [Start control_scrolling] Stack({ alignContent: Alignment.Bottom }) { // 控制滚动位置示例List容器 // 将listScroller用于初始化List组件的scroller参数，完成listScroller与列表的绑定。 List({ space: 20, scroller: this.listScroller }) { // ... + // [StartExclude control_scrolling] ForEach(this.arr, (item: number) => { ListItem() { Text('新闻' + item) @@ -41,17 +45,23 @@ export struct ControlledScrollPositionList { .backgroundColor('#FFF1F3F5') } }, (item: number) => item.toString()) + // [EndExclude control_scrolling] } Button() { + // [StartExclude control_scrolling] // ... Image($r('sys.media.ohos_ic_public_arrow_up')).width(40).height(40) + // [EndExclude control_scrolling] } + // [StartExclude control_scrolling] .backgroundColor('#FFE0E2E4') .position({ x: '80%', y: '90%' }) + // [EndExclude control_scrolling] .onClick(() => { // 点击按钮时，指定跳转位置，返回列表顶部 this.listScroller.scrollToIndex(0); + // [End control_scrolling] }) }.height('90%') } diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/CustomListStyle.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/CustomListStyle.ets index ca53b1925f9eebb18247ae63ed3a70ca2ffd5a8e..b61ca2a29c1f41a54f6638615764c5f3f50ec91b 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/CustomListStyle.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/CustomListStyle.ets @@ -15,6 +15,7 @@ import { ComponentCard } from '../../common/Card'; +// [Start set_the_divider] class DividerTmp { public strokeWidth: Length = 1; public startMargin: Length = 60; @@ -35,6 +36,7 @@ export struct CustomListStyle { @State egDivider: DividerTmp = new DividerTmp(1, 60, 10, '#ffe9f0f0'); build() { + // [StartExclude set_the_divider] NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.CustomListStyle_titleContentSpacing') }) { @@ -52,6 +54,7 @@ export struct CustomListStyle { } ComponentCard({ title: $r('app.string.CustomListStyle_titleDividerLines') }) { + // [EndExclude set_the_divider] List({ space: 10 }) { ListItem() { Text('ListItem One') @@ -64,9 +67,12 @@ export struct CustomListStyle { .divider(this.egDivider) .alignListItem(ListItemAlign.Center) } + // [End set_the_divider] ComponentCard({ title: $r('app.string.CustomListStyle_titleScrollbars') }) { + // [Start add_a_scrollbar] List({ space: 10 }) { + // [StartExclude add_a_scrollbar] ListItem() { Text('ListItem One') }.height(30) @@ -78,9 +84,13 @@ export struct CustomListStyle { ListItem() { Text('ListItem Three') }.height(30) + // [EndExclude add_a_scrollbar] } + // [StartExclude add_a_scrollbar] .height(60) + // [EndExclude add_a_scrollbar] .scrollBar(BarState.Auto) + // [End add_a_scrollbar] .backgroundColor('#FFF1F3F5') } } diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/DataInList.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/DataInList.ets index 0c8c0f2676273f1ac0bc4a7e7cd8d943b5fce100..1a4832087e576b0a12b577a4543e482469b5dde2 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/DataInList.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/DataInList.ets @@ -1,3 +1,4 @@ + /* * Copyright (c) 2025 Huawei Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); @@ -15,13 +16,16 @@ import { ComponentCard } from '../../common/Card'; +// [Start list_statically_creates_the_contents_of_list_item] @Entry @Component export struct DataInList { build() { + // [StartExclude list_statically_creates_the_contents_of_list_item] NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.DataInList_titleCityList') }) { + // [EndExclude list_statically_creates_the_contents_of_list_item] List() { ListItem() { Text($r('app.string.city_beijing')) @@ -41,8 +45,10 @@ export struct DataInList { .backgroundColor('#FFF1F3F5') .alignListItem(ListItemAlign.Center) } + // [End list_statically_creates_the_contents_of_list_item] ComponentCard({ title: $r('app.string.DataInList_titleContactsList') }) { + // [Start encapsulate_the_image_and_text_into_a_row] List() { ListItem() { Row() { @@ -70,6 +76,7 @@ export struct DataInList { } } } + // [End encapsulate_the_image_and_text_into_a_row] .width('100%') .height('100%') .padding({ left: 12, right: 12 }) diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/DeleteListItem.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/DeleteListItem.ets index 3e342a40cd54ea441ece027abf1f1ec6e4496535..6948f3a13eb5a1a4fe63646227f8f51bf42ac8fa 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/DeleteListItem.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/DeleteListItem.ets @@ -15,6 +15,7 @@ import { util } from '@kit.ArkTS'; +// [Start structural_references] export class ToDo { public key: string = util.generateRandomUUID(true); public name: string; @@ -23,6 +24,7 @@ export class ToDo { this.name = name; } } +// [End structural_references] @Component export struct ToDoListItem { @@ -31,7 +33,9 @@ export struct ToDoListItem { private toDoItem: ToDo = new ToDo(''); build() { + // [Start enter_edit_mode] Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + // [StartExclude enter_edit_mode] Text(this.toDoItem.name) .fontSize(16) .width('80%') @@ -50,6 +54,7 @@ export struct ToDoListItem { .width('100%') .height(40) .borderRadius(12) + // [EndExclude enter_edit_mode] .gesture( GestureGroup(GestureMode.Exclusive, LongPressGesture() @@ -60,6 +65,7 @@ export struct ToDoListItem { ) } } +// [End enter_edit_mode] @Entry @Component @@ -144,6 +150,7 @@ export struct DeleteListItem { if (this.isEditMode) { Column({ space: 8 }) { + // [Start implement_deletion] Button('delete') .width('90%') .backgroundColor(Color.Red) @@ -155,6 +162,7 @@ export struct DeleteListItem { } } } + // [End implement_deletion] .width('100%') .height('100%') .padding({ left: 12, right: 12 }) @@ -162,6 +170,4 @@ export struct DeleteListItem { .backgroundColor('#f1f2f3') .title($r('app.string.DeleteListItem_title')) } -} - - +} \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/GroupedList.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/GroupedList.ets index fe4f6a64406d7fbc830cd264ffd49dc065c7463b..8bae8f53c90c81997957585aca9c3aefca5119f0 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/GroupedList.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/GroupedList.ets @@ -15,6 +15,7 @@ import { ComponentCard } from '../../common/Card'; +// [Start set_the_head_component_of_the_list_grouping_by_header] @Entry @Component export struct GroupedList { @@ -35,6 +36,7 @@ export struct GroupedList { List({ space: 12 }) { ListItemGroup({ header: this.itemHead('A') }) { // 循环渲染分组A的ListItem + // [StartExclude set_the_head_component_of_the_list_grouping_by_header] ListItem() { Text('ListItem A One') } @@ -42,10 +44,12 @@ export struct GroupedList { ListItem() { Text('ListItem A Two') } + // [EndExclude set_the_head_component_of_the_list_grouping_by_header] } ListItemGroup({ header: this.itemHead('B') }) { // 循环渲染分组B的ListItem + // [StartExclude set_the_head_component_of_the_list_grouping_by_header] ListItem() { Text('ListItem B One') } @@ -53,10 +57,12 @@ export struct GroupedList { ListItem() { Text('ListItem B Two') } + // [EndExclude set_the_head_component_of_the_list_grouping_by_header] } } } } + // [End set_the_head_component_of_the_list_grouping_by_header] .width('100%') .height('100%') .padding({ left: 12, right: 12 }) diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ListIteration.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ListIteration.ets index 2c0a053b4bd4a5f5ba8ad602699f94bc210450ba..9d307842428c8c410f7804c7769f4bcac1c02b2e 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ListIteration.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ListIteration.ets @@ -13,8 +13,11 @@ * limitations under the License. */ +// [Start use_foreach_to_replace_similar_list_items] import { util } from '@kit.ArkTS'; +// [StartExclude import_component_card] import { ComponentCard } from '../../common/Card'; +// [EndExclude import_component_card] class Contact { public key: string = util.generateRandomUUID(true); @@ -36,9 +39,11 @@ export struct ListIteration { ]; build() { + // [StartExclude use_the_nav_destination] NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.ListIteration_titleExample') }) { + // [EndExclude use_the_nav_destination] List() { ForEach(this.contacts, (item: Contact) => { ListItem() { @@ -57,6 +62,7 @@ export struct ListIteration { .width('100%') } } + // [End use_foreach_to_replace_similar_list_items] .width('100%') .height('100%') .padding({ left: 12, right: 12 }) diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ListLayout.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ListLayout.ets index 3f4890b9b9d46355fcd8ba06fc68b8213eb1d36e..742098ded73f871f74bbee3487d4c3d87cb93fdf 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ListLayout.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ListLayout.ets @@ -24,7 +24,9 @@ export struct ListLayout { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.ListLayout_titleMainAxis') }) { + // [Start build_a_horizontal_scrolling_list] List({ space: 8 }) { + // [StartExclude build_a_horizontal_scrolling_list] ListItem() { Text('ListItem one') } @@ -32,14 +34,18 @@ export struct ListLayout { ListItem() { Text('ListItem two') } + // [EndExclude build_a_horizontal_scrolling_list] } .listDirection(Axis.Horizontal) + // [End build_a_horizontal_scrolling_list] .height(30) } ComponentCard({ title: $r('app.string.ListLayout_titleCrossAxisLanes') }) { + // [Start build_list_by_size] List({ space: 8 }) { ListItem() { + // [StartExclude build_list_by_size] Text('ListItem one') } @@ -50,13 +56,17 @@ export struct ListLayout { ListItem() { Text('ListItem tree') } + // [EndExclude build_list_by_size] } // 此处lanes设置主轴方向 .lanes(this.egLanes) + // [End build_list_by_size] } ComponentCard({ title: $r('app.string.ListLayout_titleCrossAxisAlignment') }) { + // [Start build_list_with_align_horizontally_in_the_center] List({ space: 8 }) { + // [StartExclude build_list_with_align_horizontally_in_the_center] ListItem() { Text('ListItem one') } @@ -68,9 +78,11 @@ export struct ListLayout { ListItem() { Text('ListItem tree') } + // [EndExclude build_list_with_align_horizontally_in_the_center] } // 此处alignListItem设置水平方向对齐 .alignListItem(ListItemAlign.Center) + // [End build_list_with_align_horizontally_in_the_center] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ResponsiveScrollPositionList.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ResponsiveScrollPositionList.ets index 5aeee1610dea33990446d23306cc82c373e84fc5..06c536cdbd230d39acab2ff89c16e21b37debfbb 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ResponsiveScrollPositionList.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/ResponsiveScrollPositionList.ets @@ -16,9 +16,11 @@ import { util } from '@kit.ArkTS'; import { ComponentCard } from '../../common/Card'; +// [Start respond_to_scroll_position] const alphabets = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; +// [StartExclude respond_to_scroll_position] class Contact { public key: string = util.generateRandomUUID(true); public name: string | Resource; @@ -98,6 +100,7 @@ export let contactsGroups: object[] = [ key: util.generateRandomUUID(true) } as ContactsGroup ]; +// [EndExclude respond_to_scroll_position] @Entry @Component @@ -106,6 +109,7 @@ export struct ResponsiveScrollPositionList { private listScroller: Scroller = new Scroller(); private currentGroupTitle: string = ''; // 用于跟踪当前显示的分组标题 + // [StartExclude respond_to_scroll_position] @Builder itemHead(text: string) { // 列表分组的头部组件，对应联系人分组A、B等位置的组件 @@ -115,14 +119,18 @@ export struct ResponsiveScrollPositionList { .width('100%') .padding(5) } + // [EndExclude respond_to_scroll_position] build() { + // [StartExclude respond_to_scroll_position] NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.ResponsiveScrollPositionList_titleExample') }) { + // [EndExclude use_stack] Stack({ alignContent: Alignment.End }) { // 此为响应滚动位置示例List容器 List({ scroller: this.listScroller }) { + // [StartExclude use_foreach] ForEach(contactsGroups, (itemGroup: ContactsGroup) => { ListItemGroup({ header: this.itemHead(itemGroup.title) }) { // 循环渲染ListItem @@ -133,22 +141,28 @@ export struct ResponsiveScrollPositionList { Image(item.icon).width(40).height(40).margin(10) Text(item.name).fontSize(20) }.width('100%').justifyContent(FlexAlign.Start) + // [EndExclude respond_to_scroll_position] } + // [StartExclude respond_to_scroll_position] }, (item: Contact) => JSON.stringify(item)) } } }, (itemGroup: ContactsGroup) => JSON.stringify(itemGroup)) } + // [EndExclude respond_to_scroll_position] .onScrollIndex((firstIndex: number) => { + // [StartExclude respond_to_scroll_position] // 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex let group = contactsGroups[firstIndex] as ContactsGroup; this.currentGroupTitle = group.title; this.selectedIndex = alphabets.indexOf(this.currentGroupTitle); + // [EndExclude respond_to_scroll_position] }) // 字母表索引组件 AlphabetIndexer({ arrayValue: alphabets, selected: 0 }) .selected(this.selectedIndex) + // [End respond_to_scroll_position] }.height('90%') } } diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/StickyHeaderList.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/StickyHeaderList.ets index 3f1e405f1d849a90386bb1c10da0674b35afc572..4c2194578b28197f2c27a07dedb2a094ceb44908 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/StickyHeaderList.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/StickyHeaderList.ets @@ -14,6 +14,7 @@ */ import { ComponentCard } from '../../common/Card'; +// [Start Add_sticky_titles] import { util } from '@kit.ArkTS'; class Contact { @@ -68,9 +69,11 @@ export struct StickyHeaderList { } build() { + // [StartExclude add_sticky_titles] NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.StickyHeaderList_titleExample') }) { + // [EndExclude add_sticky_titles] List() { // 循环渲染ListItemGroup，contactsGroups为多个分组联系人contacts和标题title的数据集合 ForEach(contactsGroups, (itemGroup: ContactsGroup) => { @@ -79,19 +82,24 @@ export struct StickyHeaderList { if (itemGroup.contacts) { ForEach(itemGroup.contacts, (item: Contact) => { ListItem() { + // [StartExclude add_sticky_titles] Row() { Image(item.icon).width(40).height(40).margin(10) Text(item.name).fontSize(20) }.width('100%').justifyContent(FlexAlign.Start) + // [EndExclude add_sticky_titles] } }, (item: Contact) => JSON.stringify(item)) } } }, (itemGroup: ContactsGroup) => JSON.stringify(itemGroup)) } + // [StartExclude add_sticky_titles] .height(230) + // [EndExclude add_sticky_titles] .sticky(StickyStyle.Header) // 设置吸顶，实现粘性标题效果 } + // [End add_sticky_titles] } .width('100%') .height('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/SwipeableListItem.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/SwipeableListItem.ets index 178b6d3a192a5824e67131b840b8082c86158f31..7f6454c43ba480fbeadaa8a56232f3f3edc202b6 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/SwipeableListItem.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/SwipeableListItem.ets @@ -21,6 +21,7 @@ export struct SwipeListItem { private index: number = 0; @State arr: number[] = [0, 1, 2, 3]; + // [Start build_the_tail_slide_out_component] @Builder itemEnd(index: number) { // 构建尾端滑出组件 @@ -29,12 +30,15 @@ export struct SwipeListItem { .width(40) .height(40) } + // [StartExclude build_the_tail_slide_out_component] .backgroundColor('#FFE1E2E3') + // [EndExclude build_the_tail_slide_out_component] .onClick(() => { // this.messages为列表数据源，可根据实际场景构造。点击后从数据源删除指定数据项。 this.arr.splice(index, 1); }) } + // [End build_the_tail_slide_out_component] build() { NavDestination() { @@ -42,7 +46,9 @@ export struct SwipeListItem { ComponentCard({ title: $r('app.string.SwipeListItem_titleExample') }) { List({ space: 12 }) { ForEach(this.arr, (item: number) => { + // [Start bind_the_swipeAction_property_to_left_swipe_list_item] ListItem() { + // [StartExclude bind_the_swipeAction_property_to_left_swipe_list_item] Text('Message ' + item) .width('100%') .height(50) @@ -50,6 +56,7 @@ export struct SwipeListItem { .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor('#FFF1F3F5') + // [EndExclude bind_the_swipeAction_property_to_left_swipe_list_item] }.swipeAction({ end: { // index为该ListItem在List中的索引值。 @@ -58,6 +65,7 @@ export struct SwipeListItem { this.itemEnd(this.index); }, } + // [End bind_the_swipeAction_property_to_left_swipe_list_item] }) }, (item: number) => item.toString()) } diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/TaggedListItems.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/TaggedListItems.ets index 1813f05866f15d27c61a25dde5e97eaf12f08fb4..bee859a3324828758ef49b72468a59988752ed16 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/TaggedListItems.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/list/TaggedListItems.ets @@ -26,6 +26,7 @@ export struct TaggedListItems { ComponentCard({ title: $r('app.string.TaggedListItems_titleExample') }) { List() { ForEach(this.arr, (item: number) => { + // [Start add_tags_to_list_items] ListItem() { // Badge组件实现消息右上角添加标记功能 Badge({ @@ -33,6 +34,7 @@ export struct TaggedListItems { position: BadgePosition.RightTop, style: { badgeSize: 16, badgeColor: '#FA2A2D' } }) { + // [StartExclude add_tags_to_list_items] Text('消息' + item) .width('95%') .height(50) @@ -40,7 +42,9 @@ export struct TaggedListItems { .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor('#FFF1F3F5') + // [EndExclude add_tags_to_list_items] } + // [End add_tags_to_list_items] }.margin({ top: 12 }) }, (item: number) => item.toString()) } diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperAutoPlay.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperAutoPlay.ets index bd2e7c560d7c6a546f9bf24ca6cc72fdb74e99ca..9900409f00f30ae6fb66be820cfe3e89faf4eb21 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperAutoPlay.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperAutoPlay.ets @@ -22,7 +22,9 @@ export struct SwiperAutoPlay { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.SwiperAutoPlay_title') }) { + // [Start autoplay_loop_true] Swiper() { + // [StartExclude autoplay_loop_true] Text('0') .width('90%') .height('100%') @@ -43,11 +45,15 @@ export struct SwiperAutoPlay { .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30) + // [EndExclude autoplay_loop_true] } + // [StartExclude autoplay_loop_true] .height(200) + // [EndExclude autoplay_loop_true] .loop(true) .autoPlay(true) .interval(1000) + // [End autoplay_loop_true] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperCustomAnimation.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperCustomAnimation.ets index 8c1d8f54575f1e0e3efb112a240b36db19f4ba1a..43bab941cd801286eb7f8f6afd7c01304e384702 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperCustomAnimation.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperCustomAnimation.ets @@ -15,6 +15,7 @@ import { ComponentCard } from '../../common/Card'; +// [Start customize_transition_animations] @Entry @Component export struct SwiperCustomAnimation { @@ -36,9 +37,13 @@ export struct SwiperCustomAnimation { } build() { + // [StartExclude customize_transition_animations] NavDestination() { + // [EndExclude customize_transition_animations] Column({ space: 12 }) { + // [StartExclude customize_transition_animations] ComponentCard({ title: $r('app.string.SwiperCustomAnimation_titleExample') }) { + // [EndExclude customize_transition_animations] Swiper() { ForEach(this.backgroundColors, (backgroundColor: Color, index: number) => { Text(index.toString()) @@ -88,6 +93,7 @@ export struct SwiperCustomAnimation { } } .width('100%') + // [End customize_transition_animations] .height('100%') .padding({ left: 12, right: 12 }) } diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperDirection.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperDirection.ets index 7de4c62156ee2bab2f5968d8ddc67389ead6c83c..e8c8e2d9cdb23d69cce3cb5a9b826e56110c1bd3 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperDirection.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperDirection.ets @@ -26,7 +26,9 @@ export struct SwiperDirection { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.SwiperPageSwitchMethod_titleHorizontal') }) { Column({ space: 8 }) { + // [Start rotate_horizontally] Swiper(this.swiperHorizontalController) { + // [StartExclude rotate_horizontally] Text('0') .width('90%') .height('100%') @@ -47,10 +49,14 @@ export struct SwiperDirection { .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30) + // [EndExclude rotate_horizontally] } + // [StartExclude rotate_horizontally] .height(200) + // [EndExclude rotate_horizontally] .indicator(true) .vertical(false) + // [End rotate_horizontally] Row({ space: 12 }) { Button('showNext') @@ -67,7 +73,9 @@ export struct SwiperDirection { ComponentCard({ title: $r('app.string.SwiperPageSwitchMethod_titleVertical') }) { Column({ space: 8 }) { + // [Start rotate_vertically] Swiper(this.swiperVerticalController) { + // [StartExclude rotate_vertically] Text('0') .width('90%') .height('100%') @@ -88,10 +96,14 @@ export struct SwiperDirection { .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30) + // [EndExclude rotate_vertically] } + // [StartExclude rotate_vertically] .height(200) + // [EndExclude rotate_vertically] .indicator(true) .vertical(true) + // [End rotate_vertically] Row({ space: 12 }) { Button('showNext') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperIndicatorStyle.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperIndicatorStyle.ets index 35a3c8d15a83532bbd3d3a8e50bff0d520b29130..b38d27d167c886bc92ed0d5dc59418bb7604991b 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperIndicatorStyle.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperIndicatorStyle.ets @@ -23,6 +23,7 @@ export struct SwiperIndicatorStyle { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.SwiperIndicatorStyle_titleDefault') }) { + // [Start default_navigation_point_style] Swiper() { Text('0') .width('90%') @@ -45,11 +46,14 @@ export struct SwiperIndicatorStyle { .textAlign(TextAlign.Center) .fontSize(30) } + // [End default_navigation_point_style] .height(100) } ComponentCard({ title: $r('app.string.SwiperIndicatorStyle_titleCustom') }) { + // [Start customize_navigation_point_styles] Swiper() { + // [StartExclude customize_navigation_point_styles] Text('0') .width('90%') .height('100%') @@ -70,6 +74,7 @@ export struct SwiperIndicatorStyle { .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30) + // [EndExclude customize_navigation_point_styles] } .height(100) .indicator( @@ -83,9 +88,12 @@ export struct SwiperIndicatorStyle { .selectedColor(Color.Blue) ) } + // [End customize_navigation_point_styles] ComponentCard({ title: $r('app.string.SwiperIndicatorStyle_titleDefaultArrows') }) { + // [Start default_arrow_style] Swiper() { + // [StartExclude default_arrow_style] Text('0') .width('90%') .height('100%') @@ -106,13 +114,19 @@ export struct SwiperIndicatorStyle { .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30) + // [EndExclude default_arrow_style] } + // [StartExclude default_arrow_style] .height(100) + // [EndExclude default_arrow_style] .displayArrow(true, false) + // [End default_arrow_style] } ComponentCard({ title: $r('app.string.SwiperIndicatorStyle_titleCustomArrows') }) { + // [Start customize_the_arrow_style] Swiper() { + // [StartExclude customize_the_arrow_style] Text('0') .width('90%') .height('100%') @@ -133,8 +147,11 @@ export struct SwiperIndicatorStyle { .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30) + // [EndExclude customize_the_arrow_style] } + // [StartExclude customize_the_arrow_style] .height(100) + // [EndExclude customize_the_arrow_style] .displayArrow({ showBackground: true, isSidebarMiddle: true, @@ -143,6 +160,7 @@ export struct SwiperIndicatorStyle { arrowSize: 18, arrowColor: Color.Blue }, false) + // [End customize_the_arrow_style] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperLoop.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperLoop.ets index 7ac38a109cc5bba586feb9d1e721c63a2fa31d54..10c4945f09b7966c2b10ed4abfed524fdef03f9c 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperLoop.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperLoop.ets @@ -22,6 +22,7 @@ export struct SwiperLoop { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.SwiperLoop_titleTrue') }) { + // [Start loop_with_true] Swiper() { Text('0') .width('90%') @@ -44,12 +45,17 @@ export struct SwiperLoop { .textAlign(TextAlign.Center) .fontSize(30) } + // [StartExclude loop_with_true] .height(200) + // [EndExclude loop_with_true] .loop(true) + // [End loop_with_true] } ComponentCard({ title: $r('app.string.SwiperLoop_titleFalse') }) { + // [Start loop_with_false] Swiper() { + // [StartExclude loop_with_false] Text('0') .width('90%') .height('100%') @@ -70,9 +76,13 @@ export struct SwiperLoop { .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30) + // [EndExclude loop_with_false] } + // [StartExclude loop_with_false] .height(200) + // [EndExclude loop_with_false] .loop(false) + // [End loop_with_false] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperMultiPage.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperMultiPage.ets index 855f316b98aafde5af5fd266bac17ae480cb49f8..e534dd9f1002254fcb9f1ea0edc4455ac892f2c9 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperMultiPage.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperMultiPage.ets @@ -22,6 +22,7 @@ export struct SwiperMultiPage { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.SwiperMultiPage_titleExample') }) { + // [Start each_page_displays_multiple_subpages] Swiper() { Text('0') .width('90%') @@ -48,10 +49,13 @@ export struct SwiperMultiPage { .textAlign(TextAlign.Center) .fontSize(30) } + // [StartExclude each_page_displays_multiple_subpages] .height(200) + // [EndExclude each_page_displays_multiple_subpages] .indicator(true) .displayCount(2) } + // [End each_page_displays_multiple_subpages] } .width('100%') .height('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperPageSwitchMethod.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperPageSwitchMethod.ets index 77784ff32b19a9a8c2ab73413db70e558993b0c7..64ae9a299941977d3e3bdf1ffbff1f994838cfde 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperPageSwitchMethod.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/swiper/SwiperPageSwitchMethod.ets @@ -15,15 +15,18 @@ import { ComponentCard } from '../../common/Card'; +// [Start switch_pages] @Entry @Component export struct SwiperPageSwitchMethod { private swiperController: SwiperController = new SwiperController(); build() { + // [StartExclude switch_pages] NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.SwiperPageSwitchMethod_title') }) { + // [EndExclude switch_pages] Column({ space: 8 }) { Swiper(this.swiperController) { Text('0') @@ -45,7 +48,9 @@ export struct SwiperPageSwitchMethod { .textAlign(TextAlign.Center) .fontSize(30) } + // [StartExclude switch_pages] .height(200) + // [EndExclude switch_pages] .indicator(true) Row({ space: 12 }) { @@ -61,6 +66,7 @@ export struct SwiperPageSwitchMethod { } } } + // [End switch_pages] .width('100%') .height('100%') .padding({ left: 12, right: 12 }) diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/AgeFriendlyTabs.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/AgeFriendlyTabs.ets index b0b48d3a451cb8161f9b1e3c822f08e719c0f415..74d7a869758a332660676805b3cd1b699fd5035f 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/AgeFriendlyTabs.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/AgeFriendlyTabs.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start age_friendly_tab] import { abilityManager, Configuration } from '@kit.AbilityKit'; import { BusinessError } from '@kit.BasicServicesKit'; import { promptAction, uiAppearance } from '@kit.ArkUI'; @@ -72,7 +73,9 @@ export struct AgeFriendlyTabs { } build() { + // [StartExclude age_friendly_tab] NavDestination() { + // [EndExclude age_friendly_tab] Column() { Column() { Row() { @@ -175,6 +178,7 @@ export struct AgeFriendlyTabs { .margin({ top: 200 }) }.width('100%') } + // [End age_friendly_tab] .backgroundColor('#f1f2f3') .title($r('app.string.AgeFriendlyTabs_title')) } diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/BottomTabBar.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/BottomTabBar.ets index aaafa470b7511995577e1bd0221ac1b40de78271..9a3a5b4215532191af05cdcf796c450451076814 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/BottomTabBar.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/BottomTabBar.ets @@ -22,10 +22,13 @@ export struct BottomTabBar { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.BottomTabBar_titleExample') }) { + // [Start bottom_navigation] Tabs({ barPosition: BarPosition.End }) { + // [StartExclude bottom_navigation] TabContent() { Text($r('app.string.homepage_content')) .fontSize(30) + } .backgroundColor(Color.Blue) .tabBar($r('app.string.homepage')) @@ -50,7 +53,9 @@ export struct BottomTabBar { } .backgroundColor(Color.Orange) .tabBar($r('app.string.mine')) + // [EndExclude bottom_navigation] } + // [End bottom_navigation] .height(500) } } diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/ContentWillChange.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/ContentWillChange.ets index 5f54dabfdaaa34e92336eae3117930334ea28631..a414fd27b1237f0e2c65060567d6c0802ceabf1c 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/ContentWillChange.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/ContentWillChange.ets @@ -15,15 +15,18 @@ import { ComponentCard } from '../../common/Card'; +// [Start switch_the_tab_to_a_specific_tab] @Entry @Component export struct ContentWillChange { scroller: Scroller = new Scroller(); @State currentIndex: number = 2; + // [StartExclude switch_the_tab_to_a_specific_tab] @State currentIndexTwo: number = 2; @State currentIndexThree: number = 2; private controller: TabsController = new TabsController(); private controllerTwo: TabsController = new TabsController(); + // [EndExclude switch_the_tab_to_a_specific_tab] @Builder tabBuilder(title: ResourceStr, targetIndex: number) { @@ -33,6 +36,7 @@ export struct ContentWillChange { } } + // [StartExclude switch_the_tab_to_a_specific_tab] @Builder tabBuilderTwo(title: ResourceStr, targetIndex: number) { Column() { @@ -48,37 +52,50 @@ export struct ContentWillChange { .fontColor(this.currentIndexThree === targetIndex ? '#F111C1' : '#6B6B6B') } } + // [EndExclude switch_the_tab_to_a_specific_tab] build() { + // [StartExclude switch_the_tab_to_a_specific_tab] NavDestination() { Scroll(this.scroller) { + // [EndExclude switch_the_tab_to_a_specific_tab] Column({ space: 12 }) { + // [StartExclude switch_the_tab_to_a_specific_tab] ComponentCard({ title: $r('app.string.ContentWillChange_titleContentAndTabSync') }) { + // [EndExclude switch_the_tab_to_a_specific_tab] Tabs({ barPosition: BarPosition.End }) { TabContent() { + // [StartExclude switch_the_tab_to_a_specific_tab] Text($r('app.string.homepage_content')) .fontSize(30) + // [EndExclude switch_the_tab_to_a_specific_tab] } .backgroundColor(Color.Blue) .tabBar(this.tabBuilder($r('app.string.homepage'), 0)) TabContent() { + // [StartExclude switch_the_tab_to_a_specific_tab] Text($r('app.string.discover_content')) .fontSize(30) + // [EndExclude switch_the_tab_to_a_specific_tab] } .backgroundColor(Color.Green) .tabBar(this.tabBuilder($r('app.string.discover'), 1)) TabContent() { + // [StartExclude switch_the_tab_to_a_specific_tab] Text($r('app.string.recommend_content')) .fontSize(30) + // [EndExclude switch_the_tab_to_a_specific_tab] } .backgroundColor(Color.Yellow) .tabBar(this.tabBuilder($r('app.string.recommend'), 2)) TabContent() { + // [StartExclude switch_the_tab_to_a_specific_tab] Text($r('app.string.mine_content')) .fontSize(30) + // [EndExclude switch_the_tab_to_a_specific_tab] } .backgroundColor(Color.Orange) .tabBar(this.tabBuilder($r('app.string.mine'), 3)) @@ -92,7 +109,9 @@ export struct ContentWillChange { ComponentCard({ title: $r('app.string.ContentWillChange_titleSpecifiedTab') }) { Column({ space: 8 }) { + // [Start content_associated_with_tab] Tabs({ barPosition: BarPosition.End, index: this.currentIndexTwo, controller: this.controller }) { + // [StartExclude content_associated_with_tab] TabContent() { Text($r('app.string.homepage_content')) .fontSize(30) @@ -120,6 +139,7 @@ export struct ContentWillChange { } .backgroundColor(Color.Orange) .tabBar(this.tabBuilderTwo($r('app.string.mine'), 3)) + // [EndExclude content_associated_with_tab] } .animationDuration(0) .height(300) @@ -137,12 +157,15 @@ export struct ContentWillChange { let index = (this.currentIndexTwo + 1) % 4; this.controller.changeIndex(index); }) + // [End content_associated_with_tab] } } ComponentCard({ title: $r('app.string.ContentWillChange_titleInterception') }) { Column({ space: 8 }) { + // [Start custom_page_toggle_interception_events] Tabs({ barPosition: BarPosition.End, index: this.currentIndexThree, controller: this.controllerTwo }) { + // [StartExclude custom_page_toggle_interception_events] TabContent() { Text($r('app.string.homepage_content')) .fontSize(30) @@ -170,9 +193,12 @@ export struct ContentWillChange { } .backgroundColor(Color.Orange) .tabBar(this.tabBuilderThree($r('app.string.mine'), 3)) + // [EndExclude custom_page_toggle_interception_events] } + // [StartExclude custom_page_toggle_interception_events] .animationDuration(0) .height(300) + // [EndExclude custom_page_toggle_interception_events] .onChange((index: number) => { this.currentIndexThree = index; }) @@ -182,6 +208,7 @@ export struct ContentWillChange { } return true; }) + // [End custom_page_toggle_interception_events] Button($r('app.string.ContentWillChange_changeIndex')).width('50%') .onClick(() => { @@ -203,4 +230,5 @@ export struct ContentWillChange { .backgroundColor('#f1f2f3') .title($r('app.string.ContentWillChange_title')) } -} \ No newline at end of file +} +// [End switch_the_tab_to_a_specific_tab] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/CustomTabBar.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/CustomTabBar.ets index c253715b33b36ee8d80aa6ec1c460c3ac77c8252..de0d4c16d7d5f6af6b3eb05f724c3e9b1c2809c7 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/CustomTabBar.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/CustomTabBar.ets @@ -18,6 +18,7 @@ import { ComponentCard } from '../../common/Card'; @Entry @Component export struct CustomTabBar { + // [Start custom_tab_bar_style] @State currentIndex: number = 0; @Builder @@ -32,6 +33,7 @@ export struct CustomTabBar { .height(50) .justifyContent(FlexAlign.Center) } + // [End custom_tab_bar_style] build() { NavDestination() { @@ -68,6 +70,7 @@ export struct CustomTabBar { $r('sys.media.ohos_ic_public_video'), $r('sys.media.ohos_ic_public_video'))) + // [Start set_custom_tab_bar_style] TabContent() { Text($r('app.string.more_content')) .fontSize(30) @@ -77,6 +80,7 @@ export struct CustomTabBar { 3, $r('sys.media.ohos_ic_public_drawer_open'), $r('sys.media.ohos_ic_public_drawer_open'))) + // [End set_custom_tab_bar_style] }.height(500) .onChange((index: number) => { this.currentIndex = index; // 监听索引index的变化，实现页签内容的切换。 diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/FixedTabBar.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/FixedTabBar.ets index ae571af16c17d49bebf5e721a5cf74d5b55cd193..a786d084a857b391180a9d90a75183ba0414f435 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/FixedTabBar.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/FixedTabBar.ets @@ -22,7 +22,9 @@ export struct FixedTabBar { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.FixedTabBar_titleExample') }) { + // [Start fixed_tab_bar] Tabs({ barPosition: BarPosition.End }) { + // [StartExclude fixed_tab_bar] TabContent() { Text($r('app.string.homepage_content')) .fontSize(30) @@ -50,9 +52,13 @@ export struct FixedTabBar { } .backgroundColor(Color.Orange) .tabBar($r('app.string.mine')) + // [EndExclude fixed_tab_bar] } + // [StartExclude fixed_tab_bar] .height(500) + // [EndExclude fixed_tab_bar] .barMode(BarMode.Fixed) + // [End fixed_tab_bar] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/ScrollableTabBar.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/ScrollableTabBar.ets index 0964827c3bc723ab7410cf03e786d3ef4c2e9226..ef93f632f6f18c893105e7fb735219eddd5f55cb 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/ScrollableTabBar.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/ScrollableTabBar.ets @@ -22,7 +22,9 @@ export struct ScrollableTabBar { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.ScrollableTabBar_titleExample') }) { + // [Start scrollable_tab_bar] Tabs({ barPosition: BarPosition.Start }) { + // [StartExclude scrollable_tab_bar] TabContent() { Text($r('app.string.FocusOn_content')) .fontSize(30) @@ -78,10 +80,14 @@ export struct ScrollableTabBar { } .backgroundColor(Color.Red) .tabBar($r('app.string.humanities')) + // [EndExclude scrollable_tab_bar] } + // [StartExclude scrollable_tab_bar] .barWidth(250) .height(500) + // [EndExclude scrollable_tab_bar] .barMode(BarMode.Scrollable) + // [End scrollable_tab_bar] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/SideTabBar.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/SideTabBar.ets index 60f4cc0559df79622af0b5024f4f1caf59d6bcaa..70f2bedb836d1787b542c25a3a40a207943121c7 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/SideTabBar.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/SideTabBar.ets @@ -22,7 +22,9 @@ export struct SideTabBar { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.SideTabBar_titleExample') }) { + // [Start side_navigation] Tabs({ barPosition: BarPosition.Start }) { + // [StartExclude side_navigation] TabContent() { Text($r('app.string.homepage_content')) .fontSize(30) @@ -50,11 +52,15 @@ export struct SideTabBar { } .backgroundColor(Color.Orange) .tabBar($r('app.string.mine')) + // [EndExclude side_navigation] } + // [StartExclude side_navigation] .height(200) + // [EndExclude side_navigation] .vertical(true) .barWidth(100) .barHeight(200) + // [End side_navigation] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/SwipeLockedTabBar.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/SwipeLockedTabBar.ets index 20df6488400d50e75d7d413cf8b7fff9136135bf..abb21c01b947663fde1ec16839c73dd40b0912c0 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/SwipeLockedTabBar.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/SwipeLockedTabBar.ets @@ -22,11 +22,13 @@ export struct SwipeLockedTabBar { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.SwipeLockedTabBar_titleExample') }) { + // [Start swipe_locked_tab_bar] Tabs({ barPosition: BarPosition.End }) { TabContent() { Column() { Tabs() { // 顶部导航栏内容 + // [StartExclude swipe_locked_tab_bar] TabContent() { Text($r('app.string.FocusOn_content')) .fontSize(30) @@ -83,9 +85,13 @@ export struct SwipeLockedTabBar { } .backgroundColor(Color.Orange) .tabBar($r('app.string.mine')) + // [EndExclude swipe_locked_tab_bar] } + // [StartExclude swipe_locked_tab_bar] .height(500) + // [EndExclude swipe_locked_tab_bar] .scrollable(false) + // [End swipe_locked_tab_bar] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/TabsLayout.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/TabsLayout.ets index 986344f8720228c771013d04d954293425d2f04c..2ab0bde038280cc905ab9ff1b135dbf3d21deae8 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/TabsLayout.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/TabsLayout.ets @@ -22,12 +22,15 @@ export struct TabsLayout { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.TabsLayout_titleExample') }) { + // [Start basic_layout_displays_many_contents] Tabs() { + // [Start basic_layout_displays_one_content] TabContent() { Text($r('app.string.homepage_content')) .fontSize(30) } .tabBar($r('app.string.homepage')) + // [End basic_layout_displays_one_content] TabContent() { Text($r('app.string.recommend_content')) @@ -46,8 +49,11 @@ export struct TabsLayout { .fontSize(30) } .tabBar($r('app.string.mine')) + // [StartExclude basic_layout_displays_many_contents] }.height(300) + // [EndExclude basic_layout_displays_many_contents] } + // [End basic_layout_displays_many_contents] } .width('100%') .height('100%') diff --git a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/TopTabBar.ets b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/TopTabBar.ets index 976c71e86764f451d9e413e5b6dda2b7f69fe460..ac40d162d18cf06d0ecfae41db5afd64839dd0b2 100644 --- a/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/TopTabBar.ets +++ b/code/DocsSample/ArkUISample/ScrollableComponent/entry/src/main/ets/pages/tabs/TopTabBar.ets @@ -22,7 +22,9 @@ export struct TopTabBar { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.TopTabBar_titleExample') }) { + // [Start top_navigation] Tabs({ barPosition: BarPosition.Start }) { + // [StartExclude top_navigation] TabContent() { Text($r('app.string.FocusOn_content')) .fontSize(30) @@ -58,7 +60,9 @@ export struct TopTabBar { .backgroundColor(Color.Pink) .tabBar($r('app.string.technology')) }.height(500) + // [EndExclude top_navigation] } + // [End top_navigation] } .width('100%') .height('100%') diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/CreateText.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/CreateText.ets index eecf4b7e1303533785114eaf6bbf41a6748243c7..274e166c979a93db16c8e7ab664313390c8587b7 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/CreateText.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/CreateText.ets @@ -22,19 +22,23 @@ export struct CreateText { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.CreatText_title_1') }) { + // [Start create_a_text_in_one_way] Text('This is a text string') + // [End create_a_text_in_one_way] } ComponentCard({ title: $r('app.string.CreatText_title_2'), description: $r('app.string.CreatText_description_1') }) { + // [Start create_a_text_in_another_way] Text($r('app.string.module_desc')) .baselineOffset(0) .fontSize(30) .border({ width: 1 }) .padding(10) .width(300) + // [End create_a_text_in_another_way] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/CustomTextStyle.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/CustomTextStyle.ets index c0e4d57499d0741854efcfa6a8370d58564693fb..a6544964ae0d16e971e0823a22362ce4bae6dea9 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/CustomTextStyle.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/CustomTextStyle.ets @@ -26,6 +26,7 @@ export struct CustomTextStyle { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.CustomTextStyle_title_1') }) { Column() { + // [Start custom_text_align] Text($r('app.string.TextAlign_Start')) .width(300) .textAlign(TextAlign.Start) @@ -41,6 +42,7 @@ export struct CustomTextStyle { .textAlign(TextAlign.End) .border({ width: 1 }) .padding(10) + // [End custom_text_align] } } @@ -49,6 +51,7 @@ export struct CustomTextStyle { description: $r('app.string.CustomTextStyle_description_1') }) { Column({ space: 8 }) { + // [Start custom_text_overflow] Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow ' + 'to None text content. This is the setting of textOverflow to Clip text content This is the setting ' + 'of textOverflow to None text content.') @@ -74,11 +77,13 @@ export struct CustomTextStyle { .fontSize(12) .border({ width: 1 }) .padding(10) + // [End custom_text_overflow] } } ComponentCard({ title: $r('app.string.CustomTextStyle_title_3') }) { Column({ space: 8 }) { + // [Start custom_line_height] Text('This is the text with the line height set. This is the text with the line height set.') .width(300).fontSize(12).border({ width: 1 }).padding(10) Text('This is the text with the line height set. This is the text with the line height set.') @@ -87,11 +92,13 @@ export struct CustomTextStyle { .border({ width: 1 }) .padding(10) .lineHeight(20) + // [End custom_line_height] } } ComponentCard({ title: $r('app.string.CustomTextStyle_title_4') }) { Column({ space: 8 }) { + // [Start custom_text_line_and_color] Text('This is the text') .decoration({ type: TextDecorationType.LineThrough, @@ -113,11 +120,13 @@ export struct CustomTextStyle { }) .borderWidth(1) .padding(10) + // [End custom_text_line_and_color] } } ComponentCard({ title: $r('app.string.CustomTextStyle_title_5') }) { Column({ space: 8 }) { + // [Start custom_text_baseline_offset] Text('This is the text content with baselineOffset 0.') .baselineOffset(0) .fontSize(12) @@ -136,11 +145,13 @@ export struct CustomTextStyle { .border({ width: 1 }) .padding(10) .width('100%') + // [End custom_text_baseline_offset] } } ComponentCard({ title: $r('app.string.CustomTextStyle_title_6') }) { Column({ space: 8 }) { + // [Start custom_text_letter_space] Text('This is the text content with letterSpacing 0.') .letterSpacing(0) .fontSize(12) @@ -159,11 +170,13 @@ export struct CustomTextStyle { .border({ width: 1 }) .padding(10) .width('100%') + // [End custom_text_letter_space] } } ComponentCard({ title: $r('app.string.CustomTextStyle_title_7') }) { Column({ space: 8 }) { + // [Start custom_the_size_of_text] Text($r('app.string.CustomTextStyle_textContent_3')) .width(250) .maxLines(1) @@ -192,11 +205,13 @@ export struct CustomTextStyle { .minFontSize(15) .border({ width: 1 }) .padding(10) + // [End custom_the_size_of_text] } } ComponentCard({ title: $r('app.string.CustomTextStyle_title_8') }) { Column({ space: 8 }) { + // [Start custom_the_text_by_text_case] Text('This is the text content with textCase set to Normal.') .textCase(TextCase.Normal) .padding(10) @@ -214,13 +229,16 @@ export struct CustomTextStyle { .textCase(TextCase.UpperCase) .border({ width: 1 }) .padding(10) + // [End custom_the_text_by_text_case] } } ComponentCard({ title: $r('app.string.CustomTextStyle_title_9') }) { + // [Start custom_the_text_by_copy_option] Text($r('app.string.CustomTextStyle_textContent_7')) .fontSize(30) .copyOption(CopyOptions.InApp) + // [End custom_the_text_by_copy_option] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextAddEvent.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextAddEvent.ets index 14b805be11770704a0a99d2952edf9b0e9cfc438..4675168db0e0026dcfded5f4884337ad4d80de84 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextAddEvent.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextAddEvent.ets @@ -24,11 +24,13 @@ export struct TextAddEvent { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.TextAddEvent_title') }) { + // [Start add_event_onclick] Text(this.onClickText) .id('Click') .onClick(() => { this.onClickText = $r('app.string.TextAddEvent_textContent_2'); }) + // [End add_event_onclick] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextHotSearch.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextHotSearch.ets index 72b3c3d150fd6e7d0c80adb23154f905ae02457f..b3a3308e6e9b26cb8b031a83a458a0dd4c0377f6 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextHotSearch.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextHotSearch.ets @@ -13,6 +13,7 @@ * limitations under the License. */ +// [Start the_text_fact_example] import { ComponentCard } from '../../common/Card'; @Entry @@ -105,4 +106,5 @@ export struct TextHotSearch { .backgroundColor('#f1f2f3') .title($r('app.string.TextHotSearch_title')) } -} \ No newline at end of file +} +// [End the_text_fact_example] \ No newline at end of file diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextSpan.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextSpan.ets index 4cbc9d8c6800e1fb6df29a249ad83e78efde531a..ead16c2241340b555f28b6b76bbc92c522cedd14 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextSpan.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/text/TextSpan.ets @@ -24,14 +24,17 @@ export struct TextSpan { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.TextSpan_title_1') }) { + // [Start create_span] Text($r('app.string.TextSpan_textContent_1')) { Span($r('app.string.TextSpan_textContent_2')) } .padding(10) .borderWidth(1) + // [End create_span] } ComponentCard({ title: $r('app.string.TextSpan_title_2') }) { + // [Start create_span_with_lines] Text() { Span($r('app.string.TextSpan_textContent_3')) .fontSize(16) @@ -49,18 +52,22 @@ export struct TextSpan { } .borderWidth(1) .padding(10) + // [End create_span_with_lines] } ComponentCard({ title: $r('app.string.TextSpan_title_3') }) { + // [Start create_span_with_upper_case] Text() { Span('I am Upper-span').fontSize(12) .textCase(TextCase.UpperCase) } .borderWidth(1) .padding(10) + // [End create_span_with_upper_case] } ComponentCard({ title: $r('app.string.TextSpan_title_4') }) { + // [Start create_span_with_onclick] Text() { Span(this.onClickText) .fontSize(12) @@ -69,6 +76,7 @@ export struct TextSpan { this.onClickText = $r('app.string.TextSpan_textContent_6'); }) } + // [End create_span_with_onclick] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/CreatTextInput.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/CreatTextInput.ets index 97773dda89ea84d03d982b6a906a43d3628b670e..6c8f1280d688fe1941892d529e7b214796919139 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/CreatTextInput.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/CreatTextInput.ets @@ -22,7 +22,9 @@ export struct CreatTextInput { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.CreatTextInput_title_1') }) { + // [Start create_text_input] TextInput() + // [End create_text_input] } ComponentCard({ @@ -30,9 +32,13 @@ export struct CreatTextInput { description: $r('app.string.CreatTextInput_description_1') }) { Column({ space: 8 }) { + // [Start create_text_area] TextArea() + // [End create_text_area] + // [Start create_text_area_example] TextArea({ text: $r('app.string.CreatTextInput_textContent') }) .width(300) + // [End create_text_area_example] } } } diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/CustomTextInputStyle.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/CustomTextInputStyle.ets index 153509c0e5821767ade6c45f42a3c1e4069f8159..6bfeaf93dbdfce9a7117eee3a7687a369dd6ff63 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/CustomTextInputStyle.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/CustomTextInputStyle.ets @@ -22,22 +22,28 @@ export struct CustomTextInputStyle { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.CustomTextInputStyle_title_1') }) { + // [Start custom_text_input_with_place_holder] TextInput({ placeholder: $r('app.string.CustomTextInputStyle_textContent_1') }) + // [End custom_text_input_with_place_holder] } ComponentCard({ title: $r('app.string.CustomTextInputStyle_title_2') }) { + // [Start custom_text_input_with_place_holder_and_text] TextInput({ placeholder: $r('app.string.CustomTextInputStyle_textContent_1'), text: $r('app.string.CustomTextInputStyle_textContent_2') }) + // [End custom_text_input_with_place_holder_and_text] } ComponentCard({ title: $r('app.string.CustomTextInputStyle_title_3') }) { + // [Start custom_text_input_background_color] TextInput({ placeholder: $r('app.string.CustomTextInputStyle_textContent_1'), text: $r('app.string.CustomTextInputStyle_textContent_2') }) .backgroundColor(Color.Pink) + // [End custom_text_input_background_color] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/KeyboardAvoidance.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/KeyboardAvoidance.ets index 26da9ee4a6124ca7126bfad46a6fa2126e137ee9..642e19c958f52a3cb993303b57c30c7cba2bc7be 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/KeyboardAvoidance.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/KeyboardAvoidance.ets @@ -15,16 +15,19 @@ import { ComponentCard } from '../../common/Card'; +// [Start keyboard_avoid] @Entry @Component export struct KeyboardAvoidance { placeHolderArr: string[] = ['1', '2', '3', '4', '5', '6', '7']; build() { + // [StartExclude keyboard_avoid] NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.KeyboardAvoidance_title') }) { Column({ space: 12 }) { + // [EndExclude keyboard_avoid] Scroll() { Column() { ForEach(this.placeHolderArr, (placeholder: string) => { @@ -37,6 +40,7 @@ export struct KeyboardAvoidance { .width('100%') } } + // [End keyboard_avoid] } .width('100%') .height('100%') diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/LoginRegisterPage.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/LoginRegisterPage.ets index d82eac3b23a8638d1f2040d9d46483daa1be4160..16b8826b8a11ae94cb66d395ceac9826aaa45bdd 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/LoginRegisterPage.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/LoginRegisterPage.ets @@ -16,13 +16,16 @@ import { ComponentCard } from '../../common/Card'; import resource from '../../common/resource'; +// [Start the_example_of_text_input] @Entry @Component export struct LoginRegisterPage { build() { + // [StartExclude the_example_of_text_input] NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.LoginRegisterPage_title') }) { + // [EndExclude the_example_of_text_input] Column({ space: 12 }) { TextInput({ placeholder: 'input your username' }) .id('username') @@ -44,6 +47,7 @@ export struct LoginRegisterPage { .height('100%') .padding({ left: 12, right: 12 }) } + // [End the_example_of_text_input] .backgroundColor('#f1f2f3') .title($r('app.string.LoginRegisterPage_title')) } diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/SetTextInputType.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/SetTextInputType.ets index 8099fa5027d67c7c55666045192deabb4bd7e162..c96b89a703af46e27385e700ee7c1b589317bf63 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/SetTextInputType.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/SetTextInputType.ets @@ -22,15 +22,19 @@ export struct SetTextInputType { NavDestination() { Column({ space: 12 }) { ComponentCard({ title: $r('app.string.SetTextInputType_title_1') }) { + // [Start set_normal_input_type] TextInput() .id('Normal') .type(InputType.Normal) + // [End set_normal_input_type] } ComponentCard({ title: $r('app.string.SetTextInputType_title_2') }) { + // [Start set_password_input_type] TextInput() .id('Password') .type(InputType.Password) + // [End set_password_input_type] } } .width('100%') diff --git a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/TextInputAddEvent.ets b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/TextInputAddEvent.ets index 1572d8d0c6952bc62ca494517a1e01e806b90cd2..74ed0cfe424883fef88747902cda490e93eec5d1 100644 --- a/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/TextInputAddEvent.ets +++ b/code/DocsSample/ArkUISample/TextComponent/entry/src/main/ets/pages/textInput/TextInputAddEvent.ets @@ -28,6 +28,7 @@ export struct TextInputAddEvent { Column({ space: 8 }) { Text(this.eventText) Text(this.inputValue) + // [Start add_text_input_event] TextInput() .onChange((value: string) => { this.inputValue = value; @@ -35,6 +36,7 @@ export struct TextInputAddEvent { .onFocus(() => { this.eventText = $r('app.string.TextInputAddEvent_textContent_3'); }) + // [End add_text_input_event] } } }