add tabs and serachbar withou doc and test

example/app.js

@@ -22,6 +22,10 @@ import Article from './pages/article/index';
 import ActionSheet from './pages/actionsheet/index';
 import Icons from './pages/icons/index';
 import Panel from './pages/panel/index';
+import Tab from './pages/tab/index';
+import NavBar from './pages/tab/navbar';
+import TabBar from './pages/tab/tabbar';
+import SearchBar from './pages/searchbar/index';
 
 class App extends React.Component {
         render() {
@@ -31,6 +35,7 @@ class App extends React.Component {
                         transitionName="page"
                         transitionEnterTimeout={500}
                         transitionLeaveTimeout={500}
+                        style={{height: '100%'}}
                     >
                             {React.cloneElement(this.props.children, {
                                     key: this.props.location.pathname
@@ -54,6 +59,10 @@ ReactDOM.render((
                     <Route path="actionsheet" component={ActionSheet}/>
                     <Route path="icons" component={Icons}/>
                     <Route path="panel" component={Panel}/>
+                    <Route path="tab" component={Tab}/>
+                    <Route path="navbar" component={NavBar}/>
+                    <Route path="tabbar" component={TabBar}/>
+                    <Route path="searchbar" component={SearchBar}/>
             </Route>
     </Router>
 ), document.getElementById('container'));

example/pages/home/index.js

@@ -65,6 +65,14 @@ export default class Home extends React.Component {
             icon: <img src={IconPanel}/>,
             label: 'Panel',
             href: '#panel'
+        }, {
+            icon: <img src={IconTab}/>,
+            label: 'Tab',
+            href: '#tab'
+        }, {
+            icon: <img src={IconSearchBar}/>,
+            label: 'SearchBar',
+            href: '#searchbar'
         }]
     };
 

example/pages/searchbar/index.js

@@ -0,0 +1,90 @@
+/**
+ * Created by n7best.
+ */
+
+"use strict";
+
+import React from 'react';
+import Page from '../../component/page';
+import SampleData from './nameDB';
+
+import {
+    //main component
+    SearchBar,
+    //for display data
+    Panel,
+    PanelHeader,
+    PanelBody,
+    PanelFooter,
+    MediaBox,
+    MediaBoxHeader,
+    MediaBoxBody,
+    MediaBoxTitle,
+    MediaBoxDescription,
+    MediaBoxInfo,
+    MediaBoxInfoMeta,
+    Cells,
+    Cell,
+    CellHeader,
+    CellBody,
+    CellFooter
+} from '../../../src/index';
+
+const appMsgIcon = <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" />
+
+export default class SearchBarDemo extends React.Component {
+    state={
+        searchText: '',
+        results: []
+    };
+
+    handleChange(text){
+        let keywords = [text];
+        let results = SampleData.filter(/./.test.bind(new RegExp(keywords.join("|"),'i')));
+
+        if(results.length > 3) results = results.slice(0,3);
+        this.setState({
+            results,
+            searchText:text,
+        });
+    }
+
+    render() {
+        return (
+            <Page className="searchbar" title="SearchBar">
+                <SearchBar
+                    onChange={this.handleChange.bind(this)}
+                />
+
+                {/*display result*/}
+                <Panel access style={{display: this.state.searchText ? null: 'none', marginTop: 0}}>
+                    <PanelHeader>
+                        英文名字
+                    </PanelHeader>
+                    <PanelBody>
+                        {
+                            this.state.results.length > 0 ?
+                                this.state.results.map((item,i)=>{
+                                    return (
+                                        <MediaBox key={i} type="appmsg" href="javascript:void(0);">
+                                            <MediaBoxHeader>{appMsgIcon}</MediaBoxHeader>
+                                            <MediaBoxBody>
+                                                <MediaBoxTitle>{item}</MediaBoxTitle>
+                                                <MediaBoxDescription>
+                                                    由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
+                                                </MediaBoxDescription>
+                                            </MediaBoxBody>
+                                        </MediaBox>
+                                    )
+                                })
+                                : <MediaBox>找不到了！</MediaBox>
+                        }
+                    </PanelBody>
+                    <PanelFooter href="javascript:void(0);">
+                        查看更多
+                    </PanelFooter>
+                </Panel>
+            </Page>
+        );
+    }
+};