Explore
This component is used in the Infinity Origination app (previously known as Onboarding app) to display additional information to the users.
Following are the various views of the Explore component:
-
Desktop & tablet view: width > 640
The following gif shows right, centre, and left positions.
-
Mobile view : width < 640
When the width of the view is greater than 1380, the image is chipped vertically by maintaining the aspect ratio of the image.
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:
- Clip bounds: "Off"
- Height: "preferred"
- Width: "100%"
- Insert the component in the Flex and write the following code in the respective form Controller's onBreakPointChange function.
this.view.SelectProducts.onBreakpointChange(eventObj,width); //width is the current breakpoint value //eventObj is the component instance
APIs
setData
Sets the data to the component
Parameters:
- data (Object) - mandatory
This is set to the following:- The banner image source.
- Banner text
- Button text and
- The callback for the button click.
Example:
var data = {
imgAdSrc : "bannertwo.png",
bannerText : "Checking to fit your business needs",
btnText : "Open New Account",
btnOnclick : function(){
alert("open New Account btn clicked!!");
},
};
this.view.Explore1.setData(data);
Callbacks
The callback for the button onClick is set as a part of data in setData API.
In this topic