Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-melon/melon
react ui comopents
https://github.com/react-melon/melon
component material-design react
Last synced: about 2 months ago
JSON representation
react ui comopents
- Host: GitHub
- URL: https://github.com/react-melon/melon
- Owner: react-melon
- Created: 2015-08-28T07:00:33.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-06-20T12:23:15.000Z (over 6 years ago)
- Last Synced: 2024-07-17T19:36:49.224Z (2 months ago)
- Topics: component, material-design, react
- Language: JavaScript
- Homepage: http://react-melon.github.io/melon
- Size: 4.74 MB
- Stars: 96
- Watchers: 12
- Forks: 11
- Open Issues: 8
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome - react-melon/melon - react ui comopents (JavaScript)
README
# melon
[](https://coveralls.io/github/react-melon/melon?branch=) [](https://www.npmjs.com/package/melon)
[](https://travis-ci.org/react-melon/melon)
[](https://saucelabs.com/u/melon-ui)
A Set of React Components that Implement Google's Material Design
## Install
### npm
[](https://npmjs.org/package/melon)
### bower
```
bower install melon
```
## Melon Family
### Components
* **melon-core**
* InputComponent
* **melon**
* BoxGroup
* Breadcrumb
* Button
* Dialog
* Drawer
* Grid
* Icon
* Pager
* Progress
* Region
* ScrollView
* Select
* Slider
* SnackBar
* Table
* Tabs
* TextBox
* Tree
* Tooltip
* Uploader
* Zippy
* **[melon-form](https://github.com/react-melon/melon-form)**
* Form
* **[melon-json-schema-form](https://github.com/react-melon/melon-json-schema-form)**
* Form
* **[melon-layer](https://github.com/react-melon/melon-layer)**
* Popover/Layer
* **[melon-calendar](https://github.com/react-melon/melon-calendar)**
* Calenadr
* RangeCalendar
* UnitCalendar
* **[melon-timepicker](https://github.com/react-melon/melon-timepicker)**
* TimePicker
* **[melon-listview](https://github.com/react-melon/melon-listview)**
* ListView
* **[melon-colorpicker](https://github.com/react-melon/melon-colorpicker)**
* ColorPicker
* **[melon-autocomplete](https://github.com/react-melon/melon-autocomplete)**
* AutoComplete
* **[melon-split-pane](https://github.com/react-melon/melon-split-pane)**
* SplitPane
* **[melon-fab](https://github.com/react-melon/melon-fab)**
* FloatingActionButton
## Demos
[http://react-melon.github.io/melon](http://react-melon.github.io/melon)
## Compatible for ie8
You need use `es5-shim` 和 `es5-sham` on `ie8`
see `es5-shim` `es5-sham` [es5-shim](https://github.com/es-shims/es5-shim)
## 如何在 webpack 中使用 melon
1. 安装依赖
```sh
# melon
npm i melon --save
# 编译 melon 样式的依赖
npm i stylus-loader file-loader stylus nib css-loader style-loader --save-dev
```
2. 配置 `webpack`:
在 `webpack` 中添加以下配置
```javascript
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`。
```stylus
// 主题必须引入
@require 'melon/css/theme/default/index.styl';
// 其他组件按需引入
@require 'melon/css/Button.styl';
```
其中主题样式文件是必选的，然后需要用到什么组件，就引入相应的组件样式。
4. 在合适的 js 中引入需要的 melon 组件：
```js
// 加载样式
import './melon.styl';
// 加载组件
import Button from 'melon/Button';
export default function App(props) {
return (
melon button
);
}
```
经过以上步骤就完成了 melon 的引入了。另外，还可以参考这个 [demo repo](https://github.com/Sheetaa/melon-webpack-demo)。