mdialog 0.0.2

Modal Dialog System #

A minimalist modal dialog system.

alert confirm

Usage #

This package contains a basic CSS skin (mdialog.css) and two themes (blue.css and dark.css). Load them from your web page:

<html>
  <title>test</title>
  <link rel="stylesheet" href="packages/mdialog/css/mdialog.css">
  <link rel="stylesheet" href="packages/mdialog/css/themes/dark.css">

Example:

import 'package:mdialog/mdialog.dart';

main() async {
  await alert('We will proceed to format the Hard Disk');
  print('Ok, you\'ve been alerted');

  if (await confirm('Are you sure?')) {
    print('Formating Hard Disk ...');
  }
}

Create custom dialogs #

The library provides two classes to create custom modal dialogs: ModalWindow and ModalBlock. The following code creates a modal loading interface.

import 'dart:html';
import 'package:mdialog/mdialog.dart';

class ModalLoading {
  final _modalWindow = new ModalWindow();

  ModalLoading() {
    _modalWindow.add(new ModalBlock('header')..text = 'Loading request');
    _modalWindow.add(new ModalBlock('body')..text = 'Please wait ...');
    _modalWindow.open();
  }

  void close() => _modalWindow.close();
}

main() async {
  final loading = new ModalLoading();

  try {
    await HttpRequest.getString('http://www.google.com');
  } catch (e) {
    await alert('Error processing the request');
  } finally {
    loading.close();
  }
}

Features and bugs #

Please file feature requests and bugs at the Issue Tracker.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  mdialog: ^0.0.2

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:mdialog/mdialog.dart';
  
Awaiting analysis to complete.

Admin