Element-React Tabs 标签页

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

基础用法

基础的、简洁的标签页。

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>
  )
}

选项卡样式

选项卡样式的标签页。

只需要设置 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>
  )
}

可关闭

可以关闭标签页。

通过设置 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>
  )
}

卡片化

卡片化的标签页。

将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 类型来实现自定义标签页的内容。

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>
  )
}

动态增减标签页

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

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>
  )
}

动态添加标签页

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