API
<fn-pwa-banner>
A custom pwa install banner
Attributes
| Name | Description | Type | Default |
| value | Sets value for the button | string | "Installing uses almost no storage and provides a quick way to return to this app" |
| title | Sets the title | string | "Install" |
| background | Defines the background color | string | "#602ac1" |
| show | If defined as show, The componenet is shown
Example: | boolean | false |
| testing | If testing is true, it will show the component | boolean | false |
| color | Defines color | string | "#fff" |
Properties
| Name | Attribute | Description | Type | Default |
| value | value | Sets value for the button | string | "Installing uses almost no storage and provides a quick way to return to this app" |
| title | title | Sets the title | string | "Install" |
| background | background | Defines the background color | string | "#602ac1" |
| show | show | If defined as show, The componenet is shown
Example: | boolean | false |
| testing | testing | If testing is true, it will show the component | boolean | false |
| color | color | Defines color | string | "#fff" |
<fn-pwa-btn>
A custom pwa install button
Attributes
| Name | Description | Type | Default |
| value | Sets value for the button | string | "Install" |
| background | Defines the background color | string | "#602ac1" |
| color | Defines the color for text and icon | string | "#fff" |
| size | Sets width and height | string | "56px" |
| testing | If testing is true, it will show the component | boolean | false |
Properties
| Name | Attribute | Description | Type | Default |
| value | value | Sets value for the button | string | "Install" |
| background | background | Defines the background color | string | "#602ac1" |
| color | color | Defines the color for text and icon | string | "#fff" |
| size | size | Sets width and height | string | "56px" |
| testing | testing | If testing is true, it will show the component | boolean | false |
<fn-pwa-status>
A custom pwa offline and online status banner
Attributes
| Name | Description | Type | Default |
| background | Defines the background color | string | "#602ac1" |
| color | Defines the color for text | string | "#fff" |
| value | Defines value | string | "It looks like you're offline" |
Properties
| Name | Attribute | Description | Type | Default |
| background | background | Defines the background color | string | "#602ac1" |
| color | color | Defines the color for text | string | "#fff" |
| value | value | Defines value | string | "It looks like you're offline" |
<fn-ripple-btn>
A button with ripple effect
Attributes
| Name | Description | Type | Default |
| background | Defines the background color
Default color #602ac1 | string | "#602ac1" |
| color | Defines the color for text and icon
Default color #fff | string | "#fff" |
Properties
| Name | Attribute | Description | Type | Default |
| background | background | Defines the background color
Default color #602ac1 | string | "#602ac1" |
| color | color | Defines the color for text and icon
Default color #fff | string | "#fff" |
Events
| Name | Description |
| fn-click | undefined |
Slots
| Name | Description |
| This component has slot |
<my-element>
An example element.
Attributes
| Name | Description | Type | Default |
| name | The name to say "Hello" to. | string | "World" |
| count | The number of times the button has been clicked. | number | 0 |
Properties
| Name | Attribute | Description | Type | Default |
| name | name | The name to say "Hello" to. | string | "World" |
| count | count | The number of times the button has been clicked. | number | 0 |
Slots
| Name | Description |
| This element has a slot |
CSS Shadow Parts
| Name | Description |
| button | The button |