NavDestination

<NavDestination> is the root container of a destination page and represents the content area of the <Navigation> component.

NOTE

This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Supported types of child components: built-in components and custom components, with support for (if/else, ForEach, and LazyForEach) rendering control.

Number of child components: multiple.

APIs

NavDestination()

Attributes

In addition to the backgroundColor attribute, the following attributes are supported.

Name Type Description
title string | CustomBuilder | NavigationCommonTitle | NavigationCustomTitle Page title.
NOTE
When the NavigationCustomTitle type is used to set the height, the titleMode attribute 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 (...).
hideTitleBar boolean Whether to hide the title bar.
Default value: false
true: Hide the title bar.
false: Display the title bar.

Events

In addition to the universal events, the following events are supported.

Name Description
onShown(callback: () => void)10+ Called when the navigation destination page is displayed.
onHidden(callback: () => void)10+ Called when the navigation destination page is hidden.
onBackPressed(callback: () => boolean)10+ Called when the back button is pressed.
This callback takes effect when there is one or more entries in the navigation stack bound to the <Navigation> component.
The value true means that the back button logic is overridden, and false means that the previous page is displayed.

Example

Since API version 9, see NavRouter Example.

Since API version 10, see NavPathStack Example.