mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
fix: Add closeIcon for Tabs.Tabpane (#23992)
* fix: Add closeIcon for Tabs.TabPane * fix: update snapshots Co-authored-by: 倪佳敏 <ni.jiamin@datatom.com>
This commit is contained in:
njmqd
GitHub
parent
67a482f4e5
commit
4884e91c49
@ -1251,15 +1251,15 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
|
||||
<div>
|
||||
Tab 1
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tabs-close-x"
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-tabs-close-x"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
@ -1267,7 +1267,10 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
|
||||
/>
|
||||
<path
|
||||
d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
@ -1285,15 +1288,15 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
|
||||
<div>
|
||||
Tab 2
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tabs-close-x"
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-tabs-close-x"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
@ -1301,7 +1304,10 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
|
||||
/>
|
||||
<path
|
||||
d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
@ -15,6 +15,7 @@ Only card type Tabs support adding & closable. +Use `closable={false}` to disabl
|
||||
|
||||
```jsx
|
||||
import { Tabs } from 'antd';
|
||||
import { CloseCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
@ -81,7 +82,12 @@ class Demo extends React.Component {
|
||||
onEdit={this.onEdit}
|
||||
>
|
||||
{this.state.panes.map(pane => (
|
||||
<TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
|
||||
<TabPane
|
||||
tab={pane.title}
|
||||
key={pane.key}
|
||||
closable={pane.closable}
|
||||
closeIcon={<CloseCircleOutlined />}
|
||||
>
|
||||
{pane.content}
|
||||
</TabPane>
|
||||
))}
|
||||
|
||||
@ -48,5 +48,6 @@ More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
|
||||
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
|
||||
| key | TabPane's key | string | - |
|
||||
| tab | Show text in TabPane's head | string\|ReactNode | - |
|
||||
| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - |
|
||||
|
||||
More option at [rc-tabs option](https://github.com/react-component/tabs#tabpane)
|
||||
|
||||
@ -51,6 +51,7 @@ export interface TabPaneProps {
|
||||
disabled?: boolean;
|
||||
forceRender?: boolean;
|
||||
key?: string;
|
||||
closeIcon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export default class Tabs extends React.Component<TabsProps, any> {
|
||||
@ -130,13 +131,20 @@ export default class Tabs extends React.Component<TabsProps, any> {
|
||||
React.Children.forEach(children as React.ReactNode, (child, index) => {
|
||||
if (!React.isValidElement(child)) return child;
|
||||
let { closable } = child.props;
|
||||
const { closeIcon: customCloseIcon } = child.props;
|
||||
closable = typeof closable === 'undefined' ? true : closable;
|
||||
const closeIcon = closable ? (
|
||||
const customIcon = customCloseIcon ? (
|
||||
React.cloneElement(customCloseIcon, {
|
||||
className: `${prefixCls}-close-x`,
|
||||
onClick: e => this.removeTab(child.key as string, e),
|
||||
})
|
||||
) : (
|
||||
<CloseOutlined
|
||||
className={`${prefixCls}-close-x`}
|
||||
onClick={e => this.removeTab(child.key as string, e)}
|
||||
/>
|
||||
) : null;
|
||||
);
|
||||
const closeIcon = closable ? customIcon : null;
|
||||
childrenWithClose.push(
|
||||
React.cloneElement(child, {
|
||||
tab: (
|
||||
|
||||
@ -44,8 +44,9 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||
|
||||
### Tabs.TabPane
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ------------------------- | ----------------- | ------ |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
|
||||
| key | 对应 activeKey | string | 无 |
|
||||
| tab | 选项卡头显示文字 | string\|ReactNode | 无 |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ----------------------------------------------- | ----------------- | ------ |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
|
||||
| key | 对应 activeKey | string | 无 |
|
||||
| tab | 选项卡头显示文字 | string\|ReactNode | 无 |
|
||||
| closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | 无 |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user