ant-design/components/tabs/demo/editable-card.md

91 lines
2.1 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 9
2016-08-24 10:33:25 +08:00
title:
zh-CN: 新增和关闭页签
en-US: Add & close tab
2016-03-31 09:40:55 +08:00
---
2015-12-15 16:34:02 +08:00
2016-08-03 10:39:20 +08:00
## zh-CN
2019-05-07 14:57:32 +08:00
只有卡片样式的页签支持新增和关闭选项。使用 `closable={false}` 禁止关闭。
2015-12-15 16:34:02 +08:00
2016-08-03 10:39:20 +08:00
## en-US
2019-05-07 14:57:32 +08:00
Only card type Tabs support adding & closable. +Use `closable={false}` to disable close.
2016-08-03 10:39:20 +08:00
```tsx
import React, { useRef, useState } from 'react';
2015-12-15 16:34:02 +08:00
import { Tabs } from 'antd';
2018-06-27 15:55:04 +08:00
const { TabPane } = Tabs;
2015-12-15 16:34:02 +08:00
const initialPanes = [
{ title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
{ title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
{
title: 'Tab 3',
content: 'Content of Tab 3',
key: '3',
closable: false,
},
];
const App: React.FC = () => {
const [activeKey, setActiveKey] = useState(initialPanes[0].key);
const [panes, setPanes] = useState(initialPanes);
const newTabIndex = useRef(0);
const onChange = (newActiveKey: string) => {
setActiveKey(newActiveKey);
};
const add = () => {
const newActiveKey = `newTab${newTabIndex.current++}`;
const newPanes = [...panes];
newPanes.push({ title: 'New Tab', content: 'Content of new Tab', key: newActiveKey });
setPanes(newPanes);
setActiveKey(newActiveKey);
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
const remove = (targetKey: string) => {
let newActiveKey = activeKey;
let lastIndex = -1;
panes.forEach((pane, i) => {
2016-03-02 20:25:19 +08:00
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const newPanes = panes.filter(pane => pane.key !== targetKey);
if (newPanes.length && newActiveKey === targetKey) {
2019-02-04 11:29:28 +08:00
if (lastIndex >= 0) {
newActiveKey = newPanes[lastIndex].key;
2019-02-04 11:29:28 +08:00
} else {
newActiveKey = newPanes[0].key;
2019-02-04 11:29:28 +08:00
}
2015-12-15 16:34:02 +08:00
}
setPanes(newPanes);
setActiveKey(newActiveKey);
};
const onEdit = (targetKey: string, action: 'add' | 'remove') => {
if (action === 'add') {
add();
} else {
remove(targetKey);
}
2019-05-07 14:57:32 +08:00
};
2018-06-27 15:55:04 +08:00
return (
<Tabs type="editable-card" onChange={onChange} activeKey={activeKey} onEdit={onEdit}>
{panes.map(pane => (
<TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
{pane.content}
</TabPane>
))}
</Tabs>
);
};
2015-12-15 16:34:02 +08:00
export default App;
2019-05-07 14:57:32 +08:00
```