-
Notifications
You must be signed in to change notification settings - Fork 3
8. FAB (Floating Action Button)
FABs are buttons floating above the user interface of a form. They act as call to action buttons, intended to represent a single action that users perform most on that particular form screen.
The FAB function we propose will allow you to create and manage this type of floating buttons.
This function allows you to designate an instance as the main button that will contain a collection of other secondary buttons.
Once the roles have been defined, the main button will be assigned to a callback internal to the component allowing it to display or hide the other secondary buttons associated with the collection. When displayed, the secondary buttons will be distributed around the main button reproducing a circle shape. The size, direction and distribution of the secondary buttons on this circle can be defined via the properties linked to the FAB functionality.
It is possible to apply an animation when the secondary buttons are shown or hidden.
Name | Type | Default value | Description |
---|---|---|---|
mainBtn | boolean | False | If true, the button is designated as the main button of an FAB system. Its only function is to show and alternately hide the secondary buttons. Any callbacks defined (OnClick and OnDoubleClick) to this button will be ignored. |
btnCol | collection | empty collection | Collection of the names of the secondary buttons (name of the image form object) that will compose the FAB system. Their positions in the collection can be defined via an add function (FABAdd). |
clockwise | boolean | True | If true, the arrangement of the buttons is clockwise, if not, it is the opposite. |
startAngle | longint | 270 | Angle from which the first secondary button will be positioned. The values 0 to 359 are allowed. The value is in degrees. The starting point of the angle values (value 0) is located at 3 o'clock. |
angleToTravel | longint | 180 | Sets the relative size of the angle where the secondary buttons will have to be spaced starting from the start angle (startAngle) and based on the direction (clockwise). Values from 0 to 360 are allowed. The value is in degrees. |
radius | longint | 100 | Space between the secondary buttons and the main button. The value is in pixel. |
mainPosition | string | empty string | Allows you to use a button positioning predefined by the component (see sub-chapter "predefined positions"). Using a predefined position will automatically update the startAngle and angleToTravel properties. |
animation | boolean | False | Allows you to activate the FAB animation. |
Here are the 9 predefined positions and their identifiers that you can enter in the member function "FABMainPosition".
DEPRECATED SEE Class Functions
List of member functions linked to the FAB functionnality.
- FABIsMainButton ( { $active } ) : Getter/Setter for the property « mainBtn ».
- FABIsClockwise( { $clockwise } ) : Getter/Setter for the property « clockwise ».
- FABStartAngle ( { $angle } ) : Getter/Setter for the property « startAngle ».
- FABAngleToTravel ( { $angle } ) : Getter/Setter for the property « angleToTravel ».
- FABRadius ( { $radius } ) : Getter/Setter for the property « radius ».
- FABMainPosition ( { $namePosition } ) : Getter/Setter for the property « mainPosition ».
- FABAdd ( $nameBtn { ; $position } ) : Adds the name of a button to the collection. You can define its position in the list as an optional second parameter, otherwise it will be added at the end. If the name of a button already exists in the list, the method will act as a update method for the position but will not create a duplicate.
- FABRemove ( $nameBtn ) : Removes from the collection the name of the button in parameter.
- FABClearCollection ( ) : Removes all items in the collection.
- FABIsAnimated ( { $isActivated } ) : Activate/inactivate animation.
The first thing to do to implement the FAB function is to create each of the buttons that will compose it.
Once done, you will define an instance as the main button using the "FABIsMainButton" member function. This button will now have the sole function of showing and hiding the secondary buttons on the "On Mouse Up" and/or "On Double Click" events. Any callbacks defined (OnClick and OnDoubleClick) for this button will be ignored.
Then, you have to add to this instance the names of the other buttons with the "FABAdd" function, you can define their position in the collection. You can also activate the FAB animation.
When loading your form, the main button will automatically hide the secondary buttons. For a practical example of implementation, we advise you to look at the HDI_FAB form code in the component lab.
AJUI Button 1.3.3 - Wednesday, 29 July 2020
User Manual 🇺🇸