Navigation example
In this example, we create the configuration for multiple nested frames with navigation panels. It consists of:
- A home page that shows some introductory text and two navigation buttons on the right, ‘Home’ and ‘Edit model’.
- An ‘Edit model’ page where you see a 3D model on the left with a multi-step control panel on the right.
This is built up from a series of nested frames as follows:
my-home-framewith an outlet on the left and a navigation panel on the right, with the two buttons.
In the outlet:- When you click ‘Home’ you see
my-intro-framethat contains the introductory text. - When you click ‘Edit model’ you see
my-model-framethat contains a 3D viewer on the left, an outlet on the right, and also a datastore and a model.
The outlet contains a multi step control panel made up from the following frames:my-box-framethat contains a control panel with some inputs for defining a box.my-sphere-framethat contains a control panel with some inputs for defining a sphere.my-results-framethat contains a control panel for displaying model results.- All three frames subscribe to the datastore, so that all their values are saved in one place for the model.
- When you click ‘Home’ you see
The example demonstrates the use of the NavPanel and RouterOutlet.
In your solution folder:
- Save the example Grasshopper definition.
- Create a file
solution.yamlfile with the navigation panel example solution file content. - Deploy using the cli:
ph deploy solution -o <org-slug> <solution-name>
The solution should look like the images below.
