Custom elements and attributes to use MaterializeCSS with Aurelia.
#Demo site Examples and how to use can be found at the demo site
#Dependencies
#Installation
jspm i aurelia-materialize-css
main.ts (typescript)
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin("aurelia-materialize-css");
aurelia.start().then(() => aurelia.setRoot());
}main.js (javascript)
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin("aurelia-materialize-css");
aurelia.start().then(() => aurelia.setRoot());
}#Configuration
Allows you to supply MaterializeCssOptions options.
.plugin("aurelia-materialize-css", new MaterializeCssOptions());
##MaterializeCssOption properties:
| Property | Type | Default | Description |
|---|---|---|---|
| enableAttributes | boolean | true | enable or disable all the attributes |
| enableElements | boolean | true | enable or disable all the elements |
| attributeFilter | (val) => boolean | undefined | func, allows custom logic to enable or disable attributes |
| elementFilter | (val) => boolean | undefined | func, allows custom logic to enable or disable elements |
| configuration | Configuration | see below | configuration object allows custom naming of elements/ attributes |
##Configuration properties:
| Property | Default | Description |
|---|---|---|
| prefix | m: | The prefix before each element or attribute |
| collapsible | m:collapsible | Name of the collapsible element or attribute |
| collapsibleBody | m:collapsible-body | Name of the collapsible body element or attribute |
| collapsibleHeader | m:collapsible-header | Name of the collapsible header element or attribute |
| collapsibleItem | m:collapsible-item | Name of the collapsible item element or attribute |
| dropdown | m:dropdown | Name of the dropdown element or attribute |
| dropdownDivider | m:dropdown-divider | Name of the dropdown divider element or attribute |
| dropdownItem | m:dropdown-item | Name of the dropdown item element or attribute |
| boxed | m:boxed | Name of the boxed element or attribute |
| slide | m:slide | Name of the slide element or attribute |
| slider | m:slider | Name of the slider element or attribute |
| modal | m:modal | Name of the modal element or attribute |
| modalTrigger | m:modal-trigger | Name of the modal trigger element or attribute |
| modalContent | m:modal-content | Name of the modal content element or attribute |
| modalFooter | m:modal-footer | Name of the modal footer element or attribute |
| pushpin | m:pushpin | Name of the pushpin element or attribute |
| scrollSpy | m:scrollspy | Name of the scroll spy element or attribute |
| badge | m:badge | Name of the badge element or attribute |
| icon | m:icon | Name of the icon element or attribute |
| button | m:button | Name of the button element or attribute |
| breadcrumb | m:breadcrumb | Name of the breadcrumb element or attribute |
| breadcrumbs | m:breadcrumbs | Name of the breadcrumbs element or attribute |
| materialSelect | m:select | Name of the material select element or attribute |
| pickadate | m:pickadate | Name of the pick a date element or attribute |
| card | m:card | Name of the card element or attribute |
| cardTitle | m:card-title | Name of the card title element or attribute |
| cardAction | m:card-action | Name of the card action element or attribute |
| cardImage | m:card-image | Name of the card image element or attribute |
| cardReveal | m:card-reveal | Name of the card reveal element or attribute |
| cardPanel | m:card-panel | Name of the card panel element or attribute |
| allowedWaves | light, red, yellow, orange, purple, green, teal | List of allowed waves classes |