A checkbox for the Aurelia Framework that uses FontAwesome for checkbox icons.
At this time, this libary is only compatible with font icons in FontAwesome 4.x.x and Solid font icons in FontAwesome 5.x.x. We hope to support SVG icons in the future
This plugin uses FontAwesome font icons. You'll need to ensure that the css classes are bundled with your app
npm install au-fa-check --save
Add the following to your index file
aurelia.use
.plugin(PLATFORM.moduleName('au-fa-check'), { /* configuration object */})
Add a checkbox to any template
<template>
<au-fa-check>This is the label</au-fa-check>
</template>
Exposes the checked state of the input
Controls whether the input is enabled or disabled
Default value: fa-check
The icon to use in the checkbox.
The value of this property functions in a different way depending on the value provided to the iconType property (See below)
Default value: horizontal
When horizontal, the checkbox is placed to the left of the label
When vertical, the checkbox is placed above the label
Default value: black
The color of the checkbox when it is checked
Default value: standard
The size of the checkbox relative to the label
Default value: square
The shape of the checkbox
Default value: standard
When standard, the value of the icon property is placed inside the checkbox outline
<au-fa-check>Standard Checked</au-fa-check>
When outline, the value of the icon property is rendered as the checkbox when it is checked and its "*-o" version is rendered as the checkbox when it is unchecked NOTE This option is only available when using FontAwesome 4.x.x
<au-fa-check icon-type="outline" icon="fa-heart" checked-color="red">Hello</au-fa-check>
When performing the initial configuration in your app's index file you may provide an optional configuration object. The global configuration will specify default values that can generally be overriden in case-by-case scenarios with the component bindings.
Default value: 4
Specifies the FontAwesome version that you are using.
Default value: black
Specifies the default color of a checked checkbox
Default value: standard
Specifies the style theme you wish use. Material theme is currently not supported but is coming soon!
Default value: standard
Specifies the default size of a checkbox relative to its label
Default value: square
Specifies the shape of the checkbox outline when a checkbox's iconType === 'standard'
- material styles - need to figure out a good way to do theming
- add support for fontawesome libraries like aurelia-fontawesome