Fruit - ui

介绍

logo
Based on the react to maintain a set of ionic style of reusable component library

示例

二维码扫一扫
在线demo

特性

版本

兼容性

链接

快速入门

使用npm安装

1
npm install fruit-ui

使用组件

1
2
import {Button} from 'fruit-ui';
ReactDOM.render(<Button />, node);

浏览器引入

在index.html中,引入f-ui.css

1
import 'dist/fruit-ui.css';

Button 按钮

默认(default)

源码

1
2
3
4
5
<Button >default</Button>
<Button type="info">info</Button>
<Button type="primary">primary</Button>
<Button type="warn">warn</Button>
<Button type="danger">danger</Button>

空(plain)

源码

1
2
<Button plain>default</Button>
<Button plain type="primary">primary</Button>]

图标

源码

1
2
3
4
<Button icon="fi-left-open f-left">default</Button>
<Button icon="fi-right-open f-right">default</Button>
<Button icon="fi-spin animate-spin" type="primary">primary</Button>
<Button icon="fi-spin2 animate-spin" type="primary">primary</Button>

源码

1
2
<Button block>default</Button>
<Button block type="primary">primary</Button>

禁用

源码

1
2
<Button disabled="true">default</Button>
<Button disabled type="primary">primary</Button>

小尺寸

源码

1
2
<Button small>default</Button>
<Button small type="primary">primary</Button>

Icon 图标

如何使用

1
<Icon value="fi-ok"></Icon>

加入 animate-spin 可以使图标旋转

1
<Icon value="fi-spin animate-spin"></Icon>

例子:

Switch 开关

默认

源码

1
<Switch/>

小尺寸(small)

源码

1
<Switch size="small"/>

设置文字/图标

源码

1
2
3
<Switch size="normal" checkedChildren="on" uncheckedChildren="off"/>
<Switch size="normal" defaultChecked="false" checkedChildren="开" uncheckedChildren="关"/>
<Switch size="normal" defaultChecked="false" checkedChildren=<Icon className="aa"/> uncheckedChildren=<Icon className="aa"/>/>

禁用(disabled)

源码

1
2
<Switch size="normal" defaultChecked="false" disabled="true" checkedChildren="开" uncheckedChildren="关"/>
<Switch size="small" defaultChecked="false" disabled="true"/>

onChange事件

源码

1
<Switch size="normal" onChange={(e)=>this.handleChange(e)} defaultChecked="false"/>

Grid(格珊)

flex-等分

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Row>
<Col>1/1</Col>
</Row>
<Row>
<Col>1/2</Col>
<Col>1/2</Col>
</Row>
<Row>
<Col>1/3</Col>
<Col>1/3</Col>
<Col>1/3</Col>
</Row>
<Row>
<Col>1/4</Col>
<Col>1/4</Col>
<Col>1/4</Col>
<Col>1/4</Col>
</Row>

flex-自定义

源码

1
2
3
4
5
6
7
8
9
<Row>
<Col flex="1">1/3</Col>
<Col flex="2">2/3</Col>
</Row>
<Row>
<Col flex="1">1/4</Col>
<Col flex="1">1/4</Col>
<Col flex="2">2/4</Col>
</Row>

左固定-右适应

源码

1
2
3
4
5
6
7
8
<Row>
<ColHead width="100">width:100px</ColHead>
<ColBody>auto</ColBody>
</Row>
<Row>
<ColHead width="200">width:200px</ColHead>
<ColBody>auto</ColBody>
</Row>

左适应-右固定

源码

1
2
3
4
5
6
7
8
<Row>
<ColBody>auto</ColBody>
<ColFoot width="100">width:100px</ColFoot>
</Row>
<Row>
<ColBody>auto</ColBody>
<ColFoot width="200">width:200px</ColFoot>
</Row>

三列布局

源码

1
2
3
4
5
<Row>
<ColHead width="100">width:100px</ColHead>
<ColBody>auto</ColBody>
<ColFoot width="100">width:100px</ColFoot>
</Row>

SearchBar(搜索框)

默认

源码

1
<SearchBar></SearchBar>

变化时的回调

源码

1
<SearchBar placeholder="输入搜索内容" onChange={(value) => this.changeDemo(value)} button="false"></SearchBar>

搜索时的回调

源码

1
<SearchBar placeholder="输入搜索内容" onSearch={(value) => this.searchDemo(value)}></SearchBar>

