├── .babelrc ├── .gitignore ├── .npmignore ├── .postcssrc.js ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── demo ├── _pages │ ├── _app.jsx │ ├── _base │ │ ├── _alert.jsx │ │ ├── _blockui.jsx │ │ ├── _dropdown.jsx │ │ ├── _modal.jsx │ │ ├── _navs.jsx │ │ ├── _popover.jsx │ │ ├── _progress.jsx │ │ ├── _scrollable.jsx │ │ ├── _spinner.jsx │ │ ├── _stateColor.jsx │ │ ├── _sweetAlerts.jsx │ │ ├── _tables.jsx │ │ ├── _tabs │ │ │ └── _bootstrap.jsx │ │ ├── _tooltip.jsx │ │ └── _typography.jsx │ ├── _button │ │ ├── _air.jsx │ │ ├── _default.jsx │ │ ├── _dropdown.jsx │ │ ├── _flaticon.jsx │ │ ├── _fontAwesome.jsx │ │ ├── _group.jsx │ │ ├── _lineAwesome.jsx │ │ ├── _pill.jsx │ │ └── _square.jsx │ ├── _form │ │ └── control │ │ │ ├── _group.jsx │ │ │ ├── _inputs.jsx │ │ │ └── _option.jsx │ ├── _grid │ │ ├── _grid.jsx │ │ └── _stack.jsx │ ├── _menu.json │ └── _menu.jsx └── _routes │ └── index.js ├── doc ├── .md_configs.data ├── .me_configs.data ├── Changelog.md ├── Install.md ├── Introduce.md ├── README.md ├── SUMMARY.md ├── Thanks.md ├── _assets │ ├── build-tools.png │ ├── demo_code.png │ └── dev.png ├── book.json ├── ch1 │ ├── _image │ │ ├── 2018-06-21-17-40-31.jpg │ │ └── 2018-06-21-17-42-15.jpg │ ├── helperClass.md │ ├── public.md │ └── stateColor.md ├── ch2 │ ├── _bgColor.md │ ├── _excludeClass.md │ ├── _fontColor.md │ ├── _handle.md │ ├── _includeAttribute.md │ ├── _includeClass.md │ ├── _includeStyle.md │ ├── _uniqueClass.md │ └── public.md └── ch3 │ ├── base │ ├── _image │ │ ├── 2018-06-22-11-23-54.jpg │ │ ├── 2018-06-22-11-40-31.jpg │ │ ├── 2018-06-22-11-45-29.jpg │ │ ├── 2018-06-22-11-48-34.jpg │ │ ├── 2018-06-22-11-48-52.jpg │ │ ├── 2018-06-22-11-49-15.jpg │ │ ├── 2018-06-22-11-49-48.jpg │ │ ├── 2018-06-22-11-51-23.jpg │ │ ├── 2018-06-22-13-20-53.jpg │ │ ├── 2018-06-22-13-24-42.jpg │ │ ├── 2018-06-22-17-20-27.jpg │ │ ├── 2018-06-22-17-40-49.jpg │ │ ├── 2018-06-22-18-22-34.jpg │ │ ├── 2018-06-22-18-34-13.jpg │ │ ├── 2018-06-27-11-13-22.jpg │ │ └── 2018-06-27-11-14-44.jpg │ ├── alert.md │ ├── badge.md │ ├── base.md │ ├── blockUI.md │ ├── dropdown.md │ ├── icon.md │ ├── loader.md │ ├── modal.md │ ├── nav.md │ ├── popover.md │ ├── portlet.md │ ├── progress.md │ ├── scroll.md │ ├── tab.md │ ├── table.md │ └── tooltip.md │ ├── button │ ├── _image │ │ ├── 2018-06-21-17-48-49.jpg │ │ ├── 2018-06-21-18-08-15.jpg │ │ ├── 2018-06-21-18-08-49.jpg │ │ ├── 2018-06-21-18-15-48.jpg │ │ ├── 2018-06-21-18-25-02.jpg │ │ ├── 2018-06-21-18-29-22.jpg │ │ ├── 2018-06-21-18-33-33.jpg │ │ ├── 2018-06-21-18-50-48.jpg │ │ ├── 2018-06-21-18-52-40.jpg │ │ ├── 2018-06-21-19-16-59.jpg │ │ ├── 2018-06-21-19-17-25.jpg │ │ ├── 2018-06-21-19-17-48.jpg │ │ ├── 2018-06-21-19-47-55.jpg │ │ ├── 2018-06-21-20-01-56.jpg │ │ ├── 2018-06-21-20-04-54.jpg │ │ ├── 2018-06-22-08-27-46.jpg │ │ ├── 2018-06-22-08-35-04.jpg │ │ ├── 2018-06-22-08-38-47.jpg │ │ ├── 2018-06-22-08-43-34.jpg │ │ ├── 2018-06-22-08-45-57.jpg │ │ └── 2018-06-22-09-44-55.jpg │ ├── baseButton.md │ ├── button.md │ ├── dropdownButton.md │ └── groupButton.md │ ├── component.md │ ├── element │ ├── _image │ │ ├── 2018-06-21-08-07-18.jpg │ │ ├── 2018-06-21-08-16-32.jpg │ │ ├── 2018-06-21-08-27-35.jpg │ │ ├── 2018-06-21-08-28-09.jpg │ │ ├── 2018-06-21-08-53-28.jpg │ │ ├── 2018-06-21-09-00-53.jpg │ │ ├── 2018-06-21-09-05-20.jpg │ │ ├── 2018-06-21-11-27-24.jpg │ │ ├── 2018-06-21-11-31-27.jpg │ │ ├── 2018-06-21-13-17-22.jpg │ │ ├── 2018-06-21-13-21-23.jpg │ │ ├── 2018-06-21-13-22-05.jpg │ │ └── 2018-06-21-14-42-00.jpg │ ├── blockquote.md │ ├── code.md │ ├── div.md │ ├── element.md │ ├── link.md │ ├── list.md │ ├── paragraph.md │ ├── separator.md │ ├── space.md │ ├── text.md │ └── title.md │ └── grid │ ├── _image │ ├── 2018-06-29-10-49-41.jpg │ └── 2018-06-29-11-11-16.jpg │ ├── base.md │ ├── grid.md │ └── stack.md ├── index.html ├── lib ├── _components │ ├── _alert │ │ ├── index.osx │ │ └── index.scss │ ├── _aside │ │ └── index.osx │ ├── _badge │ │ ├── index.osx │ │ └── index.scss │ ├── _blockUI │ │ ├── index.osx │ │ └── index.scss │ ├── _blockquote │ │ └── index.osx │ ├── _breadcrumbs │ │ └── index.osx │ ├── _button │ │ ├── index.osx │ │ └── index.scss │ ├── _buttonDropdown │ │ ├── index.osx │ │ └── index.scss │ ├── _buttonGroup │ │ └── index.osx │ ├── _checkboxRadio │ │ └── index.osx │ ├── _code │ │ ├── index.osx │ │ └── index.scss │ ├── _container │ │ ├── index.osx │ │ └── index.scss │ ├── _content │ │ └── index.osx │ ├── _demo │ │ ├── index.osx │ │ └── index.scss │ ├── _div │ │ └── index.osx │ ├── _dropdown │ │ ├── index.osx │ │ └── index.scss │ ├── _fileInput │ │ └── index.osx │ ├── _footer │ │ ├── index.osx │ │ └── index.scss │ ├── _form │ │ ├── index.osx │ │ └── index.scss │ ├── _formGroup │ │ └── index.osx │ ├── _formStatic │ │ └── index.osx │ ├── _grid │ │ ├── index.osx │ │ └── index.scss │ ├── _griditem │ │ └── index.osx │ ├── _header │ │ ├── index.osx │ │ └── index.scss │ ├── _icon │ │ ├── index.osx │ │ └── index.scss │ ├── _input │ │ └── index.osx │ ├── _insertPend │ │ └── index.osx │ ├── _link │ │ ├── index.osx │ │ └── index.scss │ ├── _list │ │ └── index.osx │ ├── _loader │ │ ├── index.osx │ │ └── index.scss │ ├── _menu │ │ ├── index.osx │ │ └── index.scss │ ├── _modal │ │ ├── index.osx │ │ └── index.scss │ ├── _nav │ │ ├── index.osx │ │ └── index.scss │ ├── _page │ │ ├── index.osx │ │ └── index.scss │ ├── _paragraph │ │ └── index.osx │ ├── _popover │ │ ├── index.osx │ │ └── index.scss │ ├── _portlet │ │ ├── index.osx │ │ └── index.scss │ ├── _progress │ │ ├── index.osx │ │ └── index.scss │ ├── _scroll │ │ ├── index.osx │ │ └── index.scss │ ├── _section │ │ ├── index.osx │ │ └── index.scss │ ├── _select │ │ └── index.osx │ ├── _separator │ │ ├── index.osx │ │ └── index.scss │ ├── _space │ │ └── index.osx │ ├── _spinner │ │ ├── index.osx │ │ └── index.scss │ ├── _stack │ │ ├── index.osx │ │ └── index.scss │ ├── _subheader │ │ ├── index.osx │ │ └── index.scss │ ├── _tab │ │ ├── _index.osx │ │ └── index.scss │ ├── _table │ │ ├── index.osx │ │ └── index.scss │ ├── _text │ │ └── index.osx │ ├── _textarea │ │ └── index.osx │ ├── _title │ │ └── index.osx │ ├── _tooltip │ │ ├── index.osx │ │ └── index.scss │ └── _wrapper │ │ └── index.osx ├── _plugins.js ├── _plugins │ ├── flaticon │ │ ├── css │ │ │ └── flaticon.css │ │ ├── flaticon.html │ │ └── fonts │ │ │ ├── Flaticon.eot │ │ │ ├── Flaticon.svg │ │ │ ├── Flaticon.ttf │ │ │ └── Flaticon.woff │ ├── line-awesome │ │ ├── css │ │ │ ├── line-awesome-font-awesome.css │ │ │ ├── line-awesome-font-awesome.min.css │ │ │ ├── line-awesome.css │ │ │ └── line-awesome.min.css │ │ └── fonts │ │ │ ├── line-awesome.eot │ │ │ ├── line-awesome.svg │ │ │ ├── line-awesome.ttf │ │ │ ├── line-awesome.woff │ │ │ └── line-awesome.woff2 │ └── metronic │ │ ├── css │ │ └── styles.css │ │ └── fonts │ │ ├── Metronic_fda1334c35d0f5fe2afb3afebbb6774a.eot │ │ ├── Metronic_fda1334c35d0f5fe2afb3afebbb6774a.svg │ │ ├── Metronic_fda1334c35d0f5fe2afb3afebbb6774a.ttf │ │ ├── Metronic_fda1334c35d0f5fe2afb3afebbb6774a.woff │ │ └── Metronic_fda1334c35d0f5fe2afb3afebbb6774a.woff2 ├── _sass │ ├── _config.scss │ ├── _functions.scss │ ├── _helpers.scss │ ├── _mixins.scss │ ├── _normalize.scss │ ├── _variables.scss │ ├── alert │ │ ├── _alert.scss │ │ └── _config.scss │ ├── arrows │ │ ├── _config.scss │ │ └── _mixins.scss │ ├── aside │ │ ├── _aside-header-menu-mobile.scss │ │ ├── _aside-left.scss │ │ ├── _aside-right.scss │ │ └── _config.scss │ ├── blockui │ │ └── _blockui.scss │ ├── bootstrap.scss │ ├── bootstrap │ │ ├── dropdown │ │ │ ├── _config.scss │ │ │ └── _dropdown.scss │ │ └── index.scss │ ├── buttons │ │ ├── _buttons.scss │ │ └── _config.scss │ ├── container │ │ ├── _config.scss │ │ └── _container.scss │ ├── custom.scss │ ├── demo │ │ ├── _demo.scss │ │ └── _icon.scss │ ├── dropdown │ │ ├── _config.scss │ │ ├── _dropdown.scss │ │ └── _mixins.scss │ ├── footer │ │ ├── _config.scss │ │ └── _footer.scss │ ├── form │ │ ├── _config.scss │ │ └── _form.scss │ ├── grid │ │ └── _grid.scss │ ├── header │ │ ├── _brand.scss │ │ ├── _config.scss │ │ ├── _header.scss │ │ ├── _search.scss │ │ └── _topbar.scss │ ├── input │ │ ├── _checkbox-radio.scss │ │ └── _input.scss │ ├── menu │ │ ├── _config.scss │ │ ├── _menu.scss │ │ └── ver │ │ │ ├── _base.scss │ │ │ ├── _extend.scss │ │ │ └── _helpers.scss │ ├── modal │ │ └── _modal.scss │ ├── nav │ │ ├── _config.scss │ │ ├── _grid.scss │ │ ├── _nav.scss │ │ ├── _scroll-top.scss │ │ └── _sticky.scss │ ├── offcanvas │ │ └── _offcanvas.scss │ ├── page │ │ ├── _config.scss │ │ ├── _page.scss │ │ ├── aside │ │ │ ├── __config.scss │ │ │ ├── _aside-header-menu-mobile.scss │ │ │ ├── _aside-left.scss │ │ │ └── _aside-right.scss │ │ ├── base │ │ │ ├── _body.scss │ │ │ ├── _config.scss │ │ │ └── _page.scss │ │ ├── footer │ │ │ ├── __config.scss │ │ │ └── _default.scss │ │ ├── header │ │ │ ├── _brand.scss │ │ │ ├── _config.scss │ │ │ ├── _header.scss │ │ │ ├── _search.scss │ │ │ └── _topbar.scss │ │ ├── menu-aside │ │ │ ├── __config.scss │ │ │ └── _menu.scss │ │ ├── menu-header │ │ │ ├── __config.scss │ │ │ └── _menu.scss │ │ └── subheader │ │ │ └── _default.scss │ ├── popover │ │ └── _popover.scss │ ├── portlets │ │ ├── _config.scss │ │ └── _portlets.scss │ ├── progress │ │ └── _progress.scss │ ├── scroll │ │ └── _scroll.scss │ ├── spinners │ │ ├── _config.scss │ │ ├── _loader.scss │ │ └── _spinner.scss │ ├── stack │ │ └── _stack.scss │ ├── subheader │ │ └── _subheader.scss │ ├── tab │ │ └── _tab.scss │ ├── table │ │ └── _table.scss │ ├── toggler │ │ └── _mixins.scss │ ├── tooltip │ │ └── _tooltip.scss │ └── typography │ │ ├── _badge.scss │ │ ├── _code.scss │ │ ├── _link.scss │ │ ├── _section.scss │ │ └── _separator.scss ├── _scripts │ ├── _base │ │ ├── _app.js │ │ ├── _util.js │ │ ├── dropdown │ │ │ └── dropdown.js │ │ ├── menu │ │ │ └── menu.js │ │ ├── offcanvas │ │ │ └── offcanvas.js │ │ └── toggle │ │ │ └── toggle.js │ ├── _is.js │ ├── _jquery.js │ ├── _proptypes.js │ ├── _public.js │ └── _utils.js ├── index.js └── index.scss ├── package.json ├── src ├── App.css ├── App.jsx ├── assets │ └── logo_blue.png ├── components │ ├── .gitkeep │ ├── _base │ │ ├── BlockUI.jsx │ │ ├── Grid.jsx │ │ ├── GridItem.jsx │ │ └── Loader.jsx │ ├── _button │ │ ├── ButtonGroup.jsx │ │ └── ButtonIcon.jsx │ └── _framework │ │ ├── Body.jsx │ │ ├── Page.jsx │ │ └── Wrapper.jsx ├── demo │ └── pages │ │ ├── _button │ │ ├── _buttonGroup.jsx │ │ └── _buttonIcon │ │ │ ├── _flaticonIcon.jsx │ │ │ ├── _fontAwesomeIcon.jsx │ │ │ └── _lineawesomeIcon.jsx │ │ ├── _dashboard.jsx │ │ └── base │ │ ├── _alerts.jsx │ │ ├── _blockUI.jsx │ │ ├── _grid.jsx │ │ ├── _spinners.jsx │ │ ├── _stateColors.jsx │ │ └── _typography.jsx ├── main.js ├── routes │ └── index.js └── sass │ ├── _demo.scss │ └── framework │ └── component │ └── base │ └── grid │ └── _grid.scss └── static └── .gitkeep /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", {"modules": false}], 4 | "stage-1", 5 | "react" 6 | ], 7 | "plugins": [ 8 | "transform-runtime", 9 | "transform-decorators-legacy" 10 | ], 11 | "env": { 12 | "production": { 13 | "plugins": [[ 14 | "transform-react-remove-prop-types", 15 | { 16 | "removeImport": true, 17 | "ignoreFilenames": ["node_modules"] 18 | } 19 | ]] 20 | }, 21 | "development": { 22 | "plugins": ["react-hot-loader/babel"] 23 | }, 24 | "test": { 25 | "presets": ["env", "stage-1"], 26 | "plugins": [ 27 | ["module-resolver", { 28 | "alias": { 29 | "src": "./src" 30 | } 31 | }] 32 | ] 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | _book/ 4 | /dist/ 5 | doc/_book/ 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | package-lock.json 10 | .markeditor/ 11 | 12 | # Editor directories and files 13 | .idea 14 | .vscode 15 | *.suo 16 | *.ntvs* 17 | *.njsproj 18 | *.sln 19 | *.Archive 20 | package-lock.json 21 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | selenium-debug.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "plugins": { 3 | // to edit target browsers: use "browserlist" field in package.json 4 | "autoprefixer": {} 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Qu Long Jun 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 该项目已迁移至 [Shine Design](https://github.com/shine-design/shine-design)，本项目停止更新。 3 | 4 |
5 | 6 | 7 | 8 |

