Block: NavPanel
NavPanel
block for configuring a panel with navigation buttons to be displayed in the user interface.Overview
A NavPanel
block is used for configuring a navigation panel, to be displayed in a frame. The navigation panel displays a set of buttons that the user can click.
The navigation panel has three possible types, specified using the type
property. Each type supports different types of buttons.
- The
NavPanelButton
has buttons that have text and/or and icon inside the button. - The
NavPanelNumber
has buttons that have a number inside the button, and a text below the button. - The
NavPanelIcon
has buttons that have am icon inside the button. (This type is deprecated.)
In addition to the buttons, all three types of navigation panels can also contain text items and images.
If a navigation button is configured to have a routerLink
, then clicking the button navigates the user to the specified routes. Other blocks can also subscribe to a navigation button in order to perform some action when the button is clicked. For example, a PopupOutlet
can subscribe to a navigation button to open the popup.
The layout of the navigation panel can be configured in two different ways.
- Using the
orientation
property, the panel can be configured to to have a default layout. Specifying ahorizontal
orientation results in a layout with buttons stacked horizontally, from left to right. Specifying avertical
orientation results in a layout with buttons stacked vertically, from top to bottom. - Using the
layout
property, a custom layout can be configured using one of the layout objects:ColumnLayout
.RowLayout
, orGridLayout
.
Example
Below is an example configuration.
kind: Solution
version: v0
router:
kind: Router
routes:
- frame: home-frame
children:
- frame: sub-frame1 # route is /home-frame/sub-frame1
- frame: sub-frame2 # route is /home-frame/sub-frame2
frames:
home-frame:
kind: Frame
contents:
my-nav-panel:
kind: NavPanel
type: button
card: false
style: dark
layout:
kind: ColumnLayout
widths: [auto, auto, 1fr]
areas: [my-nav-button1, my-nav-button2, ""]
items:
- kind: NavButton
text: Frame 1
frame: sub-frame1
name: my-nav-button1
- kind: NavButton
text: Frame 2
frame: sub-frame2
name: my-nav-button2
my-outlet:
kind: RouterOutlet # contains children frames
sub-frame1:
kind: Frame
contents:
text1:
kind: Text
text: This is sub-frame 1
type: display-1
sub-frame2:
kind: Frame
contents:
text1:
kind: Text
text: This is sub-frame 2
type: display-1
NavPanelConfig
NavPanelButton
A NavPanel allows users to change navigate between routes
Name | Type | Required | Description |
---|---|---|---|
kind |
"NavPanel" |
Yes | NavPanel allows users to change navigate between routes |
type |
"button" |
Yes | The type of the nav, can be either a button, an icon, or a number |
items |
List<NavButton | NavLogout | NavText | NavImage> | Yes | A list of items to display in the nav |
orientation |
"vertical" | "horizontal" |
No | The orientation of the nav, horizontal for side nav, vertical for top nav |
layout |
LayoutConfig | No | |
style |
"light" | "dark" |
No | The background and item style of the nav. Default is light |
card |
boolean |
No | Card is used to display items in a way that is easily readable |
subscribe |
List<NavPanelSubscribe> | No | A list of objects for subscribing the NavPanel block to other blocks. |
NavButton
Name | Type | Required | Description |
---|---|---|---|
kind |
"NavButton" |
Yes | |
frame |
string |
No | |
text |
string |
Yes | |
icon |
Icon | No | |
name |
string |
No |
NavLogout
An object for configuring a logout button.
Name | Type | Required | Description |
---|---|---|---|
kind |
"NavLogout" |
Yes | A constant, NavLogout . |
name |
string |
Yes | A string defining the name of the button. This can be use in either the NavPanel layout or in subscriptions that target the buttons in the NavPanel . |
text |
string |
No | A string defining the button text. |
icon |
Icon | No | An object for configuring an icon for the button. |
NavPanelIcon
A NavPanel allows users to change navigate between routes
Name | Type | Required | Description |
---|---|---|---|
kind |
"NavPanel" |
Yes | NavPanel allows users to change navigate between routes |
type |
"icon" |
Yes | |
items |
List<NavIcon | NavText | NavImage> | Yes | A list of items to display in the nav |
orientation |
"vertical" | "horizontal" |
No | The orientation of the nav, horizontal for side nav, vertical for top nav |
layout |
LayoutConfig | No | |
style |
"light" | "dark" |
No | The background and item style of the nav. Default is light |
card |
boolean |
No | Card is used to display items in a way that is easily readable |
subscribe |
List<NavPanelSubscribe> | No | A list of objects for subscribing the NavPanel block to other blocks. |
NavIcon
Name | Type | Required | Description |
---|---|---|---|
kind |
"NavIcon" |
Yes | |
frame |
string |
No | |
icon |
Icon | Yes | |
text |
string |
No | |
name |
string |
No |
Icon
Name | Type | Required | Description |
---|---|---|---|
kind |
"Icon" |
Yes | |
icon |
IconConfig | Yes |
NavPanelNumber
A NavPanel allows users to change navigate between routes
Name | Type | Required | Description |
---|---|---|---|
kind |
"NavPanel" |
Yes | NavPanel allows users to change navigate between routes |
type |
"number" |
Yes | The type of the nav, can be either a button, an icon, or a number |
items |
List<NavNumber | NavText | NavImage> | Yes | A list of items to display in the nav |
orientation |
"vertical" | "horizontal" |
No | The orientation of the nav, horizontal for side nav, vertical for top nav |
layout |
LayoutConfig | No | |
style |
"light" | "dark" |
No | The background and item style of the nav. Default is light |
card |
boolean |
No | Card is used to display items in a way that is easily readable |
subscribe |
List<NavPanelSubscribe> | No | A list of objects for subscribing the NavPanel block to other blocks. |
NavNumber
Name | Type | Required | Description |
---|---|---|---|
kind |
"NavNumber" |
Yes | |
frame |
string |
No | |
number |
number |
Yes | |
text |
string |
No | |
name |
string |
No |
CommonNavItem
NavText
Name | Type | Required | Description |
---|---|---|---|
kind |
"Text" |
Yes | |
text |
string |
Yes | |
name |
string |
No |
NavImage
Name | Type | Required | Description |
---|---|---|---|
kind |
"Image" |
Yes | |
path |
string |
Yes | |
name |
string |
No |
NavPanelSubscribe
NavPanelRouterOutletSubscribe
An object for configuring a subscription from a NavPanel
block to a RouterOutlet
block. The subscription allows a button in the navigation panel to be highlighted based on the frame that is displayed in a router outlet.
Name | Type | Required | Description |
---|---|---|---|
kind |
"RouterOutlet" |
Yes | A constant, RouterOutlet . |
frame |
string |
Yes | A string specifying the name of the frame in which the RouterOutlet is located. |
source |
string |
Yes | A string specifying the name of the RouterOutlet . |
NavPanelEntityDataStoreSubscription
An object for configuring a subscription from a NavPanel
block to a EntityDataStore
block. The subscription allows a text item in the nav panel to be set based on a name-entity pair in the selected entity in the entity data store.
Name | Type | Required | Description |
---|---|---|---|
kind |
"EntityDataStore" |
Yes | A constant, EntityDataStore . |
frame |
string |
Yes | A string specifying the name of the frame in which the EntityDataStore is located. |
source |
string |
Yes | A string specifying the name of the EntityDataStore . |
setTextItem |
string |
Yes | A sting specifying the name of the text item in the NavPanel . |