3.4 Button component
View: md-button.html
<template>
<h4>Materialize button demo</h4>
<div class="row">
<div class="col s4">
<button md-button="disabled.bind: disabled;" click.trigger="showToast()">Materialize Button</button>
</div>
</div>
</template>
Just like in the case of the Select control, the statement <button md-button="disabled.bind: disabled;" click.trigger="showToast()">Materialize Button</button>
results with the instantiation of the button:

Image 1
Observe that the button control, just like the select control are HTML native elements and that Materialize Aurelia bridge adds custom attributes (md-button
) that are bound to Materialize button) "matching native properties" . Note also the definition of the event triggers that are activating the code in the view model:
View model: md-button.js
import { inject } from 'aurelia-dependency-injection';
import { MdToastService } from 'aurelia-materialize-bridge/toast/toastService';
@inject(MdToastService)
export class MdButtonDemo {
disabled = false;
constructor(toast) {
this.toast = toast;
}
showToast() {
this.toast.show('You clicked me!', 2000);
}
}
Finally, add the new component to your router-configuration:
File app.js
app.js
export class App {
configureRouter(config, router) {
config.title = 'Aurelia';
config.map([
{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' },
{ route: 'users', name: 'users', moduleId: 'users', nav: true, title: 'Github Users' },
{ route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' },
{ route: 'md-select', name: 'md-select', moduleId: 'material/select/md-select', nav: true, title: 'Select' },
{ route: 'md-button', name: 'md-button', moduleId: 'material/button/md-button', nav: true, title: 'Button' }
]);
this.router = router;
}
}
Last updated