Navigation Buttons
This component is used for providing buttons for navigation in multiple forms.
Following are the various views of the Navigation Buttons component:
- Desktop & tablet view : width > 640
- Mobile view : width < 640
Assumptions:
- There are a maximum of 3 buttons, 1 primary and 2 secondary buttons.
- The buttons width is fixed(150 Dp) for both Desktop and tablet, but will extend to edges leaving a gutterspace of 20 Dp in mobile.
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:
- Height: preferred
- Width: "100%"
- left: "0%"
- Insert the component in the Flex Container.
APIs
setData
Sets the text and properties of the nav buttons.
Parameters:
- data (Object) - mandatory
This contains the data which will be set to the navigation buttons. It has 3 keys.- btnPrimary
- btnSecondary1
- btnSecondary2
Each key contains the following properties:
- text (String) - button text
- texti18n (String) - i18n key for the button
- accessibilityConfig (Object) - a11y config for the button
- onClickCallback (function) - a callback function which gets triggered after click of the button
- isEnabled (Boolean) - is the button enabled
The isEnabled key is available only for btnPrimary.
Example:
var data = {
btnPrimary: {
text: "Continue",
texti18n: "i18n.components.btns.continue",
isEnabled: true,
onClickCallback: this.sampleCallback,
},
btnSecondary1: {
text: "Back",
texti18n: "i18n.components.btns.back",
},
btnSecondary2: {
text: "Save & Leave",
texti18n: "i18n.components.btns.saveAndLeave",
},
};
this.view.navButtons.setData(data);
disablePrimaryBtn
This method is used to disable the primary button
Example:
this.view.navButtons.disablePrimaryBtn();
enablePrimaryBtn
This method is used to enable the primary button
Example:
this.view.navButtons.enablePrimaryBtn();
Callbacks
Every button has its own callback. They are provided as a part of the data in setData API.
In this topic