├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── README.md ├── doc ├── .gitignore ├── README.md ├── _api │ ├── compontents │ │ ├── button.md │ │ ├── grid.md │ │ ├── icon.md │ │ └── switch.md │ ├── index.md │ └── quick.md ├── _config.yml ├── package.json ├── public.tar.gz ├── public │ ├── 2016 │ │ └── 07 │ │ │ ├── 26 │ │ │ └── hello-world │ │ │ │ └── index.html │ │ │ └── 27 │ │ │ └── React-D │ │ │ └── index.html │ ├── api │ │ └── index.html │ ├── archives │ │ ├── 2016 │ │ │ ├── 07 │ │ │ │ └── index.html │ │ │ └── index.html │ │ └── index.html │ ├── atom.xml │ ├── css │ │ ├── benchmark.css │ │ ├── index.css │ │ └── page.css │ ├── fruit-ui │ │ ├── bundle.js │ │ ├── components │ │ │ ├── actionSheet │ │ │ │ ├── ActionSheet.js │ │ │ │ └── index.js │ │ │ ├── button │ │ │ │ ├── button.js │ │ │ │ └── index.js │ │ │ ├── carousel │ │ │ │ ├── Carousel.js │ │ │ │ └── index.js │ │ │ ├── dialog │ │ │ │ ├── Dialog.js │ │ │ │ └── index.js │ │ │ ├── grid │ │ │ │ ├── Col.js │ │ │ │ ├── ColBody.js │ │ │ │ ├── ColFoot.js │ │ │ │ ├── ColHead.js │ │ │ │ ├── Row.js │ │ │ │ └── index.js │ │ │ ├── icon │ │ │ │ ├── icon.js │ │ │ │ └── index.js │ │ │ ├── mask │ │ │ │ ├── Mask.js │ │ │ │ └── index.js │ │ │ ├── message │ │ │ │ └── index.js │ │ │ ├── searchBar │ │ │ │ ├── index.js │ │ │ │ └── searchBar.js │ │ │ ├── switch │ │ │ │ ├── index.js │ │ │ │ └── switch.js │ │ │ └── toast │ │ │ │ ├── Toast.js │ │ │ │ └── index.js │ │ ├── f-ui.css │ │ └── index.js │ ├── images │ │ ├── chaitin.png │ │ ├── check.png │ │ ├── down.png │ │ ├── feed.png │ │ ├── github.png │ │ ├── htmlburger.png │ │ ├── icons.png │ │ ├── iphone.png │ │ ├── itunescn.png │ │ ├── jsfiddle.png │ │ ├── laravel.png │ │ ├── logo.png │ │ ├── menu.png │ │ ├── patreon.png │ │ ├── paypal.png │ │ ├── phonedemo.png │ │ ├── qrcode.png │ │ ├── reactui-qrcode.png │ │ ├── reactui-qrcode1.png │ │ ├── reactui-qrcode2.png │ │ ├── screen.png │ │ ├── search.png │ │ ├── sky.jpg │ │ ├── strikingly.png │ │ └── weixinpay.png │ ├── index.html │ ├── js │ │ ├── browser.js │ │ ├── browser.min.js │ │ ├── common.js │ │ ├── index.js │ │ ├── lc.js │ │ ├── money.js │ │ └── smooth-scroll.min.js │ └── sitemap.xml ├── source │ ├── _posts │ │ ├── React-D.md │ │ └── hello-world.md │ ├── api │ │ └── index.md │ └── dis │ │ └── index.md └── themes │ ├── landscape │ ├── .gitignore │ ├── Gruntfile.js │ ├── LICENSE │ ├── README.md │ ├── _config.yml │ ├── languages │ │ ├── default.yml │ │ ├── fr.yml │ │ ├── nl.yml │ │ ├── no.yml │ │ ├── ru.yml │ │ ├── zh-CN.yml │ │ └── zh-TW.yml │ ├── layout │ │ ├── _partial │ │ │ ├── after-footer.ejs │ │ │ ├── archive-post.ejs │ │ │ ├── archive.ejs │ │ │ ├── article.ejs │ │ │ ├── footer.ejs │ │ │ ├── google-analytics.ejs │ │ │ ├── head.ejs │ │ │ ├── header.ejs │ │ │ ├── mobile-nav.ejs │ │ │ ├── post │ │ │ │ ├── category.ejs │ │ │ │ ├── date.ejs │ │ │ │ ├── gallery.ejs │ │ │ │ ├── nav.ejs │ │ │ │ ├── tag.ejs │ │ │ │ └── title.ejs │ │ │ └── sidebar.ejs │ │ ├── _widget │ │ │ ├── archive.ejs │ │ │ ├── category.ejs │ │ │ ├── recent_posts.ejs │ │ │ ├── tag.ejs │ │ │ └── tagcloud.ejs │ │ ├── archive.ejs │ │ ├── category.ejs │ │ ├── index.ejs │ │ ├── layout.ejs │ │ ├── page.ejs │ │ ├── post.ejs │ │ └── tag.ejs │ ├── package.json │ ├── scripts │ │ └── fancybox.js │ └── source │ │ ├── css │ │ ├── _extend.styl │ │ ├── _partial │ │ │ ├── archive.styl │ │ │ ├── article.styl │ │ │ ├── comment.styl │ │ │ ├── footer.styl │ │ │ ├── header.styl │ │ │ ├── highlight.styl │ │ │ ├── mobile.styl │ │ │ ├── sidebar-aside.styl │ │ │ ├── sidebar-bottom.styl │ │ │ └── sidebar.styl │ │ ├── _util │ │ │ ├── grid.styl │ │ │ └── mixin.styl │ │ ├── _variables.styl │ │ ├── fonts │ │ │ ├── FontAwesome.otf │ │ │ ├── fontawesome-webfont.eot │ │ │ ├── fontawesome-webfont.svg │ │ │ ├── fontawesome-webfont.ttf │ │ │ └── fontawesome-webfont.woff │ │ ├── images │ │ │ └── banner.jpg │ │ └── style.styl │ │ ├── fancybox │ │ ├── blank.gif │ │ ├── fancybox_loading.gif │ │ ├── fancybox_loading@2x.gif │ │ ├── fancybox_overlay.png │ │ ├── fancybox_sprite.png │ │ ├── fancybox_sprite@2x.png │ │ ├── helpers │ │ │ ├── fancybox_buttons.png │ │ │ ├── jquery.fancybox-buttons.css │ │ │ ├── jquery.fancybox-buttons.js │ │ │ ├── jquery.fancybox-media.js │ │ │ ├── jquery.fancybox-thumbs.css │ │ │ └── jquery.fancybox-thumbs.js │ │ ├── jquery.fancybox.css │ │ ├── jquery.fancybox.js │ │ └── jquery.fancybox.pack.js │ │ └── js │ │ └── script.js │ └── reactd │ ├── _config.yml │ ├── layout │ ├── index.ejs │ ├── layout.ejs │ ├── page.ejs │ ├── partials │ │ ├── ad.ejs │ │ ├── baidu_tongji.ejs │ │ ├── blog.ejs │ │ ├── community_dropdown.ejs │ │ ├── dis.ejs │ │ ├── ga.ejs │ │ ├── header.ejs │ │ ├── main_menu.ejs │ │ ├── sidebar.ejs │ │ └── sponsors.ejs │ └── post.ejs │ └── source │ ├── css │ ├── _blog.styl │ ├── _common.styl │ ├── _demo.styl │ ├── _search.styl │ ├── _settings.styl │ ├── _syntax.styl │ ├── benchmark.styl │ ├── index.styl │ └── page.styl │ ├── fruit-ui │ ├── bundle.js │ ├── components │ │ ├── actionSheet │ │ │ ├── ActionSheet.js │ │ │ └── index.js │ │ ├── button │ │ │ ├── button.js │ │ │ └── index.js │ │ ├── carousel │ │ │ ├── Carousel.js │ │ │ └── index.js │ │ ├── dialog │ │ │ ├── Dialog.js │ │ │ └── index.js │ │ ├── grid │ │ │ ├── Col.js │ │ │ ├── ColBody.js │ │ │ ├── ColFoot.js │ │ │ ├── ColHead.js │ │ │ ├── Row.js │ │ │ └── index.js │ │ ├── icon │ │ │ ├── icon.js │ │ │ └── index.js │ │ ├── mask │ │ │ ├── Mask.js │ │ │ └── index.js │ │ ├── message │ │ │ └── index.js │ │ ├── searchBar │ │ │ ├── index.js │ │ │ └── searchBar.js │ │ ├── switch │ │ │ ├── index.js │ │ │ └── switch.js │ │ └── toast │ │ │ ├── Toast.js │ │ │ └── index.js │ ├── f-ui.css │ └── index.js │ ├── images │ ├── chaitin.png │ ├── check.png │ ├── down.png │ ├── feed.png │ ├── github.png │ ├── htmlburger.png │ ├── icons.png │ ├── iphone.png │ ├── itunescn.png │ ├── jsfiddle.png │ ├── laravel.png │ ├── logo.png │ ├── menu.png │ ├── patreon.png │ ├── paypal.png │ ├── phonedemo.png │ ├── qrcode.png │ ├── reactui-qrcode.png │ ├── reactui-qrcode1.png │ ├── reactui-qrcode2.png │ ├── screen.png │ ├── search.png │ ├── sky.jpg │ ├── strikingly.png │ └── weixinpay.png │ └── js │ ├── browser.js │ ├── browser.min.js │ ├── common.js │ ├── index.js │ ├── lc.js │ ├── money.js │ └── smooth-scroll.min.js ├── example ├── app.js ├── component │ ├── page │ │ ├── index.js │ │ └── styles.less │ └── title │ │ ├── index.js │ │ └── styles.less ├── index.html └── pages │ ├── actionSheet │ ├── index.js │ └── style.less │ ├── button │ ├── button.less │ └── index.js │ ├── carousel │ ├── index.js │ └── style.less │ ├── dialog │ ├── index.js │ └── styles.less │ ├── grid │ ├── grid.less │ └── index.js │ ├── home │ ├── images │ │ ├── actionsheet.png │ │ ├── button.png │ │ ├── carousel.png │ │ ├── dialog.png │ │ ├── grid.png │ │ ├── icon.png │ │ ├── search.png │ │ ├── switch.png │ │ └── toast.png │ ├── index.js │ └── index.less │ ├── icon │ ├── index.js │ └── styles.less │ ├── searchBar │ ├── index.js │ └── style.less │ ├── switch │ ├── index.js │ └── style.less │ └── toast │ ├── index.js │ └── styles.less ├── package.json ├── src ├── components │ ├── actionSheet │ │ ├── ActionSheet.js │ │ ├── index.js │ │ └── styles.less │ ├── base.less │ ├── button │ │ ├── button.js │ │ ├── index.js │ │ └── styles.less │ ├── carousel │ │ ├── Carousel.js │ │ ├── index.js │ │ └── styles.less │ ├── dialog │ │ ├── Dialog.js │ │ ├── index.js │ │ └── styles.less │ ├── grid │ │ ├── Col.js │ │ ├── ColBody.js │ │ ├── ColFoot.js │ │ ├── ColHead.js │ │ ├── Row.js │ │ ├── index.js │ │ └── styles.less │ ├── icon │ │ ├── icon.js │ │ ├── index.js │ │ └── styles.less │ ├── mask │ │ ├── Mask.js │ │ ├── index.js │ │ └── styles.less │ ├── message │ │ ├── index.js │ │ └── styles.less │ ├── searchBar │ │ ├── index.js │ │ ├── searchBar.js │ │ └── styles.less │ ├── switch │ │ ├── index.js │ │ ├── styles.less │ │ └── switch.js │ └── toast │ │ ├── Toast.js │ │ ├── index.js │ │ └── styles.less └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 2, 3 | "optional": ["es7.classProperties"] 4 | } 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | end_of_line = lf 6 | charset = utf-8 7 | indent_style = space 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | indent_size = 4 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "jsx": true, 4 | "modules": true 5 | }, 6 | "parserOptions": { 7 | "ecmaVersion": 6 8 | }, 9 | "env": { 10 | "browser": true, 11 | "node": true 12 | }, 13 | "parser": "babel-eslint", 14 | "rules": { 15 | "camelcase": 2, 16 | "curly": 2, 17 | "quotes": [2, "single"], 18 | "strict": [2, "never"], 19 | "react/jsx-uses-react": 2, 20 | "react/jsx-uses-vars": 2, 21 | "react/react-in-jsx-scope": 2, 22 | 23 | "no-else-return" : 2, 24 | "no-unreachable" : 2, 25 | "no-empty-function" : 1, 26 | "no-extra-bind" : 2, 27 | "no-extra-semi" : 2, 28 | "no-multi-spaces" : 2, 29 | "keyword-spacing" : [1,{"before": true, "after": true}], 30 | "max-nested-callbacks" : 2, 31 | "no-mixed-spaces-and-tabs" : 2, 32 | "space-before-function-paren" : 1, 33 | "space-infix-ops" : 2, 34 | "spaced-comment" : 2, 35 | "arrow-spacing" : 2, 36 | "no-var" : 2 37 | }, 38 | "plugins": [ 39 | "react" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | coverage 3 | lib 4 | node_modules 5 | npm-debug.log 6 | .DS_Store 7 | dist 8 | publish.sh 9 | dist.tar.gz 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .*rc 2 | .*.yml 3 | .idea 4 | webpack.config.* 5 | docs 6 | example 7 | coverage -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | script: 5 | - npm test 6 | - npm run coverage 7 | after_script: 8 | npm install coveralls && cat ./coverage/lcov.info | coveralls -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-ui 2 | Based on the react to maintain a set of ionic style of reusable component library [document](http://www.react-d.com/api/) 3 | ## Installation 4 | 5 | ``` 6 | npm install fruit-ui 7 | ``` 8 | 9 | [React-design](http://www.react-d.com) 10 | 11 | ## Show 12 | ![demo](http://g.recordit.co/lWR00hs6o1.gif) 13 | 14 | ## Phone preview 15 | ![image](https://cloud.githubusercontent.com/assets/9276376/17802302/06531f8a-6622-11e6-8346-4de63e5ebb36.png) 16 | 17 | 18 | [demo体验](http://demo.react-d.com/#/?_k=qgj3q0) 19 | 20 | ## Downloads 21 | 22 | ``` 23 | git clone https://github.com/react-design/react-ui.git 24 | ``` 25 | 26 | ## Install dependencies 27 | 28 | ``` 29 | npm install --registry=https://registry.npm.taobao.org --verbose 30 | ``` 31 | 32 | ## Start server 33 | 34 | ``` 35 | npm start 36 | ``` 37 | 38 | ## How to visit 39 | 40 | Open url `http://127.0.0.1:8080/` in browser. 41 | 42 | 43 | # Components 44 | Components of the plan, the subsequent will continue to add new components 45 | 46 | - [x] Button 47 | - [x] Input 48 | - [x] grid 49 | - [x] Switch 50 | - [ ] Numberbox 51 | - [ ] Checkbox 52 | - [ ] Select 53 | - [x] ActionSheet 54 | - [ ] Tabbar 55 | - [x] Dialog 56 | - [x] Toast 57 | - [ ] Popover 58 | - [x] Carousel 59 | - [ ] Popover 60 | - [ ] Navigation 61 | - [ ] Spiner 62 | - [ ] Datepicker 63 | - [ ] Processbar 64 | - [x] Searchbar 65 | - [ ] ShareGroup 66 | 67 | 68 | # Change log 69 | 70 | 71 | ## Project Structure 72 | ```react-ui 73 | |-- example 74 | |-- lib 75 | |-- src 76 | | |-- components 77 | | | |-- button 78 | | | | |-- button.js 79 | | | | |-- index.js 80 | | | | `-- styles.less 81 | | | |-- ... 82 | | `-- index.js 83 | |-- .babelrc 84 | |-- .editorconfig 85 | |-- .eslintrc 86 | |-- .travis.yml 87 | |-- package.json 88 | `-- webpack.config.js 89 | ``` 90 | 91 | ## Welcome 92 | 93 | * Star 94 | * Fork 95 | * PR 96 | * Issue 97 | -------------------------------------------------------------------------------- /doc/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | db.json 4 | *.log 5 | node_modules/ 6 | .deploy*/ 7 | dist.tar.gz 8 | -------------------------------------------------------------------------------- /doc/README.md: -------------------------------------------------------------------------------- 1 | ### React UI 文档 2 | 3 | webpage为hexo构建[官方文档](https://hexo.io/) 4 | 5 | ### 开始 6 | ``` 7 | $ npm install -g hexo-cli 8 | $ npm install 9 | $ hexo server 10 | ``` 11 | 12 | ### 如何编辑 13 | react-ui 文档统一编辑在`doc/source/api/index.md`,语法为markdown 14 | 15 | ### 左侧菜单介绍 16 | 左侧菜单只接收h2,h3如下，其中h3为上一个h2的子菜单 17 | ``` 18 | ## react-ui 介绍 19 | ## 基本样式 20 | ### 样式统一 21 | ### 基础设置 22 | ### 文字排版 23 | ## 布局相关 24 | ## 网格 Grid 25 | ### 简介 26 | ## 按钮 Button 27 | ### 尺寸 28 | ### 激活状态 29 | ### 禁用状态 30 | ``` 31 | ![image](https://cloud.githubusercontent.com/assets/9276376/17209112/02911be4-54ee-11e6-9412-e9d92be2feda.png) 32 | 33 | -------------------------------------------------------------------------------- /doc/_api/compontents/button.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Button 按钮 3 | type: api 4 | order: 2 5 | --- 6 | {% raw %} {% endraw %} 7 | 8 | ## 默认（default） 9 |
10 | *源码* 11 | ``` js 12 | 13 | 14 | 15 | 16 | 17 | ``` 18 | 19 | ## 空 20 |
21 | *源码* 22 | ``` js 23 | 24 | ] 25 | ``` 26 | 27 | ## 图标 28 |
29 | *源码* 30 | ``` js 31 | 32 | 33 | 34 | 35 | ``` 36 | 37 | ## 块 38 |
39 | *源码* 40 | 41 | ``` js 42 | 43 | 44 | ``` 45 | 46 | ## 禁用 47 |
48 | *源码* 49 | ``` js 50 | 51 | 52 | ``` 53 | 54 | ## 小尺寸 55 |
56 | *源码* 57 | ``` js 58 | 59 | 60 | ``` 61 | 62 | ## API 63 | 通过设置 Button 的属性来产生不同的按钮样式 64 | 属性如下： 65 | 66 | | 属性 | 说明 | 类型 | 默认值 | 67 | | ---- | ---- | ---- | ---- | 68 | | type | 可选值为：default、info、primary、warn、danger | string | default（不填也为default）| 69 | | icon | 设置按钮的图标 | string | - | 70 | | block、disabled、small、plain | 设置按钮是否为块级、禁用、小按钮 | string或空 | 增加属性时有效 | 71 | 72 | -------------------------------------------------------------------------------- /doc/_api/compontents/grid.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Grid 栅格 3 | type: api 4 | order: 4 5 | --- 6 | {% raw %} {% endraw %} 7 | ## flex-等分 8 |
9 | *源码* 10 | ``` html 11 | 12 | 1/1 13 | 14 | 15 | 1/2 16 | 1/2 17 | 18 | ``` 19 | 20 | ## flex-自定义 21 |
22 | *源码* 23 | ``` html 24 | 25 | 1/3 26 | 2/3 27 | 28 | 29 | 1/4 30 | 1/4 31 | 2/4 32 | 33 | ``` 34 | 35 | ## 左固定-右适应 36 |
37 | *源码* 38 | ``` html 39 | 40 | width:100px 41 | auto 42 | 43 | ``` 44 | 45 | ## 左适应-右固定 46 |
47 | *源码* 48 | ``` html 49 | 50 | auto 51 | width:100px 52 | 53 | ``` 54 | 55 | ## 三列布局 56 |
57 | *源码* 58 | ``` html 59 | 60 | width:100px 61 | auto 62 | width:100px 63 | 64 | ``` 65 | -------------------------------------------------------------------------------- /doc/_api/compontents/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Icon 图标 3 | type: api 4 | order: 3 5 | --- 6 | {% raw %} {% endraw %} 7 | ## 如何使用 8 | 9 | ``` js 10 | 11 | ``` 12 | 13 | 加入 animate-spin 可以使图标旋转 14 | 15 | ``` js 16 | 17 | ``` 18 | ``` js 19 | 20 | ``` 21 | ``` js 22 | 23 | ``` 24 | ``` js 25 | 26 | ``` 27 | ``` js 28 | 29 | ``` 30 | ``` js 31 | 32 | ``` 33 | ``` js 34 | 35 | ``` 36 | ``` js 37 | 38 | ``` 39 | ``` js 40 | 41 | ``` 42 | ``` js 43 | 44 | ``` 45 | 例子： 46 |
47 | 48 | 49 | {% raw %} {% endraw %} -------------------------------------------------------------------------------- /doc/_api/compontents/switch.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Switch 开关 3 | type: api 4 | order: 5 5 | --- 6 | {% raw %} {% endraw %} 7 | ## 默认 8 |
9 | *源码* 10 | ``` html 11 | 12 | ``` 13 | 14 | ## 小尺寸（small） 15 |
16 | *源码* 17 | ``` html 18 | 19 | ``` 20 | ## 设置文字/图标 21 |
22 | *源码* 23 | ``` html 24 | 25 | 26 | uncheckedChildren=/> 27 | ``` 28 | 29 | ## 禁用（disabled） 30 |
31 | *源码* 32 | ``` html 33 | 34 | 35 | ``` 36 | 37 | ## onChange事件 38 |
39 | *源码* 40 | ``` html 41 | this.handleChange(e)} defaultChecked="false"/> 42 | ``` 43 | -------------------------------------------------------------------------------- /doc/_api/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 介绍 3 | type: api 4 | order: 1 5 | --- 6 | 7 | Based on the react to maintain a set of ionic style of reusable component library 8 | ## 示例 9 | ![二维码扫一扫][1] 10 | [在线demo][2] 11 | 12 | ## 特性 13 | - 基于react维护的一套ionic风格的可复用组件库 14 | - 组件简洁，易于组合 15 | 16 | ## 版本 17 | 18 | - 开发版 [![npm version](https://img.shields.io/npm/v/fruit-ui.svg?style=flat)](https://www.npmjs.com/package/fruit-ui) 19 | 20 | ## 兼容性 21 | 22 | - 谷歌浏览器 23 | - Safari 24 | 25 | ## 链接 26 | 27 | - Button 按钮 28 | - Icon 图标 29 | - Grid 栅格布局 30 | - Switch 开关 31 | - Dialog 对话 32 | - Toast 33 | - SearchBar 搜索框 34 | - Carousel 轮播图 35 | - ActionSheet 36 | 37 | [1]: https://cloud.githubusercontent.com/assets/9276376/17802302/06531f8a-6622-11e6-8346-4de63e5ebb36.png 38 | [2]: http://demo.react-d.com/ 39 | 40 | -------------------------------------------------------------------------------- /doc/_api/quick.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 快速上手 3 | type: api 4 | order: 2 5 | --- 6 | 7 | ## 使用npm安装 8 | ``` bash 9 | npm install fruit-ui 10 | ``` 11 | 12 | ## 使用组件 13 | ``` js 14 | import {Button} from 'fruit-ui'; 15 | ReactDOM.render( 27 | 28 | 29 |
    30 |
  • alert
    • 31 |
  • 32 | 订餐电话 33 |
    • 34 |
  • 选项三
    • 35 |
  • 选项四
    • 36 |
  • 取消
    • 37 |
38 | 39 | 40 | ); 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /example/pages/actionSheet/style.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/actionSheet/style.less -------------------------------------------------------------------------------- /example/pages/button/button.less: -------------------------------------------------------------------------------- 1 | .button-layout{ 2 | 3 | Button{ 4 | margin:0 10px 10px 0; 5 | } 6 | } 7 | 8 | 9 | .button_sp_area{ 10 | width: 60%; 11 | padding: 10px 0; 12 | margin: 0 auto; 13 | text-align: justify; 14 | font-size: 0; 15 | 16 | &:after{ 17 | display: inline-block; 18 | width: 100%; 19 | height: 0; 20 | font-size: 0; 21 | margin: 0; 22 | padding: 0; 23 | overflow: hidden; 24 | content: "." 25 | } 26 | } -------------------------------------------------------------------------------- /example/pages/button/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import React from 'react'; 4 | import {Button} from '../../../src'; 5 | import Page from '../../component/page'; 6 | import Title from '../../component/title'; 7 | import './button.less'; 8 | 9 | export default class ButtonDemo extends React.Component { 10 | constructor(props) { 11 | super(props); 12 | 13 | 14 | } 15 | 16 | testClick(){ 17 | console.log('test click'); 18 | } 19 | 20 | 21 | render() { 22 | return ( 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | ); 68 | } 69 | }; 70 | -------------------------------------------------------------------------------- /example/pages/carousel/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import React from 'react'; 4 | import {Carousel} from '../../../src'; 5 | import Page from '../../component/page'; 6 | import Title from '../../component/title'; 7 | import './style.less'; 8 | 9 | export default class ButtonDemo extends React.Component { 10 | state = { 11 | switched: 'false' 12 | }; 13 | handleChange = (e) => { 14 | this.setState({switched: e.checked.toString()}) 15 | } 16 | render() { 17 | return ( 18 | 19 | 20 | 21 |

1

22 |

2

23 |

3

24 |

4

25 |

5

26 |

6

27 | 28 | 29 | 30 |
31 |
32 |
33 | 34 | { 35 | // 36 | // 37 | //

1

38 | //

2

39 | //

3

40 | //

4

41 | //

5

42 | //

6

43 | // 44 | } 45 | 46 | ); 47 | } 48 | }; 49 | -------------------------------------------------------------------------------- /example/pages/carousel/style.less: -------------------------------------------------------------------------------- 1 | .slider{ 2 | h3{ 3 | height: 120px; 4 | background: #ff6666; 5 | text-align: center; 6 | line-height: 120px; 7 | color: #ffffff; 8 | } 9 | img{ 10 | width: 100%; 11 | } 12 | 13 | } 14 | .f-carousel .styleDemo{ 15 | padding-bottom: 0; 16 | ul{ 17 | bottom: 5px; 18 | li{ 19 | button:before{ 20 | color: #ffffff; 21 | font-size: 20px; 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /example/pages/dialog/styles.less: -------------------------------------------------------------------------------- 1 | .dialog-layout{ 2 | .f-btn{ 3 | margin:0 10px 5px 0; 4 | } 5 | } -------------------------------------------------------------------------------- /example/pages/grid/grid.less: -------------------------------------------------------------------------------- 1 | .grid-layout{ 2 | .row{ 3 | margin-bottom:6px; 4 | .f-col,>div{ 5 | text-align:center; 6 | border-radius: 0px; 7 | color:white; 8 | margin:2px; 9 | height: 40px; 10 | line-height: 40px; 11 | } 12 | 13 | 14 | .color-1{ 15 | background-color: #1fc8db; 16 | } 17 | .color-2{ 18 | background-color: #42afe3; 19 | } 20 | .color-3{ 21 | background-color: #97cd76; 22 | } 23 | .color-4{ 24 | background-color: #fce473; 25 | color:gray; 26 | } 27 | .color-5{ 28 | background-color: #ed6c63; 29 | } 30 | 31 | } 32 | } -------------------------------------------------------------------------------- /example/pages/grid/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import React from 'react'; 4 | import {Row,Col,ColHead,ColBody,ColFoot} from '../../../src'; 5 | import Page from '../../component/page'; 6 | import Title from '../../component/title'; 7 | import './grid.less'; 8 | 9 | export default class ButtonDemo extends React.Component { 10 | constructor(props) { 11 | super(props); 12 | 13 | 14 | } 15 | 16 | 17 | render() { 18 | return ( 19 | 20 | 21 | 22 | 1/1 23 | 24 | 25 | 1/2 26 | 1/2 27 | 28 | 29 | 1/3 30 | 1/3 31 | 1/3 32 | 33 | 34 | 1/4 35 | 1/4 36 | 1/4 37 | 1/4 38 | 39 | 40 | 41 | 1/3 42 | 2/3 43 | 44 | 45 | 1/4 46 | 1/4 47 | 2/4 48 | 49 | 50 | 1/6 51 | 2/6 52 | 3/6 53 | 54 | 55 | 56 | width:100px 57 | auto 58 | 59 | 60 | width:200px 61 | auto 62 | 63 | 64 | 65 | auto 66 | width:100px 67 | 68 | 69 | auto 70 | width:200px 71 | 72 | 73 | 74 | width:100px 75 | auto 76 | width:100px 77 | 78 | 79 | ); 80 | } 81 | }; -------------------------------------------------------------------------------- /example/pages/home/images/actionsheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/home/images/actionsheet.png -------------------------------------------------------------------------------- /example/pages/home/images/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/home/images/button.png -------------------------------------------------------------------------------- /example/pages/home/images/carousel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/home/images/carousel.png -------------------------------------------------------------------------------- /example/pages/home/images/dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/home/images/dialog.png -------------------------------------------------------------------------------- /example/pages/home/images/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/home/images/grid.png -------------------------------------------------------------------------------- /example/pages/home/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/home/images/icon.png -------------------------------------------------------------------------------- /example/pages/home/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/home/images/search.png -------------------------------------------------------------------------------- /example/pages/home/images/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/home/images/switch.png -------------------------------------------------------------------------------- /example/pages/home/images/toast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/example/pages/home/images/toast.png -------------------------------------------------------------------------------- /example/pages/home/index.less: -------------------------------------------------------------------------------- 1 | // C : Color - 全局颜色前缀 2 | // D : Dark - 默认-深色 3 | // P : Primary - 默认的颜色 4 | // L : Light - 默认-明亮 5 | // T : text/Icon - 文本的背景色/图标的颜色 6 | // A : Accent - 主色调加强？ 7 | // S : Secondary - 中等的颜色（比如副标题） 8 | // Di : Divider - 分割线的颜色 9 | @CPD:#0288D1; //Color Primary dark 10 | @CP:#03A9F4; //Color primary 11 | @CPL:#B3E5FC; //Color Primary light 12 | @CTP:#FFFFFF; //Color text Primary 13 | @CA:#00BCD4; //Color accent 14 | @CPT:#212121; //Color primary Text 15 | @CST:#727272; //Color secondary Text 16 | @CD:#B6B6B6; //Color divider 17 | 18 | 19 | .home-layout{ 20 | height: 100%; 21 | overflow:auto; 22 | -webkit-overflow-scrolling: touch; 23 | -webkit-transition: -webkit-transform 0.3s ease-in-out; 24 | transition: transform 0.3s ease-in-out; 25 | -ms-scroll-chaining: none; 26 | .head{ 27 | background-color: @CP; 28 | color: @CTP; 29 | padding: 30px; 30 | text-align: center; 31 | padding-bottom:40px; 32 | font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 33 | h2{ 34 | color: #b3e5fc; 35 | } 36 | } 37 | 38 | .function-grid{ 39 | 40 | a:link,a:visited{ 41 | color:@CP; 42 | } 43 | 44 | a:active{ 45 | color:@CPD; 46 | } 47 | 48 | .f-row{ 49 | padding:20px; 50 | border-bottom:1px solid #E6E6E6; 51 | 52 | .r-icon{ 53 | padding-right:20px; 54 | } 55 | 56 | img{ 57 | width:22px; 58 | } 59 | } 60 | } 61 | 62 | } -------------------------------------------------------------------------------- /example/pages/icon/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import React from 'react'; 4 | import {Row,Col,Icon} from '../../../src'; 5 | import Page from '../../component/page'; 6 | import Title from '../../component/title'; 7 | import './styles.less'; 8 | 9 | export default class IconDemo extends React.Component { 10 | 11 | render() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | } 54 | }; 55 | -------------------------------------------------------------------------------- /example/pages/icon/styles.less: -------------------------------------------------------------------------------- 1 | .icon-layout{ 2 | .row{ 3 | .f-col{ 4 | padding:5px; 5 | text-align: center; 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /example/pages/searchBar/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import React from 'react'; 4 | import {SearchBar} from '../../../src'; 5 | import Page from '../../component/page'; 6 | import Title from '../../component/title'; 7 | import './style.less'; 8 | 9 | export default class SearchBarDemo extends React.Component { 10 | searchDemo(value){ 11 | this.setState({searchDemoValue: value}) 12 | } 13 | changeDemo(value){ 14 | this.setState({changeDemoValue: value}) 15 | } 16 | state = { 17 | changeDemoValue: null, 18 | searchDemoValue: null, 19 | } 20 | render() { 21 | return ( 22 | 23 | 24 | 25 | 26 | this.changeDemo(value)} button="false"> 27 |

28 | 搜索内容为：{this.state.changeDemoValue} 29 |

30 | 31 | this.searchDemo(value)}> 32 | { 33 | this.state.searchDemoValue ? 34 |

35 | 搜索内容为：{this.state.searchDemoValue} 36 |

: 37 | null 38 | } 39 | 40 | 41 | ); 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /example/pages/searchBar/style.less: -------------------------------------------------------------------------------- 1 | .showDemo{ 2 | height: 20px; 3 | line-height: 20px; 4 | margin-top: 10px; 5 | color: #666666; 6 | font-size: 14px; 7 | } 8 | -------------------------------------------------------------------------------- /example/pages/switch/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import React from 'react'; 4 | import {Switch} from '../../../src'; 5 | import {Icon} from '../../../src'; 6 | import Page from '../../component/page'; 7 | import Title from '../../component/title'; 8 | import './style.less'; 9 | 10 | export default class ButtonDemo extends React.Component { 11 | state = { 12 | switched: 'false' 13 | }; 14 | handleChange = (e) => { 15 | this.setState({switched: e.checked.toString()}) 16 | } 17 | render() { 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | uncheckedChildren=/> 30 | 31 | 32 | 33 | 34 | 35 | 36 | this.handleChange(e)} defaultChecked="false"/> 37 |
38 | 当前状态是：{this.state.switched} 39 |
40 | 41 | ); 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /example/pages/switch/style.less: -------------------------------------------------------------------------------- 1 | .showCb{ 2 | display: inline-block; 3 | height: 30px; 4 | line-height: 30px; 5 | vertical-align: top; 6 | margin-left: 10px; 7 | font-size: 15px; 8 | color: #666666; 9 | } 10 | -------------------------------------------------------------------------------- /example/pages/toast/styles.less: -------------------------------------------------------------------------------- 1 | .toast-layout{ 2 | .f-btn{ 3 | margin:0px 5px 5px 0; 4 | } 5 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-ui", 3 | "version": "0.4.0", 4 | "description": "react 移动端 UI", 5 | "eslintConfig": { 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | } 10 | }, 11 | "main": "./lib", 12 | "scripts": { 13 | "start": "webpack-dev-server --hot --inline --progress --colors ", 14 | "clean": "rimraf ./lib ./coverage", 15 | "build": "npm run clean & babel ./src --out-dir ./lib", 16 | "build:example": "rimraf ./dist && webpack", 17 | "lint": "eslint \"src/**/*.@(js|jsx)\"", 18 | "lintfix": "eslint \"src/**/*.@(js|jsx)\" --fix", 19 | "pretest": "npm run lint", 20 | "test": "mocha --compilers js:babel-core/register --recursive", 21 | "test:watch": "npm run test -- --watch", 22 | "coverage": "npm run lint & istanbul cover _mocha -- --compilers js:babel-core/register --recursive", 23 | "deploy" : "tar -czvf dist.tar.gz dist && scp dist.tar.gz root@123.56.129.175:/data/www/reactd" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/react-design/react-ui.git" 28 | }, 29 | "keywords": [ 30 | "mobile", 31 | "ui", 32 | "framework", 33 | "react", 34 | "react-component", 35 | "component", 36 | "components", 37 | "frontend" 38 | ], 39 | "author": "wn-team", 40 | "license": "MIT", 41 | "bugs": { 42 | "url": "https://github.com/react-design/react-ui/issues" 43 | }, 44 | "homepage": "https://github.com/react-design/react-ui", 45 | "dependencies": { 46 | "classnames": "^2.2.0", 47 | "less-plugin-clean-css": "^1.5.1", 48 | "react-slick": "^0.12.0", 49 | "rc-notification": "^1.3.5" 50 | }, 51 | "devDependencies": { 52 | "autoprefixer": "^6.3.5", 53 | "babel": "^5.8.23", 54 | "babel-core": "^5.8.23", 55 | "babel-eslint": "^6.1.2", 56 | "babel-loader": "^5.3.2", 57 | "css-loader": "^0.23.0", 58 | "enzyme": "^1.1.0", 59 | "eslint": "^3.1.1", 60 | "eslint-plugin-react": "^5.2.2", 61 | "extract-text-webpack-plugin": "^1.0.1", 62 | "file-loader": "^0.8.5", 63 | "history": "^1.17.0", 64 | "html-webpack-plugin": "^2.14.0", 65 | "husky": "^0.11.5", 66 | "istanbul": "^0.4.1", 67 | "jsdom": "^8.4.0", 68 | "less": "^2.5.3", 69 | "less-loader": "^2.2.1", 70 | "mocha": "^2.3.4", 71 | "open-browser-webpack-plugin": "0.0.1", 72 | "postcss-loader": "^0.8.2", 73 | "react-addons-css-transition-group": "^0.14.7", 74 | "react-addons-test-utils": "^0.14.3", 75 | "react-dom": "^0.14.8", 76 | "react-router": "^1.0.2", 77 | "rimraf": "^2.4.3", 78 | "sinon": "^1.17.2", 79 | "style-loader": "^0.13.0", 80 | "uglify-loader": "^1.2.0", 81 | "url-loader": "^0.5.7", 82 | "webpack": "^1.12.2", 83 | "webpack-dev-server": "^1.12.1" 84 | }, 85 | "peerDependencies": { 86 | "react": "^0.14.2 || ^15.0.1" 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/components/actionSheet/ActionSheet.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import Mask from '../mask/Mask'; 4 | 5 | export default class ActionSheet extends React.Component { 6 | static propTypes = { 7 | show: React.PropTypes.bool, 8 | onRequestClose: React.PropTypes.func 9 | } 10 | 11 | static defaultProps = { 12 | show: false, 13 | onRequestClose: null 14 | } 15 | 16 | render () { 17 | const {show ,children ,onRequestClose} = this.props; 18 | 19 | let container = classNames({ 20 | 'f-actionSheet': true, 21 | 'f-actionSheet-show': show, 22 | 'f-actionSheet-hidden': !show, 23 | }) 24 | 25 | return ( 26 |
27 | 32 |
33 | {children} 34 |
35 |
36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/actionSheet/index.js: -------------------------------------------------------------------------------- 1 | import ActionSheet from './ActionSheet'; 2 | 3 | export default { 4 | ActionSheet 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/actionSheet/styles.less: -------------------------------------------------------------------------------- 1 | .f-actionSheet-hidden{ 2 | .f-mask{ 3 | background: rgba(0,0,0,0); 4 | transition: background .3s; 5 | -webkit-transition: background .3s; 6 | } 7 | .f-actionSheet-list{ 8 | transform: translateY(100%); 9 | -webkit-transform: translateY(100%); 10 | // -webkit-transform: translate(0, 100%); 11 | // transform: translate(0, 100%); 12 | } 13 | } 14 | 15 | 16 | .f-actionSheet-show{ 17 | .f-mask{ 18 | background: rgba(0,0,0,0.6); 19 | -webkit-transition: background .3s; 20 | transition: background .3s; 21 | } 22 | .f-actionSheet-list{ 23 | -webkit-transform: translateY(0); 24 | transform: translateY(0); 25 | // -webkit-transform: translate(0, 0); 26 | // transform: translate(0, 0); 27 | } 28 | } 29 | 30 | 31 | .f-actionSheet-list{ 32 | z-index: 2000; 33 | width: 100%; 34 | position: fixed; 35 | left: 0; 36 | bottom: 0; 37 | // -webkit-backface-visibility: hidden; 38 | // backface-visibility: hidden; 39 | -webkit-transition: -webkit-transform .3s; 40 | transition: -webkit-transform .3s; 41 | transition: transform .3s; 42 | transition: transform .3s, -webkit-transform .3s; 43 | >ul{ 44 | background: #ffffff; 45 | >li{ 46 | width: 100%; 47 | height: 44px; 48 | padding: 8px 10px; 49 | text-align: center; 50 | color: #666666; 51 | border-top: 1px solid #efefef; 52 | a{ 53 | width: 100%; 54 | height: 100%; 55 | color: #666666; 56 | } 57 | &:last-child{ 58 | border-top: 5px solid #efefef; 59 | } 60 | &:active { 61 | background-color: #ECECEC; 62 | } 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/components/button/button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class Button extends React.Component { 5 | static propTypes = { 6 | disabled: React.PropTypes.bool, 7 | type: React.PropTypes.string, 8 | size: React.PropTypes.string 9 | }; 10 | 11 | static defaultProps = { 12 | disabled: false, 13 | type: 'default', 14 | size: 'normal' 15 | }; 16 | 17 | render () { 18 | const {type ,icon, small ,block, disabled, plain, children ,className, ...others} = this.props; 19 | const Component = this.props.href ? 'a' : 'button'; 20 | const cls = classNames({ 21 | ['f-btn'] : true, 22 | 23 | ['f-btn-default']: type === 'default' && !plain, 24 | ['f-btn-info']: type === 'info' && !plain, 25 | ['f-btn-primary']: type === 'primary' && !plain, 26 | ['f-btn-danger']: type === 'danger' && !plain, 27 | ['f-btn-warn']: type === 'warn' && !plain, 28 | 29 | 30 | ['f-btn-plain-default']: type === 'default' && plain, 31 | ['f-btn-plain-info']: type === 'info' && plain, 32 | ['f-btn-plain-primary']: type === 'primary' && plain, 33 | ['f-btn-plain-danger']: type === 'danger' && plain, 34 | ['f-btn-plain-warn']: type === 'warn' && plain, 35 | 36 | ['f-btn-small']: small, 37 | ['f-btn-block']: block, 38 | ['f-btn-disabled']: disabled, 39 | 40 | [className]: className, 41 | 42 | }); 43 | if (icon){ 44 | return ( 45 | 46 | 47 | {children} 48 | 49 | ); 50 | } 51 | return ( 52 | {children} 53 | ); 54 | 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | import Button from './Button'; 2 | 3 | export default { 4 | Button 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/button/styles.less: -------------------------------------------------------------------------------- 1 | .f-btn{ 2 | position: relative; 3 | display: inline-block; 4 | margin-left: auto; 5 | margin-right: auto; 6 | padding-left: 14px; 7 | padding-right: 14px; 8 | box-sizing: border-box; 9 | font-size: 18px; 10 | text-align: center; 11 | text-decoration: none; 12 | color: #fff; 13 | line-height: 2.33333333; 14 | border-radius: 5px; 15 | -webkit-tap-highlight-color: rgba(0,0,0,0); 16 | overflow: hidden; 17 | border-width: 0; 18 | outline: 0; 19 | -webkit-appearance: none; 20 | -webkit-user-select:none; 21 | } 22 | 23 | .f-btn:after { 24 | content: " "; 25 | width: 200%; 26 | height: 200%; 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | border: 1px solid rgba(0,0,0,.2); 31 | -webkit-transform: scale(.5); 32 | transform: scale(.5); 33 | -webkit-transform-origin: 0 0; 34 | transform-origin: 0 0; 35 | box-sizing: border-box; 36 | border-radius: 10px; 37 | } 38 | .f-btn-block { 39 | display:block; 40 | width: 100%; 41 | } 42 | .f-btn:focus,.f-btn:focus { 43 | outline:0 44 | } 45 | .f-btn-default { 46 | background-color: #f7f7f7; 47 | color:#454545; 48 | } 49 | .f-btn-default:not(.f-btn-disabled):active { 50 | color:#a1a1a1; 51 | background-color:#dedede 52 | } 53 | .f-btn-default.f-btn-disabled { 54 | color:#c9c9c9 55 | } 56 | .f-btn-plain-default { 57 | border:1px solid #BFBFBF; 58 | color:#454545; 59 | } 60 | .f-btn-plain-default:not(.f-btn-disabled):active { 61 | border-color:#9F9F9F; 62 | color:#9F9F9F; 63 | } 64 | 65 | 66 | .f-btn-info { 67 | background-color: #04be02; 68 | } 69 | .f-btn-info:not(.f-btn-disabled):active { 70 | color:hsla(0,0%,100%,.4); 71 | background-color:#039702 72 | } 73 | .f-btn-plain-info { 74 | border:1px solid #04be02; 75 | color:#04be02; 76 | } 77 | .f-btn-plain-info:not(.f-btn-disabled):active { 78 | border-color:#039702; 79 | color:#039702; 80 | } 81 | 82 | 83 | .f-btn-primary { 84 | background-color: #1385e5; 85 | } 86 | .f-btn-primary:not(.f-btn-disabled):active { 87 | color:hsla(0,0%,100%,.4); 88 | background-color:#0D65AF 89 | } 90 | .f-btn-plain-primary { 91 | border:1px solid #1385e5; 92 | color:#1385e5; 93 | } 94 | .f-btn-plain-primary:not(.f-btn-disabled):active { 95 | border-color:#0D65AF; 96 | color:#0D65AF; 97 | } 98 | 99 | 100 | .f-btn-danger { 101 | background-color: #ef4f4f; 102 | } 103 | .f-btn-danger:not(.f-btn-disabled):active { 104 | color:hsla(0,0%,100%,.4); 105 | background-color:#B93E3E 106 | } 107 | .f-btn-plain-danger { 108 | border:1px solid #ef4f4f; 109 | color:#ef4f4f; 110 | } 111 | .f-btn-plain-danger:not(.f-btn-disabled):active { 112 | border-color:#B93E3E; 113 | color:#B93E3E; 114 | } 115 | 116 | 117 | .f-btn-warn { 118 | background-color: #fa9f47; 119 | } 120 | .f-btn-warn:not(.f-btn-disabled):active { 121 | color:hsla(0,0%,100%,.4); 122 | background-color:#BD7B3A 123 | } 124 | .f-btn-plain-warn { 125 | border:1px solid #fa9f47; 126 | color:#fa9f47; 127 | } 128 | .f-btn-plain-warn:not(.f-btn-disabled):active { 129 | border-color:#BD7B3A; 130 | color:#BD7B3A; 131 | } 132 | 133 | 134 | .f-btn-plain-default,.f-btn-plain-info,.f-btn-plain-primary,.f-btn-plain-danger,.f-btn-plain-warn { 135 | background-color: transparent; 136 | } 137 | .f-btn-plain-default:after,.f-btn-plain-info:after,.f-btn-plain-primary:after,.f-btn-plain-danger:after,.f-btn-plain-warn:after { 138 | border-width:0px; 139 | } 140 | .f-btn-disabled { 141 | color:hsla(0,0%,100%,.6) 142 | } 143 | .f-btn-small { 144 | line-height:1.9; 145 | font-size:14px; 146 | padding:0 .75em; 147 | } -------------------------------------------------------------------------------- /src/components/carousel/Carousel.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import SlickCarousel from 'react-slick'; 4 | 5 | export default class Carousel extends React.Component { 6 | static propTypes = { 7 | settings : React.PropTypes.string, 8 | } 9 | 10 | static defaultProps = { 11 | className: null, 12 | effect: 'scroll', // 切换模式 scroll/fade 13 | dots: true, // 控制面板 14 | arrows: false, // 箭头 15 | vertical: false, // 垂直 16 | autoplay: false, // 自动切换 17 | infinite: true, // 是否循环 18 | speed: 500, // 动画速度 19 | easing: null, // 动画效果 20 | beforeChange: null, // 切换前回调 21 | afterChange: null, // 切换后回调 22 | fade: false, // 淡入淡出 23 | } 24 | render () { 25 | let props = this.props; 26 | return ( 27 |
28 | 29 |
30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/carousel/index.js: -------------------------------------------------------------------------------- 1 | import Carousel from './Carousel'; 2 | 3 | export default { 4 | Carousel 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/dialog/Dialog.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import Mask from '../mask/Mask'; 4 | 5 | export default class Dialog extends React.Component { 6 | static propTypes = { 7 | show: React.PropTypes.bool, 8 | title: React.PropTypes.string, 9 | onOk: React.PropTypes.func, 10 | footer: React.PropTypes.array, 11 | }; 12 | 13 | static defaultProps = { 14 | show: false, 15 | title: '', 16 | footer:[{text:'完成'}], 17 | onOk:function (){}, 18 | }; 19 | 20 | _renderButtons () { 21 | const {footer ,onOk} = this.props; 22 | if (footer.length == 1){ 23 | let {text ,color ,onClick:onOk2} = footer[0]; 24 | if (!onOk2) { 25 | onOk2 = onOk; 26 | } 27 | return {text} 34 | } 35 | return footer.map((action, i) => { 36 | const {onClick ,color ,text} = action; 37 | return ( 38 | {text} 45 | ); 46 | }); 47 | } 48 | 49 | render () { 50 | const {show ,title ,children ,className, ...others} = this.props; 51 | const cls = classNames({ 52 | 'f-dialog' : true, 53 | [className]: className, 54 | }); 55 | return ( 56 |
57 | 58 |
59 |
60 | {title} 61 |
62 |
63 | {children} 64 |
65 |
66 | {this._renderButtons()} 67 |
68 |
69 |
70 | ); 71 | 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | import Dialog from './Dialog'; 2 | 3 | export default { 4 | Dialog 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/dialog/styles.less: -------------------------------------------------------------------------------- 1 | .f-dialog{ 2 | position: fixed; 3 | z-index: 1001; 4 | width: 85%; 5 | top: 48%; 6 | left: 50%; 7 | 8 | background-color: #fafafc; 9 | text-align: center; 10 | border-radius: 3px; 11 | 12 | // -webkit-animation-fill-mode: both; 13 | // animation-fill-mode: both; 14 | // -webkit-animation-duration: .10s; 15 | // animation-duration: .10s; 16 | 17 | // animation-name: bounceIn; 18 | // -webkit-animation-name: bounceIn; 19 | 20 | -webkit-transform: translate(-50%,-50%); 21 | transform: translate(-50%,-50%); 22 | 23 | .f-dialog-hd{ 24 | padding: 1.2em 0 .5em; 25 | } 26 | 27 | .f-dialog-bd{ 28 | padding: 0 20px; 29 | font-size: 15px; 30 | color: #888; 31 | } 32 | 33 | .f-dialog-ft{ 34 | position: relative; 35 | line-height: 42px; 36 | margin-top: 20px; 37 | font-size: 17px; 38 | display: -webkit-box; 39 | display: -webkit-flex; 40 | display: -ms-flexbox; 41 | display: flex; 42 | 43 | a{ 44 | display: block; 45 | -webkit-box-flex: 1; 46 | -webkit-flex: 1; 47 | -ms-flex: 1; 48 | flex: 1; 49 | color: #3cc51f; 50 | text-decoration: none; 51 | -webkit-tap-highlight-color: rgba(0,0,0,0); 52 | position: relative; 53 | } 54 | 55 | a:active{background-color:#eee} 56 | 57 | a::after { 58 | width: 1px; 59 | height: 100%; 60 | border-left: 1px solid #d5d5d6; 61 | -webkit-transform: scaleX(.5); 62 | transform: scaleX(.5); 63 | } 64 | } 65 | 66 | .f-dialog-ft::after{ 67 | width: 100%; 68 | height: 1px; 69 | border-top: 1px solid #d5d5d6; 70 | -webkit-transform: scaleY(.5); 71 | transform: scaleY(.5); 72 | } 73 | 74 | } 75 | .f-dialog-ft::after,.f-dialog-btn::after{ 76 | content: " "; 77 | position: absolute; 78 | left: 0; 79 | top: 0; 80 | color: #d5d5d6; 81 | -webkit-transform-origin: 0 0; 82 | transform-origin: 0 0; 83 | } -------------------------------------------------------------------------------- /src/components/grid/Col.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class Col extends React.Component { 5 | render () { 6 | const {children ,className ,flex ,wdp, ...others} = this.props; 7 | const cls = classNames({ 8 | ['f-col'] : true, 9 | ['flex-' + flex] : flex, 10 | [className]: className, 11 | }); 12 | return ( 13 |
{children}
14 | ); 15 | } 16 | } -------------------------------------------------------------------------------- /src/components/grid/ColBody.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class ColBody extends React.Component { 5 | render () { 6 | const {children ,className, ...others} = this.props; 7 | const cls = classNames({ 8 | ['f-col-body'] : true, 9 | [className]: className, 10 | }); 11 | return ( 12 |
{children}
13 | ); 14 | } 15 | } -------------------------------------------------------------------------------- /src/components/grid/ColFoot.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class ColFoot extends React.Component { 5 | render () { 6 | const {children ,className ,width, ...others} = this.props; 7 | const cls = classNames({ 8 | [className]: className, 9 | }); 10 | return ( 11 |
14 | {children} 15 |
16 | ); 17 | } 18 | } -------------------------------------------------------------------------------- /src/components/grid/ColHead.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class ColHead extends React.Component { 5 | render () { 6 | const {children ,className ,width , ...others} = this.props; 7 | const cls = classNames({ 8 | [className]: className, 9 | }); 10 | return ( 11 |
14 | {children} 15 |
16 | ); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/grid/Row.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class Row extends React.Component { 5 | render () { 6 | const {children ,className, ...others} = this.props; 7 | const cls = classNames({ 8 | ['f-row'] : true, 9 | [className]: className, 10 | }); 11 | return ( 12 |
{children}
13 | ); 14 | } 15 | } -------------------------------------------------------------------------------- /src/components/grid/index.js: -------------------------------------------------------------------------------- 1 | import Row from './Row'; 2 | import Col from './Col'; 3 | import ColHead from './ColHead'; 4 | import ColBody from './ColBody'; 5 | import ColFoot from './ColFoot'; 6 | 7 | export default { 8 | Row, 9 | Col, 10 | ColHead, 11 | ColBody, 12 | ColFoot 13 | }; -------------------------------------------------------------------------------- /src/components/grid/styles.less: -------------------------------------------------------------------------------- 1 | .f-row{ 2 | display: -webkit-flex; 3 | display: -webkit-box; 4 | display: -moz-flex; 5 | display: -ms-flexbox; 6 | display: flex; 7 | width: 100%; 8 | 9 | .f-col-body{ 10 | -webkit-box-flex: 1; 11 | -webkit-flex: 1; 12 | -ms-flex: 1; 13 | flex: 1; 14 | 15 | } 16 | 17 | .f-col{ 18 | -webkit-box-flex: 1; 19 | -ms-flex: 1; 20 | flex: 1; 21 | overflow: hidden; 22 | } 23 | 24 | .flex-1{ 25 | -webkit-box-flex: 1; 26 | -webkit-flex: 1; 27 | flex: 1; 28 | } 29 | .flex-2{ 30 | -webkit-box-flex: 2; 31 | -webkit-flex: 2; 32 | flex: 2; 33 | } 34 | .flex-3{ 35 | -webkit-box-flex: 3; 36 | -webkit-flex: 3; 37 | flex: 3; 38 | } 39 | .flex-4{ 40 | -webkit-box-flex: 4; 41 | -webkit-flex: 4; 42 | flex: 4; 43 | } 44 | .flex-5{ 45 | -webkit-box-flex: 5; 46 | -webkit-flex: 5; 47 | flex: 5; 48 | } 49 | } -------------------------------------------------------------------------------- /src/components/icon/icon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class Icon extends React.Component { 5 | render () { 6 | const {value, ...others} = this.props; 7 | return ( 8 | 9 | ); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/components/icon/index.js: -------------------------------------------------------------------------------- 1 | import Icon from './Icon'; 2 | 3 | export default { 4 | Icon 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/icon/styles.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/react-design/react-ui/12b08d7e6da0c3906c84dbf5b58bdf0b3f33e326/src/components/icon/styles.less -------------------------------------------------------------------------------- /src/components/mask/Mask.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class Mask extends React.Component { 5 | static propTypes = { 6 | transparent: React.PropTypes.bool, 7 | show: React.PropTypes.bool, 8 | conceal: React.PropTypes.func 9 | }; 10 | 11 | static defaultProps = { 12 | transparent: false, 13 | show: false, 14 | conceal: null 15 | }; 16 | 17 | hidden = () => { 18 | const {conceal} = this.props; 19 | if(conceal){ 20 | conceal() 21 | } 22 | } 23 | 24 | render () { 25 | const {transparent ,show, ...others} = this.props; 26 | const className = classNames({ 27 | 'f-mask': show, 28 | 'f-mask-bkg': show && !transparent 29 | }); 30 | 31 | return ( 32 |
37 |
38 | ); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/components/mask/index.js: -------------------------------------------------------------------------------- 1 | import Mask from './Mask'; 2 | 3 | export default { 4 | Mask 5 | }; -------------------------------------------------------------------------------- /src/components/mask/styles.less: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes bounceInNone { /* 默认 */ 2 | 0% {opacity: 0; } 3 | 100% {opacity: 1; } 4 | } 5 | .f-mask{ 6 | position: fixed; 7 | z-index: 1000; 8 | width: 100%; 9 | height: 100%; 10 | top: 0; 11 | left: 0; 12 | 13 | -webkit-animation-fill-mode: both; 14 | animation-fill-mode: both; 15 | -webkit-animation-duration: .2s; 16 | animation-duration: .2s; 17 | animation-name: bounceInNone; 18 | -webkit-animation-name: bounceInNone; 19 | } 20 | 21 | .f-mask-bkg{ 22 | background: rgba(0,0,0,.6); 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/components/message/index.js: -------------------------------------------------------------------------------- 1 | import Notification from 'rc-notification'; 2 | import * as React from 'react'; 3 | 4 | const defaultDuration = 1.5; 5 | let key = 1; 6 | 7 | const notification = Notification.newInstance({ 8 | prefixCls : 'f-message', 9 | transitionName: 'move-up', 10 | style : {top:'20px' ,left:'50%'} 11 | }); 12 | 13 | const notificationBlock = Notification.newInstance({ 14 | prefixCls : 'f-message-block', 15 | transitionName: 'move-up', 16 | style : {top:'150px' ,left:'50%'} 17 | }); 18 | 19 | function notice (mes , duration = defaultDuration ,showType = 'tips' ,type ,icon){ 20 | let param = { 21 | key, 22 | content:
23 | 24 | {mes} 25 |
, 26 | duration:duration 27 | } 28 | if (showType == 'block'){ 29 | notificationBlock.notice(param); 30 | } else { 31 | notification.notice(param); 32 | } 33 | 34 | 35 | return (function () { 36 | let target = key++; 37 | return function () { 38 | if (showType == 'block'){ 39 | notificationBlock.removeNotice(target); 40 | } else { 41 | notification.removeNotice(target); 42 | } 43 | }; 44 | }()); 45 | } 46 | export default { 47 | Message : { 48 | // 普通提醒 49 | info (mes ,{duration ,type} = {}){ 50 | return notice(mes ,duration ,type ,'info' ,'fi-info-circled') 51 | }, 52 | // 成功提醒 53 | success (mes ,{duration ,type} = {}){ 54 | return notice(mes ,duration ,type ,'success' ,'fi-ok-circled') 55 | }, 56 | // 错误提示 57 | error (mes ,{duration ,type} = {}){ 58 | return notice(mes ,duration ,type ,'error' ,'fi-cancel-circled') 59 | }, 60 | // 警告提示 61 | warn (mes ,{duration ,type} = {}){ 62 | return notice(mes ,duration ,type ,'warn' ,'fi-help-circled') 63 | }, 64 | // 加载中 65 | loading (mes ,{duration = 0 ,type} = {}){ 66 | return notice(mes ,duration ,type ,'loading' ,'fi-spin2 animate-spin') 67 | } 68 | 69 | } 70 | }; 71 | -------------------------------------------------------------------------------- /src/components/message/styles.less: -------------------------------------------------------------------------------- 1 | .f-message,.f-message-block{ 2 | position: fixed; 3 | z-index: 1000; 4 | 5 | .f-message-notice,.f-message-block-notice { 6 | background: rgba(40,40,40,.75); 7 | border-radius: 5px; 8 | color: #fff; 9 | 10 | -webkit-animation-fill-mode: both; 11 | animation-fill-mode: both; 12 | -webkit-animation-duration: .10s; 13 | animation-duration: .10s; 14 | 15 | animation-name: bounceIn; 16 | -webkit-animation-name: bounceIn; 17 | 18 | padding: 7px 20px 7px 10px; 19 | border: 1px solid #999; 20 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 21 | border: 0px solid rgba(0, 0, 0, 0); 22 | display: block; 23 | width: auto; 24 | line-height: 1.5; 25 | vertical-align: middle; 26 | position: relative; 27 | margin: 10px 0; 28 | 29 | .f-message-notice-content{ 30 | font-size:14px; 31 | >div>span{ 32 | margin-right:5px; 33 | } 34 | .fi-ok-circled{ 35 | color:#04be02; 36 | } 37 | .fi-cancel-circled{ 38 | color:#ef4f4f; 39 | } 40 | } 41 | } 42 | } 43 | .f-message-block{ 44 | .f-message-block-notice{ 45 | padding: 7px 15px; 46 | .f-message-block-notice-content{ 47 | .fi-ok-circled{ 48 | color:#04be02; 49 | } 50 | .fi-cancel-circled{ 51 | color:#ef4f4f; 52 | } 53 | 54 | >div{ 55 | text-align: center; 56 | [class^='fi']{ 57 | margin: 7px 0 0; 58 | display: block; 59 | font-size: 45px; 60 | } 61 | span:last-child{ 62 | display:block; 63 | margin: 0 0 10px; 64 | } 65 | } 66 | } 67 | } 68 | } -------------------------------------------------------------------------------- /src/components/searchBar/index.js: -------------------------------------------------------------------------------- 1 | import SearchBar from './SearchBar'; 2 | 3 | export default { 4 | SearchBar 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/searchBar/searchBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class SearchBar extends React.Component { 5 | static propTypes = { 6 | defaultValue: React.PropTypes.string, 7 | placeholder: React.PropTypes.string, 8 | button: React.PropTypes.string, 9 | onSearch: React.PropTypes.func, 10 | onChange: React.PropTypes.func, 11 | } 12 | 13 | static defaultProps = { 14 | defaultValue: null, 15 | placeholder: '搜索', 16 | onSearch: null, 17 | onChange: null, 18 | button: 'true' 19 | } 20 | 21 | state = { 22 | searchValue: this.props.defaultValue || '' 23 | } 24 | 25 | searchAction = (e) => { 26 | const {onSearch} = this.props; 27 | if (e.keyCode == 13){ 28 | if (onSearch){ 29 | onSearch(this.state.searchValue) 30 | } 31 | } 32 | } 33 | 34 | changeValue = (e) => { 35 | const {onChange} = this.props; 36 | this.setState({searchValue: e.target.value}) 37 | if (onChange){ 38 | onChange(e.target.value) 39 | } 40 | } 41 | 42 | cancel = () => { 43 | this.setState({searchValue: ''}) 44 | } 45 | 46 | onSearchBtn = (e) => { 47 | const {onSearch} = this.props; 48 | e.preventDefault() 49 | if (onSearch){ 50 | onSearch(this.state.searchValue) 51 | } 52 | } 53 | 54 | render () { 55 | const {defaultValue, placeholder, value , onSearch, ...others} = this.props; 56 | return ( 57 |
58 | 69 | { 70 | this.props.button !== 'false' ? 71 | : 74 | null 75 | } 76 | 77 |
78 | ); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/components/searchBar/styles.less: -------------------------------------------------------------------------------- 1 | .f-searchBar{ 2 | width: 100%; 3 | height: 44px; 4 | padding: 8px 10px; 5 | background: #efefef; 6 | display: -webkit-box; 7 | display: -webkit-flex; 8 | display: -moz-flex; 9 | display: -ms-flexbox; 10 | display: flex; 11 | } 12 | .f-searchBar-inner{ 13 | display: block; 14 | height: 28px; 15 | position: relative; 16 | -webkit-box-flex: 1; 17 | -webkit-flex: 1; 18 | -ms-flex: 1; 19 | flex: 1; 20 | &:before{ 21 | content: '\E808'; 22 | font-size: 22px; 23 | left: 5px; 24 | top: 0; 25 | } 26 | } 27 | .f-searchBar-inner:before,.f-searchBar-inner-cancel{ 28 | font-family: fontello; 29 | position: absolute; 30 | color: #cccccc; 31 | width: 20px; 32 | height: 28px; 33 | line-height: 28px; 34 | text-align: center; 35 | } 36 | .f-searchBar-inner-cancel{ 37 | right: 0; 38 | top: 0; 39 | width: 28px; 40 | height: 28px; 41 | text-align: center; 42 | font-size: 12px; 43 | } 44 | .f-searchBar-input{ 45 | width: 100%; 46 | height: 28px; 47 | line-height: 18px; 48 | color: #666666; 49 | font-size: 14px; 50 | border: 0; 51 | border-radius: 3px; 52 | padding: 5px 30px 5px 30px; 53 | -webkit-appearance: none; 54 | } 55 | .f-searchBar-btn{ 56 | width: 50px; 57 | height: 100%; 58 | line-height: 28px; 59 | padding-left: 5px; 60 | font-size: 14px; 61 | color: #666666; 62 | } 63 | input::-webkit-search-decoration,input::-webkit-search-cancel-button { 64 | display: none; 65 | } 66 | // input:focus::-webkit-input-placeholder { 67 | // color: #ffffff; 68 | // } 69 | -------------------------------------------------------------------------------- /src/components/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './Switch'; 2 | 3 | export default { 4 | Switch 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/switch/styles.less: -------------------------------------------------------------------------------- 1 | .f-switch{ 2 | height: 30px; 3 | margin-left: 5px; 4 | box-sizing: border-box; 5 | display: inline-block; 6 | -moz-user-select: none; 7 | -webkit-user-select: none; 8 | user-select: none; 9 | position: relative; 10 | } 11 | .f-switch-input{ 12 | height: 30px; 13 | position: absolute; 14 | z-index: 2; 15 | border: 0; 16 | background: 0 0; 17 | -webkit-appearance: none; 18 | outline: 0; 19 | cursor: pointer; 20 | } 21 | 22 | .f-switch-input:before { 23 | content: ''; 24 | height: 28px; 25 | border: 1px solid #dfdfdf; 26 | background-color: #fdfdfd; 27 | border-radius: 20px; 28 | display: inline-block; 29 | position: relative; 30 | vertical-align: middle; 31 | border-color: #dfdfdf; 32 | -webkit-background-clip: content-box; 33 | background-clip: content-box; 34 | cursor:pointer; 35 | } 36 | 37 | .f-switch-input:after { 38 | content: ''; 39 | width: 28px; 40 | height: 28px; 41 | position: absolute; 42 | top: 1px; 43 | left: 0; 44 | border-radius: 20px; 45 | background-color: #FFFFFF; 46 | -webkit-transition: left .2s; 47 | transition: left .2s; 48 | } 49 | .f-switch-input-active:after{ 50 | -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4); 51 | box-shadow: 0 1px 3px rgba(0,0,0,.4); 52 | } 53 | .f-switch-input-active:checked:before { 54 | border-color: #5EB95E; 55 | background-color: #5EB95E; 56 | -webkit-box-shadow: #5EB95E 0 0 0 16px inset; 57 | box-shadow: #5EB95E 0 0 0 16px inset; 58 | } 59 | 60 | .f-switch-small{ 61 | width: 50px; 62 | .f-switch-input-disable:before{ 63 | width: 48px; 64 | } 65 | .f-switch-input-active{ 66 | &:before{ 67 | width: 48px; 68 | transition: border .4s,box-shadow .4s; 69 | -webkit-transition: border .4s,-webkit-box-shadow .4s; 70 | } 71 | } 72 | .f-switch-input-active:checked{ 73 | &:after{ 74 | left: 21px; 75 | } 76 | } 77 | } 78 | .f-display-none{ 79 | display: none; 80 | } 81 | .f-switch-normal{ 82 | width: 70px; 83 | .f-switch-inner{ 84 | display: inline-block; 85 | position: absolute; 86 | top: 0; 87 | width: 30px; 88 | height: 30px; 89 | line-height: 30px; 90 | z-index: 2; 91 | font-size: 15px; 92 | text-align: center; 93 | cursor: pointer; 94 | } 95 | .f-switch-inner-on{ 96 | left: 8px; 97 | color: #FFFFFF; 98 | } 99 | .f-switch-inner-off{ 100 | left: 30px; 101 | color: #ABABAB; 102 | } 103 | .f-switch-input-disable{ 104 | &:before{ 105 | width: 68px; 106 | } 107 | } 108 | .f-switch-input-active{ 109 | &:before{ 110 | width: 68px; 111 | transition:border .5s,box-shadow .5s; 112 | -webkit-transition:border .5s,-webkit-box-shadow .5s; 113 | } 114 | } 115 | .f-switch-input-active:checked{ 116 | &:after{ 117 | left: 41px; 118 | } 119 | } 120 | } 121 | .f-switch-input-disable{ 122 | &:before{ 123 | background: #f1f1f1; 124 | border: 1px solid #f1f1f1; 125 | } 126 | &:after{ 127 | background: #DFDFDF; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /src/components/switch/switch.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | 4 | export default class Switch extends React.Component { 5 | static propTypes = { 6 | disabled: React.PropTypes.string, // 是否可以改变 7 | size: React.PropTypes.string, // 大小 normal small 8 | defaultChecked: React.PropTypes.string, // 指定当前是否选中 9 | // checkedChildren: React.PropTypes.string, // 选中时的内容 10 | // uncheckedChildren: React.PropTypes.string, // 非选中时的内容 11 | onChange: React.PropTypes.func, // 指定当前是否选中 12 | } 13 | 14 | static defaultProps = { 15 | disabled: 'false', 16 | size: 'normal', 17 | defaultChecked: 'true', 18 | checkedChildren: '', 19 | uncheckedChildren: '', 20 | onChange: null 21 | } 22 | 23 | state = { 24 | switched: this.props.defaultChecked != 'false', 25 | } 26 | 27 | handleClick = (e) => { 28 | if (this.props.disabled == 'false'){ 29 | this.state.switched ? this.setState({switched:false}) : this.setState({switched:true}) 30 | this.props.onChange ? this.props.onChange({checked: !this.state.switched}) : null 31 | } 32 | } 33 | 34 | render () { 35 | const { size, disabled, className, children, ...others} = this.props; 36 | let container = classNames({ 37 | 'f-switch': true, 38 | 'f-switch-small': this.props.size == 'small', 39 | 'f-switch-normal': this.props.size == 'normal', 40 | }) 41 | let content = classNames({ 42 | 'f-switch-input': true, 43 | 'f-switch-input-active': this.props.disabled == 'false', 44 | 'f-switch-input-disable': this.props.disabled !== 'false', 45 | }) 46 | let inner = classNames({ 47 | 'f-switch-inner': true, 48 | 'f-switch-inner-on': this.state.switched, 49 | 'f-switch-inner-off': !this.state.switched, 50 | 'f-display-none': true, 51 | 'f-switch-inner-disable': this.props.disabled !== 'false', 52 | }) 53 | return ( 54 |
55 | { 56 | this.props.disabled == 'false' ? 57 | this.handleClick(e)} 62 | /> : 63 | 68 | } 69 | this.handleClick(e)}> 70 | { 71 | this.state.switched ? this.props.checkedChildren : 72 | this.props.uncheckedChildren 73 | } 74 | 75 |
76 | ); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/components/toast/Toast.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import Mask from '../mask/Mask'; 4 | 5 | export default class Toast extends React.Component { 6 | static propTypes = { 7 | show: React.PropTypes.bool, 8 | icon: React.PropTypes.string, 9 | iconColor: React.PropTypes.string, 10 | type: React.PropTypes.string, 11 | }; 12 | 13 | static defaultProps = { 14 | show: false, 15 | icon: '', 16 | iconColor:'#ffffff', 17 | type:'', 18 | }; 19 | 20 | render () { 21 | const {show ,icon ,type ,iconColor, children ,className, ...others} = this.props; 22 | const cls = classNames({ 23 | ['f-toast'] : true, 24 | ['ft-bt'] : type || (!type && !icon), 25 | ['toast-top'] : type === 'top', 26 | ['toast-bottom'] : type === 'bottom' 27 | }); 28 | return ( 29 |
30 | 31 |
32 | {icon ? : ''} 33 |

{children}

34 |
35 |
36 | ); 37 | 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/toast/index.js: -------------------------------------------------------------------------------- 1 | import Toast from './Toast'; 2 | 3 | export default { 4 | Toast 5 | }; 6 | -------------------------------------------------------------------------------- /src/components/toast/styles.less: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes bounceIn { /* 默认 */ 2 | 0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5) } 3 | 100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1) } 4 | } 5 | .f-toast{ 6 | position: fixed; 7 | z-index: 3; 8 | width: 7.6em; 9 | min-height: 7.6em; 10 | top: 150px; 11 | left: 50%; 12 | margin-left: -3.8em; 13 | background: rgba(40,40,40,.75); 14 | text-align: center; 15 | border-radius: 5px; 16 | color: #fff; 17 | 18 | -webkit-animation-fill-mode: both; 19 | animation-fill-mode: both; 20 | -webkit-animation-duration: .10s; 21 | animation-duration: .10s; 22 | 23 | animation-name: bounceIn; 24 | -webkit-animation-name: bounceIn; 25 | 26 | .f-toast-icon{ 27 | margin: 15px 0 0; 28 | display: block; 29 | color: #fff; 30 | font-size: 45px; 31 | } 32 | 33 | .f-toast-content{ 34 | margin: 0 0 15px; 35 | } 36 | } 37 | 38 | .f-toast.ft-bt{ 39 | min-height: 2.5em; 40 | width: 10em; 41 | margin-left: -5em; 42 | justify-content: center; 43 | align-items: center; 44 | display: flex; 45 | 46 | .f-toast-content{ 47 | margin: 0; 48 | } 49 | 50 | .f-toast-icon{ 51 | margin: -2px 5px 0; 52 | font-size: 15px; 53 | } 54 | } 55 | .toast-top{ 56 | top: 40px; 57 | } 58 | 59 | .toast-bottom{ 60 | top: inherit; 61 | bottom: 40px; 62 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import {Button} from './components/button' 2 | import {Icon} from './components/icon'; 3 | import {Toast} from './components/toast'; 4 | import {Message} from './components/message'; 5 | import {Switch} from './components/switch'; 6 | import {SearchBar} from './components/searchBar'; 7 | import {Carousel} from './components/carousel'; 8 | import {Dialog} from './components/dialog'; 9 | import {ActionSheet} from './components/actionSheet'; 10 | import {Row,Col,ColHead,ColBody,ColFoot} from './components/grid'; 11 | 12 | 13 | 14 | 15 | import './components/base.less'; 16 | import './components/button/styles.less'; 17 | import './components/icon/styles.less'; 18 | import './components/searchBar/styles.less'; 19 | import './components/switch/styles.less'; 20 | import './components/carousel/styles.less'; 21 | import './components/grid/styles.less'; 22 | import './components/toast/styles.less'; 23 | import './components/message/styles.less'; 24 | import './components/mask/styles.less'; 25 | import './components/dialog/styles.less'; 26 | import './components/actionSheet/styles.less'; 27 | 28 | export default { 29 | Button, 30 | SearchBar, 31 | Switch, 32 | Icon, 33 | Carousel, 34 | Row, 35 | Col, 36 | ColHead, 37 | ColBody, 38 | ColFoot, 39 | Toast, 40 | Dialog, 41 | ActionSheet, 42 | Message 43 | }; 44 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | var autoprefixer = require('autoprefixer'); 4 | var HtmlWebpackPlugin = require('html-webpack-plugin'); 5 | var ExtractTextPlugin = require("extract-text-webpack-plugin"); 6 | var OpenBrowserPlugin = require('open-browser-webpack-plugin'); 7 | 8 | module.exports = { 9 | context: path.join(__dirname, 'example'), 10 | entry: { 11 | js: './app.js', 12 | vendor: ['react', 'classnames', 'react-router', 'react-dom', 'react-addons-css-transition-group'] 13 | }, 14 | output: { 15 | path: path.resolve(__dirname, 'dist'), 16 | filename: './bundle.js' 17 | }, 18 | module: { 19 | loaders:[ 20 | { 21 | test: /\.js[x]?$/, 22 | exclude: /node_modules/, 23 | loader: 'babel' 24 | }, { 25 | test: /\.less$/, 26 | loader: ExtractTextPlugin.extract('style-loader', 'css!postcss!less') 27 | }, { 28 | test: /\.css$/, 29 | loader: ExtractTextPlugin.extract('style', 'css', 'postcss') 30 | }, { 31 | test: /\.(png|jpg)$/, 32 | loader: 'url?limit=25000' 33 | } 34 | ] 35 | }, 36 | postcss: [autoprefixer], 37 | plugins: [ 38 | new webpack.DefinePlugin({ 39 | DEBUG: process.env.NODE_ENV !== 'production' 40 | }), 41 | new ExtractTextPlugin('f-ui.css',{allChunks: true}), 42 | new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'), 43 | new webpack.optimize.UglifyJsPlugin({ 44 | // extractCSS : true, 45 | sourceMap: false, 46 | mangle: false, 47 | // minimize:true 48 | }), 49 | 50 | new HtmlWebpackPlugin({ 51 | template: path.join(__dirname, 'example/index.html') 52 | }) 53 | // new OpenBrowserPlugin({ url: 'http://localhost:8080' }) 54 | ] 55 | }; --------------------------------------------------------------------------------