Nickelback Plays Music

    @iocast/aurelia-mdc-plugin

    0.7.4 • Public • Published

    aurelia-mdc-plugin

    NPM

    Aurelia CLI:

    DEMO

    Install:

    npm i -S material-components-web
    npm i -S @iocast/aurelia-mdc-plugin

    Bundle:

    add material-components-web and @iocast/aurelia-mdc-plugin to one of your bundle's dependencies in aurelia.json.

    {
        "name": "material-components-web",
        "path": "../node_modules/material-components-web/dist",
        "main": "material-components-web",
        "resources": [
            "material-components-web.css"
        ]
    },
    {
        "name": "@iocast/aurelia-mdc-plugin",
        "path": "../node_modules/@iocast/aurelia-mdc-plugin/dist/amd",
        "main": "index",
        "resources": ["**/*.{html,css}"]
    }

    Register the plugin:

    import { PLATFORM } from 'aurelia-pal';
    ...
    export function configure(aurelia) {
        ...
        aurelia.use.plugin(PLATFORM.moduleName('@iocast/aurelia-mdc-plugin'));
        ...
    }

    import the css:

    Inside main.html import the stylesheet.

    <require from="material-components-web/material-components-web.css"></require>

    Use it!

    General usage

    <button class="mdc-button"
            click.delegate="print()">
        Print Greeting
    </button>

    more example here

    Add new or 3rd party MDC-web components:

    aurelia.use.plugin('@iocast/aurelia-mdc-plugin', mdc => mdc.addComponents({
        'mdc-selector': 'MDCClassName'
    }));

    The plugin automaticaly adds data-mdc-auto-init="MDCRipple" to the button above and initializes it, so you do not have to add it to any of the components available.

    Custom Elements

    mdc-datepicker

    <mdc-datepicker locale.bind="en" start-week-on="monday" value.bind="testDate">
      <label class="mdc-textfield__label">Date</label>
    </mdc-datepicker>

    mdc-timepicker

    <mdc-timepicker locale.bind="de" value.bind="testDate">
      <label class="mdc-textfield__label">Time</label>
    </mdc-timepicker>

    mdc-autocomplete

    <mdc-autocomplete ref="valueDOM" value.bind="currentValue" lookup.call="onChangeLookupEvent(newValue, oldValue)" render-item.call="renderListItemEvent(item)" select.call="onSelectionEvent(item)">
      <label class="mdc-textfield__label">Autocomplete Label</label>
    </mdc-autocomplete>
    export class YourModel {
      ...
      async onChangeLookupEvent(newValue, oldValue) {
        // or call your service
        return new Promise((resolve, reject) => {
          resolve([
            {
              id: 'DBv-1ADov-123',
              description: 'Item 1'
            },
            {
              id: 'H40-8Vd2v-1Dg',
              description: 'Item 2'
            }
          ]);
        });
      }
    
      renderListItemEvent(item) {
        return item.description;
      }
    
      async onSelectionEvent(item) {
        let data = await this.service.getDetails(item.id);
        // do something
      }
      ...
    }

    you can use setValue(value) on the element to set a value without triggering the lookup event.

    Install

    npm i @iocast/aurelia-mdc-plugin

    DownloadsWeekly Downloads

    1

    Version

    0.7.4

    License

    MIT

    Unpacked Size

    618 kB

    Total Files

    91

    Last publish

    Collaborators

    • iocast