react-sm v0.0.6

###修改于淘宝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>
    )
}

####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>
    )
}

####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}/>
    )
}

####button

import { Button } from 'react-sm';
...
render(){
    return(
        <Button href="#" color="default" style={{marginTop: '20px'}}>123</Button>
    )
}

####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}/>
    )
}