mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +08:00
628968f460
* refactor: Using items * docs: replace with items * docs: deprecated demo * test: Update snapshot * docs: simple basic demo * test: coverage
2.6 KiB
2.6 KiB
order | debug | title | ||||
---|---|---|---|---|---|---|
99 | true |
|
zh-CN
默认选中第一项。
en-US
Default activate first tab.
import { Select, Tabs } from 'antd';
import React, { useState } from 'react';
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;