Dialogue box for selecting fonts from Google Fonts
First you need bower, see their site for details
bower install --save yo-paper-gfont
<yo-paper-gfont google-key="AIzaSyAGvayJHzu-_pbJhTMCO9Fgbz3xjr2qM_g" label="Font label"></yo-paper-gfont>
The following custom properties are available for styling:
Custom property | Description | Default |
---|---|---|
--yo-paper-gfont-font-size | font size of button | 16px |
--yo-paper-gfont-placeholder-color | color of placeholder | var(--paper-grey-600) |
--yo-paper-gfont-icon-color | color of check icon | var(--primary-color) |
--yo-paper-gfont-label-color | color of button label | var(--primary-color) |
--yo-paper-gfont-dialog-width | set the width of change font dialog | 512px |
--yo-paper-gfont-dialog-min-heigh | set the min-height of change font dialog | 256px |
--yo-paper-gfont-dialog-max-heigh | set the max-height of change font dialog | 512px |
--yo-paper-gfont-dialog-background | set the background color of change font dialog | var(--light-theme-background-color) |
Attribute Name | Functionality | Type | Default |
---|---|---|---|
googleKey | always-float-label: boolean label always in float position | boolean | false |
placeholder | string to placeholder | string | "Color select" |
label | string to describe the selected font | string | "Font select" |
disabled | boolean input diabled | boolean | false |
readonly | boolean input read only | boolean | false |
value | string for value of selected font | string | "" |
Method Name | Action |
---|---|
_dialogHandler(e) | If dialog is confirmed update value |
_openDialog() | Open dialog if not readonly |