Materialize 0.97.7 has an issue in Materialize which leads to the dropdown component ignoring any options.
To fix this, we have copied the fix from Materialize's Master branch and put it
into a function.
To use this fix, add the following to bridge initialization in your main.js:
.useDropdownFix()| <template> | |
| <require from="materialize/dist/css/materialize.css"></require> | |
| <h5>By id</h5> | |
| <div class="dropdown-sample"> | |
| <a md-button md-dropdown="activates: dropdown1;">drop me!</a> | |
| <ul id="dropdown1"> | |
| <li><a click.trigger="showToast($event)">one</a></li> | |
| <li><a click.trigger="showToast($event)">two</a></li> | |
| <li class="divider"></li> | |
| <li><a click.trigger="showToast($event)">three</a></li> | |
| </ul> | |
| </div> | |
| <h5>By reference</h5> | |
| <div class="dropdown-sample"> | |
| <a md-button md-dropdown="ref.bind: dropdown2;">drop me!</a> | |
| <ul ref="dropdown2"> | |
| <li><a click.trigger="showToast($event)">one</a></li> | |
| <li><a click.trigger="showToast($event)">two</a></li> | |
| <li class="divider"></li> | |
| <li><a click.trigger="showToast($event)">three</a></li> | |
| </ul> | |
| </div> | |
| </template> |
| import { inject } from 'aurelia-framework'; | |
| import { MdToastService } from 'aurelia-materialize-bridge/toast/toastService'; | |
| @inject(MdToastService) | |
| export class BasicUse { | |
| constructor(toast) { | |
| this.toast = toast; | |
| } | |
| showToast(e) { | |
| this.toast.show(`You clicked ${e.target.innerText}`, 4000); | |
| } | |
| } |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.25.0/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
| /******************************************************************************* | |
| * The following two lines enable async/await without using babel's | |
| * "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
| * | |
| * More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
| */ | |
| //import regeneratorRuntime from 'babel-runtime/regenerator'; | |
| //window.regeneratorRuntime = regeneratorRuntime; | |
| /******************************************************************************/ | |
| import 'materialize'; | |
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() ); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |