antd tabs items用法
时间: 2023-07-30 15:06:10 浏览: 65
Ant Design中的Tabs组件是一个标签页组件,可以用来实现多个页面之间的切换。下面是一个示例代码:
```jsx
import { Tabs } from 'antd';
const { TabPane } = Tabs;
function callback(key) {
console.log(key);
}
function App() {
return (
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</TabPane>
<TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</TabPane>
</Tabs>
);
}
```
上述代码中,首先从antd中导入Tabs组件和TabPane组件。然后在组件中使用Tabs组件,并在其中定义三个TabPane子组件。每个TabPane组件的tab属性指定了该标签页的标题,key属性指定了该标签页的唯一标识符。Tabs组件的defaultActiveKey属性指定了默认激活的标签页,onChange属性指定了切换标签页时的回调函数。
你也可以通过TabPane组件的disabled属性来禁用某个标签页,通过TabPane组件的closable属性来开启关闭按钮,以及通过TabPane组件的forceRender属性来强制渲染标签页内容。