antd#Tabs JavaScript Examples

render() {
    const { children, ...restProps} = this.props;
    return (
      <div className="acytabs"  ref={node => {
        this.container = node;
      }}>
        <Tabs  {...restProps} className={styles.tabContainer}>
          {children}
        </Tabs>
      </div>

    );
  }

{ TabPane } = Tabs

getNotificationBox() {
    const { children, loading, locale } = this.props;
    if (!children) {
      return null;
    }
    const panes = React.Children.map(children, child => {
      const { list, title, count, emptyText, emptyImage, showClear, showViewMore } = child.props;
      const len = list && list.length ? list.length : 0;
      const msgCount = count || count === 0 ? count : len;
      const localeTitle = locale[title] || title;
      const tabTitle = msgCount > 0 ? `${localeTitle} (${msgCount})` : localeTitle;
      return (
        <TabPane tab={tabTitle} key={title}>
          <List
            data={list}
            emptyImage={emptyImage}
            emptyText={emptyText}
            locale={locale}
            onClear={() => this.onClear(title)}
            onClick={item => this.onItemClick(item, child.props)}
            onViewMore={event => this.onViewMore(child.props, event)}
            showClear={showClear}
            showViewMore={showViewMore}
            title={title}
          />
        </TabPane>
      );
    });
    return (
      <Fragment>
        <Spin spinning={loading} delay={0}>
          <Tabs className={styles.tabs} onChange={this.onTabChange}>
            {panes}
          </Tabs>
        </Spin>
      </Fragment>
    );
  }

renderPopoverContent() {
        const {messages, platform} = this.props;
        const {current} = this.state;
        switch (platform) {
            case 'laptop':
                return (
                    <div className="preview-wrapper">
                        {this.renderLaptopPreviewContent()}
                    </div>
                );
            case 'mobile':
                return (
                    <div className="preview-wrapper">
                        {this.renderMobilePreviewContent()}
                    </div>
                );
            case 'both':
                return (
                    <div className="preview-wrapper">
                        <Tabs activeKey={current} onChange={this.handleTabChange}>
                            <TabPane tab={messages[getMessageId('xformChangePlatformPCName')]} key="laptop">
                                {this.renderLaptopPreviewContent()}
                            </TabPane>
                            <TabPane tab={messages[getMessageId('xformChangePlatformMobileName')]} key="mobile">
                                {this.renderMobilePreviewContent()}
                            </TabPane>
                        </Tabs>
                    </div>
                );
            default:
                console.error('[xform-editor]platform属性值必须是laptop,mobile,both枚举值');
                return null;
        }

    }

IndexView = props => {

  return (
    <div className={styles.content}>
      <div className={styles.editRegion}>
        <div className={styles.dragRegion}>
          <Tabs>
            <TabPane tab="所有" key="1">
              <div style={{ padding: '0 20px' }}>
                <All />
              </div>
            </TabPane>
            <TabPane tab="个人" key="2">
              <div style={{ padding: '0 20px' }}>
                <Personal />
              </div>
            </TabPane>
            <TabPane tab="申请" key="3">
              <div style={{ padding: '0 20px' }}>
                <Application />
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  );
}

Settings = () => {
  const { TabPane } = Tabs;

  return (
    <div>
      <div className="site-layout-content">
        <Tabs defaultActiveKey="1" centered={true}>
          <TabPane tab="Reset" key="2">
            <ResetPass />
          </TabPane>
        </Tabs>
      </div>
    </div>
  );
}

