@sap-devx/controls-navigator

Navigator Control --- stepper style

Navigator Control --- tab style

Description

Navigator is a navigation control . It can display the groups in a way like wizard steps or tabs control

Anatomy

Control Properties

• navigationType
  It can be two values:

  • “tab“ : It is a navigation control like tab control. Each group is linkable. It is default value.
  • “stepper”: it is like wizard stepper control that force a user to move linearly through your groups

• prompt-index
  It is the current group index(zero based)

• prompts
  It is the groups array, for example:

  [{name:”database”},{name:”authorization”}]

• prompt-answers
  It is only for “stepper” navigation type. It is a group summarization, for example:

  {
    promptName:”group1”,
    answers:[
            {
              "label":"prop1",
              "value":"value1",
              "type":"warning",
            },
            {
              "label":"prop1",
              "value":"value1"
            }
      ]
  }

• All-answers
  It is only for “tab” navigation type. It is initially all the groups summaries. For example:

  {
        "group1":[
            {
              "label":"prop1",
              "value":"value1"
            },
            {
              "label":"prop1",
              "value":"value1"
            }
          ],
          "group2":[
            {
              "label":"prop1",
              "value":"value1"
            }
          ]
  }

Control Event

• on-goto-step
  When click a group title, this event is emitted .
  • For "tab" type, the event is emitted with group index parameter(zero based).
  • For "stepper" type, the event is emitted with number of steps to go back.

Usage

If writing a Vue application, simply add the following line to your <template> tag:

<NavigatorControl
  :prompt-index="promptIndex"
  :prompts="prompts"
  :all-answers=" allAnswers "
  :prompt-answers="{}"
  navigation-type="tab"
  @on-goto-step="gotoStep"
/>

The properties values looks like the following:

{
  promptIndex:0,
  prompts:[{name: "group1"},{name:"group2"}],
  allAnswers:{
    group1:[
      {label:"akey1", value: "aType"},
      {label:"akey2", value: "a", type: "warning"}
    ],
    group2:[
      {label:"bkey1", value: "bType"},
      {label:"", value: "b"}
    ]
  },
  promptAnswers:{},
  navigationType:"tab"
}

Import the control:

import NavigatorControl from "@sap-devx/controls-navigator";
const naviOptions = { vuetify };
app.use(NavigatorControl, naviOptions);

Import the css file:

import "@sap-devx/controls-navigator/dist/navigator-control.css";

Style overide

• Override “group title” and “group avatar” styles
  

• Override style for specific navigator type
  

  • For tab style
    

  • For stepper style
    

• Override “group summary” styles
  

How to obtain support

To get more help, support and information please open a github issue.

Contributing

Contributing information can be found in the CONTRIBUTING.md file.