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 就可以使選項卡改變?yōu)闃撕烇L格。

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

動態(tài)增減標簽頁

增減標簽頁按鈕只能在選項卡樣式的標簽頁下使用

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

動態(tài)添加標簽頁

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