https://github.com/luokuning/react.beautify-component
Some beautify components work with React.
https://github.com/luokuning/react.beautify-component
Last synced: about 1 year ago
JSON representation
Some beautify components work with React.
- Host: GitHub
- URL: https://github.com/luokuning/react.beautify-component
- Owner: luokuning
- Created: 2015-08-21T01:55:50.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-07-18T13:40:18.000Z (almost 10 years ago)
- Last Synced: 2025-04-09T21:49:18.074Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://luokuning.github.io/react.beautify-component/
- Size: 855 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#react.beautify-component
[更详细的 Demo 和说明](http://luokuning.github.io/react.beautify-component/).
一套简单的基于React构建的UI，为页面需要遵循设计稿而不得不费力更改现有 ui 框架的开发者设计，已加入 checkbox, radio, droplist, pagination, tooltip, 计划加入 sortable (拖拽排序)。源码简单易懂，体积小巧，可以直接用，也可以自己看过之后根据需求随意改进功能。
Some beautified component with react, you can understand just a UI component, nothing more.
If you want to use those component in your project, I suggest you check out the source code (it's very short).
Now it has only two components, I'll create some new component such as Pagination and Sortable in some days.
1. react.input
* input[type=checkbox]
* input[type=radio]
**Usage:**
You can just see `Input` as `` tag, but more convenient, since we can attach some attributes to `Input`.
```html
hello test
```
It'll render like that:
Just like use normal `` and `` tag. Every attribute you attach to `Input` except **style**,**onMousedown** will copy to the internal `` tag in `Input`.
You can add `style` attribute to `Input`, and then it'll extend the internal wapper style.
If you want `input[type=radio]`, just replace `type` attribute to `radio`: ``, and other usage are the same;
2. react.droplist
The above gif animation seems to be not very smooth, might cause by the tool I use to recorde gif, in fact the animation is very smooth.
**Usage:**
```html
```
It'll render like that:
Obviously, `listDatas` is a array that will be used to create droplist. `className` and `style` will copy to `DropList` wrapper, so you can change the style as you want. You would like to add `.droplist li:hover{/*...*/}` (in that case classname is `droplist`) to any css file in your project if you want hover affect.
You can either include the component in a `` tag (after you've include React and underscore/lodash) or through RequireJS/AMD and CommonJS:
```javascript
define(['react', 'underscore', 'react.input'],function(React, _, Input){
var MyComponent = React.createClass({
render:function(){
return (
<div>
// ...
<Input />
// ...
</div>
);
}
});
});
```
or
```javascript
var Input = require('react.input');
```
3. react.pagination
**Config:**
参数 |类型|说明
-----|----|-----
total|number|数据总数
current|number|当前页
countPerPage|number|每页数据条数
onChange|function|当页数变化时的事件句柄，会传入将要跳转的页数，一般绑定从服务器取数据的函数
**Usage:**
```html
<Pagination total = {200} current = {4} countPerPage = {20} onChange = {onChangeFunc} />
```