react tabs 初体验

本贴最后更新于 1156 天前,其中的信息可能已经时移俗易

背景

使用 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){

}

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

参考

  • Web
    113 引用 • 429 回帖 • 8 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...