9 | Omega-UI logo

10 |

11 | 12 | ------ 13 |
14 | 15 | ![](https://img.shields.io/badge/node-%3E%3D9.0.0-brightgreen.svg) ![](https://img.shields.io/badge/npm-%3E%3D6.1.0-brightgreen.svg) ![](https://img.shields.io/appveyor/ci/gruntjs/grunt.svg) ![](https://img.shields.io/badge/stable-v0.1.0-blue.svg) ![](https://img.shields.io/badge/beta-v0.1.4-blue.svg) ![](https://img.shields.io/npm/l/express.svg) 16 | 17 |
18 |
19 | 20 | 一套基于 [React](http://facebook.github.io/react/) 实现的企业级响应式UI设计方案 21 | 22 |
23 | 24 | ## 功能特性 25 | * 现代化的企业视觉UI设计，符合现代审美标准。 26 | * 从基础元素到复杂交互，多元化的组件复用技术。 27 | * 完全开源，丰富的使用示例，完善的技术文档。 28 | 29 | ## 快速构建 30 | 31 | 推荐使用快速构建工具 `Omegaui-CLI` 搭建项目，只需依次执行： 32 | ![](./doc/_assets/build-tools.png) 33 | > 构建工具具体用法清参考[构建工具说明](https://github.com/qulongjun/Omega-cli)。 34 | 35 | ## 使用示例 36 | 37 | 以下是一个组件的简单使用示例, **你只需做如下事情**: 38 | ![](./doc/_assets/demo_code.png) 39 | 40 | > 我们提供了丰富的组件供开发者使用，可以访问[官方示例](https://omega.qulongjun.com)查看具体实现。 41 | 42 | ## 调试与部署 43 | 44 | 快速构建工具已经集成了一键式调试与部署指令，只需执行如下命令即可实现开发环境下的调试和生产环境的部署： 45 | ![](./doc/_assets/dev.png) 46 | 47 | > 开发环境下启动调试后，在浏览器中打开 [http://127.0.0.1:8080](http://127.0.0.1:8080) 查看效果。 48 | 49 | ## 开发计划 50 | - [x] 页面布局 51 | - [x] 基础组件 52 | - [x] 按钮组件 53 | - [ ] 表单组件 54 | - [ ] 图表组件 55 | - [ ] 地图组件 56 | - [ ] 高级表格组件 57 | - [ ] 工具类组件 58 | 59 | ## 发布周期 60 | 本项目更新参照 [Semantic Versioning 2.0.0](https://semver.org/) 标准进行： 61 | - 修订版本：每周一个修订版本，用于进行日常的 Bug 修复（非紧急）。 62 | - 次版本号：每一到两天发布一个次版本，次版本更新会向下兼容当前主版本。 63 | - 主版本号：重大迭代工作，非周期性更新，与历史主版本不兼容。 64 | 65 | ## 获取帮助 66 | 如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助： 67 | * 我们提供了详细的[说明文档](https://omega-doc.qulongjun.com)，大部分问题都可以在文档中得以解决。 68 | * 利用强大的 [Issue](https://github.com/qulongjun/Omega-UI/issues) 功能，您可以直接进行提问，我们会随时关注并解答，同时我们也鼓励资深用户通过 Issue 给新人提供帮助。 69 | 70 | ## 参与项目 71 | 我们很期待您能参与进来一起开发 :)，但我们希望您能遵守相关约定： 72 | * 我们有一份[行为准则](./CODE_OF_CONDUCT.md)，希望所有的贡献者都能遵守，请花时间阅读一遍全文以确保您能明白哪些是可以做的，哪些是不可以做的。 73 | * 基于我们的发布周期，我们每周都会从 `master` 分支切一个 `feature` 分支出来，命名规则一般为 `feature-版本号` ，例如 `feature-1.3.0` 即将要发布的 `1.3.0` 版本。如果您进行了一个Bug修复，请直接 Pull Request 到 `master` 分支，如果进行的是新功能开发，请 Pull Request 到当前的 `feature` 分支。 74 | * 如果您有较好的创意，我们也欢迎您通过[Issue](https://github.com/qulongjun/Omega-UI/issues) 直接告诉我们。 75 | 76 | ## 联系我们 77 | 如果您需要联系我们，可以通过发送邮件至 [omega_ui@163.com](mailto:omega_ui@163.com) 。 78 | 79 | ## License 80 | 本项目基于 [MIT license](./LICENSE) 开源。 81 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')(); 3 | 4 | process.env.NODE_ENV = 'production'; 5 | 6 | const path = require('path'); 7 | const chalk = require('chalk'); 8 | const shell = require('shelljs'); 9 | const webpack = require('webpack'); 10 | const config = require('../config'); 11 | const webpackConfig = require('./webpack.prod.conf'); 12 | 13 | const assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory); 14 | shell.rm('-rf', assetsPath); 15 | shell.mkdir('-p', assetsPath); 16 | shell.config.silent = true; 17 | shell.cp('-R', 'static/*', assetsPath); 18 | shell.config.silent = false; 19 | 20 | webpack(webpackConfig, (err, stats) => { 21 | if (err) throw err; 22 | process.stdout.write(stats.toString({ 23 | warnings: false, 24 | colors: true, 25 | modules: false, 26 | children: false, 27 | chunks: false, 28 | chunkModules: false 29 | }) + '\n\n'); 30 | 31 | console.log(chalk.cyan(' Build complete.\n')) 32 | console.log(chalk.yellow( 33 | ' Tip: built files are meant to be served over an HTTP server.\n' + 34 | ' Opening index.html over file:// won\'t work.\n' 35 | )); 36 | }); 37 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | const chalk = require('chalk'); 2 | const semver = require('semver'); 3 | const packageConfig = require('../package.json'); 4 | 5 | const exec = cmd => require('child_process').execSync(cmd).toString().trim(); 6 | 7 | const versionRequirements = [ 8 | { 9 | name: 'node', 10 | currentVersion: semver.clean(process.version), 11 | versionRequirement: packageConfig.engines.node 12 | }, 13 | { 14 | name: 'npm', 15 | currentVersion: exec('npm --version'), 16 | versionRequirement: packageConfig.engines.npm 17 | } 18 | ]; 19 | 20 | module.exports = () => { 21 | let warnings = []; 22 | for (let i = 0; i < versionRequirements.length; i++) { 23 | let mod = versionRequirements[i]; 24 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 25 | warnings.push(mod.name + ': ' + 26 | chalk.red(mod.currentVersion) + ' should be ' + 27 | chalk.green(mod.versionRequirement) 28 | ); 29 | } 30 | } 31 | 32 | if (warnings.length) { 33 | console.log(''); 34 | console.log(chalk.yellow('To use this template, you must update following to modules:')); 35 | console.log(); 36 | for (let i = 0; i < warnings.length; i++) { 37 | let warning = warnings[i]; 38 | console.log(' ' + warning); 39 | } 40 | console.log(); 41 | process.exit(1); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill'); 3 | const hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true'); 4 | 5 | hotClient.subscribe(event => { 6 | if (event.action === 'reload') { 7 | window.location.reload(); 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const config = require('../config'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | 5 | const isProd = process.env.NODE_ENV === 'production'; 6 | 7 | exports.assetsPath = _path => { 8 | const assetsSubDirectory = isProd 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory; 11 | return path.posix.join(assetsSubDirectory, _path); 12 | }; 13 | 14 | exports.cssLoaders = options => { 15 | options = options || {}; 16 | 17 | const cssLoader = { 18 | loader: 'css-loader', 19 | options: { 20 | minimize: isProd, 21 | sourceMap: options.sourceMap, 22 | modules: config.base.cssModules 23 | } 24 | }; 25 | 26 | // generate loader string to be used with extract text plugin 27 | function generateLoaders (loader, loaderOptions) { 28 | const loaders = [cssLoader]; 29 | 30 | // enable postcss by default 31 | loaders.push({ loader: 'postcss-loader' }); 32 | 33 | if (loader) { 34 | loaders.push({ 35 | loader: loader + '-loader', 36 | options: Object.assign({}, loaderOptions, { 37 | sourceMap: options.sourceMap 38 | }) 39 | }); 40 | } 41 | 42 | // Extract CSS when in production build 43 | return [{ 44 | loader: isProd ? MiniCssExtractPlugin.loader : 'style-loader' 45 | }].concat(loaders); 46 | } 47 | 48 | return { 49 | css: generateLoaders(), 50 | less: generateLoaders('less'), 51 | sass: generateLoaders('sass', { indentedSyntax: true }), 52 | scss: generateLoaders('sass'), 53 | stylus: generateLoaders('stylus'), 54 | styl: generateLoaders('stylus') 55 | }; 56 | } 57 | 58 | exports.styleLoaders = options => { 59 | const output = []; 60 | const loaders = exports.cssLoaders(options); 61 | for (let extension in loaders) { 62 | const loader = loaders[extension]; 63 | output.push({ 64 | test: new RegExp('\\.' + extension + '$'), 65 | loader: loader 66 | }); 67 | } 68 | return output; 69 | }; 70 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const WebpackBar = require('webpackbar'); 3 | const utils = require('./utils'); 4 | const config = require('../config'); 5 | 6 | const resolve = dir => path.join(__dirname, '..', dir); 7 | 8 | module.exports = { 9 | entry: { 10 | app: './src/main.js' 11 | }, 12 | output: { 13 | path: config.build.assetsRoot, 14 | filename: '[name].js', 15 | publicPath: process.env.NODE_ENV === 'production' 16 | ? config.build.assetsPublicPath 17 | : config.dev.assetsPublicPath 18 | }, 19 | resolve: { 20 | extensions: ['.js', '.jsx', '.json'], 21 | modules: [ 22 | resolve('src'), 23 | resolve('node_modules') 24 | ], 25 | alias: { 26 | 'src': resolve('src'), 27 | 'assets': resolve('src/assets'), 28 | 'components': resolve('src/components'), 29 | 'omega': resolve('lib') 30 | } 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.jsx?$/, 36 | loader: 'babel-loader', 37 | include: [resolve('src'), resolve('test'), resolve('demo')], 38 | options: { 39 | cacheDirectory: true 40 | } 41 | }, 42 | { 43 | test: /\.osx?$/, 44 | loader: 'babel-loader', 45 | include: [resolve('lib')], 46 | options: { 47 | cacheDirectory: true 48 | } 49 | }, 50 | { 51 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 52 | loader: 'url-loader', 53 | query: { 54 | limit: 10000, 55 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 56 | } 57 | }, 58 | { 59 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 60 | loader: 'url-loader', 61 | query: { 62 | limit: 10000, 63 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 64 | } 65 | } 66 | ] 67 | }, 68 | plugins: [new WebpackBar()] 69 | }; 70 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const utils = require('./utils'); 2 | const webpack = require('webpack'); 3 | const config = require('../config'); 4 | const merge = require('webpack-merge'); 5 | const baseWebpackConfig = require('./webpack.base.conf'); 6 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 7 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(name => { 11 | baseWebpackConfig.entry[name] = [ 12 | 'react-hot-loader/patch', 13 | './build/dev-client' 14 | ].concat(baseWebpackConfig.entry[name]); 15 | }); 16 | 17 | module.exports = merge(baseWebpackConfig, { 18 | mode: 'development', 19 | module: { 20 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 21 | }, 22 | // cheap-module-eval-source-map is faster for development 23 | devtool: '#cheap-module-eval-source-map', 24 | plugins: [ 25 | new webpack.DefinePlugin({ 26 | 'process.env': config.dev.env 27 | }), 28 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 29 | new webpack.HotModuleReplacementPlugin(), 30 | new webpack.NoEmitOnErrorsPlugin(), 31 | // https://github.com/ampedandwired/html-webpack-plugin 32 | new HtmlWebpackPlugin({ 33 | filename: 'index.html', 34 | template: 'index.html', 35 | inject: true 36 | }), 37 | new FriendlyErrorsPlugin() 38 | ] 39 | }); 40 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge'); 2 | const prodEnv = require('./prod.env'); 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }); 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | base: { 5 | // CSS modules off by default. 6 | // Before you set it to `true`, 7 | // remember that the style will be 8 | // messed up for our template's style importing 9 | // is not for CSS modules 10 | cssModules: false 11 | }, 12 | build: { 13 | env: require('./prod.env'), 14 | index: path.resolve(__dirname, '../dist/index.html'), 15 | assetsRoot: path.resolve(__dirname, '../dist'), 16 | assetsSubDirectory: 'static', 17 | assetsPublicPath: '/', 18 | // disable by default for clients should not 19 | // get your source code from sourceMap. 20 | // feel free to turn it on when you need sourceMap 21 | // in production 22 | productionSourceMap: false, 23 | // Gzip off by default as many popular static hosts such as 24 | // Surge or Netlify already gzip all static assets for you. 25 | // Before setting to `true`, make sure to: 26 | // npm install --save-dev compression-webpack-plugin 27 | productionGzip: false, 28 | productionGzipExtensions: ['js', 'css'], 29 | // Run the build command with an extra argument to 30 | // View the bundle analyzer report after build finishes: 31 | // `npm run build --report` 32 | // Set to `true` or `false` to always turn it on or off 33 | bundleAnalyzerReport: process.env.npm_config_report 34 | }, 35 | dev: { 36 | env: require('./dev.env'), 37 | port: 8080, 38 | autoOpenBrowser: true, 39 | assetsSubDirectory: 'static', 40 | assetsPublicPath: '/', 41 | proxyTable: {}, 42 | // CSS Sourcemaps off by default because relative paths are "buggy" 43 | // with this option, according to the CSS-Loader README 44 | // (https://github.com/webpack/css-loader#sourcemaps) 45 | // In our experience, they generally work as expected, 46 | // just be aware of this issue when enabling this option. 47 | cssSourceMap: false 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | }; 4 | -------------------------------------------------------------------------------- /demo/_pages/_menu.jsx: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @Demo: Menu 4 | * @User: Longjun.Qu 5 | * @Date: 2018-06-25 6 | * @Time: 17:36 7 | * 8 | */ 9 | 10 | 11 | import React, {Component, Fragment} from 'react'; 12 | import {Content, Div, Portlet, Section, Separator, Link, Space, SubHeader} from 'omega'; 13 | import logo_blue from 'src/assets/logo_blue.png'; 14 | class Menu extends Component { 15 | constructor(props) { 16 | super(props); 17 | this.state = {} 18 | } 19 | 20 | render() { 21 | const _props = this.props; 22 | return ( 23 | 24 | 30 | 31 |
32 |
33 | 37 | 38 | 39 |
40 | React 中文官网 43 | 44 | 技术文档 47 | 48 | 官方示例 51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 | ); 59 | } 60 | } 61 | 62 | export default Menu; -------------------------------------------------------------------------------- /demo/_routes/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {BrowserRouter, Route, Switch} from 'react-router-dom' 3 | import App from '../_pages/_app'; 4 | export default ( 5 | 6 | 7 | 8 | 9 | 10 | ) -------------------------------------------------------------------------------- /doc/.md_configs.data: -------------------------------------------------------------------------------- 1 | {"md_template_content": "", "md_includes": "", "md_injected_css": ""} -------------------------------------------------------------------------------- /doc/.me_configs.data: -------------------------------------------------------------------------------- 1 | {"md_injected_css": "", "md_template_content": "", "file_list_type": 2, "toc": 0, "files_hook": "", "editor_use_local_url": 0, "editor_image_path": "", "hide_suffix": 0, "file_list": 1, "new_file_template": "", "md_includes": "", "preview": 0, "default_ext": 0, "editor_image_format": 0, "files_sort": 0} -------------------------------------------------------------------------------- /doc/Changelog.md: -------------------------------------------------------------------------------- 1 | # 更新日志 2 | Omega UI的更新参照 [Semantic Versioning 2.0.0](https://semver.org/) 标准进行。 3 | 4 | - 修订版本：每周一个修订版本，用于进行日常的 Bug 修复（非紧急）。 5 | - 次版本号：每一到两天发布一个次版本，次版本更新会向下兼容当前主版本。 6 | - 主版本号：重大迭代工作，非周期性更新，与历史主版本不兼容。 7 | 8 | ###当前版本 9 | 稳定版本：`0.1.0` 10 | 11 | 开发版本：`0.1.4` 12 | 13 | ###历史记录 14 | #### 0.1.4 15 | `2018-07-05` 16 | * 组合表单组件 `Group` 上线（内测）。 17 | * 修复部分官方示例样式。 18 | 19 | #### 0.1.3 20 | `2018-07-03` 21 | * 修复 `BlockUI` 组件无法关闭的问题。 22 | * 增加 `Input`、`Select` 组件的`Refs`，该属性可以使开发者直接操作表单元素。 23 | 24 | #### 0.1.2 25 | `2018-07-02` 26 | * 表单控制组件 `Checkbox`、`Radio` 上线。 27 | * 官方示例更新，上线 `选择表单` 示例。 28 | 29 | #### 0.1.1 30 | `2018-07-02` 31 | * 表单容器组件 `Form`、`FormGroup` 上线。 32 | * 表单控制组件 `Input`、`FormStatic`、`FileInput`、`Textarea`、`Select` 上线。 33 | * 官方示例更新，上线 `基础表单` 示例。 34 | * 官方文档更新，上线 致谢 35 | 36 | #### 0.1.0 37 | `2018-06-29` 38 | * 页面布局组件 `Grid`、`Stack` 上线。 39 | * 官方示例更新，上线 `Header` 、 `Footer` 、 `Aside` 、`Menu` 等系统组件示例。 40 | * 官方文档更新，上线 `栅格系统`、`内容布局`使用说明。 41 | * 修复部分样式问题。 42 | 43 | 44 | #### 0.0.9 45 | `2018-06-27` 46 | * 下拉组件 `Dropdown` 上线。 47 | * 官方示例更新，上线 `下拉组件` 示例。 48 | * 官方文档更新，上线 `下拉组件`使用说明。 49 | 50 | #### 0.0.8 51 | `2018-06-26` 52 | * 变更项目结构，移除原 `src` 路径下所有组件库，迁移至 `lib` 文件夹。 53 | * 变更组件调用方式。 54 | * 合并原 Omega-template 项目，改由 `template/*` 分支管理。 55 | * Omegeui-cli 快速构建工具发布。 56 | 57 | #### 0.0.7 58 | `2018-06-21` 59 | * 元素组件发布。 60 | * 文档增加元素组件使用说明。 61 | 62 | #### 0.0.6 63 | `2018-06-20` 64 | * 发布 `npm` 服务，支持直接通过 `npm` 命令下载 Omega UI。 65 | * 开始编写技术文档。 -------------------------------------------------------------------------------- /doc/Install.md: -------------------------------------------------------------------------------- 1 | # 快速上手 2 | Omega 致力于为程序员提供愉悦的开发体验。 3 | > 在开始 Omega 之旅之前，您需要有一定的前端基础，包括且不限于 React 入门和 Ecmascript 2015。本说明默认您已经具备了一定的 HTML 、 CSS 和 Javascript相关知识，并已经了解了 React 的开发方式。 4 | 5 | ### 第一个本地实例 6 | 在实际项目开发中，一般我们使用 `Webpack` 进行 `JSX` 的代码构建、代理管理、资源打包和部署等服务，Omega 提供了一套基于 `NPM` + `Webpack` 的开发模式，以下为简单步骤。 7 | **下载 Omega UI项目** 8 | 9 | 我们推荐使用 `npm` 的方式进行开发，不仅可以在开发环境调试，也可以便捷的在生产环境打包和部署，享受整个 `npm` 的生态链。 10 | ```bash 11 | $ npm install omega-ui 12 | ``` 13 | >如果网络环境太差，推荐使用 cnpm 。 14 | 15 | **安装依赖环境** 16 | 17 | 通常情况下，您通过 npm 命令下载的项目是不包含依赖关系的，您可以通过以下命令进行依赖安装。 18 | ```bash 19 | $ cd omega-ui 20 | $ npm install 21 | ``` 22 | >如果网络环境太差，推荐使用 cnpm 。 23 | 24 | **使用组件** 25 | 26 | 当您安装完依赖项，开发环境就已经搭建完毕，下面试着进行一个组件开发。 27 | 打开位于 `src` 目录下的 `App.jsx` ，键入如下代码： 28 | ```js 29 | import React,{Component} from 'react'; 30 | import Text from '@Text'; 31 | class App extends Component { 32 | render() { 33 | return ( 34 | Hello World! 35 | ); 36 | } 37 | } 38 | export default App; 39 | ``` 40 | **开发调试** 41 | 42 | 在命令行中使用以下命令开启调试功能，并在浏览器中打开 http://localhost:8080 查看效果。 43 | ```bash 44 | $ npm run dev 45 | ``` 46 | 47 | **构建与部署** 48 | 49 | 在命令行中使用以下命令进行生产环境的打包工作。 50 | ```bash 51 | $ npm run build` 52 | ``` 53 | 打包之后会在项目根目录构建一个 `dist` 文件夹，您可以自行部署至生产环境中。 54 | 55 | > 以上环节仅是一个开发示例，您可以根据自己业务需求，自行设置相关流程和规范。 56 | 57 | ### 修改组件 58 | 由于业务需求的复杂，预设的组件无法完全满足实际业务需求，开发人员可以根据自己实际情况，对项目中的组件进行自定义或扩展操作。 59 | 欢迎进行试用和贡献。 -------------------------------------------------------------------------------- /doc/Introduce.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | > 基于React的响应式开发UI框架 3 | 4 | ### 特性 5 | - 现代化的视觉UI设计，符合现代审美标准。 6 | - 从基础元素到复杂交互，多元化的组件复用技术。 7 | - 完全开源，丰富的使用示例。 8 | 9 | ### 浏览器要求 10 | - 现代化浏览器（Chrome、Firefox较高版本，IE 10+）。 11 | - 浏览器需支持Ecmascript 2015。 12 | - 其他增强特性支持。 13 | 14 | ### 相关链接 15 | - [官网网站](https://o-ui.cn) 16 | - [使用示例](https://omega.qulongjun.com) 17 | - [Github](https://github.com/qulongjun/Omega-UI) 18 | 19 | ### 如何贡献 20 | 我们随时欢迎您以任何形式参与贡献，欢迎直接 Pull Request，或直接与我们联系。 21 | 22 | ### 社区帮助 23 | 如果您在使用中遇到任何问题，可以直接通过[Issue](https://github.com/qulongjun/Omega-UI/issues)与我们联系。 -------------------------------------------------------------------------------- /doc/README.md: -------------------------------------------------------------------------------- 1 | ![avator](https://cdn.qulongjun.cn/omega/logo_blue.png) -------------------------------------------------------------------------------- /doc/SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [Omega for React](README.md) 4 | * [介绍](Introduce.md) 5 | * [快速上手](Install.md) 6 | * [更新日志](Changelog.md) 7 | * [基础属性](ch1/public.md) 8 | * [状态颜色](ch1/stateColor.md) 9 | * [辅助类](ch1/helperClass.md) 10 | * [公共配置](ch2/public.md) 11 | * [_includeClass](ch2/_includeClass.md) 12 | * [_excludeClass](ch2/_excludeClass.md) 13 | * [_uniqueClass](ch2/_uniqueClass.md) 14 | * [_includeStyle](ch2/_includeStyle.md) 15 | * [_includeAttribute](ch2/_includeAttribute.md) 16 | * [_handle](ch2/_handle.md) 17 | * [_fontColor](ch2/_fontColor.md) 18 | * [_bgColor](ch2/_bgColor.md) 19 | * [组件](ch3/component.md) 20 | * [布局组件](ch3/grid/base.md) 21 | * [栅格系统组件](ch3/grid/grid.md) 22 | * [内容布局组件](ch3/grid/stack.md) 23 | * [元素组件](ch3/element/element.md) 24 | * [文本组件](ch3/element/text.md) 25 | * [段落组件](ch3/element/paragraph.md) 26 | * [标题组件](ch3/element/title.md) 27 | * [链接组件](ch3/element/link.md) 28 | * [代码组件](ch3/element/code.md) 29 | * [容器组件](ch3/element/div.md) 30 | * [引用组件](ch3/element/blockquote.md) 31 | * [列表组件](ch3/element/list.md) 32 | * [空间分隔组件](ch3/element/space.md) 33 | * [分割线组件](ch3/element/separator.md) 34 | * [按钮组件](ch3/button/button.md) 35 | * [基础按钮组件](ch3/button/baseButton.md) 36 | * [下拉按钮组件](ch3/button/dropdownButton.md) 37 | * [按钮组组件](ch3/button/groupButton.md) 38 | * [基础组件](ch3/base/base.md) 39 | * [图标组件](ch3/base/icon.md) 40 | * [消息框组件](ch3/base/alert.md) 41 | * [徽章组件](ch3/base/badge.md) 42 | * [遮罩组件](ch3/base/blockUI.md) 43 | * [加载组件](ch3/base/loader.md) 44 | * [模态组件](ch3/base/modal.md) 45 | * [导航组件](ch3/base/nav.md) 46 | * [弹出框组件](ch3/base/popover.md) 47 | * [提示框组件](ch3/base/tooltip.md) 48 | * [进度条组件](ch3/base/progress.md) 49 | * [滚动组件](ch3/base/scroll.md) 50 | * [选项卡组件](ch3/base/tab.md) 51 | * [表格组件](ch3/base/table.md) 52 | * [窗口组件](ch3/base/portlet.md) 53 | * [下拉组件](ch3/base/dropdown.md) 54 | * [致谢](Thanks.md) 55 | -------------------------------------------------------------------------------- /doc/Thanks.md: -------------------------------------------------------------------------------- 1 | # 致谢 2 | 3 | > 希望 Omega 不会是UI框架的终点，希望前面这句话不只是希望。 4 | 5 |
6 | 7 | `Omega` 在创作过程中，参考了许多框架与设计，在此致以 **诚挚** 的感谢！ 8 | 9 | | 插件名称 | URL | 10 | | :-: | :- | 11 | | Node.js | https://nodejs.org | 12 | | NPM | https://www.npmjs.com | 13 | | Bootstrap | https://getbootstrap.com | 14 | | jQuery | https://jquery.com | 15 | | Popper.js | https://popper.js.org | 16 | | SweetAlert2 | https://limonte.github.io/sweetalert2 | 17 | | JQuery Smooth Scroll | https://www.npmjs.com/package/jquery-smooth-scroll | 18 | | jQuery Form Plugin | http://malsup.com/jquery/form | 19 | | jQuery custom content scroller | http://manos.malihu.gr/jquery-custom-content-scroller | 20 | | jQuery BlockUI Plugin | http://malsup.com/jquery/block | 21 | | Animate.css | https://daneden.github.io/animate.css | 22 | | Socicon| http://www.socicon.com | 23 | | Font Awesome | http://fontawesome.io | 24 | | Flaticon | https://www.flaticon.com | 25 | | Tooltip.js | https://popper.js.org/tooltip-examples.html | 26 | -------------------------------------------------------------------------------- /doc/_assets/build-tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/_assets/build-tools.png -------------------------------------------------------------------------------- /doc/_assets/demo_code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/_assets/demo_code.png -------------------------------------------------------------------------------- /doc/_assets/dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/_assets/dev.png -------------------------------------------------------------------------------- /doc/book.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Omega-UI 中文指南", 3 | "description": "Responsive Bootstrap Admin & Powerful UI Kit By React.", 4 | "language": "zh", 5 | "plugins": [ 6 | "editlink", 7 | "splitter", 8 | "github", 9 | "anchors", 10 | "tbfed-pagefooter", 11 | "prism", 12 | "-highlight" 13 | ], 14 | "pluginsConfig": { 15 | "editlink": { 16 | "base": "https://github.com/qulongjun/Omega-UI/tree/master/doc", 17 | "label": "编辑本页" 18 | }, 19 | "github": { 20 | "url": "https://github.com/qulongjun/Omega-UI" 21 | }, 22 | "tbfed-pagefooter": { 23 | "copyright": "© Longjun Qu", 24 | "modify_label": "该文件修订时间：", 25 | "modify_format": "YYYY-MM-DD HH:mm:ss" 26 | }, 27 | "prism": { 28 | "css": [ 29 | "prismjs/themes/prism-solarizedlight.css" 30 | ] 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /doc/ch1/_image/2018-06-21-17-40-31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch1/_image/2018-06-21-17-40-31.jpg -------------------------------------------------------------------------------- /doc/ch1/_image/2018-06-21-17-42-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch1/_image/2018-06-21-17-42-15.jpg -------------------------------------------------------------------------------- /doc/ch1/helperClass.md: -------------------------------------------------------------------------------- 1 | # 辅助类 2 | > 辅助类（Helper Classes）是一类由 UI 预留，封装了一些简单样式实现，方便用户开发使用的 `class` 修饰符。 3 | 4 | ### 作用 5 | 辅助类可用于所有的 DOM 元素和组件（使用 [_includeClass](../ch2/_includeClass.md) 属性，并作用于组件最外层容器。）。辅助类等效于直接在 DOM 元素上设置行间样式，且可以被其他 `class` 修饰符或同名 `style` 样式覆盖。 6 | 7 | ### 类型 8 | | 修饰符名 | 描述 | 9 | | :---: | :---- | 10 | | `m-margin-[size]`、`m-margin-top-[size]`、`m-margin-bottom-[size]`、`m-margin-left-[size]`、`m-margin-right-[size]` | 设置 DOM 元素或组件的外边距属性，支持的参数有5、10、15、20、25、30、35、40、45和50（数字类型）。例如 `m-margin-50` 。 | 11 | | `m-padding-[size]`、`m-padding-top-[size]`、`m-padding-bottom-[size]`、`m-padding-left-[size]`、`m-padding-right-[size]` | 设置 DOM 元素或组件的内边距属性，支持的参数有5、10、15、20、25、30、35、40、45和50（数字类型）。例如 `m-padding-50` 。 | 12 | | `m--full-height` | 设置该 DOM 元素或组件 `100%` 占满整个外部容器的宽度。 | 13 | | `m--valign-top`、`m--valign-middle`、`m--valign-bottom` | 设置该 DOM 元素或组件的垂直对齐方式，支持顶部对齐，居中对齐和底部对齐 。 | 14 | | `m--space-[size]` | 空间分隔类，该辅助类可以用来分隔两个 DOM 元素或组件，支持的参数有5、10，15，20，30和40。例如 `m-padding-10` 。 | 15 | | `m--block-center` | 设置该 DOM 元素或组件以Block方式显示，并居中对齐。 | 16 | | `m--align-[alignment]` | 设置该 DOM 元素或组件的对齐方式，支持的参数有`left`、`right`、`center`。例如 `m--align-right`。 | 17 | | `m--pull-[direction]` | 设置该 DOM 元素或组件 `Pull` 方式，支持的参数有`left`、`right`、`center`。例如 `m--pull-right`。 | 18 | | `m--img-rounded` | 设置图片以圆角边框显示。 | 19 | | `m--block-inline` | 设置该 DOM 元素或组件以 `inline` 的方式显示。 | 20 | | `m--hide` | 设置该 DOM 元素或组件隐藏。 | 21 | | `m--clearfix` | 清除浮动样式。 | 22 | | `m--marginless` | 移除该 DOM 元素或组件的外边距设置。 | 23 | | `m--img-centered` | 设置图片以居中方式显示。 | 24 | |`m--font-transform-u`、`m--font-transform-l`、`m--font-transform-c`、`m--font-transform-i` | 设置英文字母的展示方式，支持的参数有大写（upper）、小写（lower）、首字母大写（capitalize）、默认（inherit） 。 | 25 | | `m--font-[weight]` | 设置文字的加粗程度，支持的参数有`thin`、`normal`、`bold`、`bolder`、`boldest`、`boldest2`。例如 `m--font-bold`。 | 26 | | `m--[type]-font-size-[size]` | 设置文字的尺寸，`type` 支持的参数有 `text` 和 `icon` ，`size` 支持的参数有`lg1`、`lg2`、`lg3`、`lg4`、`lg5`、`normal`、`sm1`、`sm2`、`sm3`、`sm4`、`sm5`。例如 `m--font-normal`、`m--icon-lg2`。 | 27 | |`m--font-[color] `、`m--font-inverse-[color]`、`m--bg-[color]`、`m--bg-fill-[color]` | 设置字体颜色或 DOM 元素和组件的背景颜色，支持的参数有`brand`、 `metal`、`light`、 `accent`、` focus`、 `primary`、 `success`、 `info`、` warning` 和 `danger`。 | 28 | |`m--visible-[breakpoint]`、`m--visible-[breakpoint]-inline-block`、`m--hidden-[breakpoint]` | 设置响应式 DOM 元素或组件的展示或隐藏临界点，支持的参数有`sm`、`md`、`lg`、`xxl`、`xxxl`。例如 `m--visible-sm` 。 | -------------------------------------------------------------------------------- /doc/ch1/public.md: -------------------------------------------------------------------------------- 1 | # 基础属性 2 | 3 | -------------------------------------------------------------------------------- /doc/ch1/stateColor.md: -------------------------------------------------------------------------------- 1 | # 状态颜色 2 | > 为了使整个应用程序的颜色统一， 简化开发流程，我们预设了数种符合现代化网页的状态颜色。 3 | 4 | ### Bootstrap 状态颜色 5 | `Bootstrap` 设计了种类丰富的状态颜色，这些状态可以直接应用于绝大部分元素和组件。我们重新设计了 `Bootstrap` 自带的六种状态： 6 | 7 | ![](./_image/2018-06-21-17-40-31.jpg) 8 | 9 | ### 自定义状态颜色 10 | 与此同时，为了丰富用户使用，我们增加了一些特殊的状态颜色，例如 `Brand` 和 `Metal` 等。 11 | 12 | ![](./_image/2018-06-21-17-42-15.jpg) 13 | -------------------------------------------------------------------------------- /doc/ch2/_bgColor.md: -------------------------------------------------------------------------------- 1 | # _bgColor 2 | > 为组件设置背景颜色，指定该组件最外层 DOM 元素应用该背景颜色。组件内所有非覆盖容器均会显示该颜色。 3 | 4 | ### 作用 5 | 该属性是 `_includeClass` 和 `_includeStyle` 的语法糖。用来统一设置组件最外层容器默认背景颜色。若存在其他背景颜色设置，该属性可能会被覆盖。 6 | 7 | ### 语法 8 | ##### 调用方式 9 | ``` jsx 10 | //_bgColor 支持传入一个状态字符串作为参数。 11 |
This is a div.
12 | //_bgColor 同时支持直接传入一个色值作为参数。 13 |
This is a div.
14 | ``` 15 | 16 | ##### 渲染结果 17 | ``` html 18 | 19 |
20 | This is a div. 21 |
22 | 23 |
24 | This is a div. 25 |
26 | ``` -------------------------------------------------------------------------------- /doc/ch2/_excludeClass.md: -------------------------------------------------------------------------------- 1 | # _excludeClass 2 | > 为组件排除 `class` 修饰符，指定该组件最外层 DOM 元素移除指定的 `class` 修饰符。 `_excludeClass` 属性较 `_includeClass` 属性具有更高优先级。 3 | 4 | ### 作用 5 | 该属性可以为某个组件移除一个或多个 `class` 修饰符，如果组件存在该 `class` 修饰符，则直接移除该修饰符，若不存在，则不进行操作。通常情况下，该 `class` 修饰符会直接作用于组件的最外层容器中，若组件为复合类型组件，则同时支持在子组件上设置`_excludeClass` 属性。 6 | 7 | ### 语法 8 | ##### 调用方式 9 | ``` jsx 10 | 18 | //_excludeClass 支持传入一个字符串作为参数。 19 | This is a text. 20 | //_excludeClass 同时支持传入一个字符串数组作为参数。 21 | This is a paragraph. 22 | ``` 23 | 24 | ##### 渲染结果 25 | ``` html 26 | 27 | 28 | This is a text. 29 | 30 | 31 |

