Breadcrumbs
This component is used to show the page trail in landing screens in the Infinity Origination app (previously known as Onboarding app). In mobile breakpoint, the breadcrumbs are horizontally scrollable if the breadcrumbs exceed the width of the device.
Following are the various views of the Breadcrumbs component:
- Desktop & tablet view
- Mobile view
Maximum number of links inside the breadcrumb is 4.
Usage
Here are the steps to set the component in Quantum Visualizer:
- Open the Infinity Origination project in Quantum Visualizer.
- Drag and drop a Flex Container widget onto the required form.
- Select the Flex Container and set the following properties:
- width, left and top as per design requirements.
- height: "50 Dp"
- Insert the component in the Flex Container.
APIs
setData
Sets data to the component.
Parameters:
data (Array of Objects) - mandatory
Each object corresponds to a link in the component.
Maximum number of objects is 4 because the max number of links inside the component is 4.
Example:
var data = [{
text: "Products", //link text
onClickCallback: onClickCallback1 // callback for onClick
}, {
text: "Checking Account",
onClickCallback: onClickCallback2
}, {
text: "Infinity Free Checking Account",
}]
var onClickCallback1 = function(eventobject) {
kony.print("clicked on : " + eventobject.id);
}
var onClickCallback2 = function(eventobject) {
kony.print("clicked on : " + eventobject.id);
}
this.view.allocateFunds.setData(data);
Callbacks
onClickCallback
This function is called on the onClick events of the links in the Breadcrumbs component. This is set in the setData method of the component.
Parameters:
eventObject (Object)
The callback is called with eventobject as a parameter. eventobject is the reference to link widget.
Example:
var data = [{
text: "Products", //link text
onClickCallback: onClickCallback1 // callback for onClick
}, {
text: "Checking Account",
onClickCallback: onClickCallback2
}, {
text: "Infinity Free Checking Account",
}]
var onClickCallback1 = function(eventobject) {
kony.print("clicked on : " + eventobject.id);
}
var onClickCallback2 = function(eventobject) {
kony.print("clicked on : " + eventobject.id);
}
this.view.allocateFunds.setData(data);
In this topic