react tabs初体验

  |   0 评论   |   180 浏览

背景

使用react来做一个导航。

官方给出了效果示例

初体验

安装

$ npm install --save rc-tabs

结果

+ rc-tabs@9.5.2
added 12 packages from 13 contributors in 12.014s

编写js代码

import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';

var callback = function(key){

}

React.render(
  (
    <Tabs
      defaultActiveKey="2"
      onChange={callback}
      renderTabBar={()=><ScrollableInkTabBar />}
      renderTabContent={()=><TabContent />}
    >
      <TabPane tab='tab 1' key="1">first</TabPane>
      <TabPane tab='tab 2' key="2">second</TabPane>
      <TabPane tab='tab 3' key="3">third</TabPane>
    </Tabs>
  ),
  document.getElementById('t2'));

准备css文件

activeKey 中的 index.css 文件拿起来,放在 src目录下 tab.css中,

再在js文件中引入css文件,如下:

import  Styles  from  './tab.css';

参考

评论

发表评论

validate