32 | This is a paragraph. 33 |

34 | ``` -------------------------------------------------------------------------------- /doc/ch2/_fontColor.md: -------------------------------------------------------------------------------- 1 | # _fontColor 2 | > 为组件设置字体颜色，指定该组件最外层 DOM 元素应用该字体颜色。组件内所有非覆盖字体均会显示该颜色。 3 | 4 | ### 作用 5 | 该属性是 `_includeClass` 和 `_includeStyle` 的语法糖。用来统一设置组件内部所有字体默认颜色。若子 DOM 元素或子组件存在字体颜色设置，该属性会被覆盖。 6 | 7 | ### 语法 8 | ##### 调用方式 9 | ``` jsx 10 | //_fontColor 支持传入一个状态字符串作为参数。 11 | This is a text. 12 | //_fontColor 同时支持直接传入一个色值作为参数。 13 | This is a paragraph. 14 | ``` 15 | 16 | ##### 渲染结果 17 | ``` html 18 | 19 | 20 | This is a text. 21 | 22 | 23 |

24 | This is a paragraph. 25 |

26 | ``` -------------------------------------------------------------------------------- /doc/ch2/_includeAttribute.md: -------------------------------------------------------------------------------- 1 | # _includeAttribute 2 | > 为组件追加自定义 DOM 属性，指定该组件最外层 DOM 元素增加指定的自定义属性。 3 | 4 | ### 作用 5 | 该属性可以为某个组件增加一个或多个自定义属性，通常情况下，该自定义属性会直接作用于组件的最外层容器中，若组件为复合类型组件，则同时支持在子组件上设置`_includeAttribute` 属性。 6 | 7 | ### 语法 8 | ##### 调用方式 9 | ``` jsx 10 | //_includeAttribute 支持传入一个对象作为参数。 11 | This is a text. 16 | ``` 17 | 18 | ##### 渲染结果 19 | ``` html 20 | 21 | This is a text. 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /doc/ch2/_includeClass.md: -------------------------------------------------------------------------------- 1 | # _incudeClass 2 | > 为组件追加 `class` 修饰符，指定该组件最外层 DOM 元素增加指定的 `class` 修饰符。 3 | 4 | ### 作用 5 | 该属性可以为某个组件增加一个或多个自定义的 `class` 修饰符，通常情况下，该 `class` 修饰符会直接作用于组件的最外层容器中，若组件为复合类型组件，则同时支持在子组件上设置`_includeClass` 属性。 6 | 7 | ### 语法 8 | ##### 调用方式 9 | ``` jsx 10 | 18 | //_includeClass 支持传入一个字符串作为参数。 19 | This is a text. 20 | //_includeClass 同时支持传入一个字符串数组作为参数。 21 | This is a paragraph. 22 | ``` 23 | 24 | ##### 渲染结果 25 | ``` html 26 | 27 | 28 | This is a text. 29 | 30 | 31 |