Toast 提示

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
React.createClass({
getInitialState: function() {
return {show_top: false, show_normal:false};
},
topShowHandle: function() {
var self = this;
self.setState({show_top: true});
setTimeout(function(){self.setState({show_top: false}); },2000);
},
normalShowHandle: function() {
var self = this;
self.setState({show_normal: true});
setTimeout(function(){self.setState({show_normal: false}); },2000);
},
render: function() {
return (
<div>
<Button onClick={this.normalShowHandle}>正常提示</Button>
<Button type="primary" onClick={this.topShowHandle}>顶部提示</Button>
<Toast show={this.state.show_normal} icon="fi-spin animate-spin"> 正在加载中... </Toast>
<Toast show={this.state.show_top} icon="fi-attention" iconColor="#04be02" type="top" > 顶部成功 </Toast>
</div>
);
}
});

Message 提示

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var loadingHide , loadingBlockHide ;
React.createClass({
loadingHandle: function(show) {
if(show){
if(!loadingBlockHide){loadingBlockHide = Message.loading('正在加载中...'); }
}else{
loadingBlockHide();
loadingBlockHide = null;
}
},
loadingBlockHandle: function(show) {
if(show){
if(!loadingBlockHide){loadingBlockHide = Message.loading('正在加载中...',{type:'block'}); }
}else{
loadingBlockHide();
loadingBlockHide = null;
}
},
showHandle: function(arg) {
Message[arg.type](arg.text,{type : arg.showType});
},
render: function() {
return (
<div>
<h3>方框提示</h3>
<Button onClick={this.showHandle.bind(this,{type:'info' ,showType:'block' ,text:'这是一条提示'})}>正常提示</Button>
<Button type="primary" onClick={this.loadingBlockHandle.bind(this,true)}>loading-show</Button>
<Button type="info" onClick={this.loadingBlockHandle.bind(this,false)}>loading-hide</Button>
<h3>文字提示</h3>
<Button type="primary" onClick={this.showHandle.bind(this,{type:'info',text:'这是一条提示'})}>正常提示</Button>
<Button type="warn" onClick={this.loadingHandle.bind(this, true)}>loading-show</Button>
<Button type="danger" onClick={this.loadingHandle.bind(this, false)}>loading-hide</Button>
</div>
);
}
});

Dialog(对话框)

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
React.createClass({
getInitialState: function() {return {show1 : false, show2 : false, show3 : false} }
dialogClickHandle : function(number){
var sets = {};
sets['show'+number] = !this.state['show'+number];
this.setState(sets);
},
dialogOnCancel : funciton(number){
var sets = {};
sets['show'+number] = false;
this.setState(sets);
},
render: function() {
var states = this.state;
var eventOnCancel = this.onCancel;
return (<div>
<Button type="info" onClick={this.dialogClickHandle.bind(this ,1)}>1个按钮</Button>
<Button type="warn" onClick={this.dialogClickHandle.bind(this ,2)}>3个按钮+自定义按钮颜色</Button>
<Button type="primary" onClick={this.dialogClickHandle.bind(this ,3)}>含标题</Button>
<Dialog show={states.show1} onOk={eventOnCancel.bind(this,1)} > 确认要提交吗 </Dialog>
<Dialog show={states.show2} footer={[{text:'取消',onClick:eventOnCancel.bind(this,2) ,color:'black'}, {text:'保存草稿',onClick:eventOnCancel.bind(this,2)}, {text:'提交',onClick:eventOnCancel.bind(this,2)}]} >
<p>我的测试</p>
</Dialog>
<Dialog show={states.show3} title="请求确认" onOk={eventOnCancel.bind(this,3)} > 确认要提交吗? </Dialog>
</div>);
} });

ActionSheet

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
React.createClass({
getInitialState: function() {
return {show1 : false}
},
handleClick : function(){
this.state.show1 ? this.setState({show1:false}) : this.setState({show1:true})
},
onCancel : function(number){
this.setState({show1:false})
},
clickA : function(){
alert('您点击了第一个按钮');
},
render: function() {
return (<div>
<Button type="primary" onClick={this.handleClick} block>actionSheet</Button>
<ActionSheet show={this.state.show1} onRequestClose={this.onCancel}>
<ul>
<li onClick={this.clickA}>alert</li>
<li> <a href="tel:4008123123">订餐电话</a> </li>
<li onClick={this.onCancel}>取消</li>
</ul>
</ActionSheet>
</div> );
}
});