| 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.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
The **\<Navigation>** component typically functions as the root container of a page and displays the page title, toolbar, and menu based on the attribute settings.
The **\<Navigation>** 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**
> **NOTE**
>
>
...
@@ -11,12 +11,13 @@ The **\<Navigation>** component typically functions as the root container of a p
...
@@ -11,12 +11,13 @@ The **\<Navigation>** component typically functions as the root container of a p
Supported
Supported
Since API version 9, it is recommended that this component be used together with the **[\<NavRouter>](ts-basic-components-navrouter.md)** component.
## APIs
## APIs
Navigation()
Navigation()
Creates a component that can automatically display the navigation bar, title, and toolbar based on the attribute settings.
## Attributes
## Attributes
...
@@ -24,14 +25,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
...
@@ -24,14 +25,20 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| title | string \|[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Page title. |
| title | string \|[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup>\|[NavigationCommonTitle](#navigationcommontitle)<sup>9+</sup>\|[NavigationCustomTitle](#navigationcustomtitle)<sup>9+</sup> | Page title. |
| subTitle | string | Subtitle of the page. |
| subTitle<sup>deprecated</sup> | string | Subtitle of the page. This attribute is deprecated since API version 9. You are advised to use **title** instead. |
| menus | Array<NavigationMenuItem>\|[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Menu in the upper right corner of the page. |
| menus | Array<[NavigationMenuItem](#navigationmenuitem)>\|[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 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 | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**|
| titleMode | [NavigationTitleMode](#navigationtitlemode) | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**|
| toolBar | object \|[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar.<br>**items**: all items on the toolbar. |
| toolBar | [object](#object)\|[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | Content of the toolbar.<br>**items**: items on the toolbar. |
| hideToolBar | boolean | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Show the toolbar.|
| hideToolBar | boolean | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Display the toolbar.|
| hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false** |
| hideTitleBar | boolean | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Display the title bar.|
| hideBackButton | boolean | Whether to hide the back button.<br>Default value: **false** |
| hideBackButton | boolean | Whether to hide the Back key.<br>Default value: **false**<br>**true**: Hide the Back key.<br>**false**: Display the Back key.|
| navBarWidth<sup>9+</sup> | [Length](ts-types.md#length) | Width of the navigation bar.<br>Default value: **200vp**|
| navBarPosition<sup>9+</sup> | [NavBarPosition](#navbarposition) | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**|
| mode<sup>9+</sup> | [NavigationMode](#navigationmode) | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**|
| backButtonIcon<sup>9+</sup> | string \|[PixelMap](../apis/js-apis-image.md#pixelmap7)\|[Resource](ts-types.md#resource) | Back icon on the navigation bar.|
| hideNavBar<sup>9+</sup> | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.|
## NavigationMenuItem
## NavigationMenuItem
...
@@ -54,164 +61,173 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
...
@@ -54,164 +61,173 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| 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.|
| 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. |
| Mini | The title is fixed at mini mode. |
| Full | The main title and subtitle are in full mode. |
| Full | The title is fixed at full mode. |
> **NOTE**
## NavigationCommonTitle
>
> Currently, the scrollable component can only be **\<List>**.
| onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) | Triggered when **titleMode** is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls.|
| 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.|
| 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. |
| 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.<br>**NOTE**<br>After the user clicks **NavRouter**, if the **\<NavRouter>** component is activated and the corresponding **\<NavDestination>** child component loaded, **onStateChange(true)** is called. If the corresponding **\<NavDestination>** child component is no longer displayed, **onStateChange(false)** is called. |
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. |
| 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.|
| 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.|
@@ -4,11 +4,11 @@ The **\<ListItemGroup>** component is used to display list item groups. It must
...
@@ -4,11 +4,11 @@ The **\<ListItemGroup>** component is used to display list item groups. It must
> **NOTE**
> **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
## Usage Guidelines
If the **listDirection** attribute of the parent **\<List>** component is set to **Axis.Vertical**, the **height** attribute of the **\<ListItemGroup>** component cannot be set. The height of a **\<ListItemGroup>** component is the sum of its header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\<List>** component is set to **Axis.Horizontal**, the **width** attribute of the **\<ListItemGroup>** component cannot be set. The width of a **\<ListItemGroup>** component is the sum of its header width, footer width, and total width of the list items.
If the **listDirection** attribute of the parent **\<List>** component is set to **Axis.Vertical**, the **height** attribute of the **\<ListItemGroup>** component cannot be set. The height of a **\<ListItemGroup>** component is the sum of its header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\<List>** component is set to **Axis.Horizontal**, the **width** attribute of the **\<ListItemGroup>** component cannot be set. The width of a **\<ListItemGroup>** component is the sum of its header width, footer width, and total width of the list items.
Currently, the list items in the **\<ListItemGroup>** 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 **\<ListItemGroup>** component cannot be edited, selected, or dragged. That is, the **editable** and **selectable** attributes of these list items do not take effect.