@orca-fe/antd-plus
Version:
Transformer Container
67 lines (64 loc) • 1.82 kB
JavaScript
/**
* title: 基本用法
*/
import React, { useContext } from 'react';
import { TabsLayout } from "../..";
import { Button, Space } from 'antd';
import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
var index = 0;
/* 添加按钮 */
var AddButton = () => {
var tab = useContext(TabsLayout.TabsLayoutContext);
return /*#__PURE__*/_jsx(Button, {
type: "primary",
onClick: () => {
index += 1;
tab.add({
key: `tab_${index}`,
// key 为 tab 的唯一标识，如果 key 重复则不会添加
title: `Tab ${index}`,
content: /*#__PURE__*/_jsxs("div", {
children: ["Content of Tab", index]
})
});
},
children: "\u6DFB\u52A0"
});
};
/* 关闭按钮 */
var CloseButton = () => {
var tab = useContext(TabsLayout.TabsLayoutContext);
return /*#__PURE__*/_jsx(Button, {
onClick: () => {
if (tab.tabs.length > 0) {
tab.remove(tab.tabs[0].key);
}
},
children: "\u5173\u95ED\u7B2C1\u4E2A\u6807\u7B7E"
});
};
/* 切换按钮 */
var SwitchButton = () => {
var tab = useContext(TabsLayout.TabsLayoutContext);
return /*#__PURE__*/_jsx(Button, {
onClick: () => {
if (tab.tabs.length > 1) {
tab.active(tab.tabs[1].key);
}
},
children: "\u5207\u6362\u81F3\u7B2C2\u4E2A\u6807\u7B7E"
});
};
export default (() => /*#__PURE__*/_jsxs(TabsLayout, {
emptyContent: /*#__PURE__*/_jsx("div", {
children: "\u5F53\u524D\u65E0\u9875\u7B7E"
}),
children: [/*#__PURE__*/_jsxs(Space, {
children: [/*#__PURE__*/_jsx(AddButton, {}), /*#__PURE__*/_jsx(CloseButton, {}), /*#__PURE__*/_jsx(SwitchButton, {})]
}), /*#__PURE__*/_jsx("div", {
style: {
height: 12
}
}), /*#__PURE__*/_jsx(TabsLayout.View, {})]
}));