Add tabBarStyle, close #4966 (#4970)

This commit is contained in:
偏右 2017-02-21 14:43:48 +08:00 committed by GitHub
parent 18e554ff46
commit 0120008cbd
3 changed files with 5 additions and 0 deletions

View File

@ -25,6 +25,7 @@ Ant Design has 3 types Tabs for different situation.
| onChange | Callback when tab is switched | Function | - |
| onTabClick | Callback when tab is clicked | Function | - |
| tabBarExtraContent | Extra element in tab bar | React.ReactNode | - |
| tabBarStyle | tar bar style object | object | - |
| type | Basic style of tabs. Options: line, card & editable-card | string | line |
| size | Tab bar size. Options: default, small. Only works while `type="line"`. | string | default |
| tabPosition | Position of tabs. Options: top, right, bottom & left | string | top |

View File

@ -19,6 +19,7 @@ export interface TabsProps {
onChange?: (activeKey: string) => void;
onTabClick?: Function;
tabBarExtraContent?: React.ReactNode | null;
tabBarStyle?: React.CSSProperties;
type?: TabsType;
tabPosition?: TabsPosition;
onEdit?: (targetKey: string, action: any) => void;
@ -91,6 +92,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
tabPosition,
children,
tabBarExtraContent,
tabBarStyle,
hideAdd,
onTabClick,
animated,
@ -150,6 +152,7 @@ export default class Tabs extends React.Component<TabsProps, any> {
<ScrollableInkTabBar
extraContent={tabBarExtraContent}
onTabClick={onTabClick}
style={tabBarStyle}
/>
);

View File

@ -28,6 +28,7 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。
| onChange | 切换面板的回调 | Function | 无 |
| onTabClick | tab 被点击的回调 | Function | 无 |
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 |
| tabBarStyle | tar bar 的样式对象 | object | - |
| type | 页签的基本样式,可选 `line`、`card` `editable-card` 类型 | string | 'line' |
| size | 大小,提供 `default``small` 两种大小,仅当 `type="line"` 时生效。 | string | 'default' |
| tabPosition | 页签位置,可选值有 `top` `right` `bottom` `left` | string | 'top' |