{"id":13714995,"url":"https://github.com/gohypergiant/StatusBarLayer","last_synced_at":"2025-05-07T03:31:06.714Z","repository":{"id":56824527,"uuid":"82228247","full_name":"gohypergiant/StatusBarLayer","owner":"gohypergiant","description":"A Framer module for generating accurate, customizable status bars for iOS app prototypes.","archived":false,"fork":false,"pushed_at":"2017-12-27T21:40:25.000Z","size":43,"stargazers_count":52,"open_issues_count":1,"forks_count":3,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-03T06:42:08.934Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gohypergiant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-16T21:32:16.000Z","updated_at":"2021-07-05T14:06:07.000Z","dependencies_parsed_at":"2022-09-01T13:11:10.176Z","dependency_job_id":null,"html_url":"https://github.com/gohypergiant/StatusBarLayer","commit_stats":null,"previous_names":["bpxl-labs/statusbarlayer"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gohypergiant%2FStatusBarLayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gohypergiant%2FStatusBarLayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gohypergiant%2FStatusBarLayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gohypergiant%2FStatusBarLayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gohypergiant","download_url":"https://codeload.github.com/gohypergiant/StatusBarLayer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252563155,"owners_count":21768413,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T00:00:52.810Z","updated_at":"2025-05-07T03:31:05.369Z","avatar_url":"https://github.com/gohypergiant.png","language":"CoffeeScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"# StatusBarLayer Framer Module\n\n[![license](https://img.shields.io/github/license/bpxl-labs/RemoteLayer.svg)](https://opensource.org/licenses/MIT)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](.github/CONTRIBUTING.md)\n[![Maintenance](https://img.shields.io/maintenance/yes/2017.svg)]()\n\n\u003ca href=\"https://open.framermodules.com/statusbarlayer\"\u003e\u003cimg alt=\"Install with Framer Modules\" src=\"https://www.framermodules.com/assets/badge@2x.png\" width='160' height='40' /\u003e\u003c/a\u003e\n\nThe 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.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/935/28138062-118c3a22-6715-11e7-81a7-1ef1c9cf81ef.gif\" width=\"500\" style=\"display: block; margin: auto\" alt=\"StatusBarLayer preview\" /\u003e\n\n### Installation\n\n#### NPM Installation\n\n```javascript\n$ cd /your/framer/project\n$ npm i @blackpixel/framer-statusbarlayer\n```\n\n#### Manual installation\n\nCopy or save the `StatusBarLayer.coffee` file into your project's `modules` folder.\n\n### Adding It to Your Project\n\nIn your Framer project, add the following:\n\n```coffeescript\n# If you manually installed\nStatusBarLayer = require \"StatusBarLayer\"\n# else\nStatusBarLayer = require \"@blackpixel/framer-statusbarlayer\"\n```\n\n### API\n\n#### `new StatusBarLayer`\n\nInstantiates a new instance of StatusBarLayer.\n\n#### Available options\n\n```coffeescript\nmyStatusBar = new StatusBarLayer\n\t# iOS version\n\tversion: \u003cnumber\u003e (10 || 11)\n\t\n\t# Text\n\tcarrier: \u003cstring\u003e\n\ttime: \u003cstring\u003e # if not set, will use local time\n\tpercent: \u003cnumber\u003e\n\t\n\t# Show or hide status items\n\tsignal: \u003cboolean\u003e\n\twifi: \u003cboolean\u003e\n\tpowered: \u003cboolean\u003e\n\tshowPercentage: \u003cboolean\u003e\n\tipod: \u003cboolean\u003e # also affects signal and carrier\n\t\n\t# Colors\n\tstyle: \u003cstring\u003e (\"light\" || \"dark\")\n\tforegroundColor: \u003cstring\u003e (hex or rgba)\n\tbackgroundColor: \u003cstring\u003e (hex or rgba)\n\tvibrant: \u003cboolean\u003e\n\t\n\t# Behavior\n\thide: \u003cboolean\u003e # initial visibility\n\tautoHide: \u003cboolean\u003e # hide in landscape where device-appropriate\n```\n\t\n#### Simulate call\n```coffeescript\nmyStatusBar.startCall(message, color) # \u003cstring\u003e, \u003cstring\u003e (hex or rgba)\nmyStatusBar.endCall()\n```\n\n#### Show and hide\n```coffeescript\nmyStatusBar.show()\nmyStatusBar.hide()\n```\n\t\t\n#### Check visibility and call status\n```coffeescript\nprint myStatusBar.hidden\nprint myStatusBar.onCall\n```\n\n### Example project\n[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.\n\n---\n\nWebsite: [blackpixel.com](https://blackpixel.com) \u0026nbsp;\u0026middot;\u0026nbsp;\nGitHub: [@bpxl-labs](https://github.com/bpxl-labs/) \u0026nbsp;\u0026middot;\u0026nbsp;\nTwitter: [@blackpixel](https://twitter.com/blackpixel) \u0026nbsp;\u0026middot;\u0026nbsp;\nMedium: [@bpxl-craft](https://medium.com/bpxl-craft)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgohypergiant%2FStatusBarLayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgohypergiant%2FStatusBarLayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgohypergiant%2FStatusBarLayer/lists"}