| <!doctype html> | |
| <html> | |
| <head> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div aurelia-app="src/configure"> | |
| Loading... | |
| </div> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm_packages/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/demo-materialize/gh-pages/jspm.config.js"></script> | |
| <script> | |
| System.import("aurelia-bootstrapper"); | |
| </script> | |
| </body> | |
| </html> |
Waves are applied to all buttons if you configure the bridge with useAll() method.
Flat buttons are configured with "waves-accent" class whilst raised - with "waves-light".
The color can be changed by adding the md-waves attribute as described in this demo.
Default behavior can be changed with useAutoButtonWaves(mode) method.
| <template> | |
| <style> | |
| div.button-row { | |
| padding: 5px 0; | |
| } | |
| </style> | |
| <div> | |
| <div class="button-row"> | |
| <button md-button="disabled.bind: !firstButtonEnabled; flat.bind: !firstButtonRaised"> | |
| <i class="left material-icons">mode_edit</i>I'm a basic button</button> | |
| <button md-button="flat: true;">I'm a flat button</button> | |
| </div> | |
| <div class="button-row"> | |
| <button md-button="large: true;">I'm a large button</button> | |
| <button md-button="flat: true; large: true;">I'm a large flat button</button> | |
| </div> | |
| <div class="button-row"> | |
| <button md-button="disabled: true;">I'm a basic disabled button</button> | |
| <button md-button="disabled: true; flat: true;">I'm a flat disabled button</button> | |
| </div> | |
| <div class="button-row"> | |
| <button md-button class="primary">I'm a primary colored button</button> | |
| </div> | |
| <div class="button-row"> | |
| <button md-button="flat: true;" class="primary-text">I'm a flat primary colored button</button> | |
| </div> | |
| <div class="actions"> | |
| <hr /> First button: | |
| <md-switch label-on="enabled" label-off="disabled" checked.bind="firstButtonEnabled"></md-switch> | |
| <md-switch label-on="raised" label-off="flat" checked.bind="firstButtonRaised"></md-switch> | |
| </div> | |
| </div> | |
| </template> |
| export class App { | |
| firstButtonEnabled = true; | |
| firstButtonRaised = true; | |
| } |
| export async function configure(aurelia) { | |
| await aurelia.loader.loadModule("materialize-css"); | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin("aurelia-materialize-bridge", bridge => bridge.useAll()) | |
| .plugin("aurelia-validation") | |
| .globalResources("src/shared/logger"); | |
| await aurelia.start(); | |
| aurelia.setRoot("src/app"); | |
| } |