#mdl:mdl example
How to make your own custom material dialog in mdl.
Main library: mdl:mdl
Main elements: MaterialDialog DialogConfig
Gist: https://gist.github.com/kasperpeulen/7c734a175a598039b4b7
Tags: #material-design-lite #mdl-dialog`
Last active
August 29, 2015 14:26
-
-
Save kasperpeulen/7c734a175a598039b4b7 to your computer and use it in GitHub Desktop.
How to make your own custom material dialog in mdl.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css"> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body class="mdl-upgrading"> | |
| <div class="loading">Loading...</div> | |
| <div id="wrapper" class="mdl-shadow--2dp"> | |
| <button id="customdialog" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"> | |
| Custom dialog | |
| </button> | |
| </div> | |
| <script type="application/dart" src="main.dart"></script> | |
| <script src="packages/browser/dart.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import "dart:html"; | |
| import 'package:mdl/mdl.dart'; | |
| DivElement wrapper = querySelector('#wrapper'); | |
| ButtonElement button = querySelector("#customdialog"); | |
| main() async { | |
| registerMdl(); | |
| await componentFactory().run(); | |
| MyDialog myDialog = new MyDialog(); | |
| button.onClick.listen((_) => myDialog.show()); | |
| } | |
| //test | |
| class MyDialog extends MaterialDialog { | |
| MyDialog() : super(new DialogConfig()); | |
| onNo() => close(MdlDialogStatus.NO); | |
| onYes() => close(MdlDialogStatus.YES); | |
| String template = ''' | |
| <div class="mdl-dialog"> | |
| <div class="mdl-dialog__content"> | |
| <p>Will this work ... ?</p> | |
| </div> | |
| <div class="mdl-dialog__actions"> | |
| <button class="mdl-button mdl-js-button" data-mdl-click="onNo()">No</button> | |
| <button class="mdl-button mdl-js-button" data-mdl-click="onYes()">Yes</button> | |
| </div> | |
| </div> | |
| '''; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: mdl.mdl_MaterialDialog_DialogConfig | |
| tags: material-design-lite mdl-dialog` | |
| description: | | |
| How to make your own custom material dialog in mdl. | |
| homepage: https://gist.github.com/kasperpeulen/7c734a175a598039b4b7 | |
| environment: | |
| sdk: '>=1.11.0 <2.0.0' | |
| dependencies: | |
| mdl: '1.3.2' | |
| di: '^3.3.4' | |
| browser: '^0.10.0+2' | |
| grinder: '^0.7.2' | |
| transformers: | |
| - di |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div.loading { | |
| display: none; | |
| } | |
| body.mdl-upgrading > * { | |
| display: none; | |
| } | |
| body.mdl-upgrading div.loading { | |
| display: block; | |
| } | |
| #wrapper { | |
| width: 400px; | |
| margin: 10px auto; | |
| padding: 10px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment