FAB Widget
Implement floating action buttons in Blup to enhance user interactions and improve app accessibility.
Last updated
Implement floating action buttons in Blup to enhance user interactions and improve app accessibility.
Last updated
To utilize an FAB(FloatingActionButton) in your UI, adhere to these steps:
1. Drag the FAB widget from the Insert menu and drop it into your desired location within your UI.
2. Customize the appearance and behavior of the FAB by adjusting its properties in the editing section on the right.
If you have any ideas to make Blup better you can share them through our Discord community channel
| Component | Description |
|---|---|
Align Icons | Click icons or use shortcut keys to align FAB Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align FAB Widget. |
Postitions | Set FAB positions on the X and Y axis of the mobile canvas. |
FAB Size | Specify the width and height of the FAB widget by providing values for width (W) and height (H). |
Z rotation | Rotate the FAB by specifying a rotation value. |
Border Radius | Adjust corner curvature by providing a value to create rounded corners. Individual corner adjustments are available by clicking on each corner. |
Margin | Provide margin to the FAB widget from any of the four directions by specifying the margin value. |
FAB Button Color | This section will give FAB Button a selected color. |
Splash Color | This section will give FAB a splash color. Splash color is the color displayed when the FAB is tapped. |
Hover Color | This section will give FAB a hover color. The hover color is the color displayed when the mouse cursor hovers over the FAB. |
Focus Color | This section will give FAB a focus color. The focus color is the color displayed when the FAB receives focus, typically via keyboard navigation |
Tooltip | Give it a tooltip according to your usage. A tooltip provides a brief description or hint about the function of a widget when the user long-presses or hovers over it. |
Padding | Give the padding to the FAB widget from inside. |
Elevation | Give it a required Elevaition by entering a value. |
Disabled Elevation | Give it a required Disabled Elevaition by entering a value. |
Focus Elevation | Give it a required Focus Elevaition by entering a value. so that when user focus over it it will get elevated that much. |
Hover Elevation | Give it a required Hover Elevaition by entering a value. so that when user Hover over it it will get elevated that much. |
Highlight Elevation | Give it a required Highlight Elevaition by entering a value. when the FAB is highlighted it get the elevation. |
Icon | Select the Icon according to your need that you want to show on to you FAB widget. |
Icon Color | Change the icon color according to your need. |
Icon Size | Change the size of icon according to your need. |
Visible | By checking the checkbox the entire selected FAB Widget will be hidden. |
