materialhx 0.35000.0

Extern interface, element builder, and wrapper library for Material Design Components (Web).

Released 2018-05-14.

To install, run:

haxelib install materialhx 0.35000.0

See using Haxelib in Haxelib documentation for more information.

Current version0.35000.0
StatisticsInstalled 1 times


materialhx is a extern interface, element builder, and wrapper library for Material Design Components (Web) for the Haxe programming language.

Quick Start

Install the library using:

    haxelib install materialhx

Include vanilla MDC styles and scripts into your HTML page:

<link href="" rel="stylesheet">
<link href="" rel="stylesheet">
<script async src="" type="text/javascript"></script>

Then include your Haxe JS output:

<script defer src="my_program.js" type="text/javascript"></script>

In your entry point, wait for MDC to load and then execute your code. For example:

if (Browser.document.readyState == "complete") {
} else {
    Browser.document.addEventListener("readystatechange", doThings);

Using the extern interfaces

You can initialize components using existing HTML elements with the extern interfaces. They are are located in the materialhx.mdc package.

This example adds a ripple to a button element:

import materialhx.mdc.ripple.MDCRipple;

// [...]

var button = Browser.document.createElement("button");

HTML element builders and CSS class names

To help build and style elements programmatically, element builders are located in materialhx.html and style class names in materialhx.css.

This example shows building a button and styling it:

import materialhx.css.ButtonStyle.ButtonModifier;
import materialhx.html.ButtonBuilder;

// [...]

var button = ButtonBuilder.button();

Component wrapper widgets

The library also provides wrappers for the HTML elements and components called widgets. Widgets are tied to hierarchy of the DOM tree and represent units in a user interface. They are found in the materialhx.widget package.

This example creates a dialog, shows it, waits for a response, and cleans up the dialog:

import materialhx.mdc.dialog.MDCDialog;
import materialhx.widget.ContainerWidget;
import materialhx.widget.Dialog;

// [...]

var root = new ContainerWidget(Browser.document.body);
var dialog = new Dialog();


dialog.setText("Discard draft?", "The draft will be deleted.");

dialog.element.addEventListener(MDCDialogEvent.Accept, function () {

Learning more

To see more example usage, see the demo project in test/materialhx/Demo.hx. The demo can be built using haxe demo.hxml.

Widget interoperability with other frameworks

All the widgets in this library subclass from a generic Widget class. The Widget implements IWidgetNode which closely resembles a Haxe array interface to the DOM.

For widgets in this library to accept external widgets, external widgets need to implement IWidget which only requires a HTML element to be exposed.

Other icons, besides Material icons, can be used by implementing IIcon.