mithrilmdl
v0.9.0
Published
Collection of reusable Material Design Lite components to build modern web browser applications through MithrilJs 1.x.
Downloads
9
Readme
Material Design Lite Components for MithrilJs
Documentation
http://mithril-mdl.muchadev.com
JsFiddle Examples
- Standalone + Hyperscript - https://jsfiddle.net/oardi/ue9ouymq/
- Babel + JSX - https://jsfiddle.net/oardi/qb7sq6yz/
- Babel + JSX Drawer - https://jsfiddle.net/oardi/o8ag2hy9/
Include Fonts
Include Google Material Design Icons from Google CDN:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Installation
NPM
npm install mithrilmdl --save
Github
npm install https://github.com/oardi/mithrilmdl --save
Standalone
Use the bundle inside "dist" from this repository and include the script into your HTML.
Usage
Standalone
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>
Webpack + Babel + JSX
Steps:
Create ".babelrc"
{
"presets": ["es2015"],
"plugins": [
"transform-async-to-generator",
["transform-react-jsx", {
"pragma": "m"
}]
]
}
Create a minimal "webpack.config.js"
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 the components needed from "mithrilmdl"
import { Button } from 'mithrilmdl'
or as a single object
import * as Mdl from 'mithrilmdl'
Using a component
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" })