https://github.com/oardi/mithrilmdl

Collection of reusable Material Design Lite components to build modern web browser applications through MithrilJs 1.x.
https://github.com/oardi/mithrilmdl

babel-jsx hyperscript jsx library material material-design material-design-lite mithriljs webpack

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/oardi/mithrilmdl
• Owner: oardi
• License: mit
• Created: 2017-07-26T10:54:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-08-31T21:17:00.000Z (over 7 years ago)
• Last Synced: 2024-11-20T07:28:05.893Z (about 2 months ago)
• Topics: babel-jsx, hyperscript, jsx, library, material, material-design, material-design-lite, mithriljs, webpack
• Language: JavaScript
• Homepage: http://mithril-mdl.muchadev.com
• Size: 297 KB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Material Design Lite Components for MithrilJs

## Documentation

[http://mithril-mdl.muchadev.com](http://mithril-mdl.muchadev.com)

## JsFiddle Examples

* Standalone + Hyperscript - [https://jsfiddle.net/oardi/ue9ouymq/](https://jsfiddle.net/oardi/ue9ouymq/)

* Babel + JSX - [https://jsfiddle.net/oardi/qb7sq6yz/](https://jsfiddle.net/oardi/qb7sq6yz/)

* Babel + JSX Drawer - [https://jsfiddle.net/oardi/o8ag2hy9/](https://jsfiddle.net/oardi/o8ag2hy9/)

## Include Fonts

Include Google Material Design Icons from Google CDN: 


```css

```

## Installation

### NPM

```js

npm install mithrilmdl --save

```

### Github

```js 

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". 


```html

    const { Button } = window.mithrilmdl;

```

### Webpack + Babel + JSX

Steps:

#### Create ".babelrc"

```js

{

    "presets": ["es2015"],

    "plugins": [

        "transform-async-to-generator",

        ["transform-react-jsx", {

            "pragma": "m"

        }]

    ]

}

```

#### Create a minimal "webpack.config.js"

```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"

```js

import { Button } from 'mithrilmdl'

```

or as a single object

```js

import * as Mdl from 'mithrilmdl'

```

### Using a component

For instance using the Mdl.Button component: 


Code JSX: 


```js

```




Code ES5: 


```js

m(Button, { raised:true, colored:true, title:"I am a button" })

```