vadimtsushko/index.html

## index.html
<!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">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="addr1"/>
          <label class="mdl-textfield__label" for="addr1">Here textinput works fine (can be edited)</label>
        </div>

      <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>
  </body>
</html>

## main.dart
import "dart:html";

import 'package:mdl/mdl.dart';

DivElement wrapper = querySelector('#wrapper');
ButtonElement button = querySelector("#customdialog");

main() async {
  registerMdl();
  await componentFactory().run();

  CustomDialog customDialog = new CustomDialog(
      title: "Hello World");

  button.onClick.listen((_) {
    customDialog.show();
  });
}

class CustomDialog extends MaterialDialog {

  final String title, yesButton, noButton;

  CustomDialog({this.title: "", this.yesButton: 'Yes', this.noButton: 'No'})
      : super(new DialogConfig());

  bool get hasTitle => title.isNotEmpty;

  onYes() => close(MdlDialogStatus.YES);

  onNo() => close(MdlDialogStatus.NO);

  String template = """
<div class="mdl-dialog">
  <div class="mdl-dialog__content">
    {{#hasTitle}}<h5>{{title}}</h5>{{/hasTitle}}
    <p>Will this work ... ?</p>

      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" id="addr1"/>
      <label class="mdl-textfield__label" for="addr1">Do not respond to input</label>
    </div>
  </div>
  <div class="mdl-dialog__actions">
    <button class="mdl-button mdl-js-button" data-mdl-click="onNo()">
      {{noButton}}
    </button>
    <button class="mdl-button mdl-js-button mdl-button--colored" data-mdl-click="onYes()">
      {{yesButton}}
    </button>
  </div>
</div>""";
}

## pubspec.yaml
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 <2.0.0'

## styles.css
div.loading {
  display: none;
}

body.mdl-upgrading > * {
  display: none;
}

body.mdl-upgrading div.loading {
  display: block;
}

#wrapper {
  height: 400px;
  width: 400px;
  margin: 10px auto;
  padding: 10px;
  display: flex;
  flex-direction: column-reverse;
}
	<!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">
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
	<input class="mdl-textfield__input" type="text" id="addr1"/>
	<label class="mdl-textfield__label" for="addr1">Here textinput works fine (can be edited)</label>
	</div>

	<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>
	</body>
	</html>
	import "dart:html";

	import 'package:mdl/mdl.dart';

	DivElement wrapper = querySelector('#wrapper');
	ButtonElement button = querySelector("#customdialog");

	main() async {
	registerMdl();
	await componentFactory().run();

	CustomDialog customDialog = new CustomDialog(
	title: "Hello World");

	button.onClick.listen((_) {
	customDialog.show();
	});
	}

	class CustomDialog extends MaterialDialog {

	final String title, yesButton, noButton;

	CustomDialog({this.title: "", this.yesButton: 'Yes', this.noButton: 'No'})
	: super(new DialogConfig());

	bool get hasTitle => title.isNotEmpty;

	onYes() => close(MdlDialogStatus.YES);

	onNo() => close(MdlDialogStatus.NO);

	String template = """
	<div class="mdl-dialog">
	<div class="mdl-dialog__content">
	{{#hasTitle}}<h5>{{title}}</h5>{{/hasTitle}}
	<p>Will this work ... ?</p>

	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
	<input class="mdl-textfield__input" type="text" id="addr1"/>
	<label class="mdl-textfield__label" for="addr1">Do not respond to input</label>
	</div>
	</div>
	<div class="mdl-dialog__actions">
	<button class="mdl-button mdl-js-button" data-mdl-click="onNo()">
	{{noButton}}
	</button>
	<button class="mdl-button mdl-js-button mdl-button--colored" data-mdl-click="onYes()">
	{{yesButton}}
	</button>
	</div>
	</div>""";
	}
	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 <2.0.0'
	div.loading {
	display: none;
	}

	body.mdl-upgrading > * {
	display: none;
	}

	body.mdl-upgrading div.loading {
	display: block;
	}

	#wrapper {
	height: 400px;
	width: 400px;
	margin: 10px auto;
	padding: 10px;
	display: flex;
	flex-direction: column-reverse;
	}