32 | This is a paragraph. 33 |

34 | ``` -------------------------------------------------------------------------------- /doc/ch2/_includeStyle.md: -------------------------------------------------------------------------------- 1 | # _includeStyle 2 | > 为组件追加 `style` 样式，指定该组件最外层 DOM 元素增加指定的 `style` 样式。 3 | 4 | ### 作用 5 | 该属性可以为某个组件增加一个或多个自定义的 `style` 样式，通常情况下，该 `style` 样式会直接作用于组件的最外层容器中，若组件为复合类型组件，则同时支持在子组件上设置`_includeStyle` 属性。 6 | 7 | ### 语法 8 | ##### 调用方式 9 | ``` jsx 10 | //_includeStyle 支持传入一个对象作为参数。 11 | This is a text. 15 | ``` 16 | 17 | ##### 渲染结果 18 | ``` html 19 | 20 | This is a text. 21 | 22 | ``` 23 | 24 | ### 注意 25 | 由于 React 的 `JSX` 行内样式具有特殊性，因此需要采用`驼峰式` 的 Key 作为样式的键值，例如：`backgroundSize`、`fontSize`、`zIndex` 等。 -------------------------------------------------------------------------------- /doc/ch2/_uniqueClass.md: -------------------------------------------------------------------------------- 1 | # _uniqueClass 2 | > 为组件设置唯一 `class` 修饰符，指定该组件最外层 DOM 元素仅设置指定的 `class` 修饰符。 `_uniqueClass` 属性具有最该优先级。 3 | 4 | ### 作用 5 | 该属性可以为某个组件移除全部 `class` 修饰符，并追加该属性设置的 `class` 修饰符。通常情况下，该 `class` 修饰符会直接作用于组件的最外层容器中，若组件为复合类型组件，则同时支持在子组件上设置`_uniqueClass` 属性。 6 | 7 | ### 语法 8 | ##### 调用方式 9 | ``` jsx 10 | 18 | //_uniqueClass 支持传入一个字符串作为参数。 19 | This is a text. 20 | //_uniqueClass 同时支持传入一个字符串数组作为参数。 21 | This is a paragraph. 22 | ``` 23 | 24 | ##### 渲染结果 25 | ``` html 26 | 27 | 28 | This is a text. 29 | 30 | 31 |

