Tabs 标签页

Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合。

基础用法

基础的、简洁的标签页。

:::demo Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

render() {
  return (
    <Tabs activeName="2" onTabClick={ (tab) => console.log(tab.props.name) }>
      <Tabs.Pane label="用户管理" name="1">用户管理</Tabs.Pane>
      <Tabs.Pane label="配置管理" name="2">配置管理</Tabs.Pane>
      <Tabs.Pane label="角色管理" name="3">角色管理</Tabs.Pane>
      <Tabs.Pane label="定时补偿任务" name="4">定时补偿任务</Tabs.Pane>
    </Tabs>
  )
}

:::

选项卡样式

选项卡样式的标签页。

:::demo 只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

render() {
  return (
    <Tabs type="card" value="1">
      <Tabs.Pane label="用户管理" name="1">用户管理</Tabs.Pane>
      <Tabs.Pane label="配置管理" name="2">配置管理</Tabs.Pane>
      <Tabs.Pane label="角色管理" name="3">角色管理</Tabs.Pane>
      <Tabs.Pane label="定时补偿任务" name="4">定时补偿任务</Tabs.Pane>
    </Tabs>
  )
}

:::

可关闭

可以关闭标签页。

:::demo 通过设置 closable 属性来打开 Tabs 的可关闭标签效果, closable 也可以设置在 Tab Panel 中实现部分标签页的可关闭效果。

render() {
  return (
    <Tabs type="card" closable activeName="1" onTabRemove={ (tab) => console.log(tab.props.name) }>
      <Tabs.Pane label="用户管理" name="1">用户管理</Tabs.Pane>
      <Tabs.Pane label="配置管理" name="2">配置管理</Tabs.Pane>
      <Tabs.Pane label="角色管理" name="3">角色管理</Tabs.Pane>
      <Tabs.Pane label="定时补偿任务" name="4">定时补偿任务</Tabs.Pane>
    </Tabs>
  )
}

:::

卡片化

卡片化的标签页。

:::demo 将type设置为border-card。

render() {
  return (
    <Tabs type="border-card" activeName="1">
      <Tabs.Pane label="用户管理" name="1">用户管理</Tabs.Pane>
      <Tabs.Pane label="配置管理" name="2">配置管理</Tabs.Pane>
      <Tabs.Pane label="角色管理" name="3">角色管理</Tabs.Pane>
      <Tabs.Pane label="定时补偿任务" name="4">定时补偿任务</Tabs.Pane>
    </Tabs>
  )
}

:::

自定义标签页

可以通过 node 类型来实现自定义标签页的内容。

:::demo

render() {
  const label = <span><Icon name="date" /> 用户管理</span>

  return (
    <Tabs type="border-card" activeName="1">
      <Tabs.Pane label={label} name="1">用户管理</Tabs.Pane>
      <Tabs.Pane label="配置管理" name="2">配置管理</Tabs.Pane>
      <Tabs.Pane label="角色管理" name="3">角色管理</Tabs.Pane>
      <Tabs.Pane label="定时补偿任务" name="4">定时补偿任务</Tabs.Pane>
    </Tabs>
  )
}

:::

动态增减标签页

增减标签页按钮只能在选项卡样式的标签页下使用

:::demo

constructor() {
  super();
  this.state = {
    tabs: [{
      title: 'Tab 1',
      name: 'Tab 1',
      content: 'Tab 1 content',
    }, {
      title: 'Tab 2',
      name: 'Tab 2',
      content: 'Tab 2 content',
    }],
    tabIndex: 2,
  }
}

editTab(action, tab) {
  if (action === 'add') {
    const { tabs, tabIndex } = this.state;
    const index = tabIndex + 1;

    tabs.push({
      title: 'new Tab',
      name: 'Tab ' + index,
      content: 'new Tab content',
    });
    this.setState({
      tabs,
      tabIndex: index,
    });
  }

  if (action === 'remove') {
    const { tabs } = this.state;

    console.log(action, tab);
    tabs.splice(tab.key.replace(/^\.\$/, ''), 1);
    this.setState({
      tabs,
    });
  }
}

render() {
  return (
    <Tabs type="card" value="Tab 2" editable onTabEdit={(action, tab) => this.editTab(action, tab)}>
      {
        this.state.tabs.map((item, index) => {
          return <Tabs.Pane key={index} closable label={item.title} name={item.name}>{item.content}</Tabs.Pane>
        })
      }
    </Tabs>
  )
}

:::

动态添加标签页

:::demo

constructor() {
  super();
  this.state = {
    tabs: [{
      title: 'Tab 1',
      name: 'Tab 1',
      content: 'Tab 1 content',
    }, {
      title: 'Tab 2',
      name: 'Tab 2',
      content: 'Tab 2 content',
    }],
    tabIndex: 2,
  }
}

addTab() {
  const { tabs, tabIndex } = this.state;
  const index = tabIndex + 1;

  tabs.push({
    title: 'new Tab',
    name: 'Tab ' + index,
    content: 'new Tab content',
  });
  this.setState({
    tabs,
    tabIndex: index,
  });
}

removeTab(tab) {
  const { tabs, tabIndex } = this.state;

  tabs.splice(tab.key.replace(/^\.\$/, ''), 1);
  this.setState({
    tabs,
  });
}

render() {
  return (
    <div>
      <div style={{marginBottom: '20px'}}>
        <Button size="small" onClick={() => this.addTab()}>add tab</Button>
      </div>
      <Tabs type="card" value="Tab 2" onTabRemove={(tab) => this.removeTab(tab)}>
        {
          this.state.tabs.map((item, index) => {
            return <Tabs.Pane key={index} closable label={item.title} name={item.name}>{item.content}</Tabs.Pane>
          })
        }
      </Tabs>
    </div>
  )
}

:::

Tabs Attributes

Tabs Events

Tabs.Pane Attributes