Routing with nested frames
The diagram below shows an example, where there is a main
home frame, and nested inside that there are two sub-frames, called
For the examples, we can have three possible router links:
/home/: Shows the home frame with frame A in the
RouterOutlet. (So frame A is assumed to be the default.)
/home/frame-a: Shows the home frame with frame A in the
/home/frame-b: Shows the home frame with frame B in the
Below is the configuration file for this example.
kind: Solution version: v0 router: kind: Router routes: - frame: home # routerLink /home children: - frame: frame-a # routerLink /home/frame-a - frame: frame-b # routerLink /home/frame-b frames: # ====== HOME FRAME ====== home: kind: Frame layout: kind: ColumnLayout widths: [auto, 300px] areas: [nav, main] contents: nav: kind: NavPanel orientation: vertical type: button card: true items: - kind: NavButton text: Go to frame A frame: frame-a - kind: NavButton text: Go to frame B frame: frame-b subscribe: - kind: RouterOutlet frame: home source: main-outlet main-outlet: kind: RouterOutlet # ====== FRAME A ====== frame-a: kind: Frame # ====== FRAME B ====== frame-b: kind: Frame
For the routes configuration, if a frame has child frames, then those child frames will be automatically inserted into any
RouterOutlet in that frame. Note that each frame should only contain a single
RouterOutlet. (If you create multiple outlets, then the same content will be repeated multiple times, which is probably not what you want.) If you need to have multiple outlets, then you need to nest them inside one another.
In the example, we can see the following:
router>routes, the home frame route has two child routes, for frames A and B.
frames>home>contents, the home frame has a
- So frames A and B will be inserted into that
RouterOutletin the home frame.
In the diagram below, we have highlighted the way that the routes relate to frames.
When a user enters the home URL:
app.packhunt.io/xyz-solution/, then the first frames will be loaded by default. So in this case, it will be
For navigation, the
NavPanel has a dictionary of
items which are displayed as a set of buttons in the user interface. Each
NavButton has a
frame that will be shown in the outlet when the button is clicked. Below is the code-snippet of a
kind: NavButton text: Go to frame A frame: frame-a
NavPanel subscribes to the
RouterOutlet, then the navigation items will automatically highlight the currently active frames.