W-Design组件库：Tabs组件，轻松构建页面选项卡

前端

2024-02-09 06:20:47

组件效果

W-Design组件库的Tabs组件支持line和card两种样式，默认样式为line。您可以通过设置Tabs组件的type属性来切换样式。

line样式的Tabs组件会在选项卡面板之间显示一条细线，当前激活的选项卡面板将在细线上方显示。
card样式的Tabs组件会在选项卡面板之间显示一个卡片，当前激活的选项卡面板将以突出的方式显示。

组件配置

Tabs组件可以通过props属性进行配置。常用的配置项包括：

type：选项卡面板的样式，可选值为line和card，默认为line。
activeIndex：当前激活的选项卡面板的索引，默认为0。
onChange：点击选项卡时触发的回调函数，返回当前选项卡的索引。

组件结构

Tabs组件的结构如下：

<Tabs>
  <Tabs.Panel label="选项卡1">选项卡1内容</Tabs.Panel>
  <Tabs.Panel label="选项卡2">选项卡2内容</Tabs.Panel>
  <Tabs.Panel label="选项卡3">选项卡3内容</Tabs.Panel>
</Tabs>

其中，Tabs组件是主组件，Tabs.Panel组件是子组件。每个Tabs.Panel组件代表一个选项卡面板。

组件回调

Tabs组件提供了onChange回调函数，当点击选项卡时会触发该回调函数。onChange回调函数返回当前选项卡的索引。您可以使用该回调函数来更新页面内容或执行其他操作。

<Tabs onChange={(index) => {
  // 更新页面内容或执行其他操作
}}>
  <Tabs.Panel label="选项卡1">选项卡1内容</Tabs.Panel>
  <Tabs.Panel label="选项卡2">选项卡2内容</Tabs.Panel>
  <Tabs.Panel label="选项卡3">选项卡3内容</Tabs.Panel>
</Tabs>