diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap index 7d16b1f2d4..3c284c77e9 100644 --- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap +++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap @@ -362,10 +362,9 @@ exports[`test renders ./components/tabs/demo/editable-card.md correctly 1`] = ` aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab" role="tab"> -
+
Tab 1 -
- {this.state.panes.map(pane => {pane.content})} + {this.state.panes.map(pane => {pane.content})} ); }, diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index dc0dcde7fc..941b138865 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -32,6 +32,7 @@ export interface TabPaneProps { /** 选项卡头显示文字 */ tab?: React.ReactNode | string; style?: React.CSSProperties; + closable?: boolean; } export default class Tabs extends React.Component { @@ -98,11 +99,19 @@ export default class Tabs extends React.Component { if (type === 'editable-card') { childrenWithClose = []; React.Children.forEach(children as React.ReactNode, (child: React.ReactElement, index) => { + let closable = child.props.closable; + closable = typeof closable === 'undefined' ? true : closable; + const closeIcon = closable ? ( + this.removeTab(child.key, e)} + /> + ) : null; childrenWithClose.push(cloneElement(child, { tab: ( -
+
{child.props.tab} - this.removeTab(child.key, e)} /> + {closeIcon}
), key: child.key || index, diff --git a/components/tabs/style/card-style.less b/components/tabs/style/card-style.less index 7b5be58f58..b3437d76ca 100644 --- a/components/tabs/style/card-style.less +++ b/components/tabs/style/card-style.less @@ -52,9 +52,12 @@ } } - &&-editable-card > &-bar &-tab:not(&-tab-active):hover { - padding-left: 8px; - padding-right: 8px; + &&-editable-card > &-bar &-tab > div { + transition: all 0.3s @ease-in-out; + } + &&-editable-card > &-bar &-tab:not(&-tab-active):hover > div:not(&-tab-unclosable) { + margin-left: -8px; + margin-right: -8px; } &&-card > &-bar &-tab-active .@{iconfont-css-prefix}-close,