react tabs 初体验

  |   0 评论   |   0 浏览

背景

使用 react 来做一个导航。

官方给出了效果示例。

初体验

安装

$ npm install --save rc-tabs

结果

+ [email protected]
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){

}

ReactDOM.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';

参考