https://github.com/simongolms/device-bars
Add the appropriate device status and navigation bar to your web application and bring your mocks/prototypes/screenshots to the next level.
https://github.com/simongolms/device-bars
android device device-detection ionic ios mockup navigationbar screenshot statusbar stencil stenciljs web-component
Last synced: 6 months ago
JSON representation
Add the appropriate device status and navigation bar to your web application and bring your mocks/prototypes/screenshots to the next level.
- Host: GitHub
- URL: https://github.com/simongolms/device-bars
- Owner: SimonGolms
- License: mit
- Created: 2020-05-05T20:46:50.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T05:05:39.000Z (over 2 years ago)
- Last Synced: 2025-04-12T04:12:45.510Z (6 months ago)
- Topics: android, device, device-detection, ionic, ios, mockup, navigationbar, screenshot, statusbar, stencil, stenciljs, web-component
- Language: TypeScript
- Homepage: https://device-bars.stackblitz.io
- Size: 539 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Device Bars
> Add the appropriate device status and navigation bar to your web application and bring your mocks/prototypes/screenshots to the next level.
## Demo
[Live Demo](https://device-bars.stackblitz.io) | [Stackblitz](https://stackblitz.com/edit/device-bars?file=index.html)
## Installation
### Option 1: Node Modules
```bash
npm install device-bars --save
```
```html
...
```
### Option 2: Script Tag (via [`unpkg`](https://unpkg.com/))
```html
...
```
## Usage
Use the elements `` and `` anywhere in your template, JSX, html etc
```html
```
### device-status-bar
#### Properties
| Property | Attribute | Description | Type | Default |
| ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- |
| `background` | `background` | Sets the background color of the status bar | `string` | `undefined` |
| `color` | `color` | Set the color of the status bar text | `string` | `undefined` |
| `date` | `date` | The date to be displayed | `string` | `undefined` |
| `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` |
| `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` |
| `hide` | `hide` | Hides the Statusbar | `boolean` | `false` |
| `inline` | `inline` | Set the Statusbar inline | `boolean` | `false` |
| `mode` | `mode` | The mode determines which platform styles to use. | `string` | `undefined` |
| `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 element is detected, the css variable --ion-safe-area-* will be set. | `boolean` | `true` |
| `time` | `time` | The time to be displayed | `string` | `undefined` |
#### CSS Custom Properties
| Name | Description |
| -------------- | ----------------------------------- |
| `--background` | Background color of the status bar. |
| `--color` | Color of the status bar. |
| `--height` | Height of the status bar. |
### device-navigation-bar
#### Properties
| Property | Attribute | Description | Type | Default |
| ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- |
| `background` | `background` | Sets the background color of the navigation bar | `string` | `undefined` |
| `color` | `color` | Set the color of the navigation bar | `string` | `undefined` |
| `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` |
| `fill` | `fill` | (Android only) Sets the color to fill the icons in the navigation bar. | `string` | `undefined` |
| `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` |
| `hide` | `hide` | Hides the Statusbar | `boolean` | `false` |
| `inline` | `inline` | Set the Statusbar inline. | `boolean` | `false` |
| `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 element is detected, the css variable --ion-safe-area-* will be set. | `boolean` | `true` |
#### CSS Custom Properties
| Name | Description |
| -------------- | ----------------------------------- |
| `--background` | Background color of the status bar. |
| `--color` | Color of the status bar. |
| `--fill` | Height of the status bar. |
| `--height` | Height of the status bar. |
### Supported Devices
#### Android
- `Galaxy Note 3`, `Galaxy Note 3 landscape`
- `Galaxy Note II`, `Galaxy Note II landscape`
- `Galaxy S III`, `Galaxy S III landscape`
- `Galaxy S5`, `Galaxy S5 landscape`
- `Nexus 10`, `Nexus 10 landscape`
- `Nexus 4`, `Nexus 4 landscape`
- `Nexus 5`, `Nexus 5 landscape`, `Nexus 5X`, `Nexus 5X landscape`
- `Nexus 6`, `Nexus 6 landscape`, `Nexus 6P`, `Nexus 6P landscape`
- `Nexus 7`, `Nexus 7 landscape`
- `Pixel 2`, `Pixel 2 landscape`, `Pixel 2 XL`, `Pixel 2 XL landscape`
#### iOS
- `iPad (gen 6)`, `iPad (gen 6) landscape`
- `iPad (gen 7)`, `iPad (gen 7) landscape`
- `iPad Mini`, `iPad Mini landscape`
- `iPad Pro 11`, `iPad Pro 11 landscape`
- `iPad Pro 13`, `iPad Pro 13 landscape`
- `iPhone 6`, `iPhone 6 landscape`, `iPhone 6 Plus`, `iPhone 6 Plus landscape`
- `iPhone 7`, `iPhone 7 landscape`, `iPhone 7 Plus`, `iPhone 7 Plus landscape`
- `iPhone 8`, `iPhone 8 landscape`, `iPhone 8 Plus`, `iPhone 8 Plus landscape`
- `iPhone SE`, `iPhone SE landscape`
- `iPhone X`, `iPhone X landscape`
- `iPhone XR`, `iPhone XR landscape`
- `iPhone 11`, `iPhone 11 landscape`
- `iPhone 11 Pro`, `iPhone 11 Pro landscape`, `iPhone 11 Pro Max`, `iPhone 11 Pro Max landscape`
---
## Workspace
### Local Development
To start developing the `device-bars` web component using Stencil, clone this repo to a new directory:
```bash
git clone https://github.com/SimonGolms/device-bars.git device-bars
cd device-bars
git remote rm origin
```
```bash
npm install
npm start
```
### Build
To build `device-bars` for production, run:
```bash
npm run build
```
### Run Tests
```bash
npm test
```
### Repair
This command may be useful when obscure errors or issues are encountered. It removes and recreates dependencies of your project.
```bash
npm run repair
```
### Release & Publishing
Run `npm run release` to create a new build & 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.
The new release gets published to GitHub and npm automatically.
### Further Help
Check out the Stencil docs [here](https://stenciljs.com/docs).
#### Committing
Run `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.
Further 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)
---
## Author
**Simon Golms**
- Digital Card: `npx simongolms`
- Github: [@SimonGolms](https://github.com/SimonGolms)
- Website: [gol.ms](https://gol.ms)
## Roadmap
- [ ] Support Status (e.g. Call, GPS, Record)
- [ ] Angular Component
- [ ] React Component
## Contributing
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/simongolms/device-bars/issues).
## Show Your Support
Give a ⭐️ if this project helped you!
## License
Copyright © 2020 [Simon Golms](https://github.com/SimonGolms).
This project is [MIT](https://github.com/simongolms/device-bars/blob/master/LICENSE) licensed.
## Resources
- [Android bars](https://material.io/design/platform-guidance/android-bars.html)
- [Apple | ios | Status Bars](https://developer.apple.com/design/human-interface-guidelines/ios/bars/status-bars/)
- [Capacitor | Status Bar](https://capacitor.ionicframework.com/docs/apis/status-bar/)
- [React Native | Status Bar](https://reactnative.dev/docs/statusbar)