How to replace the default add button with custom version of the Tabs component in the antd library?

user_12451984 0
Viewed 107

I designed editable tabs by using antd library, version 3.23.6. But I don't know how can replace the default add button with my custom add button.

enter image description here

My code

<Tabs 
onChange={tabOnChange}
activeKey={activeKey}
type="editable-card"
onEdit={tabOnEdit}
>
    {panes.map(pane => (
      <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
        {pane.content}
      </TabPane>
    ))}
</Tabs>
antd reactjs
1 Answers

enter image description here

  add = () => {
    const { panes } = this.state;
    const activeKey = `newTab${this.newTabIndex++}`;
    panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
    this.setState({ panes, activeKey });
  };

  const operations = <Button>Extra Action</Button>;
  
  <Tabs activeKey={this.state.activeKey} tabBarExtraContent={operations}>
    {this.state.panes.map((pane) => (
      <TabPane tab={pane.title} key={pane.key}>
        {pane.content}
      </TabPane>
    ))}
  </Tabs>

https://ant.design/components/tabs-cn/#components-tabs-demo-custom-add-trigger https://ant.design/components/tabs-cn/#components-tabs-demo-extra

user_2904230
Related