Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
test
tools
.babelrc
.coveralls.yml
.editorconfig
.fecsignore
.fecsrc
.gitignore
.npmignore
.travis.yml
bower.json
esdoc.json
gulpfile.js
package-lock.json
package.json
readme.md

readme.md

melon

Coverage Status Version Build Status

SauceLabs Status

A Set of React Components that Implement Google's Material Design

Install

npm

melon

bower

bower install melon

Melon Family

Components

Demos

http://react-melon.github.io/melon

Compatible for ie8

You need use es5-shimes5-sham on ie8

see es5-shim es5-sham es5-shim

如何在 webpack 中使用 melon

  1. 安装依赖

    # melon
    npm i melon --save
    
    # 编译 melon 样式的依赖
    npm i stylus-loader file-loader stylus nib css-loader style-loader --save-dev
    
  2. 配置 webpack:

    webpack 中添加以下配置

    module.exports = {
        loaders: [
            // 处理 stylus
            {
                test: /\.styl$/,
                loader: 'style!css!stylus?paths=node_modules&resolve url'
            },
            // 处理 iconfont
            {
                test: /\.(svg|eot|ttf|woff)(\?.*)?$/,
                loader: 'file'
            }
        ],
        // stylus loader 中引入 nib 库支持
        stylus: {
            use: [require('nib')()]
        }
    };
    

    其中,stylus 的参数中的 paths=node_modules指定 stylus 文件的寻找范围,resolve url用于将 melon 中相对路径资源转换为绝对路径资源。

  3. 使用一个 stylus 文件来引入业务所需要的 melon 样式文件。

    将 melon 组件的样式组织在一个入口样式文件中,比如 ${YOUR_PROJECT}/src/melon.styl

    // 主题必须引入
    @require 'melon/css/theme/default/index.styl';
    
    // 其他组件按需引入
    @require 'melon/css/Button.styl';
    

    其中主题样式文件是必选的,然后需要用到什么组件,就引入相应的组件样式。

  4. 在合适的 js 中引入需要的 melon 组件:

    // 加载样式
    import './melon.styl';
    
    // 加载组件
    import Button from 'melon/Button';
    
    export default function App(props) {
    
        return (
            <Button>melon button</Button>
        );
    
    }
    

经过以上步骤就完成了 melon 的引入了。另外,还可以参考这个 demo repo