Awesome
Status Bar Module
Module to instantiate an iOS status bar in your Framer application. Currently only supports iPhone X. We're working on expanding to different iOS devices and to Android devices.
Getting Started
Instructions to place the status bar module in your prototype and get you up and running.
Import module
Copy and paste the statusBarModule.coffee file from this application's modules folder into your own project's module folder. Then import the module into your application via:
statusBarModule = require 'statusBarModule'
Status Bar Component
Copy and paste the statusBar
design component from the project into your application's design mode. The module relies on this specific frame and its children.
Set the Status Bar Color
The status bar has two colors - black and white. Depending on your application, you will want to instantiate your status bar to the applicable color, and perhaps change that color with user interaction. To do so, use the following function:
statusBarModule.setStatusBarState('blackOrWhite')
Where blackOrWhite
is a string of the color of your choice.
Set the Placement of your Status Bar
Your status bar should always be placed at the top, right hand corner of your application. To do so, use the following function:
statusBarModule.setStatusBarPlacement()
This function automatically places your status bar in the appropriate position. Call this function at the end of your application to ensure that the status bar stays on top of other layers in your Framer app.
Set Time
Set the time in your status bar to the current time in your system clock with the following function:
statusBarModule.setStatusBarTime()
Upcoming Developments
Support for multiple devices and multi colored status bars are on the horizon. Stay tuned!