mit

mithrilmdl

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

Showing:

Popularity

Downloads/wk

2

GitHub Stars

6

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial