feat: Tabs render tab bar (#11856)
* feat: Customized bar of tab. * docs: 更新关于renderTabBar的中文文档 * docs: 更新关于renderTabBar的英文文档 * update: 优化代码 * docs: 更新关于renderTabBar的文档 * update: 完善renderTabBar代码 * update: 完成自定义tabBar * docs: 去掉旧的DefaultTabBar参数说明 * update: 修复CI测试 * fix: 去掉>选择器，解决自定义tabBar后样式错误 * update: 优化代码质量 * update: 添加测试 * fix: lint * fix: 避免tab嵌套bug * update: 把DefaultTabBar放在renderTabBar里pull/11934/head
mushan0x0
7 years ago
committed by
偏右
parent
d47a5be712
commit
62d68b049f
@ -0,0 +1,51 @@
|
||||
import * as React from 'react';
|
||||
import Icon from '../icon';
|
||||
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
|
||||
import { TabsProps } from './index';
|
||||
|
||||
export default class TabBar extends React.Component<TabsProps> {
|
||||
render() {
|
||||
const {
|
||||
tabBarStyle,
|
||||
animated = true,
|
||||
renderTabBar,
|
||||
tabBarExtraContent,
|
||||
tabPosition,
|
||||
prefixCls,
|
||||
} = this.props;
|
||||
const inkBarAnimated = typeof animated === 'object' ? animated.inkBar : animated;
|
||||
|
||||
const isVertical = tabPosition === 'left' || tabPosition === 'right';
|
||||
const prevIconType = isVertical ? 'up' : 'left';
|
||||
const nextIconType = isVertical ? 'down' : 'right';
|
||||
const prevIcon = (
|
||||
<span className={`${prefixCls}-tab-prev-icon`}>
|
||||
<Icon type={prevIconType} className={`${prefixCls}-tab-prev-icon-target`} />
|
||||
</span>
|
||||
);
|
||||
const nextIcon = (
|
||||
<span className={`${prefixCls}-tab-next-icon`}>
|
||||
<Icon type={nextIconType} className={`${prefixCls}-tab-next-icon-target`} />
|
||||
</span>
|
||||
);
|
||||
|
||||
const renderProps = {
|
||||
...this.props,
|
||||
inkBarAnimated,
|
||||
extraContent: tabBarExtraContent,
|
||||
style: tabBarStyle,
|
||||
prevIcon,
|
||||
nextIcon,
|
||||
};
|
||||
|
||||
let RenderTabBar: React.ReactElement<any>;
|
||||
|
||||
if (renderTabBar) {
|
||||
RenderTabBar = renderTabBar(renderProps, ScrollableInkTabBar);
|
||||
} else {
|
||||
RenderTabBar = <ScrollableInkTabBar {...renderProps} />;
|
||||
}
|
||||
|
||||
return React.cloneElement(RenderTabBar);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,39 @@
|
||||
---
|
||||
order: 12
|
||||
title:
|
||||
zh-CN: 自定义页签头
|
||||
en-US: Customized bar of tab
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用 react-sticky 组件实现吸顶效果。
|
||||
|
||||
## en-US
|
||||
|
||||
use react-sticky.
|
||||
|
||||
````jsx
|
||||
import { Tabs } from 'antd';
|
||||
import { StickyContainer, Sticky } from 'react-sticky';
|
||||
|
||||
const TabPane = Tabs.TabPane;
|
||||
|
||||
const renderTabBar = (props, DefaultTabBar) => (
|
||||
<Sticky bottomOffset={80}>
|
||||
{({ style }) => (
|
||||
<DefaultTabBar {...props} style={{ ...style, zIndex: 1, background: '#fff' }} />
|
||||
)}
|
||||
</Sticky>
|
||||
);
|
||||
|
||||
ReactDOM.render(
|
||||
<StickyContainer>
|
||||
<Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
|
||||
<TabPane tab="Tab 1" key="1" style={{ height: 200 }}>Content of Tab Pane 1</TabPane>
|
||||
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
|
||||
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
|
||||
</Tabs>
|
||||
</StickyContainer>,
|
||||
mountNode);
|
||||
````
|
||||
Loading…
Reference in New Issue