32 | This is a paragraph. 33 |

34 | ``` -------------------------------------------------------------------------------- /doc/ch2/public.md: -------------------------------------------------------------------------------- 1 | # 公共配置 2 | > 所有组件的公共配置属性。 3 | 4 | 5 | #### 什么是公共配置？ 6 | 公共配置参数是指绝大部分组件均可以按照同类标准进行配置并生效的参数，若该组件存在子组件，则子组件也可以按照同类标准进行配置并生效。 7 | 8 | #### 哪些组件支持公共配置？ 9 | 到目前为止，绝大部分组件均已支持公共参数，在各个组件的配置参数界面可以查看当前组件支持情况。 10 | -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-11-23-54.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-11-23-54.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-11-40-31.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-11-40-31.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-11-45-29.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-11-45-29.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-11-48-34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-11-48-34.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-11-48-52.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-11-48-52.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-11-49-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-11-49-15.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-11-49-48.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-11-49-48.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-11-51-23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-11-51-23.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-13-20-53.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-13-20-53.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-13-24-42.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-13-24-42.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-17-20-27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-17-20-27.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-17-40-49.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-17-40-49.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-18-22-34.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-18-22-34.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-22-18-34-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-22-18-34-13.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-27-11-13-22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-27-11-13-22.jpg -------------------------------------------------------------------------------- /doc/ch3/base/_image/2018-06-27-11-14-44.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qulongjun/Omega-UI/17186276de3263ade5e8b58da737b2acccfaa7d8/doc/ch3/base/_image/2018-06-27-11-14-44.jpg -------------------------------------------------------------------------------- /doc/ch3/base/alert.md: -------------------------------------------------------------------------------- 1 | # 消息框组件 2 | > 块级组件，显示一个带背景色的高亮矩形可交互区域。 3 | 4 | ### 语法 5 | ##### 私有参数 6 | 7 | | 参数名 | 类型 | 默认值 | 描述 8 | | :-: | :-: | :-: | :- | 9 | | title | string | 空 | 设置消息框标题。| 10 | | message | string | 空 | 设置消息框内容。| 11 | | alertColor | string | 空 | 设置消息框背景色，参考 [状态颜色](../../ch1/stateColor.md)。| 12 | | type | string/string | 空 | 设置消息框类型，支持的参数有 `outline` 、 `outline-2x`、`square`、`normal`。| 13 | | closeBtn | bool | false | 设置消息框是否显示关闭图标。| 14 | | icon | string | 空 | 设置消息框最左侧显示的图标。| 15 | | iconStyle | string | regular | 设置消息框图标的显示样式，支持的参数有 `regular` 、`bold`。| 16 | | actions | array | 空 | 设置消息框交互按钮，数组接受对象作为参数，对象配置见下文。| 17 | | actionStyle | object | 空 | 设置消息框交互按钮外部容器样式。| 18 | 19 | actions对象 20 | 21 | | 参数名 | 类型 | 描述 22 | | :-: | :-: | :- | 23 | | closeBtn | bool | 设置当前按钮是否为关闭按钮。| 24 | >除了 `closeBtn` 属性之外，`item` 对象的其他属性完全继承自 [基础按钮组件](../button/baseButton.md) 。 25 | 26 | ##### 调用方式 27 | ``` jsx 28 | import Alert from '@Alert'; 29 | 35 | ``` 36 | ##### 渲染结果 37 | ``` html 38 |
39 |
40 | Well done! 41 | You successfully read this important alert message. 42 |
43 |
44 | ``` 45 | 46 | ##### 实现效果 47 | ![](./_image/2018-06-22-11-06-15.jpg) 48 | 49 | ### 最佳实践 50 | 通过 [公共配置](../ch1/public.md)，组件可以实现丰富的样式和逻辑的控制。 51 | 52 | ##### 丰富的背景色 53 | 在实际业务中，我们可以使用不同背景色的消息框对用户进行相应的提示，例如：用户操作成功可以使用 `success` 状态的消息框，用户操作失败可以使用 `danger` 状态的颜色等。 54 | 55 | **代码示例：** 56 | ```js 57 | { 58 | alertColor:'danger' 59 | } 60 | ``` 61 | 62 | **实现效果：** 63 | ![](./_image/2018-06-22-11-16-59.jpg) 64 | 65 | ##### 消息框样式 66 | 为了统一应用程序中UI设计，消息框组件提供了四种样式可供选择 67 | - normal：以圆角矩形的样式显示。 68 | - outline：以反色的样式显示。 69 | - outline-2x：以反色边框加粗的样式显示。 70 | - square：以直角矩形的样式显示。 71 | - air：设置阴影效果。 72 | 73 | 74 | **代码示例：** 75 | ```js 76 | { 77 | type:['outline','outline-2x'] 78 | } 79 | ``` 80 | 81 | **实现效果：** 82 | 83 | ![](./_image/2018-06-22-11-23-54.jpg) 84 | -------------------------------------------------------------------------------- /doc/ch3/base/badge.md: -------------------------------------------------------------------------------- 1 | # 徽章组件 2 | > 行间组件，显示一个带背景色的包含文本区域，用于突出显示某些文本，如未读数量等。 3 | 4 | ### 语法 5 | ##### 私有参数 6 | 7 | | 参数名 | 类型 | 默认值 | 描述 8 | | :-: | :-: | :-: | :- | 9 | | bgColor | string | 空 | 设置徽章背景颜色，参考 [状态颜色](../../ch1/stateColor.md)。| 10 | | inverse | bool | false | 设置徽章是否反色显示。| 11 | | type | string/array | 空 | 设置徽章显示样式，支持的参数有 `square`、 `wide` 、 `rounded` 、 `dot` 、`dot-sm ` 、`normal` 。| 12 | 13 | ##### 调用方式 14 | ``` jsx 15 | import Badge from '@Badge'; 16 | 3 19 | ``` 20 | ##### 渲染结果 21 | ``` html 22 | 3 23 | ``` 24 | ##### 实现效果 25 | ![](./_image/2018-06-22-11-40-31.jpg) 26 | ### 最佳实践 27 | 通过 [公共配置](../ch1/public.md)，组件可以实现丰富的样式和逻辑的控制。 28 | ##### 徽章样式 29 | 通过 `type` 属性，我们可以便捷的控制徽章的显示样式。 30 | 31 | **代码示例：** 32 | ```js 33 | { 34 | type:'wide' 35 | } 36 | ``` 37 | 38 | **实现效果：** 39 | 40 | normal： 41 | ![](./_image/2018-06-22-11-45-29.jpg) 42 | square： 43 | ![](./_image/2018-06-22-11-48-34.jpg) 44 | dot、dot-sm： 45 | ![](./_image/2018-06-22-11-48-52.jpg) 46 | wide： 47 | ![](./_image/2018-06-22-11-49-15.jpg) 48 | rounded： 49 | 50 | ![](./_image/2018-06-22-11-49-48.jpg) 51 | 52 | ##### 反色 53 | 通过 `inverse` 属性，我们可以便捷的控制徽章以反色显示，即白色背景，边框存在颜色。 54 | 55 | **代码示例：** 56 | ```js 57 | { 58 | inverse:true 59 | } 60 | ``` 61 | 62 | **实现效果：** 63 | 64 | ![](./_image/2018-06-22-11-51-23.jpg) 65 | 66 | -------------------------------------------------------------------------------- /doc/ch3/base/base.md: -------------------------------------------------------------------------------- 1 | # 基础组件 2 | 3 | -------------------------------------------------------------------------------- /doc/ch3/base/blockUI.md: -------------------------------------------------------------------------------- 1 | 哦# 遮罩组件 2 | > 块级组件，为外部容器增加一个带滚动圈的遮罩层，会阻止外部容器的交互，直到遮罩被取消。 3 | 4 | ### 语法 5 | ##### 私有参数 6 | 7 | | 参数名 | 类型 | 默认值 | 描述 8 | | :-: | :-: | :-: | :- | 9 | | block | bool | true | 设置是否显示遮罩组件。| 10 | | overlayColor | string | 空 | 设置遮罩层滚动圈颜色，。| 11 | | message | string | 空 | 设置遮罩层显示消息。| 12 | | el | string | 空 | 指定需要遮罩层的容器 。| 13 | 14 | ##### 调用方式 15 | ``` jsx 16 | import BlockUI from '@BlockUI'; 17 |
18 | 21 | ... 22 | 23 |
24 | ``` 25 | ##### 渲染结果 26 | ``` html 27 |
28 |
29 |

