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 |