###修改于淘宝sui mobile
###安装
$ npm i react-sm --save####icon(http://m.sui.taobao.org/components/#icons)
<span class="icon icon-app"></span>
<span class="icon icon-browser"></span>
<span class="icon icon-card"></span>
<span class="icon icon-cart"></span>
<span class="icon icon-code"></span>
<span class="icon icon-computer"></span>
<span class="icon icon-remove"></span>
<span class="icon icon-download"></span>
<span class="icon icon-edit"></span>
<span class="icon icon-emoji"></span>
<span class="icon icon-star"></span>
<span class="icon icon-friends"></span>
<span class="icon icon-gift"></span>
<span class="icon icon-phone"></span>
<span class="icon icon-clock"></span>
<span class="icon icon-home"></span>
<span class="icon icon-menu"></span>
<span class="icon icon-message"></span>
<span class="icon icon-me"></span>
<span class="icon icon-picture"></span>
<span class="icon icon-share"></span>
<span class="icon icon-settings"></span>
<span class="icon icon-refresh"></span>
<span class="icon icon-caret"></span>
<span class="icon icon-down"></span>
<span class="icon icon-up"></span>
<span class="icon icon-right"></span>
<span class="icon icon-left"></span>
<span class="icon icon-check"></span>
<span class="icon icon-search"></span>####header 头部的导航条
import { Header } from 'react-sm';
...
render(){
return(
<Header
left={{text: '左', href:'#', icon:'icon-left', click: ()=>{}}}
right={{text: '右', href:'#', icon:'icon-refresh', click: ()=>{}}}
type="link">
<h1 className="title">Nav</h1>
</Header>
)
}
| 属性 | 类型 | 详细 |
| left | obj | -text显示的文字内容- -href链接 -icon显示的icon -click点击事件(function) |
| right | obj | 同left |
| type | string | -默认显示children -button左右显示为按钮 -icon左右显示为图标 -link左右显示为图标 + 链接 |
####nav 底部的菜单
import { Nav } from 'react-sm';
...
navData:[
{
text: '文案',
icon: 'icon-home',
href: '#',
click: function(){alert(1)},
active: true
},
{
text: '文案',
icon: 'icon-me',
badge: '2',
href: '#',
},
{
text: '文案',
icon: 'icon-star',
href: '#',
},
{
text: '文案',
icon: 'icon-cart',
href: '#',
},
{
text: '文案',
icon: 'icon-settings',
href: '#',
},
{
text: '文案',
icon: 'icon-message',
href: '#',
},
]
...
render(){
return(
<Nav data={this.state.navData}></Nav>
)
}
| 属性 | 类型 | 详细 |
| text | ||
| icon | string | 图标class |
| href | link | 点击的链接 |
| click | function | 点击事件 |
| active | bool | true或者不添加此属性 , 表示选中高亮 |
| badge | string/number | 显示新消息的红点 |
####Search 顶部搜索栏
import { Search } from 'react-sm';
...
render(){
return(
<Search click={()=>{}} placeholder="输入关键字..."/>
)
}
####Form 表单 , 返回的不是form , 可以自行用form包住
import { Form } from 'react-sm';
...
formData : [
{
label: '生日',
placeholder: '选择日期',
click: ()=>{},
change: ()=>{},
type: 'date',
value: '',
disabled: false,
name: 'birthday'
}
]
...
render(){
return(
<Form data={this.state.formData}/>
)
}
| 属性 | 类型 | 详细 |
| label | string | label的显示文字 |
| placeholder | string | 占位符的文字 |
| change | function | onChange事件 |
| click | function | 点击事件 |
| type | string | -text -email -password -select -checkbox -textarea -date |
| value | string | |
| disabled | bool | |
| name | string/number | 表单元素的name |
####button
import { Button } from 'react-sm';
...
render(){
return(
<Button href="#" color="default" style={{marginTop: '20px'}}>123</Button>
)
}
| 属性 | 类型 | 详细 |
| href | string | 如果添加href测返回a标签否则为button标签 |
| color | string | -default -success -danger -warning |
####tab tab切换
import { Tab } from 'react-sm';
...
tabData:[
{
text: '全部',
href: '#',
click: function(){alert(1)},
active: true
},
{
text: '待付款',
href: '#',
},
{
text: '待发货',
href: '#',
},
{
text: '待发货2',
href: '#',
},
]
...
render(){
return(
<Tab data={this.state.tabData}/>
)
}
| 属性 | 类型 | 详细 |
| href | string | 如果添加href测返回a标签否则为button标签 |
| text | string | 显示文字 |
| click | function | 点击事件 |
| active | bool | 是否高亮 |