IOS Timer Widget
Implement iOS-style timers in Blup for countdowns and timing features in your application.
Last updated
Implement iOS-style timers in Blup for countdowns and timing features in your application.
Last updated
Integrating an iOS-style Timer widget into your UI is simple. Follow these steps to make it happen:
1. Drag the IOS Timer widget from the Insert menu and drop it into your desired location within your UI.
2. Customize the appearance and behavior of the IOS Timer by adjusting its properties in the editing section on the right.
3. Additionally, you can select the mode and theme type of the Timer. The mode determines whether the Timer displays HoursMinutes, MinutesSeconds or HourMinuteSecond, while the theme type controls the visual style of the Timer.
| Component | Description |
|---|---|
Align Icons | Click icons or use shortcut keys to align Timer Widget. For example, click "Align Left" or use Ctrl+Shift+Left to left-align Timer Widget. |
Postitions | Set Timer Widget positions on the X and Y axis of the mobile canvas. |
Timer Widget Size | Specify the width and height of the Timer Widget by providing values for width (w) and height (h). |
Z rotation | Rotate the Timer Widget by specifying a rotation value. |
Border Radius | Adjust corner curvature to create rounded corners. Individual corner adjustments are available by clicking on each corner. |
Margin | Provide margin to the Timer Widget from any of the four directions by specifying the margin value. |
Time picker IOS Mode | Select the mode of the timer in which you want to show the Timer widget: Hm (HourMinute), Ms (MinuteSecond), or both. |
Theme type | Choose between light or dark theme for your Timer widget. |
Fill | Apply a color to the Timer widget. |
Border Color | Choose a color to set the border color of the Timer widget. Adjust the border color from inside, outside, or center of the Timer widget by selecting it from the drop-down. |
Shadow | Apply a shadow effect to the Timer by selecting either a normal or inner shadow type. |
Visible | By checking the checkbox the entire Timer widget will be hidden. |
If you have any ideas to make Blup better you can share them through our Discord community channel
