Block: NavPanel

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

• NavPanelButton
• NavPanelIcon
• NavPanelNumber

NavPanelButton

A NavPanel allows users to change navigate between routes

NavButton

NavLogout

An object for configuring a logout button.

NavPanelIcon

A NavPanel allows users to change navigate between routes

NavIcon

Icon

NavPanelNumber

A NavPanel allows users to change navigate between routes

NavNumber

CommonNavItem

• NavText
• NavImage

NavText

NavImage

NavPanelSubscribe

• NavPanelRouterOutletSubscribe
• NavPanelEntityDataStoreSubscription

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.

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.