mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 13:37:52 +08:00
100 lines
2.4 KiB
TypeScript
100 lines
2.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Select, Tabs } from 'antd';
|
|
|
|
const { Option } = Select;
|
|
|
|
const positionList = ['left', 'right', 'top', 'bottom'];
|
|
|
|
const App: React.FC = () => {
|
|
const [parentPos, setParentPos] = useState(undefined);
|
|
const [childPos, setChildPos] = useState(undefined);
|
|
const [parentType, setParentType] = useState(undefined);
|
|
const [childType, setChildType] = useState(undefined);
|
|
|
|
return (
|
|
<div>
|
|
<Select
|
|
style={{ width: 200 }}
|
|
onChange={(val) => {
|
|
setParentPos(val);
|
|
}}
|
|
>
|
|
{positionList.map((pos) => (
|
|
<Option key={pos} value={pos}>
|
|
Parent - {pos}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
|
|
<Select
|
|
style={{ width: 200 }}
|
|
onChange={(val) => {
|
|
setChildPos(val);
|
|
}}
|
|
>
|
|
{positionList.map((pos) => (
|
|
<Option key={pos} value={pos}>
|
|
Child - {pos}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
|
|
<Select
|
|
style={{ width: 200 }}
|
|
onChange={(val) => {
|
|
setParentType(val);
|
|
}}
|
|
>
|
|
<Option value="line">Parent - line</Option>
|
|
<Option value="card">Parent - card</Option>
|
|
<Option value="editable-card">Parent - card edit</Option>
|
|
</Select>
|
|
|
|
<Select
|
|
style={{ width: 200 }}
|
|
onChange={(val) => {
|
|
setChildType(val);
|
|
}}
|
|
>
|
|
<Option value="line">Child - line</Option>
|
|
<Option value="card">Child - card</Option>
|
|
<Option value="editable-card">Parent - card edit</Option>
|
|
</Select>
|
|
<Tabs
|
|
defaultActiveKey="1"
|
|
tabPosition={parentPos}
|
|
type={parentType}
|
|
items={[
|
|
{
|
|
label: 'Tab 1',
|
|
key: '1',
|
|
children: (
|
|
<Tabs
|
|
defaultActiveKey="1"
|
|
tabPosition={childPos}
|
|
type={childType}
|
|
style={{ height: 300 }}
|
|
items={new Array(20).fill(null).map((_, index) => {
|
|
const key = String(index);
|
|
return {
|
|
label: `Tab ${key}`,
|
|
key,
|
|
children: `TTTT ${key}`,
|
|
};
|
|
})}
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
label: 'Tab 2',
|
|
key: '2',
|
|
children: 'Content of Tab Pane 2',
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|