{"id":15012869,"url":"https://github.com/simongolms/device-bars","last_synced_at":"2025-04-12T04:12:51.741Z","repository":{"id":38175029,"uuid":"261579533","full_name":"SimonGolms/device-bars","owner":"SimonGolms","description":"Add the appropriate device status and navigation bar to your web application and bring your mocks/prototypes/screenshots to the next level.","archived":false,"fork":false,"pushed_at":"2023-01-06T05:05:39.000Z","size":552,"stargazers_count":3,"open_issues_count":15,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T04:12:45.510Z","etag":null,"topics":["android","device","device-detection","ionic","ios","mockup","navigationbar","screenshot","statusbar","stencil","stenciljs","web-component"],"latest_commit_sha":null,"homepage":"https://device-bars.stackblitz.io","language":"TypeScript","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/SimonGolms.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://www.paypal.me/golms"]}},"created_at":"2020-05-05T20:46:50.000Z","updated_at":"2023-10-18T16:20:08.000Z","dependencies_parsed_at":"2023-02-05T09:31:07.343Z","dependency_job_id":null,"html_url":"https://github.com/SimonGolms/device-bars","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonGolms%2Fdevice-bars","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonGolms%2Fdevice-bars/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonGolms%2Fdevice-bars/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimonGolms%2Fdevice-bars/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimonGolms","download_url":"https://codeload.github.com/SimonGolms/device-bars/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248514205,"owners_count":21116903,"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":["android","device","device-detection","ionic","ios","mockup","navigationbar","screenshot","statusbar","stencil","stenciljs","web-component"],"created_at":"2024-09-24T19:43:21.328Z","updated_at":"2025-04-12T04:12:51.721Z","avatar_url":"https://github.com/SimonGolms.png","language":"TypeScript","funding_links":["https://www.paypal.me/golms"],"categories":[],"sub_categories":[],"readme":"# Device Bars \u003c!-- omit in toc --\u003e\n\n\u003cp\u003e\n  \u003ca href=\"https://stenciljs.com/\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Build with Stencil\" src=\"https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/device-bars\" target=\"_blank\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/device-bars.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/simongolms/device-bars#readme\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Documentation\" src=\"https://img.shields.io/badge/documentation-yes-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/simongolms/device-bars/graphs/commit-activity\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Maintenance\" src=\"https://img.shields.io/badge/Maintained%3F-yes-green.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://conventionalcommits.org\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Conventional Commits\" src=\"https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/simongolms/device-bars/blob/master/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/license/simongolms/device-bars\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#badge\"\u003e\n    \u003cimg alt=\"semantic-release\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e Add the appropriate device status and navigation bar to your web application and bring your mocks/prototypes/screenshots to the next level.\n\n## Demo\n\n[Live Demo](https://device-bars.stackblitz.io) | [Stackblitz](https://stackblitz.com/edit/device-bars?file=index.html)\n\n![device-bars-showcase](https://github.com/SimonGolms/device-bars/raw/master/docs/showcase.png)\n\n## Installation\n\n### Option 1: Node Modules\n\n```bash\nnpm install device-bars --save\n```\n\n```html\n\u003c!-- index.html --\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src='node_modules/device-bars/dist/device-bars.js'\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  ...\n\u003c/html\u003e\n```\n\n### Option 2: Script Tag (via [`unpkg`](https://unpkg.com/))\n\n```html\n\u003c!-- index.html --\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"module\" src=\"https://unpkg.com/device-bars@1.1.2/dist/device-bars/device-bars.esm.js\"\u003e\u003c/script\u003e\n    \u003cscript nomodule src=\"https://unpkg.com/device-bars@1.1.2/dist/device-bars/device-bars.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  ...\n\u003c/html\u003e\n```\n\n## Usage\n\nUse the elements `\u003cdevice-status-bar /\u003e` and `\u003cdevice-navigation-bar /\u003e` anywhere in your template, JSX, html etc\n\n```html\n\u003c!-- index.html --\u003e\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cdevice-status-bar device=\"iPhone 11\" color=\"#000\" background=\"transparent\"\u003e\u003c/device-status-bar\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cdevice-navigation-bar device=\"iPhone 11\"\u003e\u003c/device-navigation-bar\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### device-status-bar\n\n#### Properties\n\n| Property     | Attribute    | Description                                                                                                                                                                                                                                                                          | Type      | Default     |\n| ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- |\n| `background` | `background` | Sets the background color of the status bar                                                                                                                                                                                                                                          | `string`  | `undefined` |\n| `color`      | `color`      | Set the color of the status bar text                                                                                                                                                                                                                                                 | `string`  | `undefined` |\n| `date`       | `date`       | The date to be displayed                                                                                                                                                                                                                                                             | `string`  | `undefined` |\n| `device`     | `device`     | Predefined device descriptor name, such as \"iPhone X\" or \"Pixel 2\". For a complete list please see: `DEVICES` at ./../utils/device.ts                                                                                                                                                | `string`  | `undefined` |\n| `height`     | `height`     | Sets the height of the navigation bar. By default, the height is derived from the specified device safe-area, but it can also be adjusted manually.                                                                                                                                  | `string`  | `undefined` |\n| `hide`       | `hide`       | Hides the Statusbar                                                                                                                                                                                                                                                                  | `boolean` | `false`     |\n| `inline`     | `inline`     | Set the Statusbar inline                                                                                                                                                                                                                                                             | `boolean` | `false`     |\n| `mode`       | `mode`       | The mode determines which platform styles to use.                                                                                                                                                                                                                                    | `string`  | `undefined` |\n| `safeArea`   | `safe-area`  | Adds an additional safe-area for the status and navigation bar. The respective height is derived from the specified device. By default, the safe-area is implemented via padding on the body. If an \u003cion-app /\u003e element is detected, the css variable --ion-safe-area-* will be set. | `boolean` | `true`      |\n| `time`       | `time`       | The time to be displayed                                                                                                                                                                                                                                                             | `string`  | `undefined` |\n\n\n#### CSS Custom Properties\n\n| Name           | Description                         |\n| -------------- | ----------------------------------- |\n| `--background` | Background color of the status bar. |\n| `--color`      | Color of the status bar.            |\n| `--height`     | Height of the status bar.           |\n\n### device-navigation-bar\n\n#### Properties\n\n| Property     | Attribute    | Description                                                                                                                                                                                                                                                                          | Type      | Default     |\n| ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- |\n| `background` | `background` | Sets the background color of the navigation bar                                                                                                                                                                                                                                      | `string`  | `undefined` |\n| `color`      | `color`      | Set the color of the navigation bar                                                                                                                                                                                                                                                  | `string`  | `undefined` |\n| `device`     | `device`     | Predefined device descriptor name, such as \"iPhone X\" or \"Pixel 2\". For a complete list please see: `DEVICES` at ./../utils/device.ts                                                                                                                                                | `string`  | `undefined` |\n| `fill`       | `fill`       | (Android only) Sets the color to fill the icons in the navigation bar.                                                                                                                                                                                                               | `string`  | `undefined` |\n| `height`     | `height`     | Sets the height of the navigation bar. By default, the height is derived from the specified device safe-area, but it can also be adjusted manually.                                                                                                                                  | `string`  | `undefined` |\n| `hide`       | `hide`       | Hides the Statusbar                                                                                                                                                                                                                                                                  | `boolean` | `false`     |\n| `inline`     | `inline`     | Set the Statusbar inline.                                                                                                                                                                                                                                                            | `boolean` | `false`     |\n| `safeArea`   | `safe-area`  | Adds an additional safe-area for the status and navigation bar. The respective height is derived from the specified device. By default, the safe-area is implemented via padding on the body. If an \u003cion-app /\u003e element is detected, the css variable --ion-safe-area-* will be set. | `boolean` | `true`      |\n\n#### CSS Custom Properties\n\n| Name           | Description                         |\n| -------------- | ----------------------------------- |\n| `--background` | Background color of the status bar. |\n| `--color`      | Color of the status bar.            |\n| `--fill`       | Height of the status bar.           |\n| `--height`     | Height of the status bar.           |\n\n### Supported Devices\n\n#### Android\n\n- `Galaxy Note 3`, `Galaxy Note 3 landscape`\n- `Galaxy Note II`, `Galaxy Note II landscape`\n- `Galaxy S III`, `Galaxy S III landscape`\n- `Galaxy S5`, `Galaxy S5 landscape`\n- `Nexus 10`, `Nexus 10 landscape`\n- `Nexus 4`, `Nexus 4 landscape`\n- `Nexus 5`, `Nexus 5 landscape`, `Nexus 5X`, `Nexus 5X landscape`\n- `Nexus 6`, `Nexus 6 landscape`, `Nexus 6P`, `Nexus 6P landscape`\n- `Nexus 7`, `Nexus 7 landscape`\n- `Pixel 2`, `Pixel 2 landscape`, `Pixel 2 XL`, `Pixel 2 XL landscape`\n\n#### iOS\n\n- `iPad (gen 6)`, `iPad (gen 6) landscape`\n- `iPad (gen 7)`, `iPad (gen 7) landscape`\n- `iPad Mini`, `iPad Mini landscape`\n- `iPad Pro 11`, `iPad Pro 11 landscape`\n- `iPad Pro 13`, `iPad Pro 13 landscape`\n- `iPhone 6`, `iPhone 6 landscape`, `iPhone 6 Plus`, `iPhone 6 Plus landscape`\n- `iPhone 7`, `iPhone 7 landscape`, `iPhone 7 Plus`, `iPhone 7 Plus landscape`\n- `iPhone 8`, `iPhone 8 landscape`, `iPhone 8 Plus`, `iPhone 8 Plus landscape`\n- `iPhone SE`, `iPhone SE landscape`\n- `iPhone X`, `iPhone X landscape`\n- `iPhone XR`, `iPhone XR landscape`\n- `iPhone 11`, `iPhone 11 landscape`\n- `iPhone 11 Pro`, `iPhone 11 Pro landscape`, `iPhone 11 Pro Max`, `iPhone 11 Pro Max landscape`\n\n---\n\n## Workspace\n\n### Local Development\n\nTo start developing the `device-bars` web component using Stencil, clone this repo to a new directory:\n\n```bash\ngit clone https://github.com/SimonGolms/device-bars.git device-bars\ncd device-bars\ngit remote rm origin\n```\n\n```bash\nnpm install\nnpm start\n```\n\n### Build\n\nTo build `device-bars` for production, run:\n\n```bash\nnpm run build\n```\n\n### Run Tests\n\n```bash\nnpm test\n```\n\n### Repair\n\nThis command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.\n\n```bash\nnpm run repair\n```\n\n### Release \u0026 Publishing\n\nRun `npm run release` to create a new build \u0026 release with [`semantic-release`](https://github.com/semantic-release/semantic-release). This bumps the version of `package.json`, uses [conventional-changelog](https://github.com/conventional-changelog/conventional-changelog) to update CHANGELOG.md and references in the README.md, commits package.json, CHANGELOG.md and tags a new release.\u003cbr/\u003eThe new release gets published to GitHub and npm automatically.\n\n### Further Help\n\nCheck out the Stencil docs [here](https://stenciljs.com/docs).\n\n#### Committing\n\nRun `npx git-cz` to generate a valid commit message. It’s easy to forget about the commit convention so to be consistent use [commitizen](https://github.com/commitizen/cz-cli) to generate our commits and husky to manage a Git commit-msg hook to validate the commit message.\nFurther information: [How to automate versioning and publication of an npm package](https://itnext.io/how-to-automate-versioning-and-publication-of-an-npm-package-233e8757a526)\n\n---\n\n## Author\n\n**Simon Golms**\n\n- Digital Card: `npx simongolms`\n- Github: [@SimonGolms](https://github.com/SimonGolms)\n- Website: [gol.ms](https://gol.ms)\n\n## Roadmap\n\n- [ ] Support Status (e.g. Call, GPS, Record)\n- [ ] Angular Component\n- [ ] React Component\n\n## Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://github.com/simongolms/device-bars/issues).\n\n## Show Your Support\n\nGive a ⭐️ if this project helped you!\n\n## License\n\nCopyright © 2020 [Simon Golms](https://github.com/SimonGolms).\u003cbr /\u003e\nThis project is [MIT](https://github.com/simongolms/device-bars/blob/master/LICENSE) licensed.\n\n## Resources\n\n- [Android bars](https://material.io/design/platform-guidance/android-bars.html)\n- [Apple | ios | Status Bars](https://developer.apple.com/design/human-interface-guidelines/ios/bars/status-bars/)\n- [Capacitor | Status Bar](https://capacitor.ionicframework.com/docs/apis/status-bar/)\n- [React Native | Status Bar](https://reactnative.dev/docs/statusbar)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimongolms%2Fdevice-bars","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimongolms%2Fdevice-bars","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimongolms%2Fdevice-bars/lists"}