function LeftSider(props) {
  return (
    <div>
      <Tabs
        defaultActiveKey={'collections'}
        type={'card'}
        destroyInactiveTabPane
        renderTabBar={(props, DefaultTabBar) => {
          return (
            <DefaultTabBar
              {...props}
              style={{
                backgroundColor: 'rgb(250,250,250)',
                padding: '10px 0 0 10px',
              }}
            />
          );
        }}
      >
        <Tabs.TabPane key={'history'} tab={'History'}>
          <HistoryTab />
        </Tabs.TabPane>
        <Tabs.TabPane key={'collections'} tab={'Collections'}>
          <CollectionsTab {...props} />
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
}

render() {
    const { loginWrapActiveKey, canRegister } = this.props;
    {/** show only login when register is disabled */}
    return (
      <Tabs
        defaultActiveKey={loginWrapActiveKey}
        className="login-form"
        tabBarStyle={{ border: 'none' }}
      >
        <TabPane tab="登录" key="1">
          <LoginForm />
        </TabPane>
        <TabPane tab={"注册"} key="2">
          {canRegister ? <RegForm /> : <div style={{minHeight: 200}}>管理员已禁止注册，请联系管理员</div>}
        </TabPane>
      </Tabs>
    );
  }

Table3 = () => {
  return (
    <div>
      <Tabs className={style.tabs} defaultActiveKey="1">
        <TabPane tab="History" key="1" />
        <TabPane
          tab={
            <Dropdown overlay={dropdownMenu} placement="bottomRight">
              <a className="nav-link dropdown-toggle" role="button">
                Dropdown
              </a>
            </Dropdown>
          }
          key="2"
        />
        <TabPane tab="Actions" key="3" />
      </Tabs>
      <div className="pb-4 px-4">
        <div className={style.table}>
          <Table columns={columns} dataSource={data} pagination={false} />
        </div>
      </div>
    </div>
  )
}

render() {
        const {previewCode, onCancel} = this.props;
        return (
            <ModalContent
                surplusSpace
                footer={<Button onClick={onCancel}>关闭</Button>}
                bodyStyle={{padding: '0 0 0 16px'}}
            >
                <Tabs>
                    {previewCode.map(item => {
                        const {config: {fileTypeName}, code} = item;
                        return (
                            <TabPane tab={fileTypeName} key={fileTypeName}>
                                <SourceCode
                                    language="jsx"
                                    plugins={['line-numbers']}
                                    code={code}
                                />
                            </TabPane>
                        );
                    })}
                </Tabs>
            </ModalContent>
        );
    }

getNotificationBox() {
    const { children, loading, locale, onClear, toPage } = this.props;
    if (!children) {
      return null;
    }

    const panes = React.Children.map(children, child => {
      const title =
        child.props.list && child.props.list.length > 0
          ? `${child.props.title}(${child.props.count})`
          : child.props.title;
      return (
        <TabPane tab={title} key={child.props.name}>
          <List
            {...child.props}
            data={child.props.list}
            onClick={item => this.onItemClick(item, child.props)}
            onClear={() => onClear(child.props.name)}
            toPage={() => toPage(child.props.name)}
            title={child.props.title}
            locale={locale}
          />
        </TabPane>
      );
    });
    return (
      <Spin spinning={loading} delay={0}>
        <Tabs className={styles.tabs} onChange={this.onTabChange}>
          {panes}
        </Tabs>
      </Spin>
    );
  }

OfflineData = memo(
  ({ activeKey, loading, offlineData, offlineChartData, handleTabChange }) => (
    <Card
      loading={loading}
      className={styles.offlineCard}
      bordered={false}
      style={{ marginTop: 32 }}
    >
      <Tabs activeKey={activeKey} onChange={handleTabChange}>
        {offlineData.map(shop => (
          <TabPane tab={<CustomTab data={shop} currentTabKey={activeKey} />} key={shop.name}>
            <div style={{ padding: '0 24px' }}>
              <TimelineChart
                height={400}
                data={offlineChartData}
                titleMap={{
                  y1: formatMessage({ id: 'app.analysis.traffic' }),
                  y2: formatMessage({ id: 'app.analysis.payments' }),
                }}
              />
            </div>
          </TabPane>
        ))}
      </Tabs>
    </Card>
  )
)

routes = (
  <div>

    <TopNavBar />
    <BalancePayTable />
    <div>
        <div className="main-content">
          <div className="container">
            <div className="row justify-content-center mb-5">
              <div className="col-12 col-lg-6">
                <Card className="mb-6 rounded" 
                  title="History" 
                  bordered={false} 
                  headStyle={{borderBottom:0}}
                  bodyStyle={{paddingTop:0}}
                >
                  <Tabs onChange={callback}>
                    <TabPane tab="Sent/Received" key="1">
                      <DepositWithdrawalTable type="transfer" />
                    </TabPane>
                    <TabPane tab="Deposited" key="2">
                      <DepositWithdrawalTable type="deposit" />
                    </TabPane>
                    <TabPane tab="Wihtdrawn" key="3">
                      <DepositWithdrawalTable type="withdrawals" />
                    </TabPane>
                  </Tabs>

                </Card>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    
  </div>
)

render() {
    const { TabPane } = Tabs;
    const { list, count, pageNumber } = this.state;
    const pagination = {
      showQuickJumper: true,
      total: count,
      defaultPageSize: pageNumber,
      onChange: (page) => {
        this.query(page);
        document.documentElement.scrollTop = 0;
      },
    };

    return (
      <div className="card-container">
        <Tabs type="card">
          <TabPane tab="折线图" key="1">
            <Filter submit={Error.submit1} isShowTime isError />
            <div id="chart" className="echart-line" />
          </TabPane>
          <TabPane tab="列表" key="2">
            <Filter submit={this.submit2} isShowTime={false} isError />
            <Table dataSource={list} columns={this.columns} pagination={pagination} />
          </TabPane>
          <TabPane tab="饼图" key="3">
            <Filter submit={Error.submit3} isShowTime={false} isError />
            <div id="pie" className="echart-pie" />
          </TabPane>
        </Tabs>
      </div>
    );
  }

{ TabPane } = Tabs

{ TabPane } = Tabs

{ TabPane } = Tabs

render() {
        return (
            <div>
                <Row>
                    <Card title="Tab基础演示" className="base_button" >
                        <Tabs>
                            <TabPane tab="tab1" key="1">
                                content of tabl
                            </TabPane>
                            
                            <TabPane tab="tab2" key="2">
                                content of tab2
                            </TabPane>

                            <TabPane tab="tab3" key="3">
                                content of tab3
                            </TabPane>
                        </Tabs>
                    </Card>


                    <Card title="Tab带图标演示" className="base_button" >
                        <Tabs>
                            <TabPane tab={<span><PlusOutlined/>"tab1"</span>} key="1">
                                content of tabl
                            </TabPane>
                            
                            <TabPane tab={<span><EditOutlined/>"tab2"</span>} key="2">
                                content of tab2
                            </TabPane>

                            <TabPane tab={<span><DeleteOutlined/>"tab3"</span>} key="3">
                                content of tab3
                            </TabPane>
                        </Tabs>
                    </Card>


                    <Card title="Tab带图的页签" className="card-wrap">
                    <Tabs 
                        onChange={this.onChange}
                        activeKey={this.state.activeKey}
                        type="editable-card"
                        onEdit={this.onEdit}
                    >
                        {
                            this.state.panes.map((panel)=>{
                                return <TabPane 
                                    tab={panel.title}
                                    key={panel.key}

                                />
                            })
                        }
                    </Tabs>
                </Card>

                </Row>
            </div>
        );
    }

{ TabPane } = Tabs

{ TabPane } = Tabs

{ TabPane } = Tabs

{ TabPane } = Tabs

{ TabPane } = Tabs

{ TabPane } = Tabs

{TabPane} = Tabs

{ TabPane } = Tabs

{ TabPane } = Tabs

{ TabPane } = Tabs

TabPane = Tabs.TabPane