Skip to content

Collection of reusable Material Design Lite components to build modern web browser applications through MithrilJs 1.x.

License

Notifications You must be signed in to change notification settings

oardi/mithrilmdl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Material Design Lite Components for MithrilJs

Documentation

http://mithril-mdl.muchadev.com

JsFiddle Examples

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" })