diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 14d1f0eead..5ec3445105 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -33,7 +33,7 @@ Ant Design has 3 types Tabs for different situation. | tabPosition | Position of tabs. Options: top, right, bottom & left | string | top | | onEdit | Callback when tab is added or removed, which is executing when set type as editable-card | (targetKey, action): void | - | | hideAdd | Hide plus icon or not, which is effective when set type as editable-card | boolean | false | -| animated | Whether to change tabs with animation, this property only works with `tabPosition=top|bottom` | boolean | true | +| animated | Whether to change tabs with animation, this property only works with `tabPosition=top|bottom` | boolean \| {inkBar:boolean, tabPane:boolean} | true | ### Tabs.TabPane | Property | Description | Type | Default | diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index d523a2b397..c936b0ad36 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -28,7 +28,7 @@ export interface TabsProps { style?: React.CSSProperties; prefixCls?: string; className?: string; - animated?: boolean; + animated?: boolean | { inkBar: boolean; tabPane: boolean; }; } // Tabs @@ -100,6 +100,13 @@ export default class Tabs extends React.Component { onNextClick, animated, } = this.props; + + let {inkBarAnimated, tabPaneAnimated} = typeof animated === 'object' ? { + inkBarAnimated: animated.inkBar, tabPaneAnimated: animated.tabPane, + } : { + inkBarAnimated: animated, tabPaneAnimated: animated, + }; + warning( !(type.indexOf('card') >= 0 && size === 'small'), 'Tabs[type=card|editable-card] doesn\'t have small size, it\'s by designed.' @@ -153,6 +160,7 @@ export default class Tabs extends React.Component { const renderTabBar = () => ( { className={cls} tabBarPosition={tabPosition} renderTabBar={renderTabBar} - renderTabContent={() => } + renderTabContent={() => } onChange={this.handleChange} > {childrenWithClose || children} diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 8a31d8c9f4..8fd5a24b95 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -36,7 +36,7 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。 | tabPosition | 页签位置,可选值有 `top` `right` `bottom` `left` | string | 'top' | | onEdit | 新增和删除页签的回调,在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 | | hideAdd | 是否隐藏加号图标,在 `type="editable-card"` 时有效 | boolean | false | -| animated | 是否使用动画切换 Tabs,在 `tabPosition=top|bottom` 时有效 | boolean | true | +| animated | 是否使用动画切换 Tabs,在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true | ### Tabs.TabPane diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less index 8e4fa43d0e..4ae0868c9c 100644 --- a/components/tabs/style/index.less +++ b/components/tabs/style/index.less @@ -18,8 +18,10 @@ box-sizing: border-box; height: 2px; background-color: @primary-color; - transition: transform 0.3s @ease-in-out; transform-origin: 0 0; + &-animated { + transition: transform 0.3s @ease-in-out; + } } &-bar {