Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gohypergiant/StatusBarLayer

A Framer module for generating accurate, customizable status bars for iOS app prototypes.
https://github.com/gohypergiant/StatusBarLayer

Last synced: about 2 months ago
JSON representation

A Framer module for generating accurate, customizable status bars for iOS app prototypes.

Host: GitHub
URL: https://github.com/gohypergiant/StatusBarLayer
Owner: gohypergiant
License: mit
Created: 2017-02-16T21:32:16.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2017-12-27T21:40:25.000Z (about 7 years ago)
Last Synced: 2024-10-30T23:49:38.855Z (2 months ago)
Language: CoffeeScript
Homepage:
Size: 42 KB
Stars: 52
Watchers: 8
Forks: 3
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-framer - Framer StatusBarLayer - Module for generating accurate, customizable status bars for iOS app prototypes. (Modules)

README

        # StatusBarLayer Framer Module

[![license](https://img.shields.io/github/license/bpxl-labs/RemoteLayer.svg)](https://opensource.org/licenses/MIT)

[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](.github/CONTRIBUTING.md)

[![Maintenance](https://img.shields.io/maintenance/yes/2017.svg)]()



The StatusBarLayer module allows you to instantly generate an accurate status bar for your iPhone and iPad app prototypes. Appearance and status items are customizable, and the module will mimic iOS orientation-switch behavior according to device type. Events that affect the status bar, such as calls, may also be simulated.



### Installation

#### NPM Installation

```javascript

$ cd /your/framer/project

$ npm i @blackpixel/framer-statusbarlayer

```

#### Manual installation

Copy or save the `StatusBarLayer.coffee` file into your project's `modules` folder.

### Adding It to Your Project

In your Framer project, add the following:

```coffeescript

# If you manually installed

StatusBarLayer = require "StatusBarLayer"

# else

StatusBarLayer = require "@blackpixel/framer-statusbarlayer"

```

### API

#### `new StatusBarLayer`

Instantiates a new instance of StatusBarLayer.

#### Available options

```coffeescript

myStatusBar = new StatusBarLayer

	# iOS version

	version:  (10 || 11)

	

	# Text

	carrier: 

	time:  # if not set, will use local time

	percent: 

	

	# Show or hide status items

	signal: 

	wifi: 

	powered: 

	showPercentage: 

	ipod:  # also affects signal and carrier

	

	# Colors

	style:  ("light" || "dark")

	foregroundColor:  (hex or rgba)

	backgroundColor:  (hex or rgba)

	vibrant: 

	

	# Behavior

	hide:  # initial visibility

	autoHide:  # hide in landscape where device-appropriate

```

	

#### Simulate call

```coffeescript

myStatusBar.startCall(message, color) # ,  (hex or rgba)

myStatusBar.endCall()

```

#### Show and hide

```coffeescript

myStatusBar.show()

myStatusBar.hide()

```

		

#### Check visibility and call status

```coffeescript

print myStatusBar.hidden

print myStatusBar.onCall

```

### Example project

[Download](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/bpxl-labs/StatusBarLayer/tree/master/example.framer) the example to try it for yourself.

---

Website: [blackpixel.com](https://blackpixel.com)  · 

GitHub: [@bpxl-labs](https://github.com/bpxl-labs/)  · 

Twitter: [@blackpixel](https://twitter.com/blackpixel)  · 

Medium: [@bpxl-craft](https://medium.com/bpxl-craft)