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 1475## NavigationToolbarOptions<sup>11+</sup> 1476 1477**Atomic service API**: This API can be used in atomic services since API version 11. 1478 1479**System capability**: SystemCapability.ArkUI.ArkUI.Full 1480 1481| Name | Type | Mandatory | Description | 1482| ------ | ------------- | ---- | --------------- | 1483| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the toolbar. If this parameter is not set, the default color is used.| 1484| 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.| 1485 1486## LaunchMode<sup>12+</sup> 1487 1488**Atomic service API**: This API can be used in atomic services since API version 12. 1489 1490**System capability**: SystemCapability.ArkUI.ArkUI.Full 1491 1492| Name | Description | 1493| --------- | ------ | 1494| 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.| 1495| 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**.| 1496| 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**.| 1497| 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.| 1498 1499## NavigationOptions<sup>12+</sup> 1500 1501**Atomic service API**: This API can be used in atomic services since API version 12. 1502 1503**System capability**: SystemCapability.ArkUI.ArkUI.Full 1504 1505| Name | Type | Mandatory | Description | 1506| ------ | ------------- | ---- | --------------- | 1507| launchMode | [LaunchMode](#launchmode12) | No | Navigation stack operation mode.<br>Default value: **LaunchMode.STANDARD**| 1508| animated | boolean | No | Whether to support transition animation.<br>Default value: **true**| 1509 1510## Example 1511 1512### Example 1 1513 1514This example demonstrates the page layout of the **Navigation** component. 1515 1516```ts 1517// xxx.ets 1518class A { 1519 text: string = '' 1520 num: number = 0 1521} 1522 1523@Entry 1524@Component 1525struct NavigationExample { 1526 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 1527 @State currentIndex: number = 0 1528 1529 @Builder NavigationTitle() { 1530 Column() { 1531 Text('Title') 1532 .fontColor('#182431') 1533 .fontSize(30) 1534 .lineHeight(41) 1535 .fontWeight(700) 1536 Text('subtitle') 1537 .fontColor('#182431') 1538 .fontSize(14) 1539 .lineHeight(19) 1540 .opacity(0.4) 1541 .margin({ top: 2, bottom: 20 }) 1542 }.alignItems(HorizontalAlign.Start) 1543 } 1544 1545 @Builder NavigationMenus() { 1546 Row() { 1547 Image('resources/base/media/ic_public_add.svg') 1548 .width(24) 1549 .height(24) 1550 Image('resources/base/media/ic_public_add.svg') 1551 .width(24) 1552 .height(24) 1553 .margin({ left: 24 }) 1554 Image('common/ic_public_more.svg') 1555 .width(24) 1556 .height(24) 1557 .margin({ left: 24 }) 1558 } 1559 } 1560 1561 build() { 1562 Column() { 1563 Navigation() { 1564 TextInput({ placeholder: 'search...' }) 1565 .width('90%') 1566 .height(40) 1567 .backgroundColor('#FFFFFF') 1568 .margin({ top: 8 }) 1569 1570 List({ space: 12, initialIndex: 0 }) { 1571 ForEach(this.arr, (item: number) => { 1572 ListItem() { 1573 Text('' + item) 1574 .width('90%') 1575 .height(72) 1576 .backgroundColor('#FFFFFF') 1577 .borderRadius(24) 1578 .fontSize(16) 1579 .fontWeight(500) 1580 .textAlign(TextAlign.Center) 1581 } 1582 }, (item: number) => item.toString()) 1583 } 1584 .height(324) 1585 .width('100%') 1586 .margin({ top: 12, left: '10%' }) 1587 } 1588 .title(this.NavigationTitle) 1589 .menus(this.NavigationMenus) 1590 .titleMode(NavigationTitleMode.Full) 1591 .toolbarConfiguration([ 1592 { 1593 value: $r("app.string.navigation_toolbar_add"), 1594 icon: $r("app.media.ic_public_highlightsed") 1595 }, 1596 { 1597 value: $r("app.string.navigation_toolbar_app"), 1598 icon: $r("app.media.ic_public_highlights") 1599 }, 1600 { 1601 value: $r("app.string.navigation_toolbar_collect"), 1602 icon: $r("app.media.ic_public_highlights") 1603 } 1604 ]) 1605 .hideTitleBar(false) 1606 .hideToolBar(false) 1607 .onTitleModeChange((titleModel: NavigationTitleMode) => { 1608 console.info('titleMode' + titleModel) 1609 }) 1610 }.width('100%').height('100%').backgroundColor('#F1F3F5') 1611 } 1612} 1613``` 1614 1615 1616 1617 1618 1619### Example 2 1620 1621This example demonstrates the use of methods in **NavPathStack** and route interception. 1622 1623```ts 1624// Index.ets 1625 1626@Entry 1627@Component 1628struct NavigationExample { 1629 pageInfos: NavPathStack = new NavPathStack() 1630 isUseInterception: boolean = false; 1631 1632 registerInterception() { 1633 this.pageInfos.setInterception({ 1634 willShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar", 1635 operation: NavigationOperation, animated: boolean) => { 1636 if (!this.isUseInterception) { 1637 return; 1638 } 1639 if (typeof to === "string") { 1640 console.log("target page is navigation home"); 1641 return; 1642 } 1643 // redirect target page.Change pageTwo to pageOne. 1644 let target: NavDestinationContext = to as NavDestinationContext; 1645 if (target.pathInfo.name === 'pageTwo') { 1646 target.pathStack.pop(); 1647 target.pathStack.pushPathByName('pageOne', null); 1648 } 1649 }, 1650 didShow: (from: NavDestinationContext | "navBar", to: NavDestinationContext | "navBar", 1651 operation: NavigationOperation, isAnimated: boolean) => { 1652 if (!this.isUseInterception) { 1653 return; 1654 } 1655 if (typeof from === "string") { 1656 console.log("current transition is from navigation home"); 1657 } else { 1658 console.log(`current transition is from ${(from as NavDestinationContext).pathInfo.name}`) 1659 } 1660 if (typeof to === "string") { 1661 console.log("current transition to is navBar"); 1662 } else { 1663 console.log(`current transition is to ${(to as NavDestinationContext).pathInfo.name}`); 1664 } 1665 }, 1666 modeChange: (mode: NavigationMode) => { 1667 if (!this.isUseInterception) { 1668 return; 1669 } 1670 console.log(`current navigation mode is ${mode}`); 1671 } 1672 }) 1673 } 1674 1675 build() { 1676 Navigation(this.pageInfos) { 1677 Column() { 1678 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 1679 .width('80%') 1680 .height(40) 1681 .margin(20) 1682 .onClick(() => { 1683 this.pageInfos.pushPath({ name:'pageOne'}) // Push the navigation destination page specified by name to the navigation stack. 1684 }) 1685 Button('use interception', { stateEffect: true, type: ButtonType.Capsule }) 1686 .width('80%') 1687 .height(40) 1688 .margin(20) 1689 .onClick(() => { 1690 this.isUseInterception = !this.isUseInterception; 1691 if (this.isUseInterception) { 1692 this.registerInterception(); 1693 } else { 1694 this.pageInfos.setInterception(undefined); 1695 } 1696 }) 1697 } 1698 }.title('NavIndex') 1699 } 1700} 1701``` 1702```ts 1703// PageOne.ets 1704class TmpClass{ 1705 count:number=10 1706} 1707 1708@Builder 1709export function PageOneBuilder(name: string, param: Object) { 1710 PageOne() 1711} 1712 1713@Component 1714export struct PageOne { 1715 1716 pageInfos: NavPathStack = new NavPathStack() 1717 1718 build() { 1719 NavDestination() { 1720 Column() { 1721 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 1722 .width('80%') 1723 .height(40) 1724 .margin(20) 1725 .onClick(() => { 1726 let tmp = new TmpClass() 1727 this.pageInfos.pushPathByName('pageTwo', tmp) // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 1728 }) 1729 Button('singletonLaunchMode', { stateEffect: true, type: ButtonType.Capsule }) 1730 .width('80%') 1731 .height(40) 1732 .margin(20) 1733 .onClick(() => { 1734 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. 1735 }) 1736 Button('popToname', { stateEffect: true, type: ButtonType.Capsule }) 1737 .width('80%') 1738 .height(40) 1739 .margin(20) 1740 .onClick(() => { 1741 this.pageInfos.popToName('pageTwo') // Pop the first navigation destination page that matches the value of name to the top of the navigation stack. 1742 console.log('popToName' + JSON.stringify(this.pageInfos), 'Return value' + JSON.stringify(this.pageInfos.popToName('pageTwo'))) 1743 }) 1744 Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule }) 1745 .width('80%') 1746 .height(40) 1747 .margin(20) 1748 .onClick(() => { 1749 this.pageInfos.popToIndex(1) // Return the navigation stack to the navigation destination page that matches the value of index. 1750 console.log('popToIndex' + JSON.stringify(this.pageInfos)) 1751 }) 1752 Button('moveToTop', { stateEffect: true, type: ButtonType.Capsule }) 1753 .width('80%') 1754 .height(40) 1755 .margin(20) 1756 .onClick(() => { 1757 this.pageInfos.moveToTop('pageTwo') // Move to the top of the navigation stack the first navigation destination page that matches the value of name. 1758 console.log('moveToTop' + JSON.stringify(this.pageInfos), 'Return value' + JSON.stringify(this.pageInfos.moveToTop('pageTwo'))) 1759 }) 1760 Button('moveIndexToTop', { stateEffect: true, type: ButtonType.Capsule }) 1761 .width('80%') 1762 .height(40) 1763 .margin(20) 1764 .onClick(() => { 1765 this.pageInfos.moveIndexToTop(1) // Move to the top of the navigation stack the navigation destination page that matches the value of index. 1766 console.log('moveIndexToTop' + JSON.stringify(this.pageInfos)) 1767 }) 1768 Button('clear', { stateEffect: true, type: ButtonType.Capsule }) 1769 .width('80%') 1770 .height(40) 1771 .margin(20) 1772 .onClick(() => { 1773 this.pageInfos.clear() // Clear the navigation stack. 1774 }) 1775 Button('get', { stateEffect: true, type: ButtonType.Capsule }) 1776 .width('80%') 1777 .height(40) 1778 .margin(20) 1779 .onClick(() => { 1780 console.log('-------------------') 1781 console.log('Obtained the names of all pages in the navigation stack', JSON.stringify(this.pageInfos.getAllPathName())) 1782 console.log('Obtained parameter information of the navigation destination page specified by index', JSON.stringify(this.pageInfos.getParamByIndex(1))) 1783 console.log('Obtained parameter information of all the navigation destination pages specified by name', JSON.stringify(this.pageInfos.getParamByName('pageTwo'))) 1784 console.log('Obtained the index information of all the navigation destination pages specified by name', JSON.stringify(this.pageInfos.getIndexByName('pageOne')))) 1785 console.log ('Obtained the stack size', JSON.stringify (this.pageInfos.size ())) 1786 }) 1787 }.width('100%').height('100%') 1788 }.title('pageOne') 1789 .onBackPressed(() => { 1790 const popDestinationInfo = this.pageInfos.pop() // Pop the top element out of the navigation stack. 1791 console.log('pop' + 'Return value' + JSON.stringify(popDestinationInfo)) 1792 return true 1793 }).onReady((context: NavDestinationContext) => { 1794 this.pageInfos = context.pathStack 1795 }) 1796 } 1797} 1798``` 1799```ts 1800// PageTwo.ets 1801@Builder 1802export function PageTwoBuilder(name: string, param: Object) { 1803 PageTwo() 1804} 1805 1806@Component 1807export struct PageTwo { 1808 pathStack: NavPathStack = new NavPathStack() 1809 1810 private menuItems: Array<NavigationMenuItem> = [ 1811 { 1812 value: "1", 1813 icon: 'resources/base/media/undo.svg', 1814 }, 1815 { 1816 value: "2", 1817 icon: 'resources/base/media/redo.svg', 1818 isEnabled: false, 1819 }, 1820 { 1821 value: "3", 1822 icon: 'resources/base/media/ic_public_ok.svg', 1823 isEnabled: true, 1824 } 1825 ] 1826 1827 build() { 1828 NavDestination() { 1829 Column() { 1830 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 1831 .width('80%') 1832 .height(40) 1833 .margin(20) 1834 .onClick(() => { 1835 this.pathStack.pushPathByName('pageOne', null) 1836 }) 1837 }.width('100%').height('100%') 1838 }.title('pageTwo') 1839 .menus(this.menuItems) 1840 .onBackPressed(() => { 1841 this.pathStack.pop() 1842 return true 1843 }) 1844 .onReady((context: NavDestinationContext) => { 1845 this.pathStack = context.pathStack; 1846 console.log("current page config info is " + JSON.stringify(context.getConfigInRouteMap())) 1847 }) 1848 } 1849} 1850``` 1851 1852```json 1853// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 1854// route_map.json 1855{ 1856 "routerMap": [ 1857 { 1858 "name": "pageOne", 1859 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 1860 "buildFunction": "PageOneBuilder", 1861 "data": { 1862 "description": "this is pageOne" 1863 } 1864 }, 1865 { 1866 "name": "pageTwo", 1867 "pageSourceFile": "src/main/ets/pages/PageTwo.ets", 1868 "buildFunction": "PageTwoBuilder" 1869 } 1870 ] 1871} 1872``` 1873 1874 1875### Example 3 1876 1877This sample demonstrates how to set a custom transition animation and an interactive transition animation for each **NavDestination** page. 1878 1879```ts 1880// Index.ets 1881import { CustomTransition, AnimateCallback } from './CustomNavigationUtils' 1882 1883@Entry 1884@Component 1885struct NavigationExample { 1886 pageInfos: NavPathStack = new NavPathStack(); 1887 1888 aboutToAppear() { 1889 if (this.pageInfos === undefined) { 1890 this.pageInfos = new NavPathStack(); 1891 } 1892 this.pageInfos.pushPath({ name: 'pageOne', param: CustomTransition.getInstance().getAnimationId() }); 1893 } 1894 1895 build() { 1896 Navigation(this.pageInfos) { 1897 } 1898 .title('NavIndex') 1899 .hideNavBar(true) 1900 .customNavContentTransition((from: NavContentInfo, to: NavContentInfo, operation: NavigationOperation) => { 1901 if (from.mode == NavDestinationMode.DIALOG || to.mode == NavDestinationMode.DIALOG) { 1902 return undefined; 1903 } 1904 1905 // No custom animation for the home page 1906 if (from.index === -1 || to.index === -1) { 1907 return undefined; 1908 } 1909 1910 CustomTransition.getInstance().operation = operation; 1911 if (CustomTransition.getInstance().interactive) { 1912 let customAnimation: NavigationAnimatedTransition = { 1913 onTransitionEnd: (isSuccess: boolean) => { 1914 console.log("===== current transition is " + isSuccess); 1915 CustomTransition.getInstance().recoverState(); 1916 CustomTransition.getInstance().proxy = undefined; 1917 }, 1918 transition: (transitionProxy: NavigationTransitionProxy) => { 1919 CustomTransition.getInstance().proxy = transitionProxy; 1920 let targetIndex: string | undefined = operation == NavigationOperation.PUSH ? 1921 (to.navDestinationId) : (from.navDestinationId); 1922 if (targetIndex) { 1923 CustomTransition.getInstance().fireInteractiveAnimation(targetIndex, operation); 1924 } 1925 }, 1926 isInteractive: CustomTransition.getInstance().interactive 1927 } 1928 return customAnimation; 1929 } 1930 let customAnimation: NavigationAnimatedTransition = { 1931 onTransitionEnd: (isSuccess: boolean)=>{ 1932 console.log(`current transition result is ${isSuccess}`) 1933 }, 1934 timeout: 7000, 1935 // When the transition starts, the system calls this method and passes in the transition context proxy object. 1936 transition: (transitionProxy: NavigationTransitionProxy) => { 1937 if (!from.navDestinationId || !to.navDestinationId) { 1938 return; 1939 } 1940 // Obtain the corresponding transition animation callback from the CustomTransition class based on the sequence of subpages. 1941 let fromParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(from.navDestinationId); 1942 let toParam: AnimateCallback = CustomTransition.getInstance().getAnimateParam(to.navDestinationId); 1943 if (operation == NavigationOperation.PUSH) { 1944 if (toParam.start) { 1945 toParam.start(true, false); 1946 } 1947 animateTo({ 1948 duration: 500, onFinish: () => { 1949 transitionProxy.finishTransition(); 1950 } 1951 }, () => { 1952 if (toParam.finish) { 1953 toParam.finish(true, false); 1954 } 1955 }) 1956 } else { 1957 if (fromParam.start) { 1958 fromParam.start(true, true); 1959 } 1960 animateTo({ 1961 duration: 500, onFinish: () => { 1962 transitionProxy.finishTransition(); 1963 } 1964 }, () => { 1965 if (fromParam.finish) { 1966 fromParam.finish(true, true); 1967 } 1968 }) 1969 } 1970 } 1971 }; 1972 return customAnimation; 1973 }) 1974 } 1975} 1976``` 1977 1978```ts 1979// PageOne.ets 1980import {CustomTransition} from './CustomNavigationUtils'; 1981 1982@Builder 1983export function PageOneBuilder(name: string, param: Object) { 1984 PageOne() 1985} 1986 1987@Component 1988export struct PageOne { 1989 pageInfos: NavPathStack = new NavPathStack(); 1990 @State translateX: string = '0'; 1991 pageId: string = ''; 1992 rectWidth: number = 0; 1993 interactive: boolean = false; 1994 1995 registerCallback() { 1996 CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean) => { 1997 if (isPush) { 1998 this.translateX = '100%'; 1999 } else { 2000 this.translateX = '0'; 2001 } 2002 }, (isPush: boolean, isExit: boolean) => { 2003 if (isPush) { 2004 this.translateX = '0'; 2005 } else { 2006 this.translateX = '100%'; 2007 } 2008 }, (isPush: boolean, isExit: boolean) => { 2009 this.translateX = '0'; 2010 }, (operation: NavigationOperation) => { 2011 if (operation == NavigationOperation.PUSH) { 2012 this.translateX = '100%'; 2013 animateTo({ 2014 duration: 1000, 2015 onFinish: () => { 2016 this.translateX = '0'; 2017 } 2018 }, () => { 2019 this.translateX = '0'; 2020 }) 2021 } else { 2022 this.translateX = '0'; 2023 animateTo({ 2024 duration: 1000, 2025 onFinish: () => { 2026 this.translateX = '0'; 2027 } 2028 }, () => { 2029 this.translateX = '100%'; 2030 }) 2031 } 2032 }, 200); 2033 } 2034 2035 build() { 2036 NavDestination() { 2037 Column() { 2038 Button(`setInteractive`) 2039 .onClick(() => { 2040 CustomTransition.getInstance().interactive = !CustomTransition.getInstance().interactive; 2041 this.interactive = CustomTransition.getInstance().interactive; 2042 }) 2043 2044 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2045 .width('80%') 2046 .height(40) 2047 .margin(20) 2048 .onClick(() => { 2049 // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 2050 this.pageInfos.pushDestinationByName('pageTwo', CustomTransition.getInstance().getAnimationId()); 2051 }) 2052 } 2053 .size({ width: '100%', height: '100%' }) 2054 } 2055 .title('pageOne') 2056 .onDisAppear(() => { 2057 CustomTransition.getInstance().unRegisterNavParam(this.pageId); 2058 }) 2059 .onReady((context: NavDestinationContext) => { 2060 this.pageInfos = context.pathStack; 2061 if (context.navDestinationId) { 2062 this.pageId = context.navDestinationId; 2063 this.registerCallback(); 2064 } 2065 }) 2066 .translate({ x: this.translateX }) 2067 .backgroundColor('#F1F3F5') 2068 .gesture(PanGesture() 2069 .onActionStart((event: GestureEvent) => { 2070 this.rectWidth = event.target.area.width as number; 2071 if (event.offsetX < 0) { 2072 this.pageInfos.pushPath({ name: 'pageTwo', param: CustomTransition.getInstance().getAnimationId() }); 2073 } else { 2074 this.pageInfos.pop(); 2075 } 2076 }) 2077 .onActionUpdate((event: GestureEvent) => { 2078 let rate = event.fingerList[0].localX / this.rectWidth; 2079 CustomTransition.getInstance().updateProgress(rate); 2080 }) 2081 .onActionEnd((event: GestureEvent) => { 2082 let rate: number = event.fingerList[0].localX / this.rectWidth; 2083 CustomTransition.getInstance().finishInteractiveAnimation(rate); 2084 })) 2085 } 2086} 2087``` 2088```ts 2089// PageTwo.ets 2090import {CustomTransition} from './CustomNavigationUtils' 2091 2092@Builder 2093export function PageTwoBuilder(name: string, param: Object) { 2094 PageTwo({param: param as number}) 2095} 2096 2097@Component 2098export struct PageTwo { 2099 pageInfos: NavPathStack = new NavPathStack(); 2100 @State translateX: string = '0'; 2101 pageId: string = ''; 2102 rectWidth: number = 0; 2103 param: number = 0; 2104 2105 registerCallback() { 2106 CustomTransition.getInstance().registerNavParam(this.pageId, (isPush: boolean, isExit: boolean)=>{ 2107 if (isPush) { 2108 this.translateX = '100%' 2109 } else { 2110 this.translateX = '0'; 2111 } 2112 }, (isPush: boolean, isExit: boolean)=>{ 2113 if (isPush) { 2114 this.translateX = '0'; 2115 } else { 2116 this.translateX = '100%' 2117 } 2118 }, (isPush: boolean, isExit: boolean) => { 2119 this.translateX = '0'; 2120 }, (operation: NavigationOperation)=>{ 2121 if (operation == NavigationOperation.PUSH) { 2122 this.translateX = '100%'; 2123 animateTo({duration: 500, onFinish: ()=>{ 2124 this.translateX = '0'; 2125 }}, ()=>{ 2126 this.translateX = '0' 2127 }) 2128 } else { 2129 this.translateX = '0'; 2130 animateTo({duration: 500, onFinish: ()=>{ 2131 this.translateX = "0" 2132 }}, ()=>{ 2133 this.translateX = '100%'; 2134 }) 2135 } 2136 }, 2000) 2137 } 2138 2139 build() { 2140 NavDestination() { 2141 Column() { 2142 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2143 .width('80%') 2144 .height(40) 2145 .margin(20) 2146 .onClick(() => { 2147 // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 2148 this.pageInfos.pushPath({name:'pageOne', param: CustomTransition.getInstance().getAnimationId()}) 2149 }) 2150 } 2151 .size({ width: '100%', height: '100%' }) 2152 } 2153 .title('pageTwo') 2154 .gesture(PanGesture() 2155 .onActionStart((event: GestureEvent)=> { 2156 this.rectWidth = event.target.area.width as number; 2157 if (event.offsetX < 0) { 2158 this.pageInfos.pushPath({ name: 'pageOne', param: CustomTransition.getInstance().getAnimationId() }); 2159 } else { 2160 this.pageInfos.pop(); 2161 } 2162 }) 2163 .onActionUpdate((event: GestureEvent) => { 2164 let rate = event.fingerList[0].localX / this.rectWidth; 2165 CustomTransition.getInstance().updateProgress(rate); 2166 }) 2167 .onActionEnd((event: GestureEvent)=> { 2168 let rate = event.fingerList[0].localX / this.rectWidth; 2169 CustomTransition.getInstance().finishInteractiveAnimation(rate); 2170 })) 2171 .onAppear(() => { 2172 this.registerCallback(); 2173 }) 2174 .onDisAppear(()=>{ 2175 CustomTransition.getInstance().unRegisterNavParam(this.pageId); 2176 }) 2177 .onReady((context: NavDestinationContext) => { 2178 this.pageInfos = context.pathStack; 2179 if (context.navDestinationId) { 2180 this.pageId = context.navDestinationId; 2181 this.registerCallback(); 2182 } 2183 }) 2184 .translate({x: this.translateX}) 2185 .backgroundColor(Color.Yellow) 2186 } 2187} 2188``` 2189```ts 2190// CustomNavigationUtils.ts 2191// Custom API to save the transition animation callback and parameters related to a page. 2192export interface AnimateCallback { 2193 finish: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 2194 start: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 2195 onFinish: ((isPush: boolean, isExit: boolean) => void | undefined) | undefined; 2196 interactive: ((operation: NavigationOperation) => void | undefined) | undefined; 2197 timeout: (number | undefined) | undefined; 2198} 2199const customTransitionMap: Map<string, AnimateCallback> = new Map(); 2200 2201export class CustomTransition { 2202 static delegate = new CustomTransition(); 2203 interactive: boolean = false; 2204 proxy: NavigationTransitionProxy| undefined = undefined; 2205 private animationId: number = 0; 2206 operation: NavigationOperation = NavigationOperation.PUSH 2207 2208 static getInstance() { 2209 return CustomTransition.delegate; 2210 } 2211 2212 /* Register animation callbacks for a page. 2213 * name: unique ID of the target page 2214 * startCallback: used to set the page state at the start of the animation. 2215 * endCallback: used to set the page state at the end of the animation. 2216 * onFinish: used to perform other operations after the animation ends. 2217 * interactiveCallback: used to handle the interactive part of the transition. 2218 * timeout: timeout for ending the transition. 2219 */ 2220 registerNavParam(name: string, startCallback: (operation: boolean, isExit: boolean) => void, 2221 endCallback:(operation: boolean, isExit: boolean) => void, 2222 onFinish: (operation: boolean, isExit: boolean) => void, 2223 interactiveCallback: (operation: NavigationOperation) =>void, 2224 timeout: number): void { 2225 if (customTransitionMap.has(name)) { 2226 let param = customTransitionMap.get(name); 2227 if (param != undefined) { 2228 param.start = startCallback; 2229 param.finish = endCallback; 2230 param.timeout = timeout; 2231 param.onFinish = onFinish; 2232 param.interactive = interactiveCallback; 2233 return; 2234 } 2235 } 2236 let params: AnimateCallback = {timeout: timeout, start: startCallback, finish: endCallback, onFinish: onFinish, 2237 interactive: interactiveCallback}; 2238 customTransitionMap.set(name, params); 2239 } 2240 2241 getAnimationId() { 2242 return Date.now(); 2243 } 2244 2245 unRegisterNavParam(name: string): void { 2246 customTransitionMap.delete(name); 2247 } 2248 2249 fireInteractiveAnimation(id: string, operation: NavigationOperation) { 2250 let animation = customTransitionMap.get(id)?.interactive; 2251 if (!animation) { 2252 return; 2253 } 2254 animation(operation); 2255 } 2256 2257 updateProgress(progress: number) { 2258 if (!this.proxy?.updateTransition) { 2259 return; 2260 } 2261 progress = this.operation == NavigationOperation.PUSH ? 1 - progress : progress; 2262 this.proxy?.updateTransition(progress); 2263 } 2264 2265 cancelTransition() { 2266 if (this.proxy?.cancelTransition) { 2267 this.proxy.cancelTransition(); 2268 } 2269 } 2270 2271 recoverState() { 2272 if (!this.proxy?.from.navDestinationId || !this.proxy?.to.navDestinationId) { 2273 return; 2274 } 2275 let fromParam = customTransitionMap.get(this.proxy.from.navDestinationId); 2276 if (fromParam?.onFinish) { 2277 fromParam.onFinish(false, false); 2278 } 2279 let toParam = customTransitionMap.get(this.proxy?.to.navDestinationId); 2280 if (toParam?.onFinish) { 2281 toParam.onFinish(true, true); 2282 } 2283 } 2284 2285 finishTransition() { 2286 this.proxy?.finishTransition(); 2287 } 2288 2289 finishInteractiveAnimation(rate: number) { 2290 if (this.operation == NavigationOperation.PUSH) { 2291 if (rate > 0.5) { 2292 if (this.proxy?.cancelTransition) { 2293 this.proxy.cancelTransition(); 2294 } 2295 } else { 2296 this.proxy?.finishTransition(); 2297 } 2298 } else { 2299 if (rate > 0.5) { 2300 this.proxy?.finishTransition(); 2301 } else { 2302 if (this.proxy?.cancelTransition) { 2303 this.proxy.cancelTransition(); 2304 } 2305 } 2306 } 2307 } 2308 2309 getAnimateParam(name: string): AnimateCallback { 2310 let result: AnimateCallback = { 2311 start: customTransitionMap.get(name)?.start, 2312 finish: customTransitionMap.get(name)?.finish, 2313 timeout: customTransitionMap.get(name)?.timeout, 2314 onFinish: customTransitionMap.get(name)?.onFinish, 2315 interactive: customTransitionMap.get(name)?.interactive, 2316 }; 2317 return result; 2318 } 2319} 2320``` 2321```json 2322// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 2323// route_map.json 2324{ 2325 "routerMap": [ 2326 { 2327 "name": "pageOne", 2328 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 2329 "buildFunction": "PageOneBuilder", 2330 "data": { 2331 "description": "this is pageOne" 2332 } 2333 }, 2334 { 2335 "name": "pageTwo", 2336 "pageSourceFile": "src/main/ets/pages/PageTwo.ets", 2337 "buildFunction": "PageTwoBuilder" 2338 } 2339 ] 2340} 2341``` 2342 2343 2344### Example 4 2345 2346This example primarily demonstrates how to use **Navigation** to return to the previous page with parameters. 2347 2348```ts 2349// Index.ets 2350 2351@Entry 2352@Component 2353struct NavigationExample { 2354 pageInfo: NavPathStack = new NavPathStack() 2355 2356 build() { 2357 Navigation(this.pageInfo) { 2358 Column() { 2359 Button('StartTest', { stateEffect: true, type: ButtonType.Capsule }) 2360 .width('80%') 2361 .height(40) 2362 .margin(20) 2363 .onClick(() => { 2364 this.pageInfo.pushPath({ name: 'pageOne' }); // Push the navigation destination page specified by name to the navigation stack. 2365 }) 2366 } 2367 }.title('NavIndex') 2368 } 2369} 2370``` 2371```ts 2372// PageOne.ets 2373import { BusinessError } from '@kit.BasicServicesKit'; 2374 2375class TmpClass{ 2376 count:number = 10 2377} 2378 2379class ParamWithOp { 2380 operation: number = 1 2381 count: number = 10 2382} 2383 2384@Builder 2385export function PageOneBuilder(name: string, param: Object) { 2386 PageOne() 2387} 2388 2389@Component 2390export struct PageOne { 2391 pageInfo: NavPathStack = new NavPathStack(); 2392 @State message: string = 'Hello World' 2393 2394 build() { 2395 NavDestination() { 2396 Column() { 2397 Text(this.message) 2398 .width('80%') 2399 .height(50) 2400 .margin(10) 2401 2402 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 2403 .width('80%') 2404 .height(40) 2405 .margin(10) 2406 .onClick(()=>{ 2407 this.pageInfo.pushPath({name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo)=>{ 2408 this.message = '[pushPath]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2409 }}); // 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. 2410 }) 2411 2412 Button('pushPathByName', { stateEffect: true, type: ButtonType.Capsule }) 2413 .width('80%') 2414 .height(40) 2415 .margin(10) 2416 .onClick(() => { 2417 let tmp = new TmpClass() 2418 this.pageInfo.pushPathByName('pageTwo', tmp, (popInfo)=>{ 2419 this.message = '[pushPathByName]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2420 }); // 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. 2421 }) 2422 2423 Button('pushDestination', { stateEffect: true, type: ButtonType.Capsule }) 2424 .width('80%') 2425 .height(40) 2426 .margin(10) 2427 .onClick(()=>{ 2428 let tmp = new TmpClass() 2429 // 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. 2430 this.pageInfo.pushDestination({name: 'pageTwo', param: new ParamWithOp(), onPop: (popInfo: PopInfo)=>{ 2431 this.message = '[pushDestination]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2432 }}).catch((error: BusinessError)=>{ 2433 console.error(`[pushDestination]failed, error code = ${error.code}, error.message = ${error.message}.`); 2434 }).then(()=>{ 2435 console.error('[pushDestination]success.'); 2436 }); 2437 }) 2438 2439 Button('pushDestinationByName', { stateEffect: true, type: ButtonType.Capsule }) 2440 .width('80%') 2441 .height(40) 2442 .margin(10) 2443 .onClick(()=>{ 2444 let tmp = new TmpClass() 2445 // 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. 2446 this.pageInfo.pushDestinationByName('pageTwo', tmp, (popInfo)=>{ 2447 this.message = '[pushDestinationByName]last page is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result); 2448 }).catch((error: BusinessError)=>{ 2449 console.error(`[pushDestinationByName]failed, error code = ${error.code}, error.message = ${error.message}.`); 2450 }).then(()=>{ 2451 console.error('[pushDestinationByName]success.'); 2452 }); 2453 }) 2454 2455 Button('pushPathWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2456 .width('80%') 2457 .height(40) 2458 .margin(10) 2459 .onClick(()=>{ 2460 this.pageInfo.pushPath({name: 'pageTwo', param: new ParamWithOp()}); // Push the navigation destination page specified by name to the navigation stack. 2461 }) 2462 2463 Button('pushPathByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2464 .width('80%') 2465 .height(40) 2466 .margin(10) 2467 .onClick(() => { 2468 let tmp = new TmpClass() 2469 this.pageInfo.pushPathByName('pageTwo', tmp); // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 2470 }) 2471 2472 Button('pushDestinationWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2473 .width('80%') 2474 .height(40) 2475 .margin(10) 2476 .onClick(()=>{ 2477 let tmp = new TmpClass() 2478 // 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. 2479 this.pageInfo.pushDestination({name: 'pageTwo', param: new ParamWithOp()}) 2480 .catch((error: BusinessError)=>{ 2481 console.error(`[pushDestinationWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`); 2482 }).then(()=>{ 2483 console.error('[pushDestinationWithoutOnPop]success.'); 2484 }); 2485 }) 2486 2487 Button('pushDestinationByNameWithoutOnPop', { stateEffect: true, type: ButtonType.Capsule }) 2488 .width('80%') 2489 .height(40) 2490 .margin(10) 2491 .onClick(() => { 2492 let tmp = new TmpClass() 2493 // Push the navigation destination page specified by name, with the data specified by param, to the navigation stack. 2494 this.pageInfo.pushDestinationByName('pageTwo', tmp) 2495 .catch((error: BusinessError)=>{ 2496 console.error(`[pushDestinationByNameWithoutOnPop]failed, error code = ${error.code}, error.message = ${error.message}.`); 2497 }).then(()=>{ 2498 console.error('[pushDestinationByNameWithoutOnPop]success.'); 2499 }); 2500 }) 2501 2502 Button('clear', { stateEffect: true, type: ButtonType.Capsule }) 2503 .width('80%') 2504 .height(40) 2505 .margin(10) 2506 .onClick(() => { 2507 this.pageInfo.clear(); // Clear the navigation stack. 2508 }) 2509 }.width('100%').height('100%') 2510 }.title('pageOne') 2511 .onBackPressed(() => { 2512 this.pageInfo.pop({number: 1}) // Pop the top element out of the navigation stack. 2513 return true 2514 }).onReady((context: NavDestinationContext) => { 2515 this.pageInfo = context.pathStack; 2516 }) 2517 } 2518} 2519``` 2520```ts 2521// PageTwo.ets 2522 2523class resultClass { 2524 constructor(count: number) { 2525 this.count = count; 2526 } 2527 count: number = 10 2528} 2529 2530@Builder 2531export function PageTwoBuilder() { 2532 PageTwo() 2533} 2534 2535@Component 2536export struct PageTwo { 2537 pathStack: NavPathStack = new NavPathStack() 2538 2539 build() { 2540 NavDestination() { 2541 Column() { 2542 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 2543 .width('80%') 2544 .height(40) 2545 .margin(20) 2546 .onClick(() => { 2547 this.pathStack.pop(new resultClass(1)); // Return to the previous page and pass in the processing result to the onPop callback of push. 2548 }) 2549 2550 Button('popToName', { stateEffect: true, type: ButtonType.Capsule }) 2551 .width('80%') 2552 .height(40) 2553 .margin(20) 2554 .onClick(() => { 2555 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. 2556 }) 2557 2558 Button('popToIndex', { stateEffect: true, type: ButtonType.Capsule }) 2559 .width('80%') 2560 .height(40) 2561 .margin(20) 2562 .onClick(() => { 2563 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. 2564 }) 2565 2566 Button('popWithoutResult', { stateEffect: true, type: ButtonType.Capsule }) 2567 .width('80%') 2568 .height(40) 2569 .margin(20) 2570 .onClick(() => { 2571 this.pathStack.pop(); 2572 }) 2573 2574 Button('popToNameWithoutResult', { stateEffect: true, type: ButtonType.Capsule }) 2575 .width('80%') 2576 .height(40) 2577 .margin(20) 2578 .onClick(() => { 2579 this.pathStack.popToName('pageOne'); 2580 }) 2581 2582 Button('popToIndexWithoutResult', { stateEffect: true, type: ButtonType.Capsule }) 2583 .width('80%') 2584 .height(40) 2585 .margin(20) 2586 .onClick(() => { 2587 this.pathStack.popToIndex(0); 2588 }) 2589 }.width('100%').height('100%') 2590 }.title('pageTwo') 2591 .onBackPressed(() => { 2592 this.pathStack.pop(new resultClass(0)); // Return to the previous page and pass in the processing result to the onPop callback of push. 2593 return true; 2594 }).onReady((context: NavDestinationContext) => { 2595 this.pathStack = context.pathStack 2596 }) 2597 } 2598} 2599``` 2600```json 2601// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 2602// route_map.json 2603{ 2604 "routerMap": [ 2605 { 2606 "name": "pageOne", 2607 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 2608 "buildFunction": "PageOneBuilder", 2609 "data": { 2610 "description": "this is pageOne" 2611 } 2612 }, 2613 { 2614 "name": "pageTwo", 2615 "pageSourceFile": "src/main/ets/pages/PageTwo.ets", 2616 "buildFunction": "PageTwoBuilder" 2617 } 2618 ] 2619} 2620``` 2621 2622 2623### Example 5 2624 2625This 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. 2626 2627```ts 2628let COLOR1: string = "#80004AAF"; 2629let COLOR2: string = "#802787D9"; 2630let BLUR_STYLE_1: BlurStyle = BlurStyle.BACKGROUND_THIN; 2631let BLUR_STYLE_2: BlurStyle = BlurStyle.BACKGROUND_THICK; 2632 2633@Component 2634struct BackComponent { 2635 build() { 2636 Row() { 2637 Column() {} 2638 .height('100%') 2639 .backgroundColor("#3D9DB4") 2640 .layoutWeight(9) 2641 Column() {} 2642 .height('100%') 2643 .backgroundColor("17A98D") 2644 .layoutWeight(9) 2645 Column() {} 2646 .height('100%') 2647 .backgroundColor("FFC000") 2648 .layoutWeight(9) 2649 } 2650 .height('100%') 2651 .width('100%') 2652 } 2653} 2654 2655@Component 2656struct ColorAndBlur { 2657 @State useColor1: boolean = true; 2658 @State useBlur1: boolean = true; 2659 2660 build() { 2661 NavDestination() { 2662 Stack({alignContent: Alignment.Center}) { 2663 BackComponent() 2664 .width('100%') 2665 .height('100%') 2666 Column() { 2667 Stack({alignContent: Alignment.Center}) { 2668 Button("switch color") 2669 .onClick(() => { 2670 this.useColor1 = !this.useColor1; 2671 }) 2672 } 2673 .width('100%') 2674 .layoutWeight(1) 2675 Stack({alignContent: Alignment.Center}) { 2676 Button("switch blur") 2677 .onClick(() => { 2678 this.useBlur1 = !this.useBlur1; 2679 }) 2680 } 2681 .width('100%') 2682 .layoutWeight(1) 2683 } 2684 .width('100%') 2685 .height('100%') 2686 }.width('100%') 2687 .height('100%') 2688 } 2689 .width('100%') 2690 .height('100%') 2691 // You can set the background color and background blur style of the title bar. 2692 .title("switch titlebar color and blur", { 2693 backgroundColor: this.useColor1 ? COLOR1 : COLOR2, 2694 backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2, 2695 barStyle: BarStyle.STACK 2696 }) 2697 } 2698} 2699 2700@Entry 2701@Component 2702struct Index { 2703 private stack: NavPathStack = new NavPathStack(); 2704 @State useColor1: boolean = true; 2705 @State useBlur1: boolean = true; 2706 2707 @Builder 2708 PageBuilder(name: string) { 2709 ColorAndBlur() 2710 } 2711 2712 build() { 2713 Navigation(this.stack) { 2714 Stack({alignContent: Alignment.Center}) { 2715 BackComponent() 2716 .width('100%') 2717 .height('100%') 2718 Column() { 2719 Stack({alignContent: Alignment.Center}) { 2720 Button("switch color") 2721 .onClick(() => { 2722 this.useColor1 = !this.useColor1; 2723 }) 2724 } 2725 .width('100%') 2726 .layoutWeight(1) 2727 Stack({alignContent: Alignment.Center}) { 2728 Button("switch blur") 2729 .onClick(() => { 2730 this.useBlur1 = !this.useBlur1; 2731 }) 2732 } 2733 .width('100%') 2734 .layoutWeight(1) 2735 Stack({alignContent: Alignment.Center}) { 2736 Button("push page") 2737 .onClick(() => { 2738 this.stack.pushPath({name: "page"}) 2739 }) 2740 } 2741 .width('100%') 2742 .layoutWeight(1) 2743 } 2744 .width('100%') 2745 .height('80%') 2746 }.width('100%') 2747 .height('100%') 2748 } 2749 .width('100%') 2750 .height('100%') 2751 .navDestination(this.PageBuilder) 2752 // You can set the background color and background blur style of the title bar. 2753 .title("NavTitle", { 2754 backgroundColor: this.useColor1 ? COLOR1 : COLOR2, 2755 backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2, 2756 barStyle: BarStyle.STACK 2757 }) 2758 // You can set the background color and background blur style of the toolbar. 2759 .toolbarConfiguration([ 2760 {value: "a"}, 2761 {value: "b"}, 2762 {value: "c"} 2763 ], { 2764 backgroundColor: this.useColor1 ? COLOR1 : COLOR2, 2765 backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2 2766 }) 2767 } 2768} 2769``` 2770 2771 2772### Example 6 2773 2774This example shows how to obtain the parent navigation path stack for a nested **Navigation** component. 2775 2776```ts 2777@Entry 2778@Component 2779struct NavigationExample1 { 2780 @State childNavStack: NavPathStack = new NavPathStack(); 2781 2782 build() { 2783 Navigation() { 2784 Stack({alignContent: Alignment.Center}) { 2785 Navigation(this.childNavStack) { 2786 Button('push Path to parent Navigation', { stateEffect: true, type: ButtonType.Capsule }) 2787 .width('80%') 2788 .height(40) 2789 .margin(20) 2790 .onClick(() => { 2791 // The parent the parent navigation path stack can be obtained. 2792 let parentStack = this.childNavStack.getParent(); 2793 parentStack?.pushPath({ name: "pageOne"}) 2794 }) 2795 } 2796 .clip(true) 2797 .backgroundColor(Color.Orange) 2798 .width('80%') 2799 .height('80%') 2800 .title('ChildNavigation') 2801 } 2802 .width('100%') 2803 .height('100%') 2804 } 2805 .backgroundColor(Color.Green) 2806 .width('100%') 2807 .height('100%') 2808 .title('ParentNavigation') 2809 } 2810} 2811``` 2812```ts 2813// PageOne.ets 2814 @Builder 2815 export function PageOneBuilder(name: string) { 2816 NavDestination() { 2817 Text("this is " + name) 2818 } 2819 .title(name) 2820 } 2821``` 2822```json 2823// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 2824// route_map.json 2825{ 2826 "routerMap": [ 2827 { 2828 "name": "pageOne", 2829 "pageSourceFile": "src/main/ets/pages/PageOne.ets", 2830 "buildFunction": "PageOneBuilder", 2831 "data": { 2832 "description": "this is pageOne" 2833 } 2834 } 2835 ] 2836} 2837``` 2838 2839 2840### Example 7 2841 2842This example demonstrates the following: 2843 28441. The navigation stack operation can be conducted even when **NavPathStack** is not declared as a state variable. 2845 28462. The **NavDestination** can obtain the corresponding **NavPathInfo** and **NavPathStack** through the **onReady** event. 2847 2848```ts 2849class PageParam { 2850 constructor(num_: number) { 2851 this.num = num_; 2852 } 2853 num: number = 0; 2854} 2855 2856@Builder 2857export function PageOneBuilder(name: string, param: Object) { 2858 PageOne() 2859} 2860 2861@Component 2862struct PageOne { 2863 private stack: NavPathStack | null = null; 2864 private name: string = ""; 2865 private paramNum: number = 0; 2866 2867 build() { 2868 NavDestination() { 2869 Column() { 2870 Text("NavPathInfo: name: " + this.name + ", paramNum: " + this.paramNum) 2871 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 2872 .width('80%') 2873 .height(40) 2874 .margin(20) 2875 .onClick(() => { 2876 if (this.stack) { 2877 let p = new PageParam(this.paramNum + 1); 2878 this.stack.pushPath({name: "pageOne", param: p}); 2879 } 2880 }) 2881 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 2882 .width('80%') 2883 .height(40) 2884 .margin(20) 2885 .onClick(() => { 2886 this.stack?.pop() 2887 }) 2888 } 2889 .width('100%') 2890 .height('100%') 2891 } 2892 .title('pageOne') 2893 .onReady((ctx: NavDestinationContext) => { 2894 // The passed NavPathInfo and the owning NavPathStack objects can be obtained for <NavDestination>. 2895 try { 2896 this.name = ctx?.pathInfo?.name; 2897 this.paramNum = (ctx?.pathInfo?.param as PageParam)?.num; 2898 this.stack = ctx.pathStack; 2899 } catch (e) { 2900 console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`) 2901 } 2902 }) 2903 } 2904} 2905 2906@Entry 2907@Component 2908struct NavigationExample2 { 2909 private stack : NavPathStack = new NavPathStack(); 2910 2911 build() { 2912 Navigation(this.stack) { 2913 Stack({alignContent: Alignment.Center}) { 2914 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 2915 .width('80%') 2916 .height(40) 2917 .margin(20) 2918 .onClick(() => { 2919 let p = new PageParam(1); 2920 this.stack.pushPath({ name: "pageOne", param: p }) 2921 }) 2922 } 2923 .width('100%') 2924 .height('100%') 2925 } 2926 .width('100%') 2927 .height('100%') 2928 .title('Navigation') 2929 } 2930} 2931``` 2932```json 2933// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 2934// route_map.json 2935{ 2936 "routerMap": [ 2937 { 2938 "name": "pageOne", 2939 "pageSourceFile": "src/main/ets/pages/Index.ets", 2940 "buildFunction": "PageOneBuilder", 2941 "data": { 2942 "description": "this is pageOne" 2943 } 2944 } 2945 ] 2946} 2947``` 2948 2949 2950### Example 8 2951 2952This example demonstrates the lifecycle timing of **NavDestination**. 2953 2954```ts 2955@Builder 2956export function PageOneBuilder(name: string, param: Object) { 2957 PageOneComponent() 2958} 2959 2960@Component 2961struct PageOneComponent { 2962 private stack: NavPathStack | null = null; 2963 @State eventStr: string = ""; 2964 2965 build() { 2966 NavDestination() { 2967 Column() { 2968 Text("event: " + this.eventStr) 2969 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 2970 .width('80%') 2971 .height(40) 2972 .margin(20) 2973 .onClick(() => { 2974 if (this.stack) { 2975 this.stack.pushPath({name: "pageOne"}); 2976 } 2977 }) 2978 Button('pop', { stateEffect: true, type: ButtonType.Capsule }) 2979 .width('80%') 2980 .height(40) 2981 .margin(20) 2982 .onClick(() => { 2983 this.stack?.pop() 2984 }) 2985 } 2986 .width('100%') 2987 .height('100%') 2988 } 2989 .title('pageOne') 2990 .onAppear(() => { this.eventStr += "<onAppear>"; }) 2991 .onDisAppear(() => { this.eventStr += "<onDisAppear>"; }) 2992 .onShown(() => { this.eventStr += "<onShown>"; }) 2993 .onHidden(() => { this.eventStr += "<onHidden>"; }) 2994 .onWillAppear(() => { this.eventStr += "<onWillAppear>"; }) 2995 .onWillDisappear(() => { this.eventStr += "<onWillDisappear>"; }) 2996 .onWillShow(() => { this.eventStr += "<onWillShow>"; }) 2997 .onWillHide(() => { this.eventStr += "<onWillHide>"; }) 2998 // onReady is called before onAppear. 2999 .onReady((ctx: NavDestinationContext) => { 3000 try { 3001 this.eventStr += "<onReady>"; 3002 this.stack = ctx.pathStack; 3003 } catch (e) { 3004 console.log(`testTag onReady catch exception: ${JSON.stringify(e)}`) 3005 } 3006 }) 3007 } 3008} 3009 3010@Entry 3011@Component 3012struct NavigationExample3 { 3013 private stack : NavPathStack = new NavPathStack(); 3014 3015 build() { 3016 Navigation(this.stack) { 3017 Stack({alignContent: Alignment.Center}) { 3018 Button('pushPath', { stateEffect: true, type: ButtonType.Capsule }) 3019 .width('80%') 3020 .height(40) 3021 .margin(20) 3022 .onClick(() => { 3023 this.stack.pushPath({ name: "pageOne" }) 3024 }) 3025 } 3026 .width('100%') 3027 .height('100%') 3028 } 3029 .width('100%') 3030 .height('100%') 3031 .title('Navigation') 3032 } 3033} 3034``` 3035```json 3036// Configure {"routerMap": "$profile:route_map"} in the project configuration file module.json5. 3037// route_map.json 3038{ 3039 "routerMap": [ 3040 { 3041 "name": "pageOne", 3042 "pageSourceFile": "src/main/ets/pages/Index.ets", 3043 "buildFunction": "PageOneBuilder", 3044 "data": { 3045 "description": "this is pageOne" 3046 } 3047 } 3048 ] 3049} 3050``` 3051 3052 3053 3054### Example 9 3055 3056This example demonstrates the stack layout of the title bar in the **Navigation** component. 3057 3058```ts 3059@Entry 3060@Component 3061struct NavigationExample { 3062 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; 3063 private scrollerForScroll: Scroller = new Scroller(); 3064 @State barStyle: BarStyle = BarStyle.STANDARD; 3065 3066 build() { 3067 Column() { 3068 Navigation() { 3069 Column() { 3070 Scroll(this.scrollerForScroll) { 3071 Column() { 3072 Image($r('app.media.image_1')) 3073 // Set the height to be the same as that of the title bar to better observe the stack effect. 3074 .height(138) 3075 .width('100%') 3076 Button('BarStyle.STANDARD') 3077 .height('50vp') 3078 .onClick(() => { 3079 this.barStyle = BarStyle.STANDARD; 3080 }) 3081 Button('BarStyle.STACK') 3082 .height('50vp') 3083 .margin({ top: 12 }) 3084 .onClick(() => { 3085 this.barStyle = BarStyle.STACK; 3086 }) 3087 3088 ForEach(this.arr, (item: number) => { 3089 ListItem() { 3090 Text('' + item) 3091 .width('100%') 3092 .height(100) 3093 .fontSize(16) 3094 .textAlign(TextAlign.Center) 3095 .borderRadius(10) 3096 .backgroundColor(Color.Orange) 3097 .margin({ top: 12 }) 3098 } 3099 }, (item: string) => item) 3100 } 3101 } 3102 } 3103 .width('100%') 3104 .height('100%') 3105 .backgroundColor(0xDCDCDC) 3106 } 3107 .title( 3108 { 3109 main: 'NavTitle', 3110 sub: 'subtitle' 3111 }, 3112 { 3113 backgroundBlurStyle: BlurStyle.COMPONENT_THICK, 3114 barStyle: this.barStyle, 3115 } 3116 ) 3117 .titleMode(NavigationTitleMode.Free) 3118 .hideTitleBar(false) 3119 }.width('100%').height('100%').backgroundColor('#F1F3F5') 3120 } 3121} 3122``` 3123 3124 3125 3126### Example 10 3127 3128This example demonstrates how to define a derived class of **NavPathStack** and the basic usage of the derived class in **Navigation**. 3129 3130```ts 3131class DerivedNavPathStack extends NavPathStack { 3132 // usr defined property 'id' 3133 id: string = "__default__" 3134 3135 // new function in derived class 3136 setId(id: string) { 3137 this.id = id; 3138 } 3139 3140 // new function in derived class 3141 getInfo(): string { 3142 return "this page used Derived NavPathStack, id: " + this.id 3143 } 3144 3145 // overwrite function of NavPathStack 3146 pushPath(info: NavPathInfo, animated?: boolean): void 3147 pushPath(info: NavPathInfo, options?: NavigationOptions): void 3148 pushPath(info: NavPathInfo, secArg?: boolean | NavigationOptions): void { 3149 console.log('[derive-test] reached DerivedNavPathStack\'s pushPath'); 3150 if (typeof secArg === 'boolean') { 3151 super.pushPath(info, secArg); 3152 } else { 3153 super.pushPath(info, secArg); 3154 } 3155 } 3156 3157 // overwrite and overload function of NavPathStack 3158 pop(animated?: boolean | undefined): NavPathInfo | undefined 3159 pop(result: Object, animated?: boolean | undefined): NavPathInfo | undefined 3160 pop(result?: Object, animated?: boolean | undefined): NavPathInfo | undefined { 3161 console.log('[derive-test] reached DerivedNavPathStack\'s pop'); 3162 return super.pop(result, animated); 3163 } 3164 3165 // other function of base class... 3166} 3167 3168class param { 3169 info: string = "__default_param__"; 3170 constructor(info: string) { this.info = info } 3171} 3172 3173@Entry 3174@Component 3175struct Index { 3176 derivedStack: DerivedNavPathStack = new DerivedNavPathStack(); 3177 3178 aboutToAppear(): void { 3179 this.derivedStack.setId('origin stack'); 3180 } 3181 3182 @Builder 3183 pageMap(name: string) { 3184 PageOne() 3185 } 3186 3187 build() { 3188 Navigation(this.derivedStack) { 3189 Button('to Page One').margin(20).onClick(() => { 3190 this.derivedStack.pushPath({ 3191 name: 'pageOne', 3192 param: new param('push pageOne in homePage when stack size: ' + this.derivedStack.size()) 3193 }); 3194 }) 3195 }.navDestination(this.pageMap) 3196 .title('Home Page') 3197 } 3198} 3199 3200@Component 3201struct PageOne { 3202 derivedStack: DerivedNavPathStack = new DerivedNavPathStack(); 3203 curStringifyParam: string = "NA"; 3204 3205 build() { 3206 NavDestination() { 3207 Column() { 3208 Text(this.derivedStack.getInfo()) 3209 .margin(10) 3210 .fontSize(25) 3211 .fontWeight(FontWeight.Bold) 3212 .textAlign(TextAlign.Start) 3213 Text('current page param info:') 3214 .margin(10) 3215 .fontSize(25) 3216 .fontWeight(FontWeight.Bold) 3217 .textAlign(TextAlign.Start) 3218 Text(this.curStringifyParam) 3219 .margin(20) 3220 .fontSize(20) 3221 .textAlign(TextAlign.Start) 3222 }.backgroundColor(Color.Pink) 3223 Button('to Page One').margin(20).onClick(() => { 3224 this.derivedStack.pushPath({ 3225 name: 'pageOne', 3226 param: new param('push pageOne in pageOne when stack size: ' + this.derivedStack.size()) 3227 }); 3228 }) 3229 }.title('Page One') 3230 .onReady((context: NavDestinationContext) => { 3231 console.log('[derive-test] reached PageOne\'s onReady'); 3232 // get derived stack from navdestinationContext 3233 this.derivedStack = context.pathStack as DerivedNavPathStack; 3234 console.log('[derive-test] -- got derivedStack: ' + this.derivedStack.id); 3235 this.curStringifyParam = JSON.stringify(context.pathInfo.param); 3236 console.log('[derive-test] -- got param: ' + this.curStringifyParam); 3237 }) 3238 } 3239} 3240``` 3241 3242 3243### Example 11 3244 3245This example shows how to use symbol icons in **Navigation** and **NavDestination**. 3246 3247```ts 3248import { SymbolGlyphModifier } from '@kit.ArkUI'; 3249 3250@Entry 3251@Component 3252struct NavigationExample { 3253 @Provide('navPathStack') navPathStack:NavPathStack = new NavPathStack(); 3254 @State menuItems:Array<NavigationMenuItem> = [ 3255 { 3256 value:'menuItem1', 3257 icon:'resources/base/media/ic_public_ok.svg' // Icon resource path. 3258 }, 3259 { 3260 value:'menuItem2', 3261 icon:'resources/base/media/ic_public_ok.svg', // Icon resource path. 3262 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Red,Color.Green]).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR), 3263 }, 3264 { 3265 value:'menuItem3', 3266 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')), 3267 }, 3268 ] 3269 3270 @State toolItems:Array<ToolbarItem>= [ 3271 { 3272 value:'toolItem1', 3273 icon:'resources/base/media/ic_public_ok.svg', // Icon resource path. 3274 symbolIcon:new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')), 3275 status:ToolbarItemStatus.ACTIVE, 3276 activeSymbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Red,Color.Green]).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR), 3277 action:()=>{} 3278 }, 3279 { 3280 value:'toolItem2', 3281 symbolIcon:new SymbolGlyphModifier($r('sys.symbol.ohos_star')), 3282 status:ToolbarItemStatus.ACTIVE, 3283 activeIcon: 'resources/base/media/ic_public_more.svg', // Icon resource path. 3284 action:()=>{} 3285 }, 3286 { 3287 value:'toolItem3', 3288 symbolIcon:new SymbolGlyphModifier($r('sys.symbol.ohos_star')), 3289 status:ToolbarItemStatus.ACTIVE, 3290 activeSymbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_lungs')), 3291 action:()=>{} 3292 } 3293 ] 3294 3295 @Builder 3296 myRouter(name:string,param?:Object) { 3297 if(name === 'NavigationMenu') { 3298 NavigationMenu(); 3299 } 3300 } 3301 3302 build() { 3303 Navigation(this.navPathStack) { 3304 Column() { 3305 Button('Go').onClick(()=> { 3306 this.navPathStack.pushPathByName('NavigationMenu', null); 3307 }) 3308 } 3309 } 3310 .backButtonIcon(new SymbolGlyphModifier($r('sys.symbol.ohos_wifi'))) 3311 .titleMode(NavigationTitleMode.Mini) 3312 .menus(this.menuItems) 3313 .toolbarConfiguration(this.toolItems) 3314 .title('Level-1 page') 3315 .navDestination(this.myRouter) 3316 } 3317} 3318 3319@Component 3320export struct NavigationMenu{ 3321 @Consume('navPathStack') navPathStack:NavPathStack; 3322 @State menuItems:Array<NavigationMenuItem> = [ 3323 { 3324 value:'menuItem1', 3325 icon:'resources/base/media/ic_public_ok.svg', // Icon resource path. 3326 action:()=>{} 3327 }, 3328 { 3329 value:'menuItem2', 3330 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontColor([Color.Red,Color.Green]).renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR), 3331 action:()=>{} 3332 }, 3333 { 3334 value:'menuItem3', 3335 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.repeat_1')), 3336 action:()=>{} 3337 }, 3338 ] 3339 3340 build() { 3341 NavDestination(){ 3342 Row() { 3343 Column(){ 3344 } 3345 .width('100%') 3346 } 3347 .height('100%') 3348 } 3349 .hideTitleBar(false) 3350 .title('NavDestination title') 3351 .backgroundColor($r('sys.color.ohos_id_color_titlebar_sub_bg')) 3352 .backButtonIcon(new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Blue])) 3353 .menus(this.menuItems) 3354 } 3355} 3356``` 3357 3358 3359### Example 12 3360 3361This example demonstrates how to set custom title bar padding in **Navigation** and **NavDestination**. 3362 3363```ts 3364import { LengthMetrics } from '@kit.ArkUI'; 3365 3366@Entry 3367@Component 3368struct NavigationExample { 3369 @Provide('navPathStack') navPathStack: NavPathStack = new NavPathStack(); 3370 // Assign an initial padding at the start of the title bar. 3371 @State paddingStart: LengthMetrics = LengthMetrics.vp(0); 3372 // Assign an initial padding at the end of the title bar. 3373 @State paddingEnd: LengthMetrics = LengthMetrics.vp(0); 3374 @State menuItems: Array<NavigationMenuItem> = [ 3375 { 3376 value: 'menuItem1', 3377 icon: 'resources/base/media/ic_public_ok.svg', // Icon resource path. 3378 action: () => { 3379 } 3380 } 3381 ] 3382 3383 @Builder 3384 myRouter(name: string, param?: Object) { 3385 if (name === 'NavDestinationExample') { 3386 NavDestinationExample(); 3387 } 3388 } 3389 3390 build() { 3391 Navigation(this.navPathStack) { 3392 Column() { 3393 // Switch between padding values for the title bar. 3394 Button('Apply 16 vp Padding') 3395 .onClick(() => { 3396 this.paddingStart = LengthMetrics.vp(16); 3397 this.paddingEnd = LengthMetrics.vp(16); 3398 }) 3399 .margin({ top: 5 }) 3400 3401 Button('Apply 24 vp Padding') 3402 .onClick(() => { 3403 this.paddingStart = LengthMetrics.vp(24); 3404 this.paddingEnd = LengthMetrics.vp(24); 3405 }) 3406 .margin({ top: 5 }) 3407 3408 Button('Go') 3409 .onClick(() => { 3410 this.navPathStack.pushPathByName('NavDestinationExample', null); 3411 }) 3412 .margin({ top: 5 }) 3413 } 3414 } 3415 .titleMode(NavigationTitleMode.Mini) 3416 .title('Level-1 page', { 3417 paddingStart: this.paddingStart, 3418 paddingEnd: this.paddingEnd, 3419 }) 3420 .menus(this.menuItems) 3421 .navDestination(this.myRouter) 3422 } 3423} 3424 3425@Component 3426export struct NavDestinationExample { 3427 @Consume('navPathStack') navPathStack: NavPathStack; 3428 @State menuItems: Array<NavigationMenuItem> = [ 3429 { 3430 value: 'menuItem1', 3431 icon: 'resources/base/media/ic_public_ok.svg', // Icon resource path. 3432 action: () => { 3433 } 3434 } 3435 ] 3436 @State paddingStart: LengthMetrics = LengthMetrics.vp(0); 3437 @State paddingEnd: LengthMetrics = LengthMetrics.vp(0); 3438 3439 build() { 3440 NavDestination() { 3441 Row() { 3442 Column() { 3443 // Switch between padding values for the title bar. 3444 Button('Apply 32 vp Padding') 3445 .onClick(() => { 3446 this.paddingStart = LengthMetrics.vp(32); 3447 this.paddingEnd = LengthMetrics.vp(32); 3448 }) 3449 .margin({ top: 5 }) 3450 3451 Button('Apply 20 vp Padding') 3452 .onClick(() => { 3453 this.paddingStart = LengthMetrics.vp(20); 3454 this.paddingEnd = LengthMetrics.vp(20); 3455 }) 3456 .margin({ top: 5 }) 3457 } 3458 .width('100%') 3459 } 3460 .height('100%') 3461 } 3462 .hideTitleBar(false) 3463 .title('NavDestination title', { 3464 paddingStart: this.paddingStart, 3465 paddingEnd: this.paddingEnd, 3466 }) 3467 .menus(this.menuItems) 3468 } 3469} 3470``` 3471
