Fawn Components

A simple components package for modern web

API

<fn-pwa-banner>

A custom pwa install banner

Attributes

NameDescriptionTypeDefault
valueSets value for the buttonstring"Installing uses almost no storage and provides a quick way to return to this app"
titleSets the titlestring"Install"
backgroundDefines the background colorstring"#602ac1"
showIf defined as show, The componenet is shown Example: booleanfalse
testingIf testing is true, it will show the componentbooleanfalse
colorDefines colorstring"#fff"

Properties

NameAttributeDescriptionTypeDefault
valuevalueSets value for the buttonstring"Installing uses almost no storage and provides a quick way to return to this app"
titletitleSets the titlestring"Install"
backgroundbackgroundDefines the background colorstring"#602ac1"
showshowIf defined as show, The componenet is shown Example: booleanfalse
testingtestingIf testing is true, it will show the componentbooleanfalse
colorcolorDefines colorstring"#fff"

<fn-pwa-btn>

A custom pwa install button

Attributes

NameDescriptionTypeDefault
valueSets value for the buttonstring"Install"
backgroundDefines the background colorstring"#602ac1"
colorDefines the color for text and iconstring"#fff"
sizeSets width and heightstring"56px"
testingIf testing is true, it will show the componentbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
valuevalueSets value for the buttonstring"Install"
backgroundbackgroundDefines the background colorstring"#602ac1"
colorcolorDefines the color for text and iconstring"#fff"
sizesizeSets width and heightstring"56px"
testingtestingIf testing is true, it will show the componentbooleanfalse

<fn-pwa-status>

A custom pwa offline and online status banner

Attributes

NameDescriptionTypeDefault
backgroundDefines the background colorstring"#602ac1"
colorDefines the color for textstring"#fff"
valueDefines valuestring"It looks like you're offline"

Properties

NameAttributeDescriptionTypeDefault
backgroundbackgroundDefines the background colorstring"#602ac1"
colorcolorDefines the color for textstring"#fff"
valuevalueDefines valuestring"It looks like you're offline"

<fn-ripple-btn>

A button with ripple effect

Attributes

NameDescriptionTypeDefault
backgroundDefines the background color Default color #602ac1string"#602ac1"
colorDefines the color for text and icon Default color #fffstring"#fff"

Properties

NameAttributeDescriptionTypeDefault
backgroundbackgroundDefines the background color Default color #602ac1string"#602ac1"
colorcolorDefines the color for text and icon Default color #fffstring"#fff"

Events

NameDescription
fn-clickundefined

Slots

NameDescription
This component has slot

<my-element>

An example element.

Attributes

NameDescriptionTypeDefault
nameThe name to say "Hello" to.string"World"
countThe number of times the button has been clicked.number0

Properties

NameAttributeDescriptionTypeDefault
namenameThe name to say "Hello" to.string"World"
countcountThe number of times the button has been clicked.number0

Slots

NameDescription
This element has a slot

CSS Shadow Parts

NameDescription
buttonThe button