Block: NavPanel

A NavPanel block for configuring a panel with navigation buttons to be displayed in the user interface.
Tags:

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 a horizontal orientation results in a layout with buttons stacked horizontally, from left to right. Specifying a vertical 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, or GridLayout.

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

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.
Name Type Required Description
kind "NavButton" Yes
frame string No
text string Yes
icon Icon No
name string No

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.

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.
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

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.
Name Type Required Description
kind "NavNumber" Yes
frame string No
number number Yes
text string No
name string No

CommonNavItem

Name Type Required Description
kind "Text" Yes
text string Yes
name string No
Name Type Required Description
kind "Image" Yes
path string Yes
name string No

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.

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.
useProperty string No A string specifying additional data (that is in a lower branch than the selected entity) to be shown in the NavPanel. All the branches of the selected path are aggregated, so the string must match the EntityDataStore property path separated by dots (e.g. projectName: $root.name).
selectedPath List<string> No A list of strings specifying the path at which branch the current selected entity should be loaded. The path must start with $root to indicate the root of the entity schema.