diff --git a/CHANGELOG.md b/CHANGELOG.md index ffe9fbe..f655e1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,21 +2,12 @@ ## [1.0.1](https://github.com/SimonGolms/device-bars/compare/v1.0.0...v1.0.1) (2020-05-05) - ### Bug Fixes * trigger new release ([0dde404](https://github.com/SimonGolms/device-bars/commit/0dde4041635465a675be4959739315428716aac4)) -# 1.0.0 (2020-05-05) - +## 1.0.0 (2020-05-05) ### Features * initial commit ([aa5bfcd](https://github.com/SimonGolms/device-bars/commit/aa5bfcdb117941d3edfb9dc144e4de7e03d101b0)) - -# 1.0.0 (2020-05-05) - - -### Features - -* inital commit ([9e4d836](https://github.com/SimonGolms/device-bars/commit/9e4d836c2e9ac403bee2b6c451d9b94a7adf1afd)) diff --git a/README.md b/README.md index c65faa3..7df7fba 100644 --- a/README.md +++ b/README.md @@ -70,11 +70,94 @@ Use the elements `` and `` anywher
- + ``` +### 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 @@ -119,6 +202,8 @@ Check out the Stencil docs [here](https://stenciljs.com/docs). 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** diff --git a/src/components.d.ts b/src/components.d.ts index b571beb..488f727 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -9,55 +9,63 @@ export namespace Components { interface DeviceNavigationBar { /** * Sets the background color of the navigation bar - * @defaultvalue 'transparent' + * @default 'transparent' + * @example // dark style * @type {string} - * @memberof DeviceStatusBar + * @memberof DeviceNavigationBar */ "background": string; /** * Set the color of the navigation bar * @default '#000' + * @example // dark style * @type {string} - * @memberof DeviceStatusBar + * @memberof DeviceNavigationBar */ "color": string; /** - * The model to be used + * Predefined device descriptor name, such as "iPhone X" or "Pixel 2". For a complete list please see: `DEVICES` at ./../utils/device.ts + * @default {{AUTO_DETECTION}} + * @type {string} + * @memberof DeviceNavigationBar */ "device": string; /** * (Android only) Sets the color to fill the icons in the navigation bar. - * @constant * @default 'none' + * @example * @type {string} - * @type {string} - * @memberof Statusbar + * @memberof DeviceNavigationBar */ "fill": string; /** - * Sets the height of the navigation bar. By default, the height is derived from the specified device, but it can also be adjusted manually. + * 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. + * @default {{DEVICE}}.safeArea.bottom * @example * @type {string} - * @memberof DeviceStatusBar + * @memberof DeviceNavigationBar */ "height": string; /** * Hides the Statusbar * @default false + * @example * @type {string} - * @memberof Statusbar + * @memberof DeviceNavigationBar */ "hide": boolean; /** - * Set the Statusbar inline + * Set the Statusbar inline. * @default false + * @example * @type {string} - * @memberof Statusbar + * @memberof DeviceNavigationBar */ "inline": boolean; /** * 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. * @default true + * @example * @type {string} * @memberof DeviceNavigationBar */ @@ -66,7 +74,8 @@ export namespace Components { interface DeviceStatusBar { /** * Sets the background color of the status bar - * @defaultvalue 'transparent' + * @default 'transparent' + * @example // dark style * @type {string} * @memberof DeviceStatusBar */ @@ -74,6 +83,7 @@ export namespace Components { /** * Set the color of the status bar text * @default '#000' + * @example // dark style * @type {string} * @memberof DeviceStatusBar */ @@ -87,12 +97,16 @@ export namespace Components { */ "date": string; /** - * The model to be used + * Predefined device descriptor name, such as "iPhone X" or "Pixel 2". For a complete list please see: `DEVICES` at ./../utils/device.ts + * @default {{AUTO_DETECTION}} + * @type {string} + * @memberof DeviceStatusBar */ "device": string; /** - * Sets the background color of the status bar - * @default 'device.safeArea.top' + * 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. + * @default {{DEVICE}}.safeArea.top + * @example * @type {string} * @memberof DeviceStatusBar */ @@ -100,6 +114,7 @@ export namespace Components { /** * Hides the Statusbar * @default false + * @example * @type {string} * @memberof DeviceStatusBar */ @@ -107,6 +122,7 @@ export namespace Components { /** * Set the Statusbar inline * @default false + * @example * @type {string} * @memberof DeviceStatusBar */ @@ -121,6 +137,7 @@ export namespace Components { /** * 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. * @default true + * @example * @type {string} * @memberof DeviceStatusBar */ @@ -157,55 +174,63 @@ declare namespace LocalJSX { interface DeviceNavigationBar { /** * Sets the background color of the navigation bar - * @defaultvalue 'transparent' + * @default 'transparent' + * @example // dark style * @type {string} - * @memberof DeviceStatusBar + * @memberof DeviceNavigationBar */ "background"?: string; /** * Set the color of the navigation bar * @default '#000' + * @example // dark style * @type {string} - * @memberof DeviceStatusBar + * @memberof DeviceNavigationBar */ "color"?: string; /** - * The model to be used + * Predefined device descriptor name, such as "iPhone X" or "Pixel 2". For a complete list please see: `DEVICES` at ./../utils/device.ts + * @default {{AUTO_DETECTION}} + * @type {string} + * @memberof DeviceNavigationBar */ "device"?: string; /** * (Android only) Sets the color to fill the icons in the navigation bar. - * @constant * @default 'none' + * @example * @type {string} - * @type {string} - * @memberof Statusbar + * @memberof DeviceNavigationBar */ "fill"?: string; /** - * Sets the height of the navigation bar. By default, the height is derived from the specified device, but it can also be adjusted manually. + * 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. + * @default {{DEVICE}}.safeArea.bottom * @example * @type {string} - * @memberof DeviceStatusBar + * @memberof DeviceNavigationBar */ "height"?: string; /** * Hides the Statusbar * @default false + * @example * @type {string} - * @memberof Statusbar + * @memberof DeviceNavigationBar */ "hide"?: boolean; /** - * Set the Statusbar inline + * Set the Statusbar inline. * @default false + * @example * @type {string} - * @memberof Statusbar + * @memberof DeviceNavigationBar */ "inline"?: boolean; /** * 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. * @default true + * @example * @type {string} * @memberof DeviceNavigationBar */ @@ -214,7 +239,8 @@ declare namespace LocalJSX { interface DeviceStatusBar { /** * Sets the background color of the status bar - * @defaultvalue 'transparent' + * @default 'transparent' + * @example // dark style * @type {string} * @memberof DeviceStatusBar */ @@ -222,6 +248,7 @@ declare namespace LocalJSX { /** * Set the color of the status bar text * @default '#000' + * @example // dark style * @type {string} * @memberof DeviceStatusBar */ @@ -235,12 +262,16 @@ declare namespace LocalJSX { */ "date"?: string; /** - * The model to be used + * Predefined device descriptor name, such as "iPhone X" or "Pixel 2". For a complete list please see: `DEVICES` at ./../utils/device.ts + * @default {{AUTO_DETECTION}} + * @type {string} + * @memberof DeviceStatusBar */ "device"?: string; /** - * Sets the background color of the status bar - * @default 'device.safeArea.top' + * 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. + * @default {{DEVICE}}.safeArea.top + * @example * @type {string} * @memberof DeviceStatusBar */ @@ -248,6 +279,7 @@ declare namespace LocalJSX { /** * Hides the Statusbar * @default false + * @example * @type {string} * @memberof DeviceStatusBar */ @@ -255,6 +287,7 @@ declare namespace LocalJSX { /** * Set the Statusbar inline * @default false + * @example * @type {string} * @memberof DeviceStatusBar */ @@ -269,6 +302,7 @@ declare namespace LocalJSX { /** * 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. * @default true + * @example * @type {string} * @memberof DeviceStatusBar */ diff --git a/src/components/device-navigation-bar/device-navigation-bar.tsx b/src/components/device-navigation-bar/device-navigation-bar.tsx index 1cc5a42..9ece620 100644 --- a/src/components/device-navigation-bar/device-navigation-bar.tsx +++ b/src/components/device-navigation-bar/device-navigation-bar.tsx @@ -13,7 +13,12 @@ export class DeviceNavigationBar implements ComponentInterface { @Element() el: HTMLElement; /** - * The model to be used + * Predefined device descriptor name, such as "iPhone X" or "Pixel 2". + * For a complete list please see: `DEVICES` at ./../utils/device.ts + * + * @default {{AUTO_DETECTION}} + * @type {string} + * @memberof DeviceNavigationBar */ @Prop() device: string; @@ -21,28 +26,35 @@ export class DeviceNavigationBar implements ComponentInterface { * Set the color of the navigation bar * * @default '#000' + * @example + * // dark style + * * @type {string} - * @memberof DeviceStatusBar + * @memberof DeviceNavigationBar */ @Prop() color: string; /** * Sets the background color of the navigation bar * - * @defaultvalue 'transparent' + * @default 'transparent' + * @example + * // dark style + * * @type {string} - * @memberof DeviceStatusBar + * @memberof DeviceNavigationBar */ @Prop() background: string; /** * Sets the height of the navigation bar. - * By default, the height is derived from the specified device, but it can also be adjusted manually. + * By default, the height is derived from the specified device safe-area, but it can also be adjusted manually. * + * @default {{DEVICE}}.safeArea.bottom * @example * * @type {string} - * @memberof DeviceStatusBar + * @memberof DeviceNavigationBar */ @Prop() height: string; @@ -50,11 +62,11 @@ export class DeviceNavigationBar implements ComponentInterface { * (Android only) * Sets the color to fill the icons in the navigation bar. * - * @constant * @default 'none' + * @example + * * @type {string} - * @type {string} - * @memberof Statusbar + * @memberof DeviceNavigationBar */ @Prop() fill: string; @@ -62,17 +74,21 @@ export class DeviceNavigationBar implements ComponentInterface { * Hides the Statusbar * * @default false + * @example + * * @type {string} - * @memberof Statusbar + * @memberof DeviceNavigationBar */ @Prop() hide: boolean = false; /** - * Set the Statusbar inline + * Set the Statusbar inline. * * @default false + * @example + * * @type {string} - * @memberof Statusbar + * @memberof DeviceNavigationBar */ @Prop() inline: boolean = false; @@ -83,6 +99,8 @@ export class DeviceNavigationBar implements ComponentInterface { * If an element is detected, the css variable --ion-safe-area-* will be set. * * @default true + * @example + * * @type {string} * @memberof DeviceNavigationBar */ diff --git a/src/components/device-navigation-bar/readme.md b/src/components/device-navigation-bar/readme.md index 40e7f8e..43d5c8e 100644 --- a/src/components/device-navigation-bar/readme.md +++ b/src/components/device-navigation-bar/readme.md @@ -9,9 +9,9 @@ | ------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ----------- | | `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` | The model to be used | `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, but it can also be adjusted manually. | `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` | diff --git a/src/components/device-status-bar/device-status-bar.tsx b/src/components/device-status-bar/device-status-bar.tsx index 06e9663..97899d5 100644 --- a/src/components/device-status-bar/device-status-bar.tsx +++ b/src/components/device-status-bar/device-status-bar.tsx @@ -13,7 +13,12 @@ export class DeviceStatusBar implements ComponentInterface { @Element() el: HTMLElement; /** - * The model to be used + * Predefined device descriptor name, such as "iPhone X" or "Pixel 2". + * For a complete list please see: `DEVICES` at ./../utils/device.ts + * + * @default {{AUTO_DETECTION}} + * @type {string} + * @memberof DeviceStatusBar */ @Prop() device: string; @@ -50,6 +55,9 @@ export class DeviceStatusBar implements ComponentInterface { * Set the color of the status bar text * * @default '#000' + * @example + * // dark style + * * @type {string} * @memberof DeviceStatusBar */ @@ -58,16 +66,22 @@ export class DeviceStatusBar implements ComponentInterface { /** * Sets the background color of the status bar * - * @defaultvalue 'transparent' + * @default 'transparent' + * @example + * // dark style + * * @type {string} * @memberof DeviceStatusBar */ @Prop() background: string; /** - * Sets the background color of the status bar + * 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. * - * @default 'device.safeArea.top' + * @default {{DEVICE}}.safeArea.top + * @example + * * @type {string} * @memberof DeviceStatusBar */ @@ -77,6 +91,8 @@ export class DeviceStatusBar implements ComponentInterface { * Hides the Statusbar * * @default false + * @example + * * @type {string} * @memberof DeviceStatusBar */ @@ -86,6 +102,8 @@ export class DeviceStatusBar implements ComponentInterface { * Set the Statusbar inline * * @default false + * @example + * * @type {string} * @memberof DeviceStatusBar */ @@ -98,6 +116,8 @@ export class DeviceStatusBar implements ComponentInterface { * If an element is detected, the css variable --ion-safe-area-* will be set. * * @default true + * @example + * * @type {string} * @memberof DeviceStatusBar */ diff --git a/src/components/device-status-bar/readme.md b/src/components/device-status-bar/readme.md index 44815c6..896648c 100644 --- a/src/components/device-status-bar/readme.md +++ b/src/components/device-status-bar/readme.md @@ -12,8 +12,8 @@ | `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` | The model to be used | `string` | `undefined` | -| `height` | `height` | Sets the background color of the status 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` | +| `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` |