{"id":13602744,"url":"https://github.com/react-melon/melon","last_synced_at":"2025-10-26T21:30:19.195Z","repository":{"id":57294322,"uuid":"41532260","full_name":"react-melon/melon","owner":"react-melon","description":"react ui comopents","archived":false,"fork":false,"pushed_at":"2018-06-20T12:23:15.000Z","size":4967,"stargazers_count":96,"open_issues_count":8,"forks_count":11,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-02-06T17:42:01.243Z","etag":null,"topics":["component","material-design","react"],"latest_commit_sha":null,"homepage":"http://react-melon.github.io/melon","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-melon.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-28T07:00:33.000Z","updated_at":"2024-05-16T17:24:25.000Z","dependencies_parsed_at":"2022-08-29T08:01:44.476Z","dependency_job_id":null,"html_url":"https://github.com/react-melon/melon","commit_stats":null,"previous_names":[],"tags_count":91,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-melon%2Fmelon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-melon%2Fmelon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-melon%2Fmelon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-melon%2Fmelon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-melon","download_url":"https://codeload.github.com/react-melon/melon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238397543,"owners_count":19465191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","material-design","react"],"created_at":"2024-08-01T18:01:36.687Z","updated_at":"2025-10-26T21:30:18.731Z","avatar_url":"https://github.com/react-melon.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# melon\n\n[![Coverage Status](https://coveralls.io/repos/github/react-melon/melon/badge.svg?branch=)](https://coveralls.io/github/react-melon/melon?branch=) [![Version](https://badge.fury.io/js/melon.svg?style=flat)](https://www.npmjs.com/package/melon)\n[![Build Status](https://travis-ci.org/react-melon/melon.svg?style=flat)](https://travis-ci.org/react-melon/melon)\n\n[![SauceLabs Status](https://saucelabs.com/browser-matrix/melon-ui.svg)](https://saucelabs.com/u/melon-ui)\n\nA Set of React Components that Implement Google's Material Design\n\n## Install\n\n### npm\n\n[![melon](https://nodei.co/npm/melon.png)](https://npmjs.org/package/melon)\n\n### bower\n\n```\nbower install melon\n```\n\n## Melon Family\n\n### Components\n\n* **melon-core**\n    * InputComponent\n\n* **melon**\n    * BoxGroup\n    * Breadcrumb\n    * Button\n    * Dialog\n    * Drawer\n    * Grid\n    * Icon\n    * Pager\n    * Progress\n    * Region\n    * ScrollView\n    * Select\n    * Slider\n    * SnackBar\n    * Table\n    * Tabs\n    * TextBox\n    * Tree\n    * Tooltip\n    * Uploader\n    * Zippy\n\n* **[melon-form](https://github.com/react-melon/melon-form)**\n    * Form\n\n* **[melon-json-schema-form](https://github.com/react-melon/melon-json-schema-form)**\n    * Form\n\n* **[melon-layer](https://github.com/react-melon/melon-layer)**\n    * Popover/Layer\n\n* **[melon-calendar](https://github.com/react-melon/melon-calendar)**\n    * Calenadr\n    * RangeCalendar\n    * UnitCalendar\n\n* **[melon-timepicker](https://github.com/react-melon/melon-timepicker)**\n    * TimePicker\n\n* **[melon-listview](https://github.com/react-melon/melon-listview)**\n    * ListView\n\n* **[melon-colorpicker](https://github.com/react-melon/melon-colorpicker)**\n    * ColorPicker\n\n* **[melon-autocomplete](https://github.com/react-melon/melon-autocomplete)**\n    * AutoComplete\n\n* **[melon-split-pane](https://github.com/react-melon/melon-split-pane)**\n    * SplitPane\n\n* **[melon-fab](https://github.com/react-melon/melon-fab)**\n    * FloatingActionButton\n\n## Demos\n\n[http://react-melon.github.io/melon](http://react-melon.github.io/melon)\n\n## Compatible for ie8\n\nYou need use `es5-shim` 和 `es5-sham` on `ie8`\n\nsee `es5-shim` `es5-sham` [es5-shim](https://github.com/es-shims/es5-shim)\n\n## 如何在 webpack 中使用 melon\n\n1. 安装依赖\n\n    ```sh\n\n    # melon\n    npm i melon --save\n\n    # 编译 melon 样式的依赖\n    npm i stylus-loader file-loader stylus nib css-loader style-loader --save-dev\n\n    ```\n\n2. 配置 `webpack`:\n\n    在 `webpack` 中添加以下配置\n\n    ```javascript\n\n    module.exports = {\n        loaders: [\n            // 处理 stylus\n            {\n                test: /\\.styl$/,\n                loader: 'style!css!stylus?paths=node_modules\u0026resolve url'\n            },\n            // 处理 iconfont\n            {\n                test: /\\.(svg|eot|ttf|woff)(\\?.*)?$/,\n                loader: 'file'\n            }\n        ],\n        // stylus loader 中引入 nib 库支持\n        stylus: {\n            use: [require('nib')()]\n        }\n    };\n\n    ```\n\n    其中，`stylus` 的参数中的 `paths=node_modules`指定 stylus 文件的寻找范围，`resolve url`用于将 melon 中相对路径资源转换为绝对路径资源。\n\n\n3. 使用一个 `stylus` 文件来引入业务所需要的 melon 样式文件。\n\n    将 melon 组件的样式组织在一个入口样式文件中，比如 `${YOUR_PROJECT}/src/melon.styl`。\n\n    ```stylus\n\n    // 主题必须引入\n    @require 'melon/css/theme/default/index.styl';\n\n    // 其他组件按需引入\n    @require 'melon/css/Button.styl';\n\n    ```\n    其中主题样式文件是必选的，然后需要用到什么组件，就引入相应的组件样式。\n\n4. 在合适的 js 中引入需要的 melon 组件：\n\n    ```js\n\n    // 加载样式\n    import './melon.styl';\n\n    // 加载组件\n    import Button from 'melon/Button';\n\n    export default function App(props) {\n\n        return (\n            \u003cButton\u003emelon button\u003c/Button\u003e\n        );\n\n    }\n\n    ```\n\n经过以上步骤就完成了 melon 的引入了。另外，还可以参考这个 [demo repo](https://github.com/Sheetaa/melon-webpack-demo)。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-melon%2Fmelon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-melon%2Fmelon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-melon%2Fmelon/lists"}