@sap-devx/controls-navigator
v3.0.6
Published
Navigator control
Downloads
62
Readme
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.