...

30 | 31 |
32 |
33 |
34 |
35 |
36 |
37 | ``` 38 | 39 | ##### 实现效果 40 | ![](./_image/2018-06-22-18-22-34.jpg) 41 | 42 | ### 最佳实践 43 | 通过 [公共配置](../ch1/public.md)，组件可以实现丰富的样式和逻辑的控制。 44 | >你可以将遮罩层作用于任何外部块状容器，只需在该容器内部包含遮罩组件，或使用 `el` 属性指定容器。 45 | 46 | ##### 应用于 Portlet 47 | 48 | **代码示例：** 49 | ```jsx 50 | 51 | 54 | .... 55 | 56 | 57 | ``` 58 | 59 | **实现效果：** 60 | ![](./_image/2018-06-22-18-34-13.jpg) 61 | 62 | ##### 自定义容器 63 | 64 | **代码示例：** 65 | ```js 66 | // el 指定 id 属性为 block_1 的容器。 67 | { 68 | el: '#block_1' 69 | } 70 | ``` 71 | ##### 页面遮罩 72 | 73 | **代码示例：** 74 | ```js 75 | // el 属性设置为body即可实现页面遮罩。 76 | { 77 | el: 'body' 78 | } 79 | ``` -------------------------------------------------------------------------------- /doc/ch3/base/dropdown.md: -------------------------------------------------------------------------------- 1 | # 下拉组件 2 | > 块级组件，显示一个可通过交互触发的下拉区域。 3 | 4 | ### 语法 5 | ##### 私有参数 6 | 7 | | 参数名 | 类型 | 默认值 | 描述 8 | | :-: | :-: | :-: | :- | 9 | | toggle | string | click | 设置下拉列表交互方式，支持的参数有`click`、`hover`。| 10 | | persistent | bool | false | 设置下拉组件在被点击后是否保留显示状态。| 11 | | hoverTimeout | number | 300 | 设置在鼠标移出下拉组件后，组件销毁延时。| 12 | | direction | string | left | 设置下拉组件对齐方式，支持的参数有 `left` 、 `right`、`center`。| 13 | | showArrow | bool | true | 设置下拉组件是否显示指示箭头。| 14 | | button | object | 空 | 设置触发下拉组件按钮的样式，参考 [按钮组件](../button/baseButton.md)。| 15 | | vertical | bool | bottom | 设置下拉组件的弹出方向，支持的参数有 `top` 、 `bottom`。| 16 | 17 | ##### 调用方式 18 | ``` jsx 19 | import {Dropdown} from 'omega'; 20 | 26 | ... 27 | 28 | ``` 29 | ##### 渲染结果 30 | ``` html 31 |
32 | Dropdown 33 |
34 | 35 |
36 |
37 |
38 | ... 39 |
40 |
41 |
42 |
43 |
44 | ``` 45 | 46 | ##### 实现效果 47 | ![](./_image/2018-06-27-11-13-22.jpg) 48 | 49 | 50 | 51 | ### 最佳实践 52 | 通过 [公共配置](../ch1/public.md)，组件可以实现丰富的样式和逻辑的控制。 53 | 54 | ##### 与其他组件配合 55 | 我们可以让下拉组件与其他组件配合，可以实现更丰富的交互，如下所示为与滚动组件配合： 56 | 57 | **代码示例：** 58 | ```jsx 59 | 62 | 63 | 64 | //This is a long paragraph. 65 | 66 | 67 | 68 | ``` 69 | 70 | **实现效果：** 71 | ![](./_image/2018-06-27-11-14-44.jpg) 72 | 73 | -------------------------------------------------------------------------------- /doc/ch3/base/icon.md: -------------------------------------------------------------------------------- 1 | # 图标组件 2 | > 行间组件，显示一个图标文字。 3 | 4 | ### 语法 5 | ##### 私有参数 6 | 7 | | 参数名 | 类型 | 默认值 | 描述 8 | | :-: | :-: | :-: | :- | 9 | | iconName | string | 空 | 设置图标名称，参考下文。| 10 | 11 | ##### 调用方式 12 | ``` jsx 13 | import Icon from '@Icon'; 14 | 17 | ``` 18 | ##### 渲染结果 19 | ``` html 20 | 21 | ``` 22 | 23 | ##### 实现效果 24 | ![](./_image/2018-06-22-13-20-53.jpg) 25 | 26 | ### 最佳实践 27 | 通过 [公共配置](../ch1/public.md)，组件可以实现丰富的样式和逻辑的控制。 28 | 29 | ##### 复合组件 30 | 通常情况下，图标往往和其他组件配合使用，作为行间组件，它可以被嵌入任何组件中，成为子组件。 31 | 32 | **代码示例：** 33 | ```jsx 34 | 35 | 36 | Warning 37 | 38 | ``` 39 | 40 | **实现效果：** 41 | ![](./_image/2018-06-22-13-24-42.jpg) 42 | 43 | -------------------------------------------------------------------------------- /doc/ch3/base/loader.md: -------------------------------------------------------------------------------- 1 | # 加载组件 2 | > 行间组件，在指定位置添加一个不断旋转的加载滚动条。 3 | 4 | ### 语法 5 | ##### 私有参数 6 | 7 | | 参数名 | 类型 | 默认值 | 描述 8 | | :-: | :-: | :-: | :- | 9 | | color | string | 空 | 设置加载条的滚动颜色，参考 [状态颜色](../../ch1/stateColor.md)。| 10 | | size | string | normal | 设置加载条的尺寸，支持的参数有 `sm` 、`lg` 、`normal` 。| 11 | | align | string | center | 设置加载条的位置，支持的参数有 `left` 、`right` 、`center` 。| 12 | | width | string | 30px | 设置加载条外部容器的宽度 。| 13 | 14 | ##### 调用方式 15 | ``` jsx 16 | import Loader from '@Loader'; 17 | 21 | ``` 22 | ##### 渲染结果 23 | ``` html 24 |
25 |
26 | ``` 27 | 28 | ##### 实现效果 29 | ![](./_image/2018-06-22-17-20-27.jpg) 30 | 31 | ### 最佳实践 32 | 通过 [公共配置](../ch1/public.md)，组件可以实现丰富的样式和逻辑的控制。 33 | 34 | ##### 按钮加载 35 | 加载组件通常与其他组件配合使用，以按钮组件为例，当需要实现点击按钮之后进行响应等待业务需求时，可以使用按钮加载。 36 | 37 | **代码示例：** 38 | ```jsx 39 |