| Table of Contents | ||
|---|---|---|
|
...
The TabWidget provides a elegant way to display multiple “pages“ of related content within the same DSL view and an alternative to page actions or buttons.
...
Attributes
alignment: String - Determines the horizontal position of the tabs. Can be one of left, center, right
direction: String - Determines orientation of the tabs. Can be one of horizontal or vertical
stacked: Boolean - Used to display the icon for each tab above the label of the tab instead of before the label
activeTab: Number - Used to identify the current active tab
items: JSON Array - The actual tab items. Each item consists of id, icon and label
id: Number - The ID of the Tab
icon: String || Null - Icon name as determined from https://pictogrammers.com/library/mdi/
label: String - The tab label
A complete example of the JSON:
| Code Block |
|---|
{
"alignment": "left",
"direction": "horizontal",
"stacked": false,
"activeTab": 1,
"items": [
{
"id": 1,
"label": "Tab 1",
"icon": "home"
},
{
"id": 2,
"label": "Tab 2",
"icon": null
}
]
} |
Example
.vxml
| Code Block | ||
|---|---|---|
| ||
<raw type="TabWidget" action="tabAction">
<content variable="rawTabContent" />
</raw>
<info label="info.example" allowMarkdown="true" cols-md="12" cols-xs="12" variant="clear">
<visible function="showTabOneContent"/>
<binding function="getTabOneContent"/>
</info>
<info label="info.example" allowMarkdown="true" cols-md="12" cols-xs="12" variant="clear">
<visible function="showTabTwoContent"/>
<binding function="getTabTwoContent"/>
</info> |
.mez
| Code Block |
|---|
unit TabWidget;
json rawTabContent;
void init() {
rawTabContent = /%
{
"alignment": "left",
"direction": "horizontal",
"stacked": false,
"activeTab": 1,
"items": [
{
"id": 1,
"label": "Tab 1",
"icon": "home"
},
{
"id": 2,
"label": "Tab 2",
"icon": null
}
]
}
%/;
}
DSL_VIEWS tabAction(json tabResponse) {
tabItem.activeTab = tabResponse.jsonGet("id");
rawTabContent.jsonPut("activeTab", tabItem.activeTab);
string alertMessage = tabItem.activeTab;
Mez:alert("alert.alert_message");
return null;
}
bool showTabOneContent(){
if(tabItem.activeTab == 1){
return true;
}
return false;
}
bool showTabTwoContent(){
if(tabItem.activeTab == 2){
return true;
}
return false;
}
string getTabOneContent() {
string result = /%
### Tab One Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique facilisis sapien ut rhoncus. Duis ornare id quam eget mattis. Phasellus accumsan vel libero sit amet hendrerit. Nam vitae mollis purus. Sed ullamcorper vel quam eu dictum. Quisque faucibus, odio ut varius vulputate, justo orci pellentesque tortor, auctor sagittis ipsum magna eu neque. Proin hendrerit justo a odio accumsan, eget ultricies mi sagittis.
%/;
return result;
}
string getTabTwoContent() {
string result = /%
### Tab Two Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique facilisis sapien ut rhoncus. Duis ornare id quam eget mattis. Phasellus accumsan vel libero sit amet hendrerit. Nam vitae mollis purus. Sed ullamcorper vel quam eu dictum. Quisque faucibus, odio ut varius vulputate, justo orci pellentesque tortor, auctor sagittis ipsum magna eu neque. Proin hendrerit justo a odio accumsan, eget ultricies mi sagittis.
%/;
return result;
} |