#mdl:mdl example
How to use MDL on dynamic websites.
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.
Main library: mdl:mdl
Main element:
Gist: https://gist.github.com/kasperpeulen/d2f59227c054e82f825b
| <!doctype html> | |
| <html> | |
| <head> | |
| <link id="theme" rel="stylesheet" href="packages/mdl/assets/styles/material.min.css"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div id='wrapper' class="mdl-shadow--2dp"> | |
| </div> | |
| <script type="application/dart" src="main.dart"></script> | |
| </body> | |
| </html> |
| import 'dart:html'; | |
| import 'dart:async'; | |
| import 'package:mdl/mdl.dart'; | |
| DivElement wrapper = querySelector('#wrapper'); | |
| main() async { | |
| await initMdl(); | |
| wrapper.append(await mdlButton()); | |
| } | |
| Future<ButtonElement> mdlButton() async { | |
| final ButtonElement btn = new ButtonElement() | |
| ..text = "Click me" | |
| ..className = "mdl-button mdl-js-button mdl-button--raised " | |
| "mdl-js-ripple-effect mdl-button--colored"; | |
| await componentHandler().upgradeElement(btn); | |
| return btn; | |
| } | |
| initMdl() async { | |
| registerMdl(); | |
| await componentFactory().run(); | |
| } |
| name: mdl.mdl | |
| description: | | |
| How to use MDL on dynamic websites.. | |
| Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. | |
| homepage: https://gist.github.com/kasperpeulen/d2f59227c054e82f825b | |
| environment: | |
| sdk: '>=1.11.0 <2.0.0' | |
| dependencies: | |
| mdl: '^1.3.2' | |
| browser: '^0.10.0' | |
| di: "^3.3.4" | |
| transformers: | |
| - di |
| #wrapper { | |
| margin: 20px auto; | |
| max-width: 500px; | |
| padding: 20px; | |
| } |