http://mithril-mdl.muchadev.com
- Standalone + Hyperscript - https://jsfiddle.net/oardi/ue9ouymq/
- Babel + JSX - https://jsfiddle.net/oardi/qb7sq6yz/
- Babel + JSX Drawer - https://jsfiddle.net/oardi/o8ag2hy9/
Include Google Material Design Icons from Google CDN:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
npm install mithrilmdl --save
npm install https://github.com/oardi/mithrilmdl --save
Use the bundle inside "dist" from this repository and include the script into your HTML.
Create an index.html and add the scripts "mihtriljs" and "mithrilmdl" and create a const from "mithrilmdl".
<script src="libs/mithril.js"></script>
<script src="libs/mithrilmdl.js"></script>
<script>
const { Button } = window.mithrilmdl;
</script>
Steps:
{
"presets": ["es2015"],
"plugins": [
"transform-async-to-generator",
["transform-react-jsx", {
"pragma": "m"
}]
]
}
const webpack = require('webpack');
const path = require('path');
require("babel-core/register");
require("babel-polyfill");//es5 polyfills
module.exports = {
entry: ['babel-polyfill', './src/app/app.js'],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'app.bundle.js',
},
devtool: 'source-map',
module: {
rules: [
{ test: /\.js$/, loader: 'babel-loader' },
{ test: /\.css$/, loaders: ['style-loader', 'css-loader'] },
{ test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader?name=assets/[name].[ext]' },
]
}
}
import { Button } from 'mithrilmdl'
or as a single object
import * as Mdl from 'mithrilmdl'
For instance using the Mdl.Button component:
Code JSX:
<Button raised colored title="I am a button" />
Code ES5:
m(Button, { raised:true, colored:true, title:"I am a button" })