diff --git a/en/application-dev/reference/arkui-ts/figures/contextmenu_close.gif b/en/application-dev/reference/arkui-ts/figures/contextmenu_close.gif new file mode 100644 index 0000000000000000000000000000000000000000..424f418c9d18997a3ed29eb777ffb4817d1b2dc4 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/contextmenu_close.gif differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md index 999d20ac569fc3d8a3e3aeabd4432331adc707a7..9dbeb85f9b9e13c4c5f346ad999d900b9ad1511a 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md @@ -3,6 +3,7 @@ The **\** component is used to create a loading animation. > **NOTE** +> > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md new file mode 100644 index 0000000000000000000000000000000000000000..3c2df6d3ff4ee403818ab620a8f0e9a42c02d2b6 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navdestination.md @@ -0,0 +1,27 @@ +# NavDestination + +**\** is a child component of the **\** component and represents a destination in the navigation area. + +> **NOTE** +> +> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. + + +## Child Components + +Supported + + +## APIs + +NavDestination() + + +## Attributes + +In addition to the [backgroundColor](ts-universal-attributes-background.md) attribute, the following attributes are supported. + +| Name | Type | Description | +| -------------- | ---------------------------------------- | ---------------------------------------- | +| title | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavigationCommonTitle](ts-basic-components-navigation.md#navigationcommontitle) \| [NavigationCustomTitle](ts-basic-components-navigation.md##navigationcustomtitle) | Page title. | +| hideTitleBar | boolean | Whether to hide the title bar.
Default value: **false**
**true**: Hide the title bar.
**false**: Display the title bar.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index a5424e1b00fdfc132aed4b1ebd6793583d0ed673..c8b4684029267d1f95afbe3e9aaa9dfdb8f2ff93 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -1,6 +1,6 @@ # Navigation -The **\** component typically functions as the root container of a page and displays the page title, toolbar, and menu based on the attribute settings. +The **\** component typically functions as the root container of a page and displays the title bar, toolbar, and navigation bar based on the attribute settings. > **NOTE** > @@ -11,12 +11,13 @@ The **\** component typically functions as the root container of a p Supported +Since API version 9, it is recommended that this component be used together with the **[\](ts-basic-components-navrouter.md)** component. + ## APIs Navigation() -Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings. ## Attributes @@ -24,14 +25,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Type | Description | | -------------- | ---------------------------------------- | ---------------------------------------- | -| title | string \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Page title. | -| subTitle | string | Subtitle of the page. | -| menus | Array8+ | Menu in the upper right corner of the page. | -| titleMode | NavigationTitleMode | Display mode of the page title bar.
Default value: **NavigationTitleMode.Free**| -| toolBar | object \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Content of the toolbar.
**items**: all items on the toolbar. | -| hideToolBar | boolean | Whether to hide the toolbar.
Default value: **false**
**true**: Hide the toolbar.
**false**: Show the toolbar.| -| hideTitleBar | boolean | Whether to hide the title bar.
Default value: **false** | -| hideBackButton | boolean | Whether to hide the back button.
Default value: **false** | +| title | string \| [CustomBuilder](ts-types.md#custombuilder8)8+ \| [NavigationCommonTitle](#navigationcommontitle)9+ \| [NavigationCustomTitle](#navigationcustomtitle)9+ | Page title. | +| subTitledeprecated | string | Subtitle of the page. This attribute is deprecated since API version 9. You are advised to use **title** instead. | +| menus | Array<[NavigationMenuItem](#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Menu items in the upper right corner of the page. When the value type is Array\<[NavigationMenuItem](#navigationmenuitem)>, the menu shows a maximum of three icons in portrait mode and a maximum of five icons in landscape mode, plus excess icons (if any) under the automatically generated **More** icon. | +| titleMode | [NavigationTitleMode](#navigationtitlemode) | Display mode of the page title bar.
Default value: **NavigationTitleMode.Free**| +| toolBar | [object](#object) \| [CustomBuilder](ts-types.md#custombuilder8)8+ | Content of the toolbar.
**items**: items on the toolbar. | +| hideToolBar | boolean | Whether to hide the toolbar.
Default value: **false**
**true**: Hide the toolbar.
**false**: Display the toolbar.| +| hideTitleBar | boolean | Whether to hide the title bar.
Default value: **false**
**true**: Hide the title bar.
**false**: Display the title bar.| +| hideBackButton | boolean | Whether to hide the Back key.
Default value: **false**
**true**: Hide the Back key.
**false**: Display the Back key.| +| navBarWidth9+ | [Length](ts-types.md#length) | Width of the navigation bar.
Default value: **200vp**| +| navBarPosition9+ | [NavBarPosition](#navbarposition) | Position of the navigation bar.
Default value: **NavBarPosition.Start**| +| mode9+ | [NavigationMode](#navigationmode) | Display mode of the navigation bar.
Default value: **NavigationMode.Auto**| +| backButtonIcon9+ | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back icon on the navigation bar.| +| hideNavBar9+ | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.| + ## NavigationMenuItem @@ -54,164 +61,173 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name | Description | | ---- | ---------------------------------------- | | Free | When the content is a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores when the content scrolls up to the top.| -| Mini | The icon, main title, and subtitle are in mini mode. | -| Full | The main title and subtitle are in full mode. | +| Mini | The title is fixed at mini mode. | +| Full | The title is fixed at full mode. | -> **NOTE** -> -> Currently, the scrollable component can only be **\**. +## NavigationCommonTitle +| Name | Type | Mandatory| Description | +| ------ | --------- | ---- | -------- | +| main | string | Yes| Main title.| +| sub | string | Yes| Subtitle.| -## Events +## NavigationCustomTitle -| Name | Description | -| ---------------------------------------- | ---------------------------------------- | -| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.| +| Name | Type | Mandatory| Description | +| ------ | ----------------------- | ---- | ------------------------------ | +| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes| Content of the title bar.| +| height | [TitleHeight](#titleheight) \| [Length](ts-types.md#length) | Yes| Height of the title bar.| +## NavBarPosition -## Example +| Name| Description | +| ---- | ---------------------------------------- | +| Start | When two columns are displayed, the main column is at the start of the main axis.| +| End | When two columns are displayed, the main column is at the end of the main axis. | -```ts -// xxx.ets -@Entry -@Component -struct NavigationExample { - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - @State hideBar: boolean = true +## NavigationMode - @Builder NavigationTitle() { - Column() { - Text('title') - .width(80) - .height(60) - .fontColor(Color.Blue) - .fontSize(30) - } - .onClick(() => { - console.log("title") - }) - } +| Name| Description | +| ---- | ---------------------------------------- | +| Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages.| +| Split | The navigation bar and content area are displayed in different columns.| +| Auto | When the window width is greater than or equal to 520 vp, Split mode is used. Otherwise, Stack mode is used.| - @Builder NavigationMenus() { - Row() { - Image('images/add.png') - .width(25) - .height(25) - Image('comment/more.png') - .width(25) - .height(25) - .margin({ left: 30 }) - }.width(100) - } +## TitleHeight - build() { - Column() { - Navigation() { - Search({ value: '', placeholder: "" }).width('85%').margin(26) - List({ space: 5, initialIndex: 0 }) { - ForEach(this.arr, (item) => { - ListItem() { - Text('' + item) - .width('90%') - .height(80) - .backgroundColor('#3366CC') - .borderRadius(15) - .fontSize(16) - .textAlign(TextAlign.Center) - }.editable(true) - }, item => item) - } - .listDirection(Axis.Vertical) - .height(300) - .margin({ top: 10, left: 18 }) - .width('100%') +| Name| Description | +| ---- | ---------------------------------------- | +| MainOnly | Recommended height (56 vp) of the title bar when only the main title is available.| +| MainWithSub | Recommended height (82 vp) of the title bar when both the main title and subtitle exist.| - Button(this.hideBar ? "tool bar" : "hide bar") - .onClick(() => { - this.hideBar = !this.hideBar - }) - .margin({ left: 135, top: 60 }) - } - .title(this.NavigationTitle) - .subTitle('subtitle') - .menus(this.NavigationMenus) - .titleMode(NavigationTitleMode.Free) - .hideTitleBar(false) - .hideBackButton(false) - .onTitleModeChange((titleModel: NavigationTitleMode) => { - console.log('titleMode') - }) - .toolBar({ items: [ - { value: 'app', icon: 'images/grid.svg', action: () => { - console.log("app") - } }, - { value: 'add', icon: 'images/add.svg', action: () => { - console.log("add") - } }, - { value: 'collect', icon: 'images/collect.svg', action: () => { - console.log("collect") - } }] }) - .hideToolBar(this.hideBar) - } - } -} -``` -![en-us_image_0000001256978359](figures/en-us_image_0000001256978359.gif) +> **NOTE** +> +> The scrollable component can only be **\**. + + +## Events + +| Name | Description | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. | +| onNavBarStateChange(callback: (isVisible: boolean) => void) | Triggered when the navigation bar visibility status changes. The value **true** means that the navigation bar is displayed, and **false** means the opposite. | + + +## Example ```ts // xxx.ets @Entry @Component -struct ToolbarBuilderExample { +struct NavigationExample { + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] @State currentIndex: number = 0 @State Build: Array = [ { - icon: $r('app.media.ic_public_add'), - icon_after: $r('app.media.ic_public_addcolor'), text: 'add', num: 0 }, { - icon: $r('app.media.ic_public_app'), - icon_after: $r('app.media.ic_public_appcolor'), text: 'app', num: 1 }, { - icon: $r('app.media.ic_public_collect'), - icon_after: $r('app.media.ic_public_collectcolor'), text: 'collect', num: 2 } ] + @Builder NavigationTitle() { + Column() { + Text('Title') + .fontColor('#182431') + .fontSize(30) + .lineHeight(41) + .fontWeight(700) + Text('subtitle') + .fontColor('#182431') + .fontSize(14) + .lineHeight(19) + .opacity(0.4) + .margin({ top: 2 }) + }.alignItems(HorizontalAlign.Start) + } + + @Builder NavigationMenus() { + Row() { + Image('common/navigation_icon1.svg') + .width(24) + .height(24) + Image('common/navigation_icon1.svg') + .width(24) + .height(24) + .margin({ left: 24 }) + Image('common/navigation_icon2.svg') + .width(24) + .height(24) + .margin({ left: 24 }) + } + } + @Builder NavigationToolbar() { Row() { ForEach(this.Build, item => { Column() { - Image(this.currentIndex == item.num ? item.icon_after : item.icon) - .width(25) - .height(25) + Image(this.currentIndex == item.num ? 'common/public_icon_selected.svg' : 'common/public_icon.svg') + .width(24) + .height(24) Text(item.text) - .fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000") - } + .fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431') + .fontSize(10) + .lineHeight(14) + .fontWeight(500) + .margin({ top: 3 }) + }.width(104).height(56) .onClick(() => { this.currentIndex = item.num }) - .margin({ left: 70 }) }) - } + }.margin({ left: 24 }) } build() { Column() { Navigation() { - Flex() { + TextInput({ placeholder: 'search...' }) + .width(336) + .height(40) + .backgroundColor('#FFFFFF') + .margin({ top: 8, left: 12 }) + + List({ space: 12, initialIndex: 0 }) { + ForEach(this.arr, (item) => { + ListItem() { + Text('' + item) + .width(336) + .height(72) + .backgroundColor('#FFFFFF') + .borderRadius(24) + .fontSize(16) + .fontWeight(500) + .textAlign(TextAlign.Center) + }.editable(true) + }, item => item) } + .height(324) + .width('100%') + .margin({ top: 12, left: 12 }) } + .title(this.NavigationTitle) + .menus(this.NavigationMenus) + .titleMode(NavigationTitleMode.Full) .toolBar(this.NavigationToolbar) - } + .hideTitleBar(false) + .hideToolBar(false) + .onTitleModeChange((titleModel: NavigationTitleMode) => { + console.info('titleMode' + titleModel) + }) + }.width('100%').height('100%').backgroundColor('#F1F3F5') } } ``` diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md new file mode 100644 index 0000000000000000000000000000000000000000..ddce11da511ebe1cc573290ffd40807d31ec5ac4 --- /dev/null +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navrouter.md @@ -0,0 +1,22 @@ +# NavRouter + +The **\** component provides default logic for click response processing, eliminating the need for manual logic definition. + +> **NOTE** +> +> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. + +## Child Components + +This component must contain two child components, the second of which must be **[\](ts-basic-components-navdestination.md)**. + +## APIs + +NavRouter() + + +## Events + +| Name | Description | +| ------------------------------------------------------- | ------------------------------------------------------------ | +| onStateChange(callback: (isActivated: boolean) => void) | Invoked when the component activation status changes. The value **true** means that component is activated, and **false** means the opposite.
**NOTE**
After the user clicks **NavRouter**, if the **\** component is activated and the corresponding **\** child component loaded, **onStateChange(true)** is called. If the corresponding **\** child component is no longer displayed, **onStateChange(false)** is called. | diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md index a8c3cf662854126929a613d1557c7d2a1025ff91..82628d7048635b4d907c1b933130abc44a40f938 100644 --- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md +++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md @@ -6,12 +6,6 @@ The **\** component can be used to customize drawings. > > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. - - -## Required Permissions - -None - ## Child Components Not supported diff --git a/en/application-dev/reference/arkui-ts/ts-container-ability-component.md b/en/application-dev/reference/arkui-ts/ts-container-ability-component.md index d29e0cefe96db8bfb50a18f1b106ab2af0c99a0b..b4bb994bf095875fc9fe39a0bdd0ff1b86117e67 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-ability-component.md +++ b/en/application-dev/reference/arkui-ts/ts-container-ability-component.md @@ -6,7 +6,7 @@ > > This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. > -> The APIs of this module are system APIs and cannot be called by third-party applications. +> The APIs provided by this component are system APIs. ## Constraints @@ -16,7 +16,7 @@ Only width and height can be set for **\**. These attributes are mandatory and cannot be dynamically updated. -The ability to be started must inherit from [WindowExtension](../apis/js-apis-application-WindowExtensionAbility.md). +The ability to be started must inherit [WindowExtension](../apis/js-apis-application-windowExtensionAbility.md). ## Child Components @@ -31,7 +31,7 @@ AbilityComponent(want: Want) | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| want | [Want](../apis/js-apis-application-Want.md) | Yes| Description of the default ability to load.| +| want | [Want](../apis/js-apis-app-ability-want.md) | Yes| Description of the default ability to load.| ## Events @@ -74,3 +74,5 @@ struct MyComponent { } } ``` + + \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md index 7517dbe5e8a15ea5357aa89f88b5c0e22ba90903..98f9a6f785e635125a6c8837526e9c6b1ac9084d 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md @@ -2,9 +2,9 @@ The **\** component is a container that can be attached to another component for tagging. -> **NOTE** +> **NOTE** > -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components @@ -14,9 +14,9 @@ This component supports only one child component. ## APIs -**Method 1**: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) +**API 1**: Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) -Create a badge. +Creates a badge. **Parameters** | Name| Type| Mandatory| Default Value| Description| @@ -26,7 +26,7 @@ Create a badge. | maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.| | style | [BadgeStyle](#badgestyle) | Yes| - | Style of the badge, including the font color, font size, badge color, and badge size.| -**Method 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) +**API 2**: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) Creates a badge based on the given string. @@ -51,7 +51,7 @@ Creates a badge based on the given string. | Name | Type | Mandatory| Default Value | Description | | ---------- | ------------------------------------------ | ---- | ----------- | ------------------------------------------- | | color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. | -| fontSize | number \| string | No | 10 | Font size, in vp. | +| fontSize | number \| string | No | 10 | Font size, in vp. | | badgeSize | number \| string | No | 16 | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.| | badgeColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color.Red | Badge color. | @@ -62,90 +62,140 @@ Creates a badge based on the given string. @Entry @Component struct BadgeExample { - @State counts: number = 1 - @State message: string = 'new' - - build() { + @Builder TabBuilder(index: number) { Column() { - Text('numberBadge').width('80%') - Row({ space: 10 }) { - // Number badge. The default value of maxCount is 99. If the number of notifications exceeds 99, 99+ is displayed. - Badge({ - count: this.counts, - maxCount: 99, - position: BadgePosition.RightTop, - style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } - }) { - Button('message') - .onClick(() => { - this.counts++ - }) - .width(100).height(50).backgroundColor(0x317aff) - }.width(100).height(50) - - // Number badge + if (index === 2) { Badge({ - count: this.counts, - maxCount: 99, - position: BadgePosition.Left, - style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + value: '', + style: { badgeSize: 6, badgeColor: '#FA2A2D' } }) { - Button('message') - .onClick(() => { - this.counts++ - }) - .width(100).height(50).backgroundColor(0x317aff) - }.width(100).height(50) + Image('/common/public_icon_off.svg') + .width(24) + .height(24) + } + .width(24) + .height(24) + .margin({ bottom: 4 }) + } else { + Image('/common/public_icon_off.svg') + .width(24) + .height(24) + .margin({ bottom: 4 }) + } + Text('Tab') + .fontColor('#182431') + .fontSize(10) + .fontWeight(500) + .lineHeight(14) + }.width('100%').height('100%').justifyContent(FlexAlign.Center) + } + @Builder itemBuilder(value: string) { + Row() { + Image('common/public_icon.svg').width(32).height(32).opacity(0.6) + Text(value) + .width(177) + .height(21) + .margin({ left: 15, right: 76 }) + .textAlign(TextAlign.Start) + .fontColor('#182431') + .fontWeight(500) + .fontSize(16) + .opacity(0.9) + Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) + }.width('100%').padding({ left: 12, right: 12 }).height(56) + } - // Number badge - Badge({ - count: this.counts, - maxCount: 99, - position: BadgePosition.Right, - style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } - }) { - Button('message') - .onClick(() => { - this.counts++ - }) - .width(100).height(50).backgroundColor(0x317aff) - }.width(100).height(50) - }.margin(10) - - Text('stringBadge').width('80%') - Row({ space: 30 }) { - Badge({ - value: this.message, - style: { color: 0xFFFFFF, fontSize: 9, badgeSize: 20, badgeColor: Color.Blue } - }) { - Text('message') - .width(80) - .height(50) - .fontSize(16) - .lineHeight(37) - .borderRadius(10) - .textAlign(TextAlign.Center) - .backgroundColor(0xF3F4ED) - }.width(80).height(50) - - // When value is null, the dot-style badge is used. - Badge({ - value: '', - position: BadgePosition.Right, - style: { badgeSize: 6, badgeColor: Color.Red } - }) { - Text('message') - .width(90) - .height(50) - .fontSize(16) - .lineHeight(37) - .borderRadius(10) - .textAlign(TextAlign.Center) - .backgroundColor(0xF3F4ED) - }.width(90).height(50) - }.margin(10) - } + build() { + Column() { + Text('dotsBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) + Tabs() { + TabContent() + .tabBar(this.TabBuilder(0)) + TabContent() + .tabBar(this.TabBuilder(1)) + TabContent() + .tabBar(this.TabBuilder(2)) + TabContent() + .tabBar(this.TabBuilder(3)) + } + .width(360) + .height(56) + .backgroundColor('#F1F3F5') + + Column() { + Text('stringBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) + List({ space: 12 }) { + ListItem() { + Text('list1').fontSize(14).fontColor('#182431').margin({ left: 12 }) + } + .width('100%') + .height(56) + .backgroundColor('#FFFFFF') + .borderRadius(24) + .align(Alignment.Start) + + ListItem() { + Badge({ + value: 'New', + position: BadgePosition.Right, + style: { badgeSize: 16, badgeColor: '#FA2A2D' } + }) { + Text('list2').width(27).height(19).fontSize(14).fontColor('#182431') + }.width(49.5).height(19) + .margin({ left: 12 }) + } + .width('100%') + .height(56) + .backgroundColor('#FFFFFF') + .borderRadius(24) + .align(Alignment.Start) + }.width(336) + + Text('numberBadge').fontSize(18).fontColor('#182431').fontWeight(500).margin(24) + List() { + ListItem() { + this.itemBuilder('list1') + } + + ListItem() { + Row() { + Image('common/public_icon.svg').width(32).height(32).opacity(0.6) + Badge({ + count: 1, + position: BadgePosition.Right, + style: { badgeSize: 16, badgeColor: '#FA2A2D' } + }) { + Text('list2') + .width(177) + .height(21) + .textAlign(TextAlign.Start) + .fontColor('#182431') + .fontWeight(500) + .fontSize(16) + .opacity(0.9) + }.width(240).height(21).margin({ left: 15, right: 11 }) + + Image('common/public_icon_arrow_right.svg').width(12).height(24).opacity(0.6) + }.width('100%').padding({ left: 12, right: 12 }).height(56) + } + + ListItem() { + this.itemBuilder('list3') + } + + ListItem() { + this.itemBuilder('list4') + } + } + .width(336) + .height(232) + .backgroundColor('#FFFFFF') + .borderRadius(24) + .padding({ top: 4, bottom: 4 }) + .divider({ strokeWidth: 0.5, color: 'rgba(0,0,0,0.1)', startMargin: 60, endMargin: 12 }) + }.width('100%').backgroundColor('#F1F3F5').padding({ bottom: 12 }) + }.width('100%') } } ``` diff --git a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md index 24e4923172aee965e6d4da321ae6c0b0447b7b0c..9ebb510cd0e108985bb88287f9f61e6893420498 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md +++ b/en/application-dev/reference/arkui-ts/ts-container-columnsplit.md @@ -1,10 +1,12 @@ # ColumnSplit -The **\** lays out child components vertically and inserts a horizontal divider between every two child components. +The **\** component lays out child components vertically and inserts a horizontal divider between every two child components. > **NOTE** > -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. + + ## Child Components diff --git a/en/application-dev/reference/arkui-ts/ts-container-counter.md b/en/application-dev/reference/arkui-ts/ts-container-counter.md index db5310b7e8dcf059d9e4a1412b97ce8e4267c65a..fe9baa47e05b60a067545c3d6759373b524ee416 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-counter.md +++ b/en/application-dev/reference/arkui-ts/ts-container-counter.md @@ -7,11 +7,6 @@ The **\** component provides an operation to increase or decrease the n > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. -## Required Permissions - -None - - ## Child Components Supported diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md index 0a18d077c68bc9c44adb71c5cd462ecbd20e68ad..b836d4ea98c041b09d5f6eb7a4fc0304e905237e 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md @@ -4,11 +4,11 @@ The **\** component is used to display list item groups. It must > **NOTE** > -> - This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. +> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. ## Usage Guidelines If the **listDirection** attribute of the parent **\** component is set to **Axis.Vertical**, the **height** attribute of the **\** component cannot be set. The height of a **\** component is the sum of its header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\** component is set to **Axis.Horizontal**, the **width** attribute of the **\** component cannot be set. The width of a **\** component is the sum of its header width, footer width, and total width of the list items. -Currently, the list items in the **\** component cannot be edited, selected, or dragged. That is, the **editable** and **selectable** attributes of these list items do not take effect. +The list items in the **\** component cannot be edited, selected, or dragged. That is, the **editable** and **selectable** attributes of these list items do not take effect. ## Child Components @@ -38,28 +38,6 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: ```ts // xxx.ets -function itemHeadBuilder(text: string) { - @Builder function itemHead() { - Text(text) - .fontSize(20) - .backgroundColor(0xAABBCC) - .width("100%") - .padding(10) - } - return itemHead -} - -function itemFootBuilder(num: number) { - @Builder function itemFoot() { - Text(''Total lessons:'+ num") - .fontSize(16) - .backgroundColor(0xAABBCC) - .width("100%") - .padding(5) - } - return itemFoot -} - @Entry @Component struct ListItemGroupExample { @@ -82,11 +60,27 @@ struct ListItemGroupExample { } ] + @Builder itemHead(text:string) { + Text(text) + .fontSize(20) + .backgroundColor(0xAABBCC) + .width("100%") + .padding(10) + } + + @Builder itemFoot(num:number) { + Text(''Total lessons:'+ num") + .fontSize(16) + .backgroundColor(0xAABBCC) + .width("100%") + .padding(5) + } + build() { Column() { List({ space: 20 }) { ForEach(this.timetable, (item) => { - ListItemGroup({ header:itemHeadBuilder(item.title), footer:itemFootBuilder(item.projects.length) }) { + ListItemGroup({ header:this.itemHead(item.title), footer:this.itemFoot(item.projects.length) }) { ForEach(item.projects, (project) => { ListItem() { Text(project) diff --git a/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md b/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md index 86d00d6916c5a3ec66b866f3078fa6daf39d1bf7..06c65aa8f4147948d57226c034da55dd5e1e4840 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-relativecontainer.md @@ -4,7 +4,9 @@ The **\** component is used for element alignment in complex > **NOTE** > -> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. +> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version. + + ## Rules diff --git a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md index 32c8053f54110080f242cc6f71e5dbdfbbe7f41f..cc1ee6af79ad5b6b9682718c57f4e5945e9028dd 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md +++ b/en/application-dev/reference/arkui-ts/ts-container-rowsplit.md @@ -4,14 +4,12 @@ The **\** lays out child components horizontally and inserts a vertica > **NOTE** > -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Child Components Supported - ## APIs RowSplit() @@ -21,7 +19,7 @@ RowSplit() | Name| Type| Description| | -------- | -------- | -------- | -| resizeable | boolean | Whether the divider can be dragged. The default value is **false**.| +| resizeable | boolean | Whether the divider can be dragged.
Default value: **false** | > **NOTE** > diff --git a/en/application-dev/reference/arkui-ts/ts-methods-menu.md b/en/application-dev/reference/arkui-ts/ts-methods-menu.md index 4400e9cbf87afc5854228a1b25a6d74fcf44fd8f..994984976e14b029d1ed82aae9375fd8387828e2 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-menu.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-menu.md @@ -4,13 +4,14 @@ The menu bound to a component through [bindContextMenu](./ts-universal-attribute > **NOTE** > -> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. ## ContextMenu.close + |Name|Description| |----|---| -| close(): void | Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#attributes) on a page. | +| close(): void | Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#attributes) on a page.| ## Example @@ -22,25 +23,36 @@ The menu bound to a component through [bindContextMenu](./ts-universal-attribute struct Index { @Builder MenuBuilder() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Text('close') - .fontSize(30) - .fontWeight(FontWeight.Bold) - .onClick(() => { - ContextMenu.close(); - }) - }.height(400) - .backgroundColor(Color.Pink) - + Button('Test ContextMenu1') + Divider().strokeWidth(2).margin(5) + Button('Test ContextMenu2') + Divider().strokeWidth(2).margin(5) + Button('Test ContextMenu3') + } + .width(200) + .height(160) } build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Column() { - Text("Text") - }.bindContextMenu(this.MenuBuilder, ResponseType.LongPress) + Text("Test ContextMenu") + .fontSize(20) + .width('100%') + .height(500) + .backgroundColor(0xAFEEEE) + .textAlign(TextAlign.Center) + } + .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) + .onDragStart(()=>{ + // Close the menu when the component is dragged. + ContextMenu.close() + }) } .width('100%') .height('100%') } } ``` + +![contextmenu_close.gif](figures/contextmenu_close.gif)