Tabs

Overview

The Tabs component is a utility component used inside other components for selecting options. The Tabs component helps the user to select a single option from a list of options. Every option listed in the Tabs component is set with an action. When the user selects an option, the action for the corresponding option is invoked.

NOTE: The Tabs component is used inside the Mobile Banking application.

Using the Tabs Component

To use the Tabs component, a developer must follow these steps.

1. From Quantum Visualizer, open the application in the Design view.
2. Under the Project Explorer, expand the application name > Forms, and open the form to which the component is to be added.
3. Add the Tabs component to the form.
4. Under the Project Explorer, expand the application name > Controllers.
5. Select and open the form controller of the parent of the component.
6. In the Form Controller, invoke the setData method to set the list of options and their corresponding actions in the preShow or postShow event of the form.

The sample code given below shows how to define the set of options inside the Form Controller of the component consumer.

define({
	/**
	 * @api : preShow
	 * Gets invoked initially before rendering of UI
	 * @return : NA
	 */
	preshow: function() {
		var scope = this;
		var dataTab = [{
				key: "7days",
				label: "7days",
				onClick: scope.onClick
			},
			{
				key: "3M",
				label: "3M",
				onClick: scope.onClick
			},
			{
				key: "6M",
				label: "6M",
				onClick: scope.onClick
			},
			{
				key: "1Yr",
				label: "1Yr",
				onClick: scope.onClick
			},
			{
				key: "Custom",
				label: "Custom",
				onClick: scope.onClick,
				selected: true
			}
		];
		//set data to the tabs component
		scope.view.Tabs.setData(dataTab);
	},

	/**
	 * @api : onClick
	 * when the tab is clicked trigger this callback 
	 * @return : NA
	 */
	onClick: function(key) {
		switch (key) {
			case "7days":
				alert("tab displays " + key);
				break;
			case "3M":
				alert("tab displays " + key);
				break;
			case "6M":
				alert("tab displays " + key);
				break;
			case "1Yr":
				alert("tab displays " + key);
				break;
			case "Custom":
				alert("tab displays " + key);
				break;
		}
	},

});

Tab Contracts

The Toggle Tab component does not contain any properties or events. It contains the method given below to set the data.

• setData Method

setData Method

This method is used to define the list of options (or tabs) to be displayed and set their corresponding actions in the Tabs component.

this.view.Tabs.setData([{
		key: '1',
		label: 'Option 1',
		onClick: this.callback
	},
	{
		key: '2',
		label: 'Option 2',
		onClick: this.callback
	},
	{
		key: '3',
		label: 'Option 3',
		onClick: this.callback,
		selected: true
	},
]);