coco
50 lines
1.8 KiB
Markdown
50 lines
1.8 KiB
Markdown
# Composable navigation
|
|
|
|
[NavModels](../navmodel/index.md) in Appyx are composable.
|
|
|
|
As a single `NavModel` won't be enough for the whole of your whole app, you can use many in a composable way. That is, any navigation target of a `NavModel` can also host its own `NavModel`.
|
|
|
|
|
|
## Structural element for composing navigation
|
|
|
|
```Nodes``` are the main structural element in Appyx. They can host `NavModels`, and they form a tree.
|
|
|
|
This allows you to make your app's business logic also composable by leveraging `Nodes` as lifecycled components.
|
|
|
|
Read more in [Structuring your app navigation](../apps/structure.md)
|
|
|
|
|
|
## Navigation in the tree
|
|
|
|
<img src="https://i.imgur.com/hKvOs3w.gif" width="450">
|
|
|
|
Once you've structured your navigation in a composable way, you can add `NavModels` to `Node` of this tree and make it dynamic:
|
|
|
|
- Some parts in this tree are active while others ore not
|
|
- The active parts define what state the application is in, and what the user sees on the screen
|
|
- We can change what's active by using `NavModels` on each level of the tree
|
|
- Changes will feel like navigation to the user
|
|
|
|
See [Implicit navigation](implicit-navigation.md) and [Explicit navigation](explicit-navigation.md) for building complex navigation behaviours with this approach.
|
|
|
|
|
|
|
|
## How NavModels affect Nodes
|
|
|
|
NavModel operations will typically result in:
|
|
|
|
- Adding or removing child `Nodes` of a `ParentNode`
|
|
- Move them on and off the screen
|
|
- Change their states
|
|
|
|
As an illustration:
|
|
|
|
<img src="https://i.imgur.com/8gy3Ghb.gif" width="200"> <img src="https://i.imgur.com/N8rEPrJ.gif" width="200">
|
|
|
|
Here:
|
|
|
|
- `Back stack` illustrates adding and removing child `Nodes`
|
|
- `Tiles` illustrates changing the state of children and removing them from the `ParentNode`
|
|
|
|
These are just two examples, you're of course not limited to using them.
|