#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"> | |
| <button id="static" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"> | |
| Click me static | |
| </button> | |
| <div class="mdl-menu mdl-js-menu" for="static"> | |
| You clicked me! | |
| </div> | |
| </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 { | |
| wrapper.append(mdlButton()); | |
| wrapper.append(mdlMenu()); | |
| registerMdl(); | |
| await componentFactory().run(); | |
| } | |
| ButtonElement mdlButton() { | |
| final ButtonElement btn = new ButtonElement() | |
| ..text = "Click me dynamic" | |
| ..id = "dynamic" | |
| ..className = "mdl-button mdl-js-button mdl-button--raised " | |
| "mdl-js-ripple-effect mdl-button--colored"; | |
| return btn; | |
| } | |
| DivElement mdlMenu() { | |
| final DivElement menu = new DivElement() | |
| ..text = 'You clicked me !' | |
| ..className = 'mdl-menu mdl-js-menu' | |
| ..attributes.addAll({'for': 'dynamic'}); | |
| return menu; | |
| } | |
| name: mdl.mdl_componentHandler_MdlComponentHandler.upgradeElement | |
| tags: material-design-lite mdl-menu mdl-button | |
| description: | | |
| How to use MDL on dynamic websites. An example of a dynamic mdl menu. | |
| 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; | |
| } |