1# Navigation 2 3The **Navigation** component is the root view container for navigation. It typically functions as the root container of a page and includes a title bar, content area, and toolbar. The content area switches between the home page content (child components of **Navigation**) and non-home page content (child components of [NavDestination](ts-basic-components-navdestination.md)) through routing. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> Since API version 11, this component supports the safe area attribute by default, with the default attribute value being **expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD, SafeAreaType.CUTOUT], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])**. You can override this attribute to change the default behavior. In earlier versions, you need to use the [expandSafeArea](ts-universal-attributes-expand-safe-area.md) attribute to implement the safe area feature. 10 11 12## Child Components 13 14Supported 15 16Since API version 9, it is recommended that this component be used together with the [NavRouter](ts-basic-components-navrouter.md) component. 17 18Since API version 10, it is recommended that this component be used together with the [NavPathStack](#navpathstack10) component and **navDestination** attribute for page routing. 19 20## APIs 21 22### Navigation 23 24Navigation() 25 26**Atomic service API**: This API can be used in atomic services since API version 11. 27 28**System capability**: SystemCapability.ArkUI.ArkUI.Full 29 30### Navigation<sup>10+</sup> 31 32Navigation(pathInfos: NavPathStack) 33 34Binds a navigation stack to the **Navigation** component. 35 36**Atomic service API**: This API can be used in atomic services since API version 11. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40**Parameters** 41 42| Name | Type | Mandatory | Description | 43| --------- | ------------------------------- | ---- | ------ | 44| pathInfos | [NavPathStack](#navpathstack10) | No | Information about the navigation stack.| 45 46## Attributes 47 48In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 49 50### title 51 52title(value: ResourceStr | CustomBuilder | NavigationCommonTitle | NavigationCustomTitle, options?: NavigationTitleOptions) 53 54Sets the page title. 55 56**Atomic service API**: This API can be used in atomic services since API version 11. 57 58**System capability**: SystemCapability.ArkUI.ArkUI.Full 59 60**Parameters** 61 62| Name | Type | Mandatory| Description | 63| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 64| value | [ResourceStr](ts-types.md#resourcestr)<sup>10+</sup> \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavigationCommonTitle](#navigationcommontitle9)<sup>9+</sup> \| [NavigationCustomTitle](#navigationcustomtitle9)<sup>9+</sup> | Yes | Page title. When the NavigationCustomTitle type is used to set the height, [titleMode](#titlemode) does not take effect. When the title string is too long: (1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...); (2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).| 65| options | [NavigationTitleOptions](#navigationtitleoptions11)<sup>11+</sup> | No | Title bar options. | 66 67### subTitle<sup>(deprecated)</sup> 68 69subTitle(value: string) 70 71Sets the page subtitle. 72 73This API is deprecated since API version 9. You are advised to use [title](#title) instead. 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Full 76 77**Parameters** 78 79| Name| Type | Mandatory| Description | 80| ------ | ------ | ---- | ------------ | 81| value | string | Yes | Page subtitle.| 82 83### menus 84 85menus(value: Array<NavigationMenuItem> | CustomBuilder) 86 87> **NOTE** 88> 89> The following are not allowed: modify the icon size through the **fontSize** attribute of the **SymbolGlyphModifier** object, change the animation effects through the **effectStrategy** attribute, or change the type of animation effects through the **symbolEffect** attribute. 90 91 92Sets the menu items in the upper right corner of the page. If this attribute is not set, no menu item is displayed. 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, with excess icons (if any) placed under the automatically generated **More** icon. 93 94**Atomic service API**: This API can be used in atomic services since API version 11. 95 96**System capability**: SystemCapability.ArkUI.ArkUI.Full 97 98**Parameters** 99 100| Name| Type | Mandatory| Description | 101| ------ | ------------------------------------------------------------ | ---- | ---------------- | 102| value | Array<[NavigationMenuItem](#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8) | Yes | Menu items in the upper right corner of the page.| 103 104### titleMode 105 106titleMode(value: NavigationTitleMode) 107 108Sets the display mode of the page title bar. 109 110**Atomic service API**: This API can be used in atomic services since API version 11. 111 112**System capability**: SystemCapability.ArkUI.ArkUI.Full 113 114**Parameters** 115 116| Name| Type | Mandatory| Description | 117| ------ | --------------------------------------------------- | ---- | --------------------------------------------------------- | 118| value | [NavigationTitleMode](#navigationtitlemode) | Yes | Display mode of the page title bar.<br>Default value: **NavigationTitleMode.Free**| 119 120### toolBar<sup>(deprecated)</sup> 121 122toolBar(value: object | CustomBuilder) 123 124Sets the content of the toolbar. If this attribute is not set, no toolbar is displayed. Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area. If the text is too long, it is scaled down level by level, wrapped in two lines, and then clipped with an ellipsis (...). 125 126This API is deprecated since API version 10. You are advised to use [toolbarConfiguration](#toolbarconfiguration10) instead. 127 128**System capability**: SystemCapability.ArkUI.ArkUI.Full 129 130**Parameters** 131 132| Name| Type | Mandatory| Description | 133| ------ | ------------------------------------------------------------ | ---- | ------------ | 134| value | object \| [CustomBuilder](ts-types.md#custombuilder8) | Yes | Content of the toolbar.| 135 136**object** 137 138| Name | Type | Mandatory | Description | 139| ------ | ------------- | ---- | --------------- | 140| value | string | Yes | Text of the toolbar item. | 141| icon | string | No | Icon path of the toolbar item.| 142| action | () => void | No | Callback invoked when the menu item is selected. | 143 144### toolbarConfiguration<sup>10+</sup> 145 146toolbarConfiguration(value: Array<ToolbarItem> | CustomBuilder, options?: NavigationToolbarOptions) 147 148> **NOTE** 149> 150> The following are not allowed: modify the icon size through the **fontSize** attribute of the **SymbolGlyphModifier** object, change the animation effects through the **effectStrategy** attribute, or change the type of animation effects through the **symbolEffect** attribute. 151 152 153Sets the content of the toolbar. If this attribute is not set, no toolbar is displayed. 154 155**Widget capability**: Since API version 10, this API is supported in ArkTS widgets. 156 157**Atomic service API**: This API can be used in atomic services since API version 11. 158 159**System capability**: SystemCapability.ArkUI.ArkUI.Full 160 161**Parameters** 162 163| Name | Type | Mandatory| Description | 164| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 165| value | Array<[ToolbarItem](#toolbaritem10)> \| [CustomBuilder](ts-types.md#custombuilder8) | Yes | Content of the toolbar. When the value type is Array<[ToolbarItem](#toolbaritem10), the toolbar exhibits the following features:<br>Items are evenly distributed on the toolbar at the bottom. Text and icons are evenly distributed in each content area.<br>If any item contains overlong text and there are fewer than five items, the following measures are taken: 1. Increase the item's width to accommodate the text until it is as large as the screen width; 2. Scale down the text level by level; 3. Wrap the text in two lines; 4. Clip the text with an ellipsis (...).<br>The toolbar shows a maximum of five icons in portrait mode, with excess icons (if any) placed under the automatically generated **More** icon. In landscape mode, this attribute must be used together with Array<[NavigationMenuItem](#navigationmenuitem)> of the **menus** attribute; the toolbar at the bottom is automatically hidden, and all items on the toolbar are moved to the menu in the upper right corner of the screen.<br>When the value type is [CustomBuilder](ts-types.md#custombuilder8), and the toolbar does not exhibit the preceding features except that items are evenly distributed on the toolbar at the bottom.| 166| options | [NavigationToolbarOptions](#navigationtoolbaroptions11)<sup>11+</sup> | No | Toolbar options. | 167 168### hideToolBar 169 170hideToolBar(value: boolean) 171 172Specifies whether to hide the toolbar. 173 174**Atomic service API**: This API can be used in atomic services since API version 11. 175 176**System capability**: SystemCapability.ArkUI.ArkUI.Full 177 178**Parameters** 179 180| Name| Type | Mandatory| Description | 181| ------ | ------- | ---- | ------------------------------------------------------------ | 182| value | boolean | Yes | Whether to hide the toolbar.<br>Default value: **false**<br>**true**: Hide the toolbar.<br>**false**: Show the toolbar.| 183 184### hideTitleBar 185 186hideTitleBar(value: boolean) 187 188Specifies whether to hide the title bar. 189 190**Atomic service API**: This API can be used in atomic services since API version 11. 191 192**System capability**: SystemCapability.ArkUI.ArkUI.Full 193 194**Parameters** 195 196| Name| Type | Mandatory| Description | 197| ------ | ------- | ---- | ------------------------------------------------------------ | 198| value | boolean | Yes | Whether to hide the title bar.<br>Default value: **false**<br>**true**: Hide the title bar.<br>**false**: Show the title bar.| 199 200### hideBackButton 201 202hideBackButton(value: boolean) 203 204Specifies whether to hide the back button in the title bar. The back button is available only when [titleMode](#titlemode) is set to **NavigationTitleMode.Mini**. 205 206**Atomic service API**: This API can be used in atomic services since API version 11. 207 208**System capability**: SystemCapability.ArkUI.ArkUI.Full 209 210**Parameters** 211 212| Name| Type | Mandatory| Description | 213| ------ | ------- | ---- | ------------------------------------------------------------ | 214| value | boolean | Yes | Whether to hide the back button in the title bar.<br>Default value: **false**<br>**true**: Hide the back button.<br>**false**: Show the back button.| 215 216### navBarWidth<sup>9+</sup> 217 218navBarWidth(value: Length) 219 220Sets the width of the navigation bar. This attribute takes effect only when the **Navigation** component is split. 221 222**Atomic service API**: This API can be used in atomic services since API version 11. 223 224**System capability**: SystemCapability.ArkUI.ArkUI.Full 225 226**Parameters** 227 228| Name| Type | Mandatory| Description | 229| ------ | ---------------------------- | ---- | ----------------------------------------- | 230| value | [Length](ts-types.md#length) | Yes | Width of the navigation bar.<br>Default value: **240**<br>Unit: vp<br>**undefined**: No action is taken, and the navigation bar width remains consistent with the default value.| 231 232### navBarPosition<sup>9+</sup> 233 234navBarPosition(value: NavBarPosition) 235 236Sets the position of the navigation bar. This attribute takes effect only when the **Navigation** component is split. 237 238**Atomic service API**: This API can be used in atomic services since API version 11. 239 240**System capability**: SystemCapability.ArkUI.ArkUI.Full 241 242**Parameters** 243 244| Name| Type | Mandatory| Description | 245| ------ | ------------------------------------------ | ---- | --------------------------------------------- | 246| value | [NavBarPosition](#navbarposition9) | Yes | Position of the navigation bar.<br>Default value: **NavBarPosition.Start**| 247 248### mode<sup>9+</sup> 249 250mode(value: NavigationMode) 251 252Sets the display mode of the navigation bar. Available options are **Stack**, **Split**, and **Auto**. 253 254**Atomic service API**: This API can be used in atomic services since API version 11. 255 256**System capability**: SystemCapability.ArkUI.ArkUI.Full 257 258**Parameters** 259 260| Name| Type | Mandatory| Description | 261| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 262| value | [NavigationMode](#navigationmode9) | Yes | Display mode of the navigation bar.<br>Default value: **NavigationMode.Auto**<br>At the default settings, the component adapts to a single column or two columns based on the component width.| 263 264### backButtonIcon<sup>9+</sup> 265 266backButtonIcon(value: string | PixelMap | Resource | SymbolGlyphModifier) 267 268> **NOTE** 269> 270> The following are not allowed: modify the icon size through the **fontSize** attribute of the **SymbolGlyphModifier** object, change the animation effects through the **effectStrategy** attribute, or change the type of animation effects through the **symbolEffect** attribute. 271 272 273Sets the icon of the back button in the title bar. 274 275**Atomic service API**: This API can be used in atomic services since API version 11. 276 277**System capability**: SystemCapability.ArkUI.ArkUI.Full 278 279**Parameters** 280 281| Name| Type | Mandatory| Description | 282| ------ | ------------------------------------------------------------ | ---- | -------------------- | 283| value | string \| [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) \| [SymbolGlyphModifier<sup>12+</sup>](ts-universal-attributes-attribute-modifier.md) | Yes | Icon of the back button in the title bar.| 284 285### hideNavBar<sup>9+</sup> 286 287hideNavBar(value: boolean) 288 289Specifies whether to hide the navigation bar. If this parameter is set to **true**, the navigation bar, including the title bar, content area, and toolbar, is hidden. In this case, if the navigation destination page is in the navigation stack, it is moved to the top of the stack and displayed. Otherwise, a blank page is displayed. 290 291From API version 9 to API version 10, this attribute takes effect only in dual-column mode. Since API version 11, this attribute takes effect in single-column, dual-column, and auto modes. 292 293**Atomic service API**: This API can be used in atomic services since API version 11. 294 295**System capability**: SystemCapability.ArkUI.ArkUI.Full 296 297**Parameters** 298 299| Name| Type | Mandatory| Description | 300| ------ | ------- | ---- | ---------------------------------- | 301| value | boolean | Yes | Whether to hide the navigation bar.<br>Default value: **false**| 302 303### navDestination<sup>10+</sup> 304 305navDestination(builder: (name: string, param: unknown) => void) 306 307Builder for a **NavDestination** component. The **builder** function is used, with the **name** and **param** parameters passed in. The **builder** can have only one root node. In the builder, a layer of custom components can be included outside the **NavDestination** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed. 308 309**Atomic service API**: This API can be used in atomic services since API version 11. 310 311**System capability**: SystemCapability.ArkUI.ArkUI.Full 312 313**Parameters** 314 315| Name | Type | Mandatory| Description | 316| ------- | -------------------------------------- | ---- | ------------------------ | 317| builder | (name: string, param: unknown) => void | Yes | Builder for a **NavDestination** component.| 318 319### navBarWidthRange<sup>10+</sup> 320 321navBarWidthRange(value: [Dimension, Dimension]) 322 323Sets the minimum and maximum widths of the navigation bar (effective in dual-column mode). 324 325For details about the priority rules, see **NOTE** below. 326 327**Atomic service API**: This API can be used in atomic services since API version 11. 328 329**System capability**: SystemCapability.ArkUI.ArkUI.Full 330 331**Parameters** 332 333| Name | Type | Mandatory| Description | 334| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 335| value | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | Yes | Minimum and maximum widths of the navigation bar.<br>Default value: 240 for the minimum value; 40% of the component width (not greater than 432) for the maximum value; if either of the widths is not set, the default value is used for that width.<br>Unit: vp| 336 337### minContentWidth<sup>10+</sup> 338 339minContentWidth(value: Dimension) 340 341Sets the minimum width of the navigation bar content area (effective in dual-column mode). 342 343For details about the priority rules, see **NOTE** below. 344 345**Atomic service API**: This API can be used in atomic services since API version 11. 346 347**System capability**: SystemCapability.ArkUI.ArkUI.Full 348 349**Parameters** 350 351| Name | Type | Mandatory| Description | 352| ------- | ------------------------------------ | ---- | ------------------------------------------------------------ | 353| value | [Dimension](ts-types.md#dimension10) | Yes | Minimum width of the navigation bar content area.<br>Default value: **360**<br>Unit: vp<br>**undefined**: No action is taken, and the minimum width of the navigation bar remains consistent with the default value.<br>Breakpoint calculation in Auto mode: default 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp)| 354 355> **NOTE** 356> 357> 1. If only **navBarWidth** is set, no divider in the **Navigation** component can be dragged. 358> 359> 2. **navBarWidthRange** specifies the range within which the divider can be dragged. If it is not set, the default value is used. The dragging of the divider is subject to both **navBarWidthRange** and **minContentWidth**. 360> 361> 3. If the size of the **Navigation** component decreases, it carries out the following steps in sequence:<br>a. Scale down the content area. If **minContentWidth** is not set, the content area can be scaled down to 0. Otherwise, the content area can be scaled down to as small as the value specified by **minContentWidth**.b. Scale down the navigation bar until its width reaches the value defined by **navBarRange**.c. Clip the displayed content. 362 363### ignoreLayoutSafeArea<sup>12+</sup> 364 365ignoreLayoutSafeArea(types?: Array<LayoutSafeAreaType>, edges?: Array<LayoutSafeAreaEdge>) 366 367Ignores the layout safe area by allowing the component to extend into the non-safe areas of the screen. 368 369**Atomic service API**: This API can be used in atomic services since API version 12. 370 371**System capability**: SystemCapability.ArkUI.ArkUI.Full 372 373**Parameters** 374 375| Name| Type | Mandatory| Description | 376| ------ | -------------------------------------------------- | ---- | ------------------------------------------------------------ | 377| types | Array <[LayoutSafeAreaType](ts-types.md#layoutsafeareatype12)> | No | Types of non-safe areas to extend into.<br>Default value:<br>[LayoutSafeAreaType.SYSTEM] | 378| edges | Array <[LayoutSafeAreaEdge](ts-types.md#layoutsafeareaedge12)> | No | Edges for expanding the safe area.<br> Default value:<br>[LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]| 379 380> **NOTE** 381> 382> After **LayoutSafeArea** is set: 383> When **LayoutSafeAreaType.SYSTEM** is set, the component can extend into the non-safe area if its boundaries overlap with it. For example, if the device's status bar is 100 high, the component must have an absolute vertical offset between 0 and 100 to extend into the non-safe area. 384> 385> If the component extends into the non-safe area, events triggered within that area (such as click events) might be intercepted by the system. This allows the system to prioritize responses to system components such as the status bar. 386 387### systemBarStyle<sup>12+</sup> 388 389systemBarStyle(style: Optional<SystemBarStyle>) 390 391Sets the style of the system status bar when the home page of the **Navigation** component is displayed. 392 393**Atomic service API**: This API can be used in atomic services since API version 12. 394 395**System capability**: SystemCapability.ArkUI.ArkUI.Full 396 397**Parameters** 398 399| Name| Type | Mandatory| Description | 400| ------ | -------------- | ---- | ------------------ | 401| style | Optional<[SystemBarStyle](../js-apis-window.md#systembarstyle12)> | Yes | Style of the system status bar.| 402 403> **Instructions** 404> 405> 1. Avoid using the **systemBarStyle** attribute in conjunction with the status bar style APIs in the **Window** module, such as [setWindowSystemBarProperties](../js-apis-window.md#setwindowsystembarproperties9). 406> 2. When you first set the **systemBarStyle** attribute for a **Navigation** or **NavDestination** component, the current status bar style is saved for potential future restoration. 407> 3. The status bar style is determined by the home page of the **Navigation** component (if there are no **NavDestination** pages on the navigation stack) or the top **NavDestination** page on the navigation stack. 408> 4. If the home page or any top **NavDestination** page has a valid **systemBarStyle** set, that style will be used. If no style is set, and there is a previously saved style available, the saved style will be used. If no style has been set or saved, no changes will be made. 409> 5. In [Split](#navigationmode9) mode, if there is no **NavDestination** in the content area, the settings of the **Navigation** home page will apply. Otherwise, the settings of the top **NavDestination** page on the navigation stack will apply. 410> 6. The **systemBarStyle** attribute is effective only for the main page of the main window. 411> 7. The set style will only take effect if the **Navigation** component spans the entire page. If it does not, and there is a previously saved style available, the saved style will be used instead. 412> 8. When different styles are set for pages, the new style takes effect at the start of the page transition. 413> 9. The status bar style set by **Navigation** or **NavDestination** does not apply in non-fullscreen windows. 414 415## Events 416 417### onTitleModeChange 418 419onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void) 420 421Called when [titleMode](#titlemode) is set to **NavigationTitleMode.Free** and the title bar mode changes as content scrolls. 422 423**Atomic service API**: This API can be used in atomic services since API version 11. 424 425**System capability**: SystemCapability.ArkUI.ArkUI.Full 426 427**Parameters** 428 429| Name | Type | Mandatory| Description | 430| --------- | --------------------------------------------------- | ---- | ---------- | 431| titleMode | [NavigationTitleMode](#navigationtitlemode) | Yes | Title mode.| 432 433### onNavBarStateChange<sup>9+</sup> 434 435onNavBarStateChange(callback: (isVisible: boolean) => void) 436 437Called when the navigation bar visibility status changes. 438 439**Atomic service API**: This API can be used in atomic services since API version 11. 440 441**System capability**: SystemCapability.ArkUI.ArkUI.Full 442 443**Parameters** 444 445| Name | Type | Mandatory| Description | 446| --------- | ------- | ---- | ---------------------------------------------- | 447| isVisible | boolean | Yes | Whether the navigation bar is visible. The value **true** means that the navigation bar is visible, and **false** means the opposite.| 448 449### onNavigationModeChange<sup>11+</sup> 450 451onNavigationModeChange(callback: (mode: NavigationMode) => void) 452 453Called when the **Navigation** component is displayed for the first time or its display mode switches between single-column and dual-column. 454 455**Atomic service API**: This API can be used in atomic services since API version 11. 456 457**System capability**: SystemCapability.ArkUI.ArkUI.Full 458 459**Parameters** 460 461| Name | Type | Mandatory| Description | 462| --------- | ------- | ---- | ---------------------------------------------- | 463| mode | [NavigationMode](#navigationmode9) | Yes | **NavigationMode.Split**: The component is displayed in two columns.<br>**NavigationMode.Stack**: The component is displayed in a single column.| 464 465### customNavContentTransition<sup>11+</sup> 466 467customNavContentTransition(delegate(from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => NavigationAnimatedTransition | undefined) 468 469Callback of the custom transition animation. 470 471**Atomic service API**: This API can be used in atomic services since API version 12. 472 473**System capability**: SystemCapability.ArkUI.ArkUI.Full 474 475**Parameters** 476 477| Name | Type | Mandatory| Description | 478| --------- | ----------------------------------------------------- | ---- | ----------------------- | 479| from | [NavContentInfo](#navcontentinfo11) | Yes | Destination page to exit.| 480| to | [NavContentInfo](#navcontentinfo11) | Yes | Destination page to enter.| 481| operation | [NavigationOperation](#navigationoperation11) | Yes | Transition type. | 482 483**Return value** 484 485| Type | Description | 486| ------------------------------------------------------------ | ------------------------------------------------------------ | 487| [NavigationAnimatedTransition](#navigationanimatedtransition11) \| undefined | Custom transition animation agreement.<br>**undefined**: The default transition effect is executed.| 488 489## NavPathStack<sup>10+</sup> 490 491Implements a navigation stack, which allows for inheritance since API version 12. You can add new properties and methods in derived classes, or you can override the methods of the base **NavPathStack** class. Objects of the derived class can be used in place of objects of the base **NavPathStack** class. For details, see [Example](#example-10). 492 493### pushPath<sup>10+</sup> 494 495pushPath(info: NavPathInfo, animated?: boolean): void 496 497Pushes the navigation destination page specified by **info** to the navigation stack. 498 499**Atomic service API**: This API can be used in atomic services since API version 11. 500 501**System capability**: SystemCapability.ArkUI.ArkUI.Full 502 503**Parameters** 504 505| Name | Type | Mandatory | Description | 506| ---- | ----------------------------- | ---- | -------------------- | 507| info | [NavPathInfo](#navpathinfo10) | Yes | Information about the navigation destination page.| 508| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 509 510### pushPath<sup>12+</sup> 511 512pushPath(info: NavPathInfo, options?: NavigationOptions): void 513 514Pushes the navigation destination page specified by **info** onto the navigation stack. Depending on the [LaunchMode](#launchmode12) specified in the **options** parameter, different behaviors will be triggered. 515 516**Atomic service API**: This API can be used in atomic services since API version 12. 517 518**System capability**: SystemCapability.ArkUI.ArkUI.Full 519 520**Parameters** 521 522| Name | Type | Mandatory | Description | 523| ---- | ----------------------------- | ---- | -------------------- | 524| info | [NavPathInfo](#navpathinfo10) | Yes | Information about the navigation destination page.| 525| options | [NavigationOptions](#navigationoptions12) | No | Navigation options.| 526 527### pushPathByName<sup>10+</sup> 528 529pushPathByName(name: string, param: unknown, animated?: boolean): void 530 531Pushes the navigation destination page specified by **name**, with the data specified by **param**, to the navigation stack. 532 533**Atomic service API**: This API can be used in atomic services since API version 11. 534 535**System capability**: SystemCapability.ArkUI.ArkUI.Full 536 537**Parameters** 538 539| Name | Type | Mandatory | Description | 540| ----- | ------- | ---- | --------------------- | 541| name | string | Yes | Name of the navigation destination page. | 542| param | unknown | Yes | Detailed parameters of the navigation destination page.| 543| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 544 545### pushPathByName<sup>11+</sup> 546 547pushPathByName(name: string, param: Object, onPop: Callback\<PopInfo>, animated?: boolean): void 548 549Pushes the navigation destination page specified by **name**, with the data specified by **param**, to the navigation stack. This API uses the **onPop** callback to receive the result returned when the page is popped out of the stack. 550 551**Atomic service API**: This API can be used in atomic services since API version 12. 552 553**System capability**: SystemCapability.ArkUI.ArkUI.Full 554 555**Parameters** 556 557| Name| Type| Mandatory| Description| 558|------|------|------|------| 559| name | string | Yes | Name of the navigation destination page. | 560| param | Object | Yes | Detailed parameters of the navigation destination page.| 561| onPop | Callback\<[PopInfo](#popinfo11)> | Yes| Callback used to receive the result. It is invoked only after the **result** parameter is set in **pop**.| 562| animated | boolean | No | Whether to support transition animation.<br>Default value: **true**| 563 564### pushDestination<sup>11+</sup> 565 566pushDestination(info: NavPathInfo, animated?: boolean): Promise<void> 567 568Pushes the navigation destination page specified by **info** to the navigation stack. This API uses a promise to return the result. 569 570**Atomic service API**: This API can be used in atomic services since API version 12. 571 572**System capability**: SystemCapability.ArkUI.ArkUI.Full 573 574**Parameters** 575 576| Name | Type | Mandatory | Description | 577| ---- | ----------------------------- | ---- | -------------------- | 578| info | [NavPathInfo](#navpathinfo10) | Yes | Information about the navigation destination page.| 579| animated | boolean | No | Whether to support transition animation.<br>Default value: **true**| 580 581**Return value** 582 583| Type | Description | 584| ------------------- | --------- | 585| Promise<void> | Promise used to return the result.| 586 587**Error codes** 588 589For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Router Error Codes](../errorcode-router.md). 590 591| ID | Error Message| 592| --------- | ------- | 593| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 594| 100001 | Internal error.| 595| 100005 | Builder function not registered. | 596| 100006 | NavDestination not found.| 597 598### pushDestination<sup>12+</sup> 599 600pushDestination(info: NavPathInfo, options?: NavigationOptions): Promise<void> 601 602Pushes the navigation destination page specified by **info** onto the navigation stack. This API uses a promise to return the result. Depending on the [LaunchMode](#launchmode12) specified in the **options** parameter, different behaviors will be triggered. 603 604**Atomic service API**: This API can be used in atomic services since API version 12. 605 606**System capability**: SystemCapability.ArkUI.ArkUI.Full 607 608**Parameters** 609 610| Name | Type | Mandatory | Description | 611| ---- | ----------------------------- | ---- | -------------------- | 612| info | [NavPathInfo](#navpathinfo10) | Yes | Information about the navigation destination page.| 613| options | [NavigationOptions](#navigationoptions12) | No | Navigation options.| 614 615**Return value** 616 617| Type | Description | 618| ------------------- | --------- | 619| Promise<void> | Promise used to return the result.| 620 621**Error codes** 622 623For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Router Error Codes](../errorcode-router.md). 624 625| ID | Error Message| 626| --------- | ------- | 627| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 628| 100001 | Internal error.| 629| 100005 | Builder function not registered. | 630| 100006 | NavDestination not found.| 631 632### pushDestinationByName<sup>11+</sup> 633 634pushDestinationByName(name: string, param: Object, animated?: boolean): Promise<void> 635 636Pushes the navigation destination page specified by **name**, with the data specified by **param**, to the navigation stack. This API uses a promise to return the result. 637 638**Atomic service API**: This API can be used in atomic services since API version 12. 639 640**System capability**: SystemCapability.ArkUI.ArkUI.Full 641 642**Parameters** 643 644| Name | Type | Mandatory | Description | 645| ----- | ------- | ---- | --------------------- | 646| name | string | Yes | Name of the navigation destination page. | 647| param | Object | Yes | Detailed parameters of the navigation destination page.| 648| animated | boolean | No | Whether to support transition animation.<br>Default value: **true**| 649 650**Return value** 651 652| Type | Description | 653| ------------------- | --------- | 654| Promise<void> | Promise used to return the result.| 655 656**Error codes** 657 658For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Router Error Codes](../errorcode-router.md). 659 660| ID | Error Message| 661| --------- | ------- | 662| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 663| 100001 | Internal error.| 664| 100005 | Builder function not registered. | 665| 100006 | NavDestination not found.| 666 667### pushDestinationByName<sup>11+</sup> 668 669pushDestinationByName(name: string, param: Object, onPop: Callback\<PopInfo>, animated?: boolean): Promise<void> 670 671Pushes the navigation destination page specified by **name**, with the data specified by **param**, to the navigation stack. This API uses the **onPop** callback to handle the result returned when the page is popped out of the stack. It uses a promise to return the result. 672 673**Atomic service API**: This API can be used in atomic services since API version 12. 674 675**System capability**: SystemCapability.ArkUI.ArkUI.Full 676 677**Parameters** 678 679| Name | Type | Mandatory | Description | 680| ----- | ------- | ---- | --------------------- | 681| name | string | Yes | Name of the navigation destination page. | 682| param | Object | Yes | Detailed parameters of the navigation destination page.| 683| onPop | Callback\<[PopInfo](#popinfo11)> | Yes | Callback used to handle the result returned when the page is popped out of the stack. It is invoked only after the **result** parameter is set in **pop**.| 684| animated | boolean | No | Whether to support transition animation.<br>Default value: **true**| 685 686**Return value** 687 688| Type | Description | 689| ------------------- | --------- | 690| Promise<void> | Promise used to return the result.| 691 692**Error codes** 693 694For details about the error codes, see [Universal Error Codes](../../errorcode-universal.md) and [Router Error Codes](../errorcode-router.md). 695 696| ID | Error Message| 697| --------- | ------- | 698| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 699| 100001 | Internal error.| 700| 100005 | Builder function not registered. | 701| 100006 | NavDestination not found.| 702 703### replacePath<sup>11+</sup> 704 705replacePath(info: NavPathInfo, animated?: boolean): void 706 707Replaces the top of the navigation stack with the page specified by **info**. 708 709**Atomic service API**: This API can be used in atomic services since API version 12. 710 711**System capability**: SystemCapability.ArkUI.ArkUI.Full 712 713**Parameters** 714 715| Name | Type | Mandatory | Description | 716| ---- | ----------------------------- | ---- | -------------------- | 717| info | [NavPathInfo](#navpathinfo10) | Yes | Parameters of the page to replace the top of the navigation stack.| 718| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 719 720### replacePath<sup>12+</sup> 721 722replacePath(info: NavPathInfo, options?: NavigationOptions): void 723 724Replaces the top page on the navigation stack. Depending on the [LaunchMode](#launchmode12) specified in the **options** parameter, different behaviors will be triggered. 725 726**Atomic service API**: This API can be used in atomic services since API version 12. 727 728**System capability**: SystemCapability.ArkUI.ArkUI.Full 729 730**Parameters** 731 732| Name | Type | Mandatory | Description | 733| ---- | ----------------------------- | ---- | -------------------- | 734| info | [NavPathInfo](#navpathinfo10) | Yes | Parameters for the new top page of the navigation stack.| 735| options | [NavigationOptions](#navigationoptions12) | No | Navigation options.| 736 737### replacePathByName<sup>11+</sup> 738 739replacePathByName(name: string, param: Object, animated?: boolean): void 740 741Replaces the top of the navigation stack with the page specified by **name**. 742 743**Atomic service API**: This API can be used in atomic services since API version 12. 744 745**System capability**: SystemCapability.ArkUI.ArkUI.Full 746 747**Parameters** 748 749| Name | Type | Mandatory | Description | 750| ----- | ------- | ---- | --------------------- | 751| name | string | Yes | Name of the navigation destination page. | 752| param | Object | Yes | Detailed parameters of the navigation destination page.| 753| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 754 755### removeByIndexes<sup>11+</sup> 756 757removeByIndexes(indexes: Array<number\>): number 758 759Removes the navigation destination pages specified by **indexes** from the navigation stack. 760 761**Atomic service API**: This API can be used in atomic services since API version 12. 762 763**System capability**: SystemCapability.ArkUI.ArkUI.Full 764 765**Parameters** 766 767| Name | Type | Mandatory | Description | 768| ----- | ------- | ---- | --------------------- | 769| indexes | Array<number\> | Yes | Array of indexes of the navigation destination pages to remove. | 770 771**Return value** 772 773| Type | Description | 774| ----------- | ------------------------ | 775| number | Number of the navigation destination pages removed.| 776 777### removeByName<sup>11+</sup> 778 779removeByName(name: string): number 780 781Removes the navigation destination page specified by **name** from the navigation stack. 782 783**Atomic service API**: This API can be used in atomic services since API version 12. 784 785**System capability**: SystemCapability.ArkUI.ArkUI.Full 786 787**Parameters** 788 789| Name | Type | Mandatory | Description | 790| ----- | ------- | ---- | --------------------- | 791| name | string | Yes | Name of the navigation destination page to remove. | 792 793**Return value** 794 795| Type | Description | 796| ----------- | ------------------------ | 797| number | Number of the navigation destination pages removed.| 798 799### removeByNavDestinationId<sup>12+</sup> 800 801removeByNavDestinationId(navDestinationId: string): boolean 802 803Removes the navigation destination page specified by **navDestinationId** from the navigation stack. **navDestinationId** can be obtained from the [onReady](ts-basic-components-navdestination.md#onready11) callback of **NavDestination** or from [NavDestinationInfo](../js-apis-arkui-observer.md#navdestinationinfo). 804 805**Atomic service API**: This API can be used in atomic services since API version 12. 806 807**System capability**: SystemCapability.ArkUI.ArkUI.Full 808 809**Parameters** 810 811| Name | Type | Mandatory | Description | 812| ----- | ------- | ---- | --------------------- | 813| navDestinationId | string | Yes | Unique ID of the navigation destination page to remove. | 814 815**Return value** 816 817| Type | Description | 818| ----------- | ------------------------ | 819| boolean | Whether the page is removed successfully. The value **true** indicates that the page is removed successfully.| 820 821### pop<sup>10+</sup> 822 823pop(animated?: boolean): NavPathInfo | undefined 824 825Pops the top element out of the navigation stack. 826 827**Atomic service API**: This API can be used in atomic services since API version 11. 828 829**System capability**: SystemCapability.ArkUI.ArkUI.Full 830 831**Parameters** 832 833| Name | Type | Mandatory | Description | 834| ---- | ----------------------------- | ---- | -------------------- | 835| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 836 837**Return value** 838 839| Type | Description | 840| ----------- | ------------------------ | 841| [NavPathInfo](#navpathinfo10) | Returns the information about the navigation destination page at the top of the stack.| 842| undefined | Returns **undefined** if the navigation stack is empty. | 843 844### pop<sup>11+</sup> 845 846pop(result: Object, animated?: boolean): NavPathInfo | undefined 847 848Pops the top element out of the navigation stack and invokes the **onPop** callback to pass the page processing result. 849 850**Atomic service API**: This API can be used in atomic services since API version 12. 851 852**System capability**: SystemCapability.ArkUI.ArkUI.Full 853 854**Parameters** 855 856| Name | Type | Mandatory | Description | 857| ---- | ----------------------------- | ---- | -------------------- | 858| result | Object | Yes| Custom processing result on the page. The boolean type is not supported.| 859| animated | boolean | No | Whether to support transition animation.<br>Default value: **true**| 860 861**Return value** 862 863| Type | Description | 864| ----------- | ------------------------ | 865| [NavPathInfo](#navpathinfo10) | Returns the information about the navigation destination page at the top of the stack.| 866| undefined | Returns **undefined** if the navigation stack is empty. | 867 868### popToName<sup>10+</sup> 869 870popToName(name: string, animated?: boolean): number 871 872Pops pages until the first navigation destination page that matches **name** from the bottom of the navigation stack is at the top of the stack. 873 874**Atomic service API**: This API can be used in atomic services since API version 11. 875 876**System capability**: SystemCapability.ArkUI.ArkUI.Full 877 878**Parameters** 879 880| Name | Type | Mandatory | Description | 881| ---- | ------ | ---- | ------------------- | 882| name | string | Yes | Name of the navigation destination page.| 883| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 884 885**Return value** 886 887| Type | Description | 888| ------ | ---------------------------------------- | 889| number | Returns the index of the first navigation destination page that matches **name** from the bottom of the navigation stack; returns **-1** if such a page does not exist.| 890 891### popToName<sup>11+</sup> 892 893popToName(name: string, result: Object, animated?: boolean): number 894 895Pops pages until the first navigation destination page that matches **name** from the bottom of the navigation stack is at the top of the stack. This API uses the **onPop** callback to pass in the page processing result. 896 897**Atomic service API**: This API can be used in atomic services since API version 12. 898 899**System capability**: SystemCapability.ArkUI.ArkUI.Full 900 901**Parameters** 902 903| Name | Type | Mandatory | Description | 904| ---- | ------ | ---- | ------------------- | 905| name | string | Yes | Name of the navigation destination page.| 906| result | Object | Yes| Custom processing result on the page. The boolean type is not supported.| 907| animated | boolean | No | Whether to support transition animation.<br>Default value: **true**| 908 909**Return value** 910 911| Type | Description | 912| ------ | ---------------------------------------- | 913| number | Returns the index of the first navigation destination page that matches **name** from the bottom of the navigation stack; returns **-1** if such a page does not exist.| 914 915### popToIndex<sup>10+</sup> 916 917popToIndex(index: number, animated?: boolean): void 918 919Returns the navigation stack to the page specified by **index**. 920 921**Atomic service API**: This API can be used in atomic services since API version 11. 922 923**System capability**: SystemCapability.ArkUI.ArkUI.Full 924 925**Parameters** 926 927| Name | Type | Mandatory | Description | 928| ----- | ------ | ---- | ---------------------- | 929| index | number | Yes | Index of the navigation destination page.| 930| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 931 932### popToIndex<sup>11+</sup> 933 934popToIndex(index: number, result: Object, animated?: boolean): void 935 936Returns the navigation stack to the page specified by **index** and invokes the **onPop** callback to pass the page processing result. 937 938**Atomic service API**: This API can be used in atomic services since API version 11. 939 940**System capability**: SystemCapability.ArkUI.ArkUI.Full 941 942**Parameters** 943 944| Name | Type | Mandatory | Description | 945| ----- | ------ | ---- | ---------------------- | 946| index | number | Yes | Index of the navigation destination page.| 947| result | Object | Yes| Custom processing result on the page. The boolean type is not supported.| 948| animated | boolean | No | Whether to support transition animation.<br>Default value: **true**| 949 950### moveToTop<sup>10+</sup> 951 952moveToTop(name: string, animated?: boolean): number 953 954Moves the first navigation destination page that matches **name** from the bottom of the navigation stack to the top of the stack 955 956**Atomic service API**: This API can be used in atomic services since API version 11. 957 958**System capability**: SystemCapability.ArkUI.ArkUI.Full 959 960**Parameters** 961 962| Name | Type | Mandatory | Description | 963| ---- | ------ | ---- | ------------------- | 964| name | string | Yes | Name of the navigation destination page.| 965| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 966 967**Return value** 968 969| Type | Description | 970| ------ | ---------------------------------------- | 971| number | Returns the index of the first navigation destination page that matches **name** from the bottom of the navigation stack; returns **-1** if such a page does not exist.| 972 973### moveIndexToTop<sup>10+</sup> 974 975moveIndexToTop(index: number, animated?: boolean): void 976 977Moves to the top of the navigation stack the navigation destination page specified by **index**. 978 979**Atomic service API**: This API can be used in atomic services since API version 11. 980 981**System capability**: SystemCapability.ArkUI.ArkUI.Full 982 983**Parameters** 984 985| Name | Type | Mandatory | Description | 986| ----- | ------ | ---- | ---------------------- | 987| index | number | Yes | Index of the navigation destination page.| 988| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 989 990### clear<sup>10+</sup> 991 992clear(animated?: boolean): void 993 994Clears the navigation stack. 995 996**Atomic service API**: This API can be used in atomic services since API version 11. 997 998**System capability**: SystemCapability.ArkUI.ArkUI.Full 999 1000**Parameters** 1001 1002| Name | Type | Mandatory | Description | 1003| ----- | ------ | ---- | ---------------------- | 1004| animated<sup>11+</sup> | boolean | No | Whether to support transition animation.<br>Default value: **true**| 1005 1006### getAllPathName<sup>10+</sup> 1007 1008getAllPathName(): Array<string\> 1009 1010Obtains the names of all navigation destination pages in the navigation stack. 1011 1012**Atomic service API**: This API can be used in atomic services since API version 11. 1013 1014**System capability**: SystemCapability.ArkUI.ArkUI.Full 1015 1016**Return value** 1017 1018| Type | Description | 1019| -------------- | -------------------------- | 1020| Array<string\> | Names of all navigation destination pages in the navigation stack.| 1021 1022### getParamByIndex<sup>10+</sup> 1023 1024getParamByIndex(index: number): unknown | undefined 1025 1026Obtains the parameter information of the navigation destination page specified by **index**. 1027 1028**Atomic service API**: This API can be used in atomic services since API version 11. 1029 1030**System capability**: SystemCapability.ArkUI.ArkUI.Full 1031 1032**Parameters** 1033 1034| Name | Type | Mandatory | Description | 1035| ----- | ------ | ---- | ---------------------- | 1036| index | number | Yes | Index of the navigation destination page.| 1037 1038**Return value** 1039 1040| Type | Description | 1041| --------- | -------------------------- | 1042| unknown | Returns the parameter information of the matching navigation destination page.| 1043| undefined | Returns **undefined** if the passed index is invalid. | 1044 1045### getParamByName<sup>10+</sup> 1046 1047getParamByName(name: string): Array<unknown\> 1048 1049Obtains the parameter information of all the navigation destination pages that match **name**. 1050 1051**Atomic service API**: This API can be used in atomic services since API version 11. 1052 1053**System capability**: SystemCapability.ArkUI.ArkUI.Full 1054 1055**Parameters** 1056 1057| Name | Type | Mandatory | Description | 1058| ---- | ------ | ---- | ------------------- | 1059| name | string | Yes | Name of the navigation destination page.| 1060 1061**Return value** 1062 1063| Type | Description | 1064| --------------- | --------------------------------- | 1065| Array<unknown\> | Parameter information of all the matching navigation destination pages.| 1066 1067### getIndexByName<sup>10+</sup> 1068 1069getIndexByName(name: string): Array<number\> 1070 1071Obtains the indexes of all the navigation destination pages that match **name**. 1072 1073**Atomic service API**: This API can be used in atomic services since API version 11. 1074 1075**System capability**: SystemCapability.ArkUI.ArkUI.Full 1076 1077**Parameters** 1078 1079| Name | Type | Mandatory | Description | 1080| ---- | ------ | ---- | ------------------- | 1081| name | string | Yes | Name of the navigation destination page.| 1082 1083**Return value** 1084 1085| Type | Description | 1086| -------------- | --------------------------------- | 1087| Array<number\> | Indexes of all the matching navigation destination pages.| 1088 1089### size<sup>10+</sup> 1090 1091size(): number 1092 1093Obtains the stack size. 1094 1095**Atomic service API**: This API can be used in atomic services since API version 11. 1096 1097**System capability**: SystemCapability.ArkUI.ArkUI.Full 1098 1099**Return value** 1100 1101| Type | Description | 1102| ------ | ------ | 1103| number | Stack size.| 1104 1105### disableAnimation<sup>11+</sup> 1106 1107disableAnimation(value: boolean): void 1108 1109Disables or enables the transition animation in the **Navigation** component. 1110 1111**Atomic service API**: This API can be used in atomic services since API version 12. 1112 1113**System capability**: SystemCapability.ArkUI.ArkUI.Full 1114 1115**Parameters** 1116 1117| Name | Type | Mandatory | Description | 1118| ----- | ------ | ---- | ---------------------- | 1119| value | boolean | No | Whether to disable the transition animation.<br>Default value: **false**| 1120 1121### getParent<sup>11+</sup> 1122 1123getParent(): NavPathStack | null 1124 1125Obtains the parent navigation path stack.<br>When a **Navigation** component is nested (directly or indirectly) insider another **Navigation** component, the internal one can obtain the navigation path stack of the external one. 1126 1127**Atomic service API**: This API can be used in atomic services since API version 11. 1128 1129**System capability**: SystemCapability.ArkUI.ArkUI.Full 1130 1131**Return value** 1132 1133| Type | Description | 1134| ------ | ------ | 1135| [NavPathStack](#navpathstack10) \| null | Navigation path stack of the external **Navigation** component inside which the current **Navigation** component is nested. If no nesting is involved, **null** is returned.| 1136 1137### setInterception<sup>12+</sup> 1138 1139setInterception(interception: NavigationInterception): void 1140 1141Sets the interception callback for navigation page redirection. 1142 1143**Atomic service API**: This API can be used in atomic services since API version 12. 1144 1145**System capability**: SystemCapability.ArkUI.ArkUI.Full 1146 1147**Parameters** 1148 1149| Name | Type | Mandatory | Description | 1150| ---- | ---- | --- | ---| 1151|interception| [NavigationInterception](#navigationinterception12)| Yes| Object to be intercepted during navigation redirection.| 1152 1153## NavPathInfo<sup>10+</sup> 1154 1155Provides the navigation page information. 1156 1157### constructor 1158 1159constructor(name: string, param: unknown, onPop?: Callback\<PopInfo>, isEntry?: boolean) 1160 1161**Atomic service API**: This API can be used in atomic services since API version 11. 1162 1163**System capability**: SystemCapability.ArkUI.ArkUI.Full 1164 1165**Parameters** 1166 1167| Name | Type | Mandatory | Description | 1168| ----- | ------- | ---- | --------------------- | 1169| name | string | Yes | Name of the navigation destination page. | 1170| param | unknown | No | Detailed parameters of the navigation destination page.| 1171| onPop<sup>11+</sup> | Callback\<[PopInfo](#popinfo11)> | No| Callback returned when **pop** is called on the navigation destination page.| 1172| isEntry<sup>12+</sup> | boolean | No| Whether the navigation destination page is the entry page.<br>Default value: **false**<br>The value of this parameter is reviewed or reset under the following conditions:<br>- When a global back event is triggered on the current navigation destination page.<br> - When the application is switched to the background.<br>**NOTE**<br>The navigation destination page serving as an entry does not respond to the in-app global back events; instead, it directly triggers the global back event between applications.| 1173 1174## PopInfo<sup>11+</sup> 1175 1176Provides the callback information returned when a page is popped out of the navigation stack. 1177 1178**Atomic service API**: This API can be used in atomic services since API version 12. 1179 1180**System capability**: SystemCapability.ArkUI.ArkUI.Full 1181 1182**Parameters** 1183 1184| Name| Type| Mandatory| Description| 1185|------|-----|-----|-----| 1186| info | [NavPathInfo](#navpathinfo10) | Yes| Information about the current page when a back action is performed. The value is automatically obtained by the system.| 1187| result | Object | Yes| Result returned when a back action is performed. You must customize the object.| 1188 1189## NavContentInfo<sup>11+</sup> 1190 1191Provides the destination information. 1192 1193**Atomic service API**: This API can be used in atomic services since API version 12. 1194 1195**System capability**: SystemCapability.ArkUI.ArkUI.Full 1196 1197**Parameters** 1198 1199| Name | Type | Mandatory | Description | 1200|-------|-------|------|-------| 1201| name | string | No| Name of the navigation destination. If the view is a root view (**NavBar**), the return value is **undefined**.| 1202| index | number | Yes| Index of the navigation destination in the navigation stack. If the view is a root view (**NavBar**), the return value is **-1**.| 1203| mode | [NavDestinationMode](ts-basic-components-navdestination.md#navdestinationmode11) | No| Mode of the navigation destination. If the view is a root view (**NavBar**), the return value is **undefined**.| 1204| param<sup>12+</sup> | Object | No| Parameters loaded on the navigation destination page.| 1205| navDestinationId<sup>12+</sup> | string | No| Unique identifier of the navigation destination page.| 1206 1207## NavigationAnimatedTransition<sup>11+</sup> 1208 1209Defines the custom transition animation protocol. You need to implement this protocol to define the redirection animation of the navigation route. 1210 1211**Atomic service API**: This API can be used in atomic services since API version 12. 1212 1213**System capability**: SystemCapability.ArkUI.ArkUI.Full 1214 1215**Parameters** 1216| Name| Type| Mandatory| Description| 1217|------|-----|-----|------| 1218| timeout | number | No| Animation timeout time.<br> Unit: ms<br> Default value: no default value for interactive animations; 1000 ms for non-interactive animations.| 1219| transition | (transitionProxy : [NavigationTransitionProxy](#navigationtransitionproxy-11)) => void | Yes| Callback for executing the custom transition animation.<br> **transitionProxy**: proxy for the custom transition animation.| 1220| onTransitionEnd | (success: boolean):void | No| Callback invoked when the transition is complete.<br> **success**: whether the transition is successful.| 1221| isInteractive<sup>12+</sup> | boolean | No| Whether the transition animation is interactive.<br> Default value: **false**| 1222 1223## NavigationTransitionProxy <sup>11+</sup> 1224 1225Implements a custom transition animation proxy. 1226 1227**System capability**: SystemCapability.ArkUI.ArkUI.Full 1228 1229### Attributes 1230 1231**Atomic service API**: This API can be used in atomic services since API version 12. 1232 1233**System capability**: SystemCapability.ArkUI.ArkUI.Full 1234 1235| Name| Type | Mandatory| Description | 1236|------|-------|-----|-------| 1237| from | [NavContentInfo](#navcontentinfo11) | Yes| Information about the exit page.| 1238| to | [NavContentInfo](#navcontentinfo11) | Yes| Information about the enter page.| 1239| isInteractive<sup>12+</sup> | boolean | No| Whether the transition animation is interactive.| 1240 1241### finishTransition 1242 1243finishTransition(): void; 1244 1245Finishes this custom transition animation. This API must be manually called to end the animation. Otherwise, the system ends the animation when the timeout expires. 1246 1247**Atomic service API**: This API can be used in atomic services since API version 12. 1248 1249**System capability**: SystemCapability.ArkUI.ArkUI.Full 1250 1251### cancelTransition<sup>12+</sup> 1252 1253cancelTransition?(): void; 1254 1255Cancels this interactive transition animation, restoring the navigation stack to its state before page redirection. (Non-interactive transition animations cannot be canceled.) 1256 1257**Atomic service API**: This API can be used in atomic services since API version 12. 1258 1259**System capability**: SystemCapability.ArkUI.ArkUI.Full 1260 1261### updateTransition<sup>12+</sup> 1262 1263updateTransition?(progress: number): void; 1264 1265Updates the progress of this interactive transition animation. (Non-interactive animations do not support setting the animation progress). 1266 1267**Atomic service API**: This API can be used in atomic services since API version 12. 1268 1269**System capability**: SystemCapability.ArkUI.ArkUI.Full 1270 1271**Parameters** 1272 1273| Name| Type| Mandatory| Description| 1274|------|------|------|-----| 1275| progress | number | Yes| Progress percentage of the interactive transition animation. The value ranges from 0 to 1.| 1276 1277## NavigationInterception<sup>12+</sup> 1278 1279Describes the object to be intercepted during navigation redirection. 1280 1281**Atomic service API**: This API can be used in atomic services since API version 12. 1282 1283**System capability**: SystemCapability.ArkUI.ArkUI.Full 1284 1285| Name | Type | Mandatory| Description | 1286| ---- | ----- | ----- | ---- | 1287| willShow | [InterceptionShowCallback](#interceptionshowcallback12) | No| Interception before page redirection, allowing for stack operations. The setting takes effect in the current redirection.| 1288| didShow | [InterceptionShowCallback](#interceptionshowcallback12) | No| Callback after page redirection. The setting takes effect in the next redirection.| 1289| modeChange | [InterceptionModeCallback](#interceptionmodecallback12) | No| Callback invoked when the display mode of the **Navigation** component switches between single-column and dual-column.| 1290 1291### InterceptionShowCallback<sup>12+</sup> 1292 1293type InterceptionShowCallback = (from: NavDestinationContext|NavBar, to: NavDestinationContext|NavBar, operation: NavigationOperation, isAnimated: boolean) => void 1294 1295Represents the interception callback before and after the navigation page. 1296 1297**Atomic service API**: This API can be used in atomic services since API version 12. 1298 1299**System capability**: SystemCapability.ArkUI.ArkUI.Full 1300 1301| Name | Type | Mandatory| Description | 1302| ------ | ------ | ---- | ---------------- | 1303| from | [NavDestinationContext](ts-basic-components-navdestination.md#navdestinationcontext11) \|[NavBar](#navbar12) | Yes| Information about the top page in the navigation stack before page redirection. The value **navBar** indicates that the top page is the home page.| 1304| to | [NavDestinationContext](ts-basic-components-navdestination.md#navdestinationcontext11) \|[NavBar](#navbar12) | Yes| Information about the top page in the navigation stack after page redirection. The value **navBar** indicates that the top page is the home page.| 1305| operation | [NavigationOperation](#navigationoperation11) | Yes| Current page redirection type.| 1306| isAnimated | boolean | Yes| Whether to support transition animation.| 1307 1308### InterceptionModeCallback<sup>12+</sup> 1309 1310type InterceptionModeCallback = (mode: NavigationMode) => void 1311 1312Implements an interception callback triggered when the display mode of the **Navigation** component switches between single-column and dual-column. 1313 1314**Atomic service API**: This API can be used in atomic services since API version 12. 1315 1316**System capability**: SystemCapability.ArkUI.ArkUI.Full 1317 1318| Name | Type | Mandatory| Description | 1319| ------ | ------ | ---- | ---------------- | 1320| mode | [NavigationMode](#navigationmode9) | Yes| Display mode of the navigation bar.| 1321 1322### NavBar<sup>12+</sup> 1323 1324type NavBar = 'navBar' 1325 1326Defines the name of the navigation home page. 1327 1328**Atomic service API**: This API can be used in atomic services since API version 12. 1329 1330**System capability**: SystemCapability.ArkUI.ArkUI.Full 1331 1332| Type | Description | 1333| -------- | ---------------------------------------- | 1334| "navBar" | Navigation home page.| 1335 1336## NavigationMenuItem 1337 1338| Name | Type | Mandatory | Description | 1339| ------ | ------------- | ---- | --------------- | 1340| value | string | Yes | Text of the menu item. Its visibility varies by the API version.<br>API version 9: visible.<br> API version 10: invisible.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 1341| icon | string | No | Icon path of the menu item.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 1342| isEnabled<sup>12+</sup> | boolean | No | Enabled status.<br>**true** (default): enabled<br>**false**: disabled<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1343| action | () => void | No | Callback invoked when the menu item is selected.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 1344| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No |Symbol icon for a single option on the menu bar. It has higher priority than **icon**.| 1345 1346## ToolbarItem<sup>10+</sup> 1347 1348**Atomic service API**: This API can be used in atomic services since API version 11. 1349 1350**System capability**: SystemCapability.ArkUI.ArkUI.Full 1351 1352| Name | Type | Mandatory | Description | 1353| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 1354| value | ResourceStr | Yes | Text of the toolbar item. | 1355| icon | ResourceStr | No | Icon path of the toolbar item. | 1356| action | () => void | No | Callback invoked when the toolbar item is selected. | 1357| status | [ToolbarItemStatus](#toolbaritemstatus10) | No | Status of the toolbar item.<br>Default value: **ToolbarItemStatus.NORMAL**| 1358| activeIcon | ResourceStr | No | Icon path of the toolbar item in the active state. | 1359| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Symbol icon for a single option on the toolbar. It has higher priority than **icon**. | 1360| activeSymbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | No | Symbol icon for a single option on the menu bar when it is in active state. It has higher priority than **icon**. | 1361 1362## ToolbarItemStatus<sup>10+</sup> 1363 1364**Atomic service API**: This API can be used in atomic services since API version 11. 1365 1366**System capability**: SystemCapability.ArkUI.ArkUI.Full 1367 1368| Name | Description | 1369| -------- | ---------------------------------------- | 1370| NORMAL | Normal state. In this state, the toolbar item takes on the default style and can switch to another state-specific style by responding to the hover, press, and focus events.| 1371| DISABLED | Disabled state. In this state, the toolbar item is disabled and does not allow for user interactions.| 1372| ACTIVE | Active state. In this state, the toolbar item can update its icon to the one specified by **activeIcon** by responding to a click event.| 1373 1374## NavigationTitleMode 1375 1376**Atomic service API**: This API can be used in atomic services since API version 11. 1377 1378**System capability**: SystemCapability.ArkUI.ArkUI.Full 1379 1380| Name | Description | 1381| ---- | ---------------------------------------- | 1382| Free | When the content is more than one screen in a scrollable component, the main title shrinks as the content scrolls down (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls up to the top.<br>**NOTE**<br>The effect where the main title's size changes in response to content scrolling is effective only when **title** is set to **ResourceStr** or **NavigationCommonTitle**. If **title** is set to any other value type, the main title changes in mere location when pulled down.<br>For this effect to work when the content is less than one screen in a scrollable component, set the **options** parameter of the scrollable component's [edgeEffect](ts-container-list.md#attributes) attribute to **true**. In the non-scrolling state, the height of the title bar is the same as in **Full** mode; in the scrolling state, the minimum height of the title bar is the same as in **Mini** mode.| 1383| Mini | The title is fixed at mini mode.<br>Default value:<br>In versions earlier than API version 12, if there is only a main title, the title bar height is 56 vp; if there is both a main title and a subtitle, the title bar height is 82 vp.<br> Since API version 12, the title bar height is 56 vp. | 1384| Full | The title is fixed at full mode.<br>Default value: If there is only a main title, the title bar height is 112 vp; if there is both a main title and a subtitle, the title bar height is 138 vp. | 1385 1386## NavigationCommonTitle<sup>9+</sup> 1387 1388**Atomic service API**: This API can be used in atomic services since API version 11. 1389 1390**System capability**: SystemCapability.ArkUI.ArkUI.Full 1391 1392| Name | Type | Mandatory | Description | 1393| ---- | ------ | ---- | ------ | 1394| main | string | Yes | Main title.| 1395| sub | string | Yes | Subtitle.| 1396 1397## NavigationCustomTitle<sup>9+</sup> 1398 1399**Atomic service API**: This API can be used in atomic services since API version 11. 1400 1401**System capability**: SystemCapability.ArkUI.ArkUI.Full 1402 1403| Name | Type | Mandatory | Description | 1404| ------- | ---------------------------------------- | ---- | -------- | 1405| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Content of the title bar.| 1406| height | [TitleHeight](#titleheight9) \| [Length](ts-types.md#length) | Yes | Height of the title bar.| 1407 1408## NavBarPosition<sup>9+</sup> 1409 1410**Atomic service API**: This API can be used in atomic services since API version 11. 1411 1412**System capability**: SystemCapability.ArkUI.ArkUI.Full 1413 1414| Name | Description | 1415| ----- | ---------------- | 1416| Start | When two columns are displayed, the main column is at the start of the main axis.| 1417| End | When two columns are displayed, the main column is at the end of the main axis.| 1418 1419## NavigationMode<sup>9+</sup> 1420 1421**Atomic service API**: This API can be used in atomic services since API version 11. 1422 1423**System capability**: SystemCapability.ArkUI.ArkUI.Full 1424 1425| Name | Description | 1426| ----- | ------------------------------------------------------------ | 1427| Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages. | 1428| Split | The navigation bar and content area are displayed in different columns.<br>The values of **navBarWidthRange** are represented by [minNavBarWidth,maxNavBarWidth].<br>1. When the value of **navBarWidth** is beyond the value range specified by **navBarWidthRange**, **navBarWidth** is set according to the following rules:<br>Value of **navBarWidth** < Value of **minNavBarWidth**: The value of **navBarWidth** is changed to that of **minNavBarWidth**.<br>Value of **navBarWidth** > Value of **maxNavBarWidth** and Result of [Component width - Value of **minContentWidth** - Divider width (1 vp)] > Value of **maxNavBarWidth**: The value of **navBarWidth** is changed to that of **maxNavBarWidth**.<br>Value of **navBarWidth** > Value of **maxNavBarWidth** and Result of [Component width - Value of **minContentWidth** - Divider width (1 vp)] < Value of **maxNavBarWidth**: The value of **navBarWidth** is changed to that of **minNavBarWidth**.<br>Value of **navBarWidth** > Value of **maxNavBarWidth** and Component width - Value of **minContentWidth** - Divider width (1 vp) is within the value range specified by **navBarWidthRange**: The value of **navBarWidth** is changed to Component width - Value of **minContentWidth** - Divider width (1 vp).<br>2. When the value of **navBarWidth** is within the value range specified by **navBarWidthRange**, **navBarWidth** is set according to the following rules:<br>Value of **minNavBarWidth** + Value of **minContentWidth** + Divider width (1 vp) > = Component width: The value of **navBarWidth** is changed to that of **minNavBarWidth**.<br>Value of **minNavBarWidth** + Value of **minContentWidth** + Divider width (1 vp) < Component width and Value of **navBarWidth** + Value of **minContentWidth** + Divider width (1 vp) > = Component width: The value of **navBarWidth** is changed to Component width - Value of **minContentWidth** - Divider width (1 vp).<br>Value of **minNavBarWidth** + Value of **minContentWidth** + Divider width (1 vp) < Component width and Value of **navBarWidth** + Value of **minContentWidth** + Divider width (1 vp) < Component width: The value of **navBarWidth** is the set value. <br>3. When the component size is decreased, the content area is shrunk until its width reaches the value defined by **minContentWidth**, and then the navigation bar is shrunk until its width reaches the value defined by **minNavBarWidth**; if the component size is further decreased, the content area is further shrunk until it disappears, and then navigation bar is shrunk.<br>4. When the navigation bar is set to a fixed size and the component size is continuously decreased, the navigation bar is shrunk.<br>5. If only **navBarWidth** is set, the width of the navigation bar is fixed at the value of **navBarWidth**, and the divider cannot be dragged.| 1429| Auto | In API version 9 and earlier versions: If the window width is greater than or equal to 520 vp, the Split mode is used; otherwise, the Stack mode is used.<br>In API version 10 and later versions: If the window width is greater than or equal to 600 vp, the Split mode is used; otherwise, the Stack mode is used. 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp).| 1430 1431## TitleHeight<sup>9+</sup> 1432 1433**Atomic service API**: This API can be used in atomic services since API version 11. 1434 1435**System capability**: SystemCapability.ArkUI.ArkUI.Full 1436 1437| Name | Description | 1438| ----------- | -------------------------- | 1439| MainOnly | Recommended height (56 vp) of the title bar when only the main title is available. | 1440| MainWithSub | Recommended height (82 vp) of the title bar when both the main title and subtitle exist.| 1441 1442## NavigationOperation<sup>11+</sup> 1443 1444**Atomic service API**: This API can be used in atomic services since API version 12. 1445 1446**System capability**: SystemCapability.ArkUI.ArkUI.Full 1447 1448| Name | Description | 1449|---------|------| 1450|PUSH | The transition is enter transition.| 1451|POP | The transition is exit transition.| 1452| REPLACE | The transition is page replacement.| 1453 1454## BarStyle<sup>12+</sup> 1455 1456**Atomic service API**: This API can be used in atomic services since API version 12. 1457 1458**System capability**: SystemCapability.ArkUI.ArkUI.Full 1459 1460| Name | Description | 1461|---------|------| 1462|STANDARD | The title bar and content area are arranged in a vertical layout.| 1463|STACK | The title bar and the content area are arranged in a stacked layout, with the title bar positioned above the content area.| 1464 1465## NavigationTitleOptions<sup>11+</sup> 1466 1467| Name | Type | Mandatory | Description | 1468| ------ | ------------- | ---- | --------------- | 1469| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the title bar. If this parameter is not set, the default color is used.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 1470| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No | Background blur style of the title bar. If this parameter is not set, the background blur effect is disabled.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 1471| barStyle<sup>12+</sup> | [BarStyle](#barstyle12) | No | Layout of the title bar.<br>Default value: **BarStyle.STANDARD**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1472| paddingStart<sup>12+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Padding at the start of the title bar.<br>Only supported in one of the following scenarios:<br>1. Displaying the back icon, that is, [hideBackButton](#hidebackbutton) is **false**<br>2. Using a non-custom title, that is, the [title value](#title) type is **ResourceStr** or **NavigationCommonTitle**<br>Default value:<br>LengthMetrics.resource(**$r('sys.float.margin_left')**)<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1473| paddingEnd<sup>12+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No | Padding at the end of the title bar.<br>Only supported in one of the following scenarios:<br>1. Using a non-custom menu, that is, the [menu value](#menus) is Array<NavigationMenuItem><br>2. Using a non-custom menu without a menu in the upper right corner, that is, the [title value](#title) type is **ResourceStr** or **NavigationCommonTitle**<br>Default value:<br>LengthMetrics.resource(**$r('sys.float.margin_right')**)<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 1474| mainTitleModifier<sup>13+</sup> | [TextModifier](./ts-universal-attributes-attribute-modifier.md) | No| Main title attribute modifier.<br>Notes for using this modifier:<br>1. Attribute settings configured by this modifier will override the system's default attribute settings. For example, if the modifier is used to set font size attributes, such as **fontSize**, **maxFontSize**, and **minFontSize**, the settings will take precedence over the system's default settings for size-related attributes.<br>2. If no modifier is used or an invalid value is set, the system reverts to its default settings.<br>3. In [Free](#navigationtitlemode) mode, setting the font size will disable the effect where the main title's size changes in response to content scrolling.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 1475| subTitleModifier<sup>13+</sup> | [TextModifier](./ts-universal-attributes-attribute-modifier.md) | No| Subtitle attribute modifier.<br>Notes for using this modifier:<br>1. Attribute settings configured by this modifier will override the system's default attribute settings. For example, if the modifier is used to set font size attributes, such as **fontSize**, **maxFontSize**, and **minFontSize**, the settings will take precedence over the system's default settings for size-related attributes.<br>2. If no modifier is used or an invalid value is set, the system reverts to its default settings.<br>**Atomic service API**: This API can be used in atomic services since API version 13.| 1476 1477## NavigationToolbarOptions<sup>11+</sup> 1478 1479**Atomic service API**: This API can be used in atomic services since API version 11. 1480 1481**System capability**: SystemCapability.ArkUI.ArkUI.Full 1482 1483| Name | Type | Mandatory | Description | 1484| ------ | ------------- | ---- | --------------- | 1485| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the toolbar. If this parameter is not set, the default color is used.| 1486| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No | Background blur style of the toolbar. If this parameter is not set, the background blur effect is disabled.| 1487 1488## LaunchMode<sup>12+</sup> 1489 1490**Atomic service API**: This API can be used in atomic services since API version 12. 1491 1492**System capability**: SystemCapability.ArkUI.ArkUI.Full 1493 1494| Name | Description | 1495| --------- | ------ | 1496| STANDARD | Default navigation stack operation mode.<br>In this mode, push operations add the specified **NavDestination** page to the stack; replace operations replace the current top **NavDestination** page.| 1497| MOVE_TO_TOP_SINGLETON | This mode searches from the bottom to the top of the navigation stack. If a **NavDestination** page with the specified name exists, it moves that page to the top of the stack (for a replace operation, it replaces the last top **NavDestination** page with the specified one); otherwise, it behaves like **STANDARD**.| 1498| POP_TO_SINGLETON | This mode searches from the bottom to the top of the navigation stack. If a **NavDestination** page with the specified name exists, it removes all **NavDestination** pages above it(for a replace operation, it replaces the last top **NavDestination** page with the specified one); otherwise, it behaves like **STANDARD**.| 1499| NEW_INSTANCE | This mode creates an instance of **NavDestination**. Compared with **STANDARD**, this mode does not reuse the instance with the same name in the stack.| 1500 1501## NavigationOptions<sup>12+</sup> 1502 1503**Atomic service API**: This API can be used in atomic services since API version 12. 1504 1505**System capability**: SystemCapability.ArkUI.ArkUI.Full 1506 1507| Name | Type | Mandatory | Description | 1508| ------ | ------------- | ---- | --------------- | 1509| launchMode | [LaunchMode](#launchmode12) | No | Navigation stack operation mode.<br>Default value: **LaunchMode.STANDARD**| 1510| animated | boolean | No | Whether to support transition animation.<br>Default value: **true**| 1511 1512## Example 1513 1514The sample effect is subject to the actual device. 1515 1516### Example 1 1517 1518This example demonstrates the page layout of the **Navigation** component. 1519 1520```ts 1521// xxx.ets 1522class A { 1523 text: string = '' 1524 num: number = 0 1525} 1526 1527@Entry 1528@Component 1529struct NavigationExample { 1530 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 1531 @State currentIndex: number = 0 1532 1533 @Builder NavigationTitle() { 1534 Column() { 1535 Text('Title') 1536 .fontColor('#182431') 1537 .fontSize(30) 1538 .lineHeight(41) 1539 .fontWeight(700) 1540 Text('subtitle') 1541 .fontColor('#182431') 1542 .fontSize(14) 1543 .lineHeight(19) 1544 .opacity(0.4) 1545 .margin({ top: 2, bottom: 20 }) 1546 }.alignItems(HorizontalAlign.Start) 1547 } 1548 1549 @Builder NavigationMenus() { 1550 Row() { 1551 Image('resources/base/media/ic_public_add.svg') 1552 .width(24) 1553 .height(24) 1554 Image('resources/base/media/ic_public_add.svg') 1555 .width(24) 1556 .height(24) 1557 .margin({ left: 24 }) 1558 Image('common/ic_public_more.svg') 1559 .width(24) 1560 .height(24) 1561 .margin({ left: 24 }) 1562 } 1563 } 1564 1565 build() { 1566 Column() { 1567 Navigation() { 1568 TextInput({ placeholder: 'search...' }) 1569 .width('90%') 1570 .height(40) 1571 .backgroundColor('#FFFFFF') 1572 .margin({ top: 8 }) 1573 1574 List({ space: 12, initialIndex: 0 }) { 1575 ForEach(this.arr, (item: number) => { 1576 ListItem() { 1577 Text('' + item) 1578 .width('90%') 1579 .height(72) 1580 .backgroundColor('#FFFFFF') 1581 .borderRadius(24) 1582 .fontSize(16) 1583 .fontWeight(500) 1584 .textAlign(TextAlign.Center) 1585 } 1586 }, (item: number) => item.toString()) 1587 } 1588 .height(324) 1589 .width('100%') 1590 .margin({ top: 12, left: '10%' }) 1591 } 1592 .title(this.NavigationTitle) 1593 .menus(this.NavigationMenus) 1594 .titleMode(NavigationTitleMode.Full) 1595 .toolbarConfiguration([ 1596 { 1597 value: $r("app.string.navigation_toolbar_add"), 1598 icon: $r("app.media.ic_public_highlightsed") 1599 }, 1600 { 1601 value: $r("app.string.navigation_toolbar_app"), 1602 icon: $r("app.media.ic_public_highlights") 1603 }, 1604 { 1605 value: $r("app.string.navigation_toolbar_collect"), 1606 icon: $r("app.media.ic_public_highlights") 1607 } 1608 ]) 1609 .hideTitleBar(false) 1610 .hideToolBar(false) 1611 .onTitleModeChange((titleModel: NavigationTitleMode) => { 1612 console.info('titleMode' + titleModel) 1613 }) 1614 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1615 } 1616} 1617``` 1618 1619 1620 1621 1622 1623### Example 2 1624 1625This example demonstrates the use of methods in **NavPathStack** and route interception. 1626 1627```ts 1628// Index.ets 1629 1630@Entry 1631@Component 1632struct NavigationExample { 1633 pageInfos: NavPathStack = new NavPathStack() 1634 isUseInterception: boolean = false; 1635 1636 registerInterception() { 1637 this.pageInfos.setInterception({ 1638 willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar", 1639 operation: NavigationOperation, animated: boolean) => { 1640 if (!this.isUseInterception) { 1641 return; 1642 } 1643 if (typeof to === "string") { 1644 console.log("target page is navigation home"); 1645 return; 1646 } 1647 // redirect target page.Change pageTwo to pageOne. 1648 let target: NavDestinationContext = to as NavDestinationContext; 1649 if (target.pathInfo.name === 'pageTwo') { 1650 target.pathStack.pop(); 1651 target.pathStack.pushPathByName('pageOne', null); 1652 } 1653 }, 1654 didShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar", 1655 operation: NavigationOperation, isAnimated: boolean) => { 1656 if (!this.isUseInterception) { 1657 return; 1658 } 1659 if (typeof from === "string") { 1660 console.log("current transition is from navigation home"); 1661 } else { 1662 console.log(`current transition is from ${(from as NavDestinationContext).pathInfo.name}`) 1663 } 1664 if (typeof to === "string") { 1665 console.log("current transition to is navBar"); 1666 } else { 1667 console.log(`current transition is to ${(to as NavDestinationContext).pathInfo.name}`); 1668 } 1669 }, 1670 modeChange: (mode: NavigationMode) => { 1671 if (!this.isUseInterception) { 1672 return; 1673 } 1674 console.log(`current navigation mode is ${mode}`); 1675 } 1676 }) 1677 } 1678 1679 build() { 1680 Navigation(this.pageInfos) { 1681 Column() { 1682 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 1683 .width('80%') 1684 .height(40) 1685 .margin(20) 1686 .onClick(() => { 1687 this.pageInfos.pushPath({ name:'pageOne'}) // Push the navigation destination page specified by name to the navigation stack. 1688 }) 1689 Button('use interception', { stateEffect: true, type: ButtonType.Capsule }) 1690 .width('80%') 1691 .height(40) 1692 .margin(20) 1693 .onClick(() => { 1694 this.isUseInterception = !this.isUseInterception; 1695 if (this.isUseInterception) { 1696 this.registerInterception(); 1697 } else { 1698 this.pageInfos.setInterception(undefined); 1699 } 1700 }) 1701 } 1702 }.title('NavIndex') 1703 } 1704} 1705``` 1706```ts 1707// PageOne.ets 1708class TmpClass{ 1709 count:number=10 1710} 1711 1712@Builder 1713export function PageOneBuilder(name: string, param: Object) { 1714 PageOne() 1715} 1716 1717@Component 1718export struct PageOne { 1719 1720 pageInfos: NavPathStack = new NavPathStack() 1721 1722 build() { 1723 NavDestination() { 1724 Column() { 1725 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 1726 .width('80%') 1727 .height(40) 1728 .margin(20) 1729 .onClick(() => { 1730 let tmp = new TmpClass() 1731 this.pageInfos.pushPathByName('pageTwo', tmp) // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 1732 }) 1733 Button('singletonLaunchMode', { stateEffect: true, type: ButtonType.Capsule }) 1734 .width('80%') 1735 .height(40) 1736 .margin(20) 1737 .onClick(() => { 1738 this.pageInfos.pushPath({ name: 'pageOne' }, { launchMode: LaunchMode.MOVE_TO_TOP_SINGLETON }) // Search from the bottom to the top of the stack. If the page with the specified name exists, move that page to the top of the stack. 1739 }) 1740 Button('popToname', { stateEffect: true, type: ButtonType.Capsule }) 1741 .width('80%') 1742 .height(40) 1743 .margin(20) 1744 .onClick(() => { 1745 this.pageInfos.popToName('pageTwo') // Pop the first navigation destination page that matches the value of name to the top of the navigation stack. 1746 console.log('popToName' + JSON.stringify(this.pageInfos), 'Return value' + JSON.stringify(this.pageInfos.popToName('pageTwo'))) 1747 }) 1748 Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule }) 1749 .width('80%') 1750 .height(40) 1751 .margin(20) 1752 .onClick(() => { 1753 this.pageInfos.popToIndex(1) // Return the navigation stack to the navigation destination page that matches the value of index. 1754 console.log('popToIndex' + JSON.stringify(this.pageInfos)) 1755 }) 1756 Button('moveToTop', { stateEffect: true, type: ButtonType.Capsule }) 1757 .width('80%') 1758 .height(40) 1759 .margin(20) 1760 .onClick(() => { 1761 this.pageInfos.moveToTop('pageTwo') // Move to the top of the navigation stack the first navigation destination page that matches the value of name. 1762 console.log('moveToTop' + JSON.stringify(this.pageInfos), 'Return value' + JSON.stringify(this.pageInfos.moveToTop('pageTwo'))) 1763 }) 1764 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule }) 1765 .width('80%') 1766 .height(40) 1767 .margin(20) 1768 .onClick(() => { 1769 this.pageInfos.moveIndexToTop(1) // Move to the top of the navigation stack the navigation destination page that matches the value of index. 1770 console.log('moveIndexToTop' + JSON.stringify(this.pageInfos)) 1771 }) 1772 Button('clear', { stateEffect: true, type: ButtonType.Capsule }) 1773 .width('80%') 1774 .height(40) 1775 .margin(20) 1776 .onClick(() => { 1777 this.pageInfos.clear() // Clear the navigation stack. 1778 }) 1779 Button('get', { stateEffect: true, type: ButtonType.Capsule }) 1780 .width('80%') 1781 .height(40) 1782 .margin(20) 1783 .onClick(() => { 1784 console.log('-------------------') 1785 console.log('Obtained the names of all pages in the navigation stack', JSON.stringify(this.pageInfos.getAllPathName())) 1786 console.log('Obtained parameter information of the navigation destination page specified by index', JSON.stringify(this.pageInfos.getParamByIndex(1))) 1787 console.log('Obtained parameter information of all the navigation destination pages specified by name', JSON.stringify(this.pageInfos.getParamByName('pageTwo'))) 1788 console.log('Obtained the index information of all the navigation destination pages specified by name', JSON.stringify(this.pageInfos.getIndexByName('pageOne')))) 1789 console.log ('Obtained the stack size', JSON.stringify (this.pageInfos.size ())) 1790 }) 1791 }.width('100%').height('100%') 1792 }.title('pageOne') 1793 .onBackPressed(() => { 1794 const popDestinationInfo = this.pageInfos.pop() // Pop the top element out of the navigation stack. 1795 console.log('pop' + 'Return value' + JSON.stringify(popDestinationInfo)) 1796 return true 1797 }).onReady((context: NavDestinationContext) => { 1798 this.pageInfos = context.pathStack 1799 }) 1800 } 1801} 1802``` 1803```ts 1804// PageTwo.ets 1805@Builder 1806export function PageTwoBuilder(name: string, param: Object) { 1807 PageTwo() 1808} 1809 1810@Component 1811export struct PageTwo { 1812 pathStack: NavPathStack = new NavPathStack() 1813 1814 private menuItems: Array<NavigationMenuItem> = [ 1815 { 1816 value: "1", 1817 icon: 'resources/base/media/undo.svg', 1818 }, 1819 { 1820 value: "2", 1821 icon: 'resources/base/media/redo.svg', 1822 isEnabled: false, 1823 }, 1824 { 1825 value: "3", 1826 icon: 'resources/base/media/ic_public_ok.svg', 1827 isEnabled: true, 1828 } 1829 ] 1830 1831 build() { 1832 NavDestination() { 1833 Column() { 1834 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 1835 .width('80%') 1836 .height(40) 1837 .margin(20) 1838 .onClick(() => { 1839 this.pathStack.pushPathByName('pageOne', null) 1840 }) 1841 }.width('100%').height('100%') 1842 }.title('pageTwo') 1843 .menus(this.menuItems) 1844 .onBackPressed(() => { 1845 this.pathStack.pop() 1846 return true 1847 }) 1848 .onReady((context: NavDestinationContext) => { 1849 this.pathStack = context.pathStack; 1850 console.log("current page config info is " + JSON.stringify(context.getConfigInRouteMap())) 1851 }) 1852 } 1853} 1854``` 1855 1856```json 1857// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 1858// route_map.json 1859{ 1860 "routerMap": [ 1861 { 1862 "name": "pageOne", 1863 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 1864 "buildFunction": "PageOneBuilder", 1865 "data": { 1866 "description": "this is pageOne" 1867 } 1868 }, 1869 { 1870 "name": "pageTwo", 1871 "pageSourceFile": "src/main/ets/pages/PageTwo.ets", 1872 "buildFunction": "PageTwoBuilder" 1873 } 1874 ] 1875} 1876``` 1877 1878 1879### Example 3 1880 1881This sample demonstrates how to set a custom transition animation and an interactive transition animation for each **NavDestination** page. 1882 1883```ts 1884// Index.ets 1885import { CustomTransition, AnimateCallback } from './CustomNavigationUtils' 1886 1887@Entry 1888@Component 1889struct NavigationExample { 1890 pageInfos: NavPathStack = new NavPathStack(); 1891 1892 aboutToAppear() { 1893 if (this.pageInfos === undefined) { 1894 this.pageInfos = new NavPathStack(); 1895 } 1896 this.pageInfos.pushPath({ name: 'pageOne', param: CustomTransition.getInstance().getAnimationId() }); 1897 } 1898 1899 build() { 1900 Navigation(this.pageInfos) { 1901 } 1902 .title('NavIndex') 1903 .hideNavBar(true) 1904 .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => { 1905 if (from.mode == NavDestinationMode.DIALOG || to.mode == NavDestinationMode.DIALOG) { 1906 return undefined; 1907 } 1908 1909 // No custom animation for the home page 1910 if (from.index === -1 || to.index === -1) { 1911 return undefined; 1912 } 1913 1914 CustomTransition.getInstance().operation = operation; 1915 if (CustomTransition.getInstance().interactive) { 1916 let customAnimation: NavigationAnimatedTransition = { 1917 onTransitionEnd: (isSuccess: boolean) => { 1918 console.log("===== current transition is " + isSuccess); 1919 CustomTransition.getInstance().recoverState(); 1920 CustomTransition.getInstance().proxy = undefined; 1921 }, 1922 transition: (transitionProxy: NavigationTransitionProxy) => { 1923 CustomTransition.getInstance().proxy = transitionProxy; 1924 let targetIndex: string | undefined = operation == NavigationOperation.PUSH ? 1925 (to.navDestinationId) : (from.navDestinationId); 1926 if (targetIndex) { 1927 CustomTransition.getInstance().fireInteractiveAnimation(targetIndex, operation); 1928 } 1929 }, 1930 isInteractive: CustomTransition.getInstance().interactive 1931 } 1932 return customAnimation; 1933 } 1934 let customAnimation: NavigationAnimatedTransition = { 1935 onTransitionEnd: (isSuccess: boolean)=>{ 1936 console.log(`current transition result is ${isSuccess}`) 1937 }, 1938 timeout: 7000, 1939 // When the transition starts, the system calls this method and passes in the transition context proxy object. 1940 transition: (transitionProxy: NavigationTransitionProxy) => { 1941 if (!from.navDestinationId || !to.navDestinationId) { 1942 return; 1943 } 1944 // Obtain the corresponding transition animation callback from the CustomTransition class based on the sequence of subpages. 1945 let fromParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(from.navDestinationId); 1946 let toParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(to.navDestinationId); 1947 if (operation == NavigationOperation.PUSH) { 1948 if (toParam.start) { 1949 toParam.start(true, false); 1950 } 1951 animateTo({ 1952 duration: 500, onFinish: () => { 1953 transitionProxy.finishTransition(); 1954 } 1955 }, () => { 1956 if (toParam.finish) { 1957 toParam.finish(true, false); 1958 } 1959 }) 1960 } else { 1961 if (fromParam.start) { 1962 fromParam.start(true, true); 1963 } 1964 animateTo({ 1965 duration: 500, onFinish: () => { 1966 transitionProxy.finishTransition(); 1967 } 1968 }, () => { 1969 if (fromParam.finish) { 1970 fromParam.finish(true, true); 1971 } 1972 }) 1973 } 1974 } 1975 }; 1976 return customAnimation; 1977 }) 1978 } 1979} 1980``` 1981 1982```ts 1983// PageOne.ets 1984import {CustomTransition} from './CustomNavigationUtils'; 1985 1986@Builder 1987export function PageOneBuilder(name: string, param: Object) { 1988 PageOne() 1989} 1990 1991@Component 1992export struct PageOne { 1993 pageInfos: NavPathStack = new NavPathStack(); 1994 @State translateX: string = '0'; 1995 pageId: string = ''; 1996 rectWidth: number = 0; 1997 interactive: boolean = false; 1998 1999 registerCallback() { 2000 CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean) => { 2001 if (isPush) { 2002 this.translateX = '100%'; 2003 } else { 2004 this.translateX = '0'; 2005 } 2006 }, (isPush: boolean, isExit: boolean) => { 2007 if (isPush) { 2008 this.translateX = '0'; 2009 } else { 2010 this.translateX = '100%'; 2011 } 2012 }, (isPush: boolean, isExit: boolean) => { 2013 this.translateX = '0'; 2014 }, (operation: NavigationOperation) => { 2015 if (operation == NavigationOperation.PUSH) { 2016 this.translateX = '100%'; 2017 animateTo({ 2018 duration: 1000, 2019 onFinish: () => { 2020 this.translateX = '0'; 2021 } 2022 }, () => { 2023 this.translateX = '0'; 2024 }) 2025 } else { 2026 this.translateX = '0'; 2027 animateTo({ 2028 duration: 1000, 2029 onFinish: () => { 2030 this.translateX = '0'; 2031 } 2032 }, () => { 2033 this.translateX = '100%'; 2034 }) 2035 } 2036 }, 200); 2037 } 2038 2039 build() { 2040 NavDestination() { 2041 Column() { 2042 Button(`setInteractive`) 2043 .onClick(() => { 2044 CustomTransition.getInstance().interactive = !CustomTransition.getInstance().interactive; 2045 this.interactive = CustomTransition.getInstance().interactive; 2046 }) 2047 2048 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2049 .width('80%') 2050 .height(40) 2051 .margin(20) 2052 .onClick(() => { 2053 // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 2054 this.pageInfos.pushDestinationByName('pageTwo', CustomTransition.getInstance().getAnimationId()); 2055 }) 2056 } 2057 .size({ width: '100%', height: '100%' }) 2058 } 2059 .title('pageOne') 2060 .onDisAppear(() => { 2061 CustomTransition.getInstance().unRegisterNavParam(this.pageId); 2062 }) 2063 .onReady((context: NavDestinationContext) => { 2064 this.pageInfos = context.pathStack; 2065 if (context.navDestinationId) { 2066 this.pageId = context.navDestinationId; 2067 this.registerCallback(); 2068 } 2069 }) 2070 .translate({ x: this.translateX }) 2071 .backgroundColor('#F1F3F5') 2072 .gesture(PanGesture() 2073 .onActionStart((event: GestureEvent) => { 2074 this.rectWidth = event.target.area.width as number; 2075 if (event.offsetX < 0) { 2076 this.pageInfos.pushPath({ name: 'pageTwo', param: CustomTransition.getInstance().getAnimationId() }); 2077 } else { 2078 this.pageInfos.pop(); 2079 } 2080 }) 2081 .onActionUpdate((event: GestureEvent) => { 2082 let rate = event.fingerList[0].localX / this.rectWidth; 2083 CustomTransition.getInstance().updateProgress(rate); 2084 }) 2085 .onActionEnd((event: GestureEvent) => { 2086 let rate: number = event.fingerList[0].localX / this.rectWidth; 2087 CustomTransition.getInstance().finishInteractiveAnimation(rate); 2088 })) 2089 } 2090} 2091``` 2092```ts 2093// PageTwo.ets 2094import {CustomTransition} from './CustomNavigationUtils' 2095 2096@Builder 2097export function PageTwoBuilder(name: string, param: Object) { 2098 PageTwo({param: param as number}) 2099} 2100 2101@Component 2102export struct PageTwo { 2103 pageInfos: NavPathStack = new NavPathStack(); 2104 @State translateX: string = '0'; 2105 pageId: string = ''; 2106 rectWidth: number = 0; 2107 param: number = 0; 2108 2109 registerCallback() { 2110 CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean)=>{ 2111 if (isPush) { 2112 this.translateX = '100%' 2113 } else { 2114 this.translateX = '0'; 2115 } 2116 }, (isPush: boolean, isExit: boolean)=>{ 2117 if (isPush) { 2118 this.translateX = '0'; 2119 } else { 2120 this.translateX = '100%' 2121 } 2122 }, (isPush: boolean, isExit: boolean) => { 2123 this.translateX = '0'; 2124 }, (operation: NavigationOperation)=>{ 2125 if (operation == NavigationOperation.PUSH) { 2126 this.translateX = '100%'; 2127 animateTo({duration: 500, onFinish: ()=>{ 2128 this.translateX = '0'; 2129 }}, ()=>{ 2130 this.translateX = '0' 2131 }) 2132 } else { 2133 this.translateX = '0'; 2134 animateTo({duration: 500, onFinish: ()=>{ 2135 this.translateX = "0" 2136 }}, ()=>{ 2137 this.translateX = '100%'; 2138 }) 2139 } 2140 }, 2000) 2141 } 2142 2143 build() { 2144 NavDestination() { 2145 Column() { 2146 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2147 .width('80%') 2148 .height(40) 2149 .margin(20) 2150 .onClick(() => { 2151 // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 2152 this.pageInfos.pushPath({name:'pageOne', param: CustomTransition.getInstance().getAnimationId()}) 2153 }) 2154 } 2155 .size({ width: '100%', height: '100%' }) 2156 } 2157 .title('pageTwo') 2158 .gesture(PanGesture() 2159 .onActionStart((event: GestureEvent)=> { 2160 this.rectWidth = event.target.area.width as number; 2161 if (event.offsetX < 0) { 2162 this.pageInfos.pushPath({ name: 'pageOne', param: CustomTransition.getInstance().getAnimationId() }); 2163 } else { 2164 this.pageInfos.pop(); 2165 } 2166 }) 2167 .onActionUpdate((event: GestureEvent) => { 2168 let rate = event.fingerList[0].localX / this.rectWidth; 2169 CustomTransition.getInstance().updateProgress(rate); 2170 }) 2171 .onActionEnd((event: GestureEvent)=> { 2172 let rate = event.fingerList[0].localX / this.rectWidth; 2173 CustomTransition.getInstance().finishInteractiveAnimation(rate); 2174 })) 2175 .onAppear(() => { 2176 this.registerCallback(); 2177 }) 2178 .onDisAppear(()=>{ 2179 CustomTransition.getInstance().unRegisterNavParam(this.pageId); 2180 }) 2181 .onReady((context: NavDestinationContext) => { 2182 this.pageInfos = context.pathStack; 2183 if (context.navDestinationId) { 2184 this.pageId = context.navDestinationId; 2185 this.registerCallback(); 2186 } 2187 }) 2188 .translate({x: this.translateX}) 2189 .backgroundColor(Color.Yellow) 2190 } 2191} 2192``` 2193```ts 2194// CustomNavigationUtils.ts 2195// Custom API to save the transition animation callback and parameters related to a page. 2196export interface AnimateCallback { 2197 finish: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 2198 start: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 2199 onFinish: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 2200 interactive: ((operation: NavigationOperation) => void | undefined) | undefined; 2201 timeout: (number | undefined) | undefined; 2202} 2203const customTransitionMap: Map<string, AnimateCallback> = new Map(); 2204 2205export class CustomTransition { 2206 static delegate = new CustomTransition(); 2207 interactive: boolean = false; 2208 proxy: NavigationTransitionProxy| undefined = undefined; 2209 private animationId: number = 0; 2210 operation: NavigationOperation = NavigationOperation.PUSH 2211 2212 static getInstance() { 2213 return CustomTransition.delegate; 2214 } 2215 2216 /* Register animation callbacks for a page. 2217 * name: unique ID of the target page 2218 * startCallback: used to set the page state at the start of the animation. 2219 * endCallback: used to set the page state at the end of the animation. 2220 * onFinish: used to perform other operations after the animation ends. 2221 * interactiveCallback: used to handle the interactive part of the transition. 2222 * timeout: timeout for ending the transition. 2223 */ 2224 registerNavParam(name: string, startCallback: (operation: boolean, isExit: boolean) => void, 2225 endCallback:(operation: boolean, isExit: boolean) => void, 2226 onFinish: (operation: boolean, isExit: boolean) => void, 2227 interactiveCallback: (operation: NavigationOperation) =>void, 2228 timeout: number): void { 2229 if (customTransitionMap.has(name)) { 2230 let param = customTransitionMap.get(name); 2231 if (param != undefined) { 2232 param.start = startCallback; 2233 param.finish = endCallback; 2234 param.timeout = timeout; 2235 param.onFinish = onFinish; 2236 param.interactive = interactiveCallback; 2237 return; 2238 } 2239 } 2240 let params: AnimateCallback = {timeout: timeout, start: startCallback, finish: endCallback, onFinish: onFinish, 2241 interactive: interactiveCallback}; 2242 customTransitionMap.set(name, params); 2243 } 2244 2245 getAnimationId() { 2246 return Date.now(); 2247 } 2248 2249 unRegisterNavParam(name: string): void { 2250 customTransitionMap.delete(name); 2251 } 2252 2253 fireInteractiveAnimation(id: string, operation: NavigationOperation) { 2254 let animation = customTransitionMap.get(id)?.interactive; 2255 if (!animation) { 2256 return; 2257 } 2258 animation(operation); 2259 } 2260 2261 updateProgress(progress: number) { 2262 if (!this.proxy?.updateTransition) { 2263 return; 2264 } 2265 progress = this.operation == NavigationOperation.PUSH ? 1 - progress : progress; 2266 this.proxy?.updateTransition(progress); 2267 } 2268 2269 cancelTransition() { 2270 if (this.proxy?.cancelTransition) { 2271 this.proxy.cancelTransition(); 2272 } 2273 } 2274 2275 recoverState() { 2276 if (!this.proxy?.from.navDestinationId || !this.proxy?.to.navDestinationId) { 2277 return; 2278 } 2279 let fromParam = customTransitionMap.get(this.proxy.from.navDestinationId); 2280 if (fromParam?.onFinish) { 2281 fromParam.onFinish(false, false); 2282 } 2283 let toParam = customTransitionMap.get(this.proxy?.to.navDestinationId); 2284 if (toParam?.onFinish) { 2285 toParam.onFinish(true, true); 2286 } 2287 } 2288 2289 finishTransition() { 2290 this.proxy?.finishTransition(); 2291 } 2292 2293 finishInteractiveAnimation(rate: number) { 2294 if (this.operation == NavigationOperation.PUSH) { 2295 if (rate > 0.5) { 2296 if (this.proxy?.cancelTransition) { 2297 this.proxy.cancelTransition(); 2298 } 2299 } else { 2300 this.proxy?.finishTransition(); 2301 } 2302 } else { 2303 if (rate > 0.5) { 2304 this.proxy?.finishTransition(); 2305 } else { 2306 if (this.proxy?.cancelTransition) { 2307 this.proxy.cancelTransition(); 2308 } 2309 } 2310 } 2311 } 2312 2313 getAnimateParam(name: string): AnimateCallback { 2314 let result: AnimateCallback = { 2315 start: customTransitionMap.get(name)?.start, 2316 finish: customTransitionMap.get(name)?.finish, 2317 timeout: customTransitionMap.get(name)?.timeout, 2318 onFinish: customTransitionMap.get(name)?.onFinish, 2319 interactive: customTransitionMap.get(name)?.interactive, 2320 }; 2321 return result; 2322 } 2323} 2324``` 2325```json 2326// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 2327// route_map.json 2328{ 2329 "routerMap": [ 2330 { 2331 "name": "pageOne", 2332 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 2333 "buildFunction": "PageOneBuilder", 2334 "data": { 2335 "description": "this is pageOne" 2336 } 2337 }, 2338 { 2339 "name": "pageTwo", 2340 "pageSourceFile": "src/main/ets/pages/PageTwo.ets", 2341 "buildFunction": "PageTwoBuilder" 2342 } 2343 ] 2344} 2345``` 2346 2347 2348### Example 4 2349 2350This example primarily demonstrates how to use **Navigation** to return to the previous page with parameters. 2351 2352```ts 2353// Index.ets 2354 2355@Entry 2356@Component 2357struct NavigationExample { 2358 pageInfo: NavPathStack = new NavPathStack() 2359 2360 build() { 2361 Navigation(this.pageInfo) { 2362 Column() { 2363 Button('StartTest', { stateEffect: true, type: ButtonType.Capsule }) 2364 .width('80%') 2365 .height(40) 2366 .margin(20) 2367 .onClick(() => { 2368 this.pageInfo.pushPath({ name: 'pageOne' }); // Push the navigation destination page specified by name to the navigation stack. 2369 }) 2370 } 2371 }.title('NavIndex') 2372 } 2373} 2374``` 2375```ts 2376// PageOne.ets 2377import { BusinessError } from '@kit.BasicServicesKit'; 2378 2379class TmpClass{ 2380 count:number = 10 2381} 2382 2383class ParamWithOp { 2384 operation: number = 1 2385 count: number = 10 2386} 2387 2388@Builder 2389export function PageOneBuilder(name: string, param: Object) { 2390 PageOne() 2391} 2392 2393@Component 2394export struct PageOne { 2395 pageInfo: NavPathStack = new NavPathStack(); 2396 @State message: string = 'Hello World' 2397 2398 build() { 2399 NavDestination() { 2400 Column() { 2401 Text(this.message) 2402 .width('80%') 2403 .height(50) 2404 .margin(10) 2405 2406 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 2407 .width('80%') 2408 .height(40) 2409 .margin(10) 2410 .onClick(()=>{ 2411 this.pageInfo.pushPath({name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo)=>{ 2412 this.message = '[pushPath]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2413 }}); // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. Use the onPop callback to receive the page processing result. 2414 }) 2415 2416 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2417 .width('80%') 2418 .height(40) 2419 .margin(10) 2420 .onClick(() => { 2421 let tmp = new TmpClass() 2422 this.pageInfo.pushPathByName('pageTwo', tmp, (popInfo)=>{ 2423 this.message = '[pushPathByName]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2424 }); // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. Use the onPop callback to receive the page processing result. 2425 }) 2426 2427 Button('pushDestination', { stateEffect: true, type: ButtonType.Capsule }) 2428 .width('80%') 2429 .height(40) 2430 .margin(10) 2431 .onClick(()=>{ 2432 let tmp = new TmpClass() 2433 // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. Use the onPop callback to receive the page processing result. 2434 this.pageInfo.pushDestination({name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo)=>{ 2435 this.message = '[pushDestination]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2436 }}).catch((error: BusinessError)=>{ 2437 console.error(`[pushDestination]failed, error code = ${error.code}, error.message = ${error.message}.`); 2438 }).then(()=>{ 2439 console.error('[pushDestination]success.'); 2440 }); 2441 }) 2442 2443 Button('pushDestinationByName', { stateEffect: true, type: ButtonType.Capsule }) 2444 .width('80%') 2445 .height(40) 2446 .margin(10) 2447 .onClick(()=>{ 2448 let tmp = new TmpClass() 2449 // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. Use the onPop callback to receive the page processing result. 2450 this.pageInfo.pushDestinationByName('pageTwo', tmp, (popInfo)=>{ 2451 this.message = '[pushDestinationByName]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2452 }).catch((error: BusinessError)=>{ 2453 console.error(`[pushDestinationByName]failed, error code = ${error.code}, error.message = ${error.message}.`); 2454 }).then(()=>{ 2455 console.error('[pushDestinationByName]success.'); 2456 }); 2457 }) 2458 2459 Button('pushPathWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2460 .width('80%') 2461 .height(40) 2462 .margin(10) 2463 .onClick(()=>{ 2464 this.pageInfo.pushPath({name: 'pageTwo', param: new ParamWithOp()}); // Push the navigation destination page specified by name to the navigation stack. 2465 }) 2466 2467 Button('pushPathByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2468 .width('80%') 2469 .height(40) 2470 .margin(10) 2471 .onClick(() => { 2472 let tmp = new TmpClass() 2473 this.pageInfo.pushPathByName('pageTwo', tmp); // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 2474 }) 2475 2476 Button('pushDestinationWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2477 .width('80%') 2478 .height(40) 2479 .margin(10) 2480 .onClick(()=>{ 2481 let tmp = new TmpClass() 2482 // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. Use the onPop callback to receive the page processing result. 2483 this.pageInfo.pushDestination({name: 'pageTwo', param: new ParamWithOp()}) 2484 .catch((error: BusinessError)=>{ 2485 console.error(`[pushDestinationWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`); 2486 }).then(()=>{ 2487 console.error('[pushDestinationWithoutOnPop]success.'); 2488 }); 2489 }) 2490 2491 Button('pushDestinationByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2492 .width('80%') 2493 .height(40) 2494 .margin(10) 2495 .onClick(() => { 2496 let tmp = new TmpClass() 2497 // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 2498 this.pageInfo.pushDestinationByName('pageTwo', tmp) 2499 .catch((error: BusinessError)=>{ 2500 console.error(`[pushDestinationByNameWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`); 2501 }).then(()=>{ 2502 console.error('[pushDestinationByNameWithoutOnPop]success.'); 2503 }); 2504 }) 2505 2506 Button('clear', { stateEffect: true, type: ButtonType.Capsule }) 2507 .width('80%') 2508 .height(40) 2509 .margin(10) 2510 .onClick(() => { 2511 this.pageInfo.clear(); // Clear the navigation stack. 2512 }) 2513 }.width('100%').height('100%') 2514 }.title('pageOne') 2515 .onBackPressed(() => { 2516 this.pageInfo.pop({number: 1}) // Pop the top element out of the navigation stack. 2517 return true 2518 }).onReady((context: NavDestinationContext) => { 2519 this.pageInfo = context.pathStack; 2520 }) 2521 } 2522} 2523``` 2524```ts 2525// PageTwo.ets 2526 2527class resultClass { 2528 constructor(count: number) { 2529 this.count = count; 2530 } 2531 count: number = 10 2532} 2533 2534@Builder 2535export function PageTwoBuilder() { 2536 PageTwo() 2537} 2538 2539@Component 2540export struct PageTwo { 2541 pathStack: NavPathStack = new NavPathStack() 2542 2543 build() { 2544 NavDestination() { 2545 Column() { 2546 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 2547 .width('80%') 2548 .height(40) 2549 .margin(20) 2550 .onClick(() => { 2551 this.pathStack.pop(new resultClass(1)); // Return to the previous page and pass in the processing result to the onPop callback of push. 2552 }) 2553 2554 Button('popToName', { stateEffect: true, type: ButtonType.Capsule }) 2555 .width('80%') 2556 .height(40) 2557 .margin(20) 2558 .onClick(() => { 2559 this.pathStack.popToName('pageOne', new resultClass(11)); // Move the first navigation destination page that matches name to the top of the navigation stack, and pass in the processing result to the onPop callback of push. 2560 }) 2561 2562 Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule }) 2563 .width('80%') 2564 .height(40) 2565 .margin(20) 2566 .onClick(() => { 2567 this.pathStack.popToIndex(0, new resultClass(111)); // Move the navigation destination page specified by index to the top of the navigation stack, and pass in the processing result to the onPop callback of push. 2568 }) 2569 2570 Button('popWithoutResult', { stateEffect: true, type: ButtonType.Capsule }) 2571 .width('80%') 2572 .height(40) 2573 .margin(20) 2574 .onClick(() => { 2575 this.pathStack.pop(); 2576 }) 2577 2578 Button('popToNameWithoutResult', { stateEffect: true, type: ButtonType.Capsule }) 2579 .width('80%') 2580 .height(40) 2581 .margin(20) 2582 .onClick(() => { 2583 this.pathStack.popToName('pageOne'); 2584 }) 2585 2586 Button('popToIndexWithoutResult', { stateEffect: true, type: ButtonType.Capsule }) 2587 .width('80%') 2588 .height(40) 2589 .margin(20) 2590 .onClick(() => { 2591 this.pathStack.popToIndex(0); 2592 }) 2593 }.width('100%').height('100%') 2594 }.title('pageTwo') 2595 .onBackPressed(() => { 2596 this.pathStack.pop(new resultClass(0)); // Return to the previous page and pass in the processing result to the onPop callback of push. 2597 return true; 2598 }).onReady((context: NavDestinationContext) => { 2599 this.pathStack = context.pathStack 2600 }) 2601 } 2602} 2603``` 2604```json 2605// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 2606// route_map.json 2607{ 2608 "routerMap": [ 2609 { 2610 "name": "pageOne", 2611 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 2612 "buildFunction": "PageOneBuilder", 2613 "data": { 2614 "description": "this is pageOne" 2615 } 2616 }, 2617 { 2618 "name": "pageTwo", 2619 "pageSourceFile": "src/main/ets/pages/PageTwo.ets", 2620 "buildFunction": "PageTwoBuilder" 2621 } 2622 ] 2623} 2624``` 2625 2626 2627### Example 5 2628 2629This example demonstrates how to set the background color and background blur effect for the title bar of the home page in **Navigation**, as well as for the toolbar and the title bars on the **NavDestination** pages. 2630 2631```ts 2632let COLOR1: string = "#80004AAF"; 2633let COLOR2: string = "#802787D9"; 2634let BLUR_STYLE_1: BlurStyle = BlurStyle.BACKGROUND_THIN; 2635let BLUR_STYLE_2: BlurStyle = BlurStyle.BACKGROUND_THICK; 2636 2637@Component 2638struct BackComponent { 2639 build() { 2640 Row() { 2641 Column() {} 2642 .height('100%') 2643 .backgroundColor("#3D9DB4") 2644 .layoutWeight(9) 2645 Column() {} 2646 .height('100%') 2647 .backgroundColor("17A98D") 2648 .layoutWeight(9) 2649 Column() {} 2650 .height('100%') 2651 .backgroundColor("FFC000") 2652 .layoutWeight(9) 2653 } 2654 .height('100%') 2655 .width('100%') 2656 } 2657} 2658 2659@Component 2660struct ColorAndBlur { 2661 @State useColor1: boolean = true; 2662 @State useBlur1: boolean = true; 2663 2664 build() { 2665 NavDestination() { 2666 Stack({alignContent: Alignment.Center}) { 2667 BackComponent() 2668 .width('100%') 2669 .height('100%') 2670 Column() { 2671 Stack({alignContent: Alignment.Center}) { 2672 Button("switch color") 2673 .onClick(() => { 2674 this.useColor1 = !this.useColor1; 2675 }) 2676 } 2677 .width('100%') 2678 .layoutWeight(1) 2679 Stack({alignContent: Alignment.Center}) { 2680 Button("switch blur") 2681 .onClick(() => { 2682 this.useBlur1 = !this.useBlur1; 2683 }) 2684 } 2685 .width('100%') 2686 .layoutWeight(1) 2687 } 2688 .width('100%') 2689 .height('100%') 2690 }.width('100%') 2691 .height('100%') 2692 } 2693 .width('100%') 2694 .height('100%') 2695 // You can set the background color and background blur style of the title bar. 2696 .title("switch titlebar color and blur", { 2697 backgroundColor: this.useColor1 ? COLOR1 : COLOR2, 2698 backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2, 2699 barStyle: BarStyle.STACK 2700 }) 2701 } 2702} 2703 2704@Entry 2705@Component 2706struct Index { 2707 private stack: NavPathStack = new NavPathStack(); 2708 @State useColor1: boolean = true; 2709 @State useBlur1: boolean = true; 2710 2711 @Builder 2712 PageBuilder(name: string) { 2713 ColorAndBlur() 2714 } 2715 2716 build() { 2717 Navigation(this.stack) { 2718 Stack({alignContent: Alignment.Center}) { 2719 BackComponent() 2720 .width('100%') 2721 .height('100%') 2722 Column() { 2723 Stack({alignContent: Alignment.Center}) { 2724 Button("switch color") 2725 .onClick(() => { 2726 this.useColor1 = !this.useColor1; 2727 }) 2728 } 2729 .width('100%') 2730 .layoutWeight(1) 2731 Stack({alignContent: Alignment.Center}) { 2732 Button("switch blur") 2733 .onClick(() => { 2734 this.useBlur1 = !this.useBlur1; 2735 }) 2736 } 2737 .width('100%') 2738 .layoutWeight(1) 2739 Stack({alignContent: Alignment.Center}) { 2740 Button("push page") 2741 .onClick(() => { 2742 this.stack.pushPath({name: "page"}) 2743 }) 2744 } 2745 .width('100%') 2746 .layoutWeight(1) 2747 } 2748 .width('100%') 2749 .height('80%') 2750 }.width('100%') 2751 .height('100%') 2752 } 2753 .width('100%') 2754 .height('100%') 2755 .navDestination(this.PageBuilder) 2756 // You can set the background color and background blur style of the title bar. 2757 .title("NavTitle", { 2758 backgroundColor: this.useColor1 ? COLOR1 : COLOR2, 2759 backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2, 2760 barStyle: BarStyle.STACK 2761 }) 2762 // You can set the background color and background blur style of the toolbar. 2763 .toolbarConfiguration([ 2764 {value: "a"}, 2765 {value: "b"}, 2766 {value: "c"} 2767 ], { 2768 backgroundColor: this.useColor1 ? COLOR1 : COLOR2, 2769 backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2 2770 }) 2771 } 2772} 2773``` 2774 2775 2776### Example 6 2777 2778This example shows how to obtain the parent navigation path stack for a nested **Navigation** component. 2779 2780```ts 2781@Entry 2782@Component 2783struct NavigationExample1 { 2784 @State childNavStack: NavPathStack = new NavPathStack(); 2785 2786 build() { 2787 Navigation() { 2788 Stack({alignContent: Alignment.Center}) { 2789 Navigation(this.childNavStack) { 2790 Button('push Path to parent Navigation', { stateEffect: true, type: ButtonType.Capsule }) 2791 .width('80%') 2792 .height(40) 2793 .margin(20) 2794 .onClick(() => { 2795 // The parent the parent navigation path stack can be obtained. 2796 let parentStack = this.childNavStack.getParent(); 2797 parentStack?.pushPath({ name: "pageOne"}) 2798 }) 2799 } 2800 .clip(true) 2801 .backgroundColor(Color.Orange) 2802 .width('80%') 2803 .height('80%') 2804 .title('ChildNavigation') 2805 } 2806 .width('100%') 2807 .height('100%') 2808 } 2809 .backgroundColor(Color.Green) 2810 .width('100%') 2811 .height('100%') 2812 .title('ParentNavigation') 2813 } 2814} 2815``` 2816```ts 2817// PageOne.ets 2818 @Builder 2819 export function PageOneBuilder(name: string) { 2820 NavDestination() { 2821 Text("this is " + name) 2822 } 2823 .title(name) 2824 } 2825``` 2826```json 2827// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 2828// route_map.json 2829{ 2830 "routerMap": [ 2831 { 2832 "name": "pageOne", 2833 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 2834 "buildFunction": "PageOneBuilder", 2835 "data": { 2836 "description": "this is pageOne" 2837 } 2838 } 2839 ] 2840} 2841``` 2842 2843 2844### Example 7 2845 2846This example demonstrates the following: 2847 28481. The navigation stack operation can be conducted even when **NavPathStack** is not declared as a state variable. 2849 28502. The **NavDestination** can obtain the corresponding **NavPathInfo** and **NavPathStack** through the **onReady** event. 2851 2852```ts 2853class PageParam { 2854 constructor(num_: number) { 2855 this.num = num_; 2856 } 2857 num: number = 0; 2858} 2859 2860@Builder 2861export function PageOneBuilder(name: string, param: Object) { 2862 PageOne() 2863} 2864 2865@Component 2866struct PageOne { 2867 private stack: NavPathStack | null = null; 2868 private name: string = ""; 2869 private paramNum: number = 0; 2870 2871 build() { 2872 NavDestination() { 2873 Column() { 2874 Text("NavPathInfo: name: " + this.name + ", paramNum: " + this.paramNum) 2875 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 2876 .width('80%') 2877 .height(40) 2878 .margin(20) 2879 .onClick(() => { 2880 if (this.stack) { 2881 let p = new PageParam(this.paramNum + 1); 2882 this.stack.pushPath({name: "pageOne", param: p}); 2883 } 2884 }) 2885 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 2886 .width('80%') 2887 .height(40) 2888 .margin(20) 2889 .onClick(() => { 2890 this.stack?.pop() 2891 }) 2892 } 2893 .width('100%') 2894 .height('100%') 2895 } 2896 .title('pageOne') 2897 .onReady((ctx: NavDestinationContext) => { 2898 // The passed NavPathInfo and the owning NavPathStack objects can be obtained for <NavDestination>. 2899 try { 2900 this.name = ctx?.pathInfo?.name; 2901 this.paramNum = (ctx?.pathInfo?.param as PageParam)?.num; 2902 this.stack = ctx.pathStack; 2903 } catch (e) { 2904 console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`) 2905 } 2906 }) 2907 } 2908} 2909 2910@Entry 2911@Component 2912struct NavigationExample2 { 2913 private stack : NavPathStack = new NavPathStack(); 2914 2915 build() { 2916 Navigation(this.stack) { 2917 Stack({alignContent: Alignment.Center}) { 2918 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 2919 .width('80%') 2920 .height(40) 2921 .margin(20) 2922 .onClick(() => { 2923 let p = new PageParam(1); 2924 this.stack.pushPath({ name: "pageOne", param: p }) 2925 }) 2926 } 2927 .width('100%') 2928 .height('100%') 2929 } 2930 .width('100%') 2931 .height('100%') 2932 .title('Navigation') 2933 } 2934} 2935``` 2936```json 2937// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 2938// route_map.json 2939{ 2940 "routerMap": [ 2941 { 2942 "name": "pageOne", 2943 "pageSourceFile": "src/main/ets/pages/Index.ets", 2944 "buildFunction": "PageOneBuilder", 2945 "data": { 2946 "description": "this is pageOne" 2947 } 2948 } 2949 ] 2950} 2951``` 2952 2953 2954### Example 8 2955 2956This example demonstrates the lifecycle timing of **NavDestination**. 2957 2958```ts 2959@Builder 2960export function PageOneBuilder(name: string, param: Object) { 2961 PageOneComponent() 2962} 2963 2964@Component 2965struct PageOneComponent { 2966 private stack: NavPathStack | null = null; 2967 @State eventStr: string = ""; 2968 2969 build() { 2970 NavDestination() { 2971 Column() { 2972 Text("event: " + this.eventStr) 2973 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 2974 .width('80%') 2975 .height(40) 2976 .margin(20) 2977 .onClick(() => { 2978 if (this.stack) { 2979 this.stack.pushPath({name: "pageOne"}); 2980 } 2981 }) 2982 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 2983 .width('80%') 2984 .height(40) 2985 .margin(20) 2986 .onClick(() => { 2987 this.stack?.pop() 2988 }) 2989 } 2990 .width('100%') 2991 .height('100%') 2992 } 2993 .title('pageOne') 2994 .onAppear(() => { this.eventStr += "<onAppear>"; }) 2995 .onDisAppear(() => { this.eventStr += "<onDisAppear>"; }) 2996 .onShown(() => { this.eventStr += "<onShown>"; }) 2997 .onHidden(() => { this.eventStr += "<onHidden>"; }) 2998 .onWillAppear(() => { this.eventStr += "<onWillAppear>"; }) 2999 .onWillDisappear(() => { this.eventStr += "<onWillDisappear>"; }) 3000 .onWillShow(() => { this.eventStr += "<onWillShow>"; }) 3001 .onWillHide(() => { this.eventStr += "<onWillHide>"; }) 3002 // onReady is called before onAppear. 3003 .onReady((ctx: NavDestinationContext) => { 3004 try { 3005 this.eventStr += "<onReady>"; 3006 this.stack = ctx.pathStack; 3007 } catch (e) { 3008 console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`) 3009 } 3010 }) 3011 } 3012} 3013 3014@Entry 3015@Component 3016struct NavigationExample3 { 3017 private stack : NavPathStack = new NavPathStack(); 3018 3019 build() { 3020 Navigation(this.stack) { 3021 Stack({alignContent: Alignment.Center}) { 3022 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 3023 .width('80%') 3024 .height(40) 3025 .margin(20) 3026 .onClick(() => { 3027 this.stack.pushPath({ name: "pageOne" }) 3028 }) 3029 } 3030 .width('100%') 3031 .height('100%') 3032 } 3033 .width('100%') 3034 .height('100%') 3035 .title('Navigation') 3036 } 3037} 3038``` 3039```json 3040// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 3041// route_map.json 3042{ 3043 "routerMap": [ 3044 { 3045 "name": "pageOne", 3046 "pageSourceFile": "src/main/ets/pages/Index.ets", 3047 "buildFunction": "PageOneBuilder", 3048 "data": { 3049 "description": "this is pageOne" 3050 } 3051 } 3052 ] 3053} 3054``` 3055 3056 3057 3058### Example 9 3059 3060This example demonstrates the stack layout of the title bar in the **Navigation** component. 3061 3062```ts 3063@Entry 3064@Component 3065struct NavigationExample { 3066 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; 3067 private scrollerForScroll: Scroller = new Scroller(); 3068 @State barStyle: BarStyle = BarStyle.STANDARD; 3069 3070 build() { 3071 Column() { 3072 Navigation() { 3073 Column() { 3074 Scroll(this.scrollerForScroll) { 3075 Column() { 3076 Image($r('app.media.image_1')) 3077 // Set the height to be the same as that of the title bar to better observe the stack effect. 3078 .height(138) 3079 .width('100%') 3080 Button('BarStyle.STANDARD') 3081 .height('50vp') 3082 .onClick(() => { 3083 this.barStyle = BarStyle.STANDARD; 3084 }) 3085 Button('BarStyle.STACK') 3086 .height('50vp') 3087 .margin({ top: 12 }) 3088 .onClick(() => { 3089 this.barStyle = BarStyle.STACK; 3090 }) 3091 3092 ForEach(this.arr, (item: number) => { 3093 ListItem() { 3094 Text('' + item) 3095 .width('100%') 3096 .height(100) 3097 .fontSize(16) 3098 .textAlign(TextAlign.Center) 3099 .borderRadius(10) 3100 .backgroundColor(Color.Orange) 3101 .margin({ top: 12 }) 3102 } 3103 }, (item: string) => item) 3104 } 3105 } 3106 } 3107 .width('100%') 3108 .height('100%') 3109 .backgroundColor(0xDCDCDC) 3110 } 3111 .title( 3112 { 3113 main: 'NavTitle', 3114 sub: 'subtitle' 3115 }, 3116 { 3117 backgroundBlurStyle: BlurStyle.COMPONENT_THICK, 3118 barStyle: this.barStyle, 3119 } 3120 ) 3121 .titleMode(NavigationTitleMode.Free) 3122 .hideTitleBar(false) 3123 }.width('100%').height('100%').backgroundColor('#F1F3F5') 3124 } 3125} 3126``` 3127 3128 3129 3130### Example 10 3131 3132This example demonstrates how to define a derived class of **NavPathStack** and the basic usage of the derived class in **Navigation**. 3133 3134```ts 3135class DerivedNavPathStack extends NavPathStack { 3136 // usr defined property 'id' 3137 id: string = "__default__" 3138 3139 // new function in derived class 3140 setId(id: string) { 3141 this.id = id; 3142 } 3143 3144 // new function in derived class 3145 getInfo(): string { 3146 return "this page used Derived NavPathStack, id: " + this.id 3147 } 3148 3149 // overwrite function of NavPathStack 3150 pushPath(info: NavPathInfo, animated?: boolean): void 3151 pushPath(info: NavPathInfo, options?: NavigationOptions): void 3152 pushPath(info: NavPathInfo, secArg?: boolean | NavigationOptions): void { 3153 console.log('[derive-test] reached DerivedNavPathStack\'s pushPath'); 3154 if (typeof secArg === 'boolean') { 3155 super.pushPath(info, secArg); 3156 } else { 3157 super.pushPath(info, secArg); 3158 } 3159 } 3160 3161 // overwrite and overload function of NavPathStack 3162 pop(animated?: boolean | undefined): NavPathInfo | undefined 3163 pop(result: Object, animated?: boolean | undefined): NavPathInfo | undefined 3164 pop(result?: Object, animated?: boolean | undefined): NavPathInfo | undefined { 3165 console.log('[derive-test] reached DerivedNavPathStack\'s pop'); 3166 return super.pop(result, animated); 3167 } 3168 3169 // other function of base class... 3170} 3171 3172class param { 3173 info: string = "__default_param__"; 3174 constructor(info: string) { this.info = info } 3175} 3176 3177@Entry 3178@Component 3179struct Index { 3180 derivedStack: DerivedNavPathStack = new DerivedNavPathStack(); 3181 3182 aboutToAppear(): void { 3183 this.derivedStack.setId('origin stack'); 3184 } 3185 3186 @Builder 3187 pageMap(name: string) { 3188 PageOne() 3189 } 3190 3191 build() { 3192 Navigation(this.derivedStack) { 3193 Button('to Page One').margin(20).onClick(() => { 3194 this.derivedStack.pushPath({ 3195 name: 'pageOne', 3196 param: new param('push pageOne in homePage when stack size: ' + this.derivedStack.size()) 3197 }); 3198 }) 3199 }.navDestination(this.pageMap) 3200 .title('Home Page') 3201 } 3202} 3203 3204@Component 3205struct PageOne { 3206 derivedStack: DerivedNavPathStack = new DerivedNavPathStack(); 3207 curStringifyParam: string = "NA"; 3208 3209 build() { 3210 NavDestination() { 3211 Column() { 3212 Text(this.derivedStack.getInfo()) 3213 .margin(10) 3214 .fontSize(25) 3215 .fontWeight(FontWeight.Bold) 3216 .textAlign(TextAlign.Start) 3217 Text('current page param info:') 3218 .margin(10) 3219 .fontSize(25) 3220 .fontWeight(FontWeight.Bold) 3221 .textAlign(TextAlign.Start) 3222 Text(this.curStringifyParam) 3223 .margin(20) 3224 .fontSize(20) 3225 .textAlign(TextAlign.Start) 3226 }.backgroundColor(Color.Pink) 3227 Button('to Page One').margin(20).onClick(() => { 3228 this.derivedStack.pushPath({ 3229 name: 'pageOne', 3230 param: new param('push pageOne in pageOne when stack size: ' + this.derivedStack.size()) 3231 }); 3232 }) 3233 }.title('Page One') 3234 .onReady((context: NavDestinationContext) => { 3235 console.log('[derive-test] reached PageOne\'s onReady'); 3236 // get derived stack from navdestinationContext 3237 this.derivedStack = context.pathStack as DerivedNavPathStack; 3238 console.log('[derive-test] -- got derivedStack: ' + this.derivedStack.id); 3239 this.curStringifyParam = JSON.stringify(context.pathInfo.param); 3240 console.log('[derive-test] -- got param: ' + this.curStringifyParam); 3241 }) 3242 } 3243} 3244``` 3245 3246 3247### Example 11 3248 3249This example shows how to use symbol icons in **Navigation** and **NavDestination**. 3250 3251```ts 3252import { SymbolGlyphModifier } from '@kit.ArkUI'; 3253 3254@Entry 3255@Component 3256struct NavigationExample { 3257 @Provide('navPathStack') navPathStack:NavPathStack = new NavPathStack(); 3258 @State menuItems:Array<NavigationMenuItem> = [ 3259 { 3260 value:'menuItem1', 3261 icon:'resources/base/media/ic_public_ok.svg' // Icon resource path. 3262 }, 3263 { 3264 value:'menuItem2', 3265 icon:'resources/base/media/ic_public_ok.svg', // Icon resource path. 3266 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Red,Color.Green]).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR), 3267 }, 3268 { 3269 value:'menuItem3', 3270 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')), 3271 }, 3272 ] 3273 3274 @State toolItems:Array<ToolbarItem>= [ 3275 { 3276 value:'toolItem1', 3277 icon:'resources/base/media/ic_public_ok.svg', // Icon resource path. 3278 symbolIcon:new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')), 3279 status:ToolbarItemStatus.ACTIVE, 3280 activeSymbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Red,Color.Green]).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR), 3281 action:()=>{} 3282 }, 3283 { 3284 value:'toolItem2', 3285 symbolIcon:new SymbolGlyphModifier($r('sys.symbol.ohos_star')), 3286 status:ToolbarItemStatus.ACTIVE, 3287 activeIcon: 'resources/base/media/ic_public_more.svg', // Icon resource path. 3288 action:()=>{} 3289 }, 3290 { 3291 value:'toolItem3', 3292 symbolIcon:new SymbolGlyphModifier($r('sys.symbol.ohos_star')), 3293 status:ToolbarItemStatus.ACTIVE, 3294 activeSymbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')), 3295 action:()=>{} 3296 } 3297 ] 3298 3299 @Builder 3300 myRouter(name:string,param?:Object) { 3301 if(name === 'NavigationMenu') { 3302 NavigationMenu(); 3303 } 3304 } 3305 3306 build() { 3307 Navigation(this.navPathStack) { 3308 Column() { 3309 Button('Go').onClick(()=> { 3310 this.navPathStack.pushPathByName('NavigationMenu', null); 3311 }) 3312 } 3313 } 3314 .backButtonIcon(new SymbolGlyphModifier($r('sys.symbol.ohos_wifi'))) 3315 .titleMode(NavigationTitleMode.Mini) 3316 .menus(this.menuItems) 3317 .toolbarConfiguration(this.toolItems) 3318 .title('Level-1 page') 3319 .navDestination(this.myRouter) 3320 } 3321} 3322 3323@Component 3324export struct NavigationMenu{ 3325 @Consume('navPathStack') navPathStack:NavPathStack; 3326 @State menuItems:Array<NavigationMenuItem> = [ 3327 { 3328 value:'menuItem1', 3329 icon:'resources/base/media/ic_public_ok.svg', // Icon resource path. 3330 action:()=>{} 3331 }, 3332 { 3333 value:'menuItem2', 3334 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Red,Color.Green]).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR), 3335 action:()=>{} 3336 }, 3337 { 3338 value:'menuItem3', 3339 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.repeat_1')), 3340 action:()=>{} 3341 }, 3342 ] 3343 3344 build() { 3345 NavDestination(){ 3346 Row() { 3347 Column(){ 3348 } 3349 .width('100%') 3350 } 3351 .height('100%') 3352 } 3353 .hideTitleBar(false) 3354 .title('NavDestination title') 3355 .backgroundColor($r('sys.color.ohos_id_color_titlebar_sub_bg')) 3356 .backButtonIcon(new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Blue])) 3357 .menus(this.menuItems) 3358 } 3359} 3360``` 3361 3362 3363### Example 12 3364 3365This example demonstrates how to set custom title bar padding in **Navigation** and **NavDestination**, and how to modify the main title and subtitle text styles through **TextModifier**. 3366 3367```ts 3368import { LengthMetrics } from '@kit.ArkUI'; 3369import { TextModifier } from '@ohos.arkui.modifier'; 3370 3371class MainTitleTextModfier extends TextModifier { 3372 useStyle1: boolean = true; 3373 applyNormalAttribute(instance: TextModifier): void { 3374 if (this.useStyle1) { 3375 console.log(`testTag mainTitle use style1`); 3376 instance.fontColor('#FFFFC000') 3377 instance.fontSize(35) 3378 instance.fontWeight(FontWeight.Bolder) 3379 instance.fontStyle(FontStyle.Normal) 3380 instance.textShadow({radius: 5, offsetX: 9}) 3381 } else { 3382 console.log(`testTag mainTitle use style2`); 3383 instance.fontColor('#FF23A98D') 3384 instance.fontSize(20) 3385 instance.heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST) 3386 instance.fontWeight(FontWeight.Lighter) 3387 instance.fontStyle(FontStyle.Italic) 3388 instance.textShadow({radius: 3, offsetX: 3}) 3389 } 3390 } 3391} 3392 3393class SubTitleTextModfier extends TextModifier { 3394 useStyle1: boolean = true; 3395 applyNormalAttribute(instance: TextModifier): void { 3396 if (this.useStyle1) { 3397 console.log(`testTag subTitle use style1`); 3398 instance.fontColor('#FFFFC000') 3399 instance.fontSize(15) 3400 instance.fontWeight(FontWeight.Bolder) 3401 instance.fontStyle(FontStyle.Normal) 3402 instance.textShadow({radius: 5, offsetX: 9}) 3403 } else { 3404 console.log(`testTag subTitle use style2`); 3405 instance.fontColor('#FF23A98D') 3406 instance.fontSize(10) 3407 instance.fontWeight(FontWeight.Lighter) 3408 instance.fontStyle(FontStyle.Italic) 3409 instance.textShadow({radius: 3, offsetX: 3}) 3410 } 3411 } 3412} 3413 3414@Entry 3415@Component 3416struct NavigationExample { 3417 private navPathStack: NavPathStack = new NavPathStack(); 3418 // Assign an initial padding at the start of the title bar. 3419 @State paddingStart: LengthMetrics = LengthMetrics.vp(0); 3420 // Assign an initial padding at the end of the title bar. 3421 @State paddingEnd: LengthMetrics = LengthMetrics.vp(0); 3422 // Main title attribute modifier. 3423 @State mainTitleModifier: MainTitleTextModfier = new MainTitleTextModfier(); 3424 // Subtitle attribute modifier. 3425 @State subTitleModifier: SubTitleTextModfier = new SubTitleTextModfier(); 3426 @State applyModifier: boolean = false; 3427 @State useStyle1: boolean = true; 3428 3429 @Builder 3430 myRouter(name: string, param?: Object) { 3431 if (name === 'NavDestinationExample') { 3432 NavDestinationExample(); 3433 } 3434 } 3435 3436 build() { 3437 Navigation(this.navPathStack) { 3438 Column() { 3439 // Switch between padding values for the title bar. 3440 Button('apply padding 32vp') 3441 .onClick(() => { 3442 this.paddingStart = LengthMetrics.vp(32); 3443 this.paddingEnd = LengthMetrics.vp(32); 3444 }) 3445 .margin({top: 70}) 3446 .width(180) 3447 Button('apply padding 20vp') 3448 .onClick(() => { 3449 this.paddingStart = LengthMetrics.vp(20); 3450 this.paddingEnd = LengthMetrics.vp(20); 3451 }) 3452 .margin({top: 40}) 3453 .width(180) 3454 Button('pushPage') 3455 .onClick(() => { 3456 this.navPathStack.pushPath({name: 'NavDestinationExample'}) 3457 }) 3458 .margin({top: 40}) 3459 .width(180) 3460 Row() { 3461 Text(`apply Modifier`) 3462 Toggle({isOn: this.applyModifier, type: ToggleType.Switch}).onChange((isOn: boolean) => { 3463 this.applyModifier = isOn; 3464 }) 3465 } 3466 .padding({ top: 95, left: 5, right: 5 }) 3467 .width(180) 3468 .justifyContent(FlexAlign.SpaceBetween) 3469 Row() { 3470 Text(`use Style1`) 3471 Toggle({isOn: this.useStyle1, type: ToggleType.Switch}).onChange((isOn: boolean) => { 3472 this.mainTitleModifier.useStyle1 = isOn; 3473 this.subTitleModifier.useStyle1 = isOn; 3474 this.useStyle1 = isOn; 3475 }) 3476 } 3477 .padding({ top: 40, left: 5, right: 5 }) 3478 .width(180) 3479 .justifyContent(FlexAlign.SpaceBetween) 3480 } 3481 .width('100%') 3482 .height('100%') 3483 } 3484 .titleMode(NavigationTitleMode.Full) 3485 .title( 3486 {main: "Title", sub: "subTitle"}, 3487 this.applyModifier ? 3488 { 3489 paddingStart: this.paddingStart, 3490 paddingEnd: this.paddingEnd, 3491 mainTitleModifier: this.mainTitleModifier, 3492 subTitleModifier: this.subTitleModifier, 3493 } : { 3494 paddingStart: this.paddingStart, 3495 paddingEnd: this.paddingEnd 3496 }) 3497 .navDestination(this.myRouter) 3498 } 3499} 3500 3501@Component 3502export struct NavDestinationExample { 3503 @State menuItems: Array<NavigationMenuItem> = [ 3504 { 3505 value: 'menuItem1', 3506 icon: 'resources/base/media/ic_public_ok.svg', // Icon resource path. 3507 action: () => { 3508 } 3509 } 3510 ] 3511 @State paddingStart: LengthMetrics = LengthMetrics.vp(0); 3512 @State paddingEnd: LengthMetrics = LengthMetrics.vp(0); 3513 // Main title attribute modifier. 3514 @State mainTitleModifier: MainTitleTextModfier = new MainTitleTextModfier(); 3515 // Subtitle attribute modifier. 3516 @State subTitleModifier: SubTitleTextModfier = new SubTitleTextModfier(); 3517 @State applyModifier: boolean = false; 3518 @State useStyle1: boolean = true; 3519 3520 build() { 3521 NavDestination() { 3522 Column() { 3523 // Switch between padding values for the title bar. 3524 Button('apply padding 32vp') 3525 .onClick(() => { 3526 this.paddingStart = LengthMetrics.vp(32); 3527 this.paddingEnd = LengthMetrics.vp(32); 3528 }) 3529 .margin({top: 150}) 3530 .width(180) 3531 Button('apply padding 20vp') 3532 .onClick(() => { 3533 this.paddingStart = LengthMetrics.vp(20); 3534 this.paddingEnd = LengthMetrics.vp(20); 3535 }) 3536 .margin({top: 40}) 3537 .width(180) 3538 Row() { 3539 Text(`apply Modifier`) 3540 Toggle({isOn: this.applyModifier, type: ToggleType.Switch}).onChange((isOn: boolean) => { 3541 this.applyModifier = isOn; 3542 }) 3543 } 3544 .padding({ top: 95, left: 5, right: 5 }) 3545 .width(180) 3546 .justifyContent(FlexAlign.SpaceBetween) 3547 Row() { 3548 Text(`use Style1`) 3549 Toggle({isOn: this.useStyle1, type: ToggleType.Switch}).onChange((isOn: boolean) => { 3550 this.mainTitleModifier.useStyle1 = isOn; 3551 this.subTitleModifier.useStyle1 = isOn; 3552 this.useStyle1 = isOn; 3553 }) 3554 } 3555 .padding({ top: 40, left: 5, right: 5 }) 3556 .width(180) 3557 .justifyContent(FlexAlign.SpaceBetween) 3558 } 3559 .width('100%') 3560 .height('90%') 3561 } 3562 .hideTitleBar(false) 3563 .title( 3564 {main: "Title", sub: "subTitle"}, 3565 this.applyModifier ? 3566 { 3567 paddingStart: this.paddingStart, 3568 paddingEnd: this.paddingEnd, 3569 mainTitleModifier: this.mainTitleModifier, 3570 subTitleModifier: this.subTitleModifier, 3571 } : { 3572 paddingStart: this.paddingStart, 3573 paddingEnd: this.paddingEnd 3574 }) 3575 .menus(this.menuItems) 3576 } 3577} 3578``` 3579 3580
