antd#Tabs JavaScript Examples

The following examples show how to use antd#Tabs. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: index.js From acy-dex-interface with MIT License

6 votes

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

    );
  }

Example #2

Source File: index.jsx From vpp with MIT License

6 votes

{ TabPane } = Tabs

Example #3

Source File: index.js From online-test-platform with Apache License 2.0

6 votes

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

Example #4

Source File: index.js From scalable-form-platform with MIT License

6 votes

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

    }

Example #5

Source File: index.js From react-drag with MIT License

6 votes

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

Example #6

Source File: Settings.js From Peppermint with GNU General Public License v3.0

6 votes

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

Example #7

Source File: index.jsx From juno with Apache License 2.0

6 votes

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

Example #8

Source File: LoginWrap.js From YApi-X with MIT License

6 votes

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

Example #9

Source File: index.js From gobench with Apache License 2.0

6 votes

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

Example #10

Source File: PreviewModal.jsx From mixbox with GNU General Public License v3.0

6 votes

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

Example #11

Source File: index.js From camel-store-admin with Apache License 2.0

6 votes

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

Example #12

Source File: OfflineData.js From youdidao-unmanned-shop with MIT License

6 votes

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

Example #13

Source File: index.js From loopring-pay with Apache License 2.0

6 votes

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

Example #14

Source File: index.js From pineapple with MIT License

6 votes

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

Example #15

Source File: index.js From acy-dex-interface with MIT License

5 votes

{ TabPane } = Tabs

Example #16

Source File: LoginTab.jsx From vpp with MIT License

5 votes

{ TabPane } = Tabs

Example #17

Source File: DashContent.js From shopping-cart-fe with MIT License

5 votes

{ TabPane } = Tabs

Example #18

Source File: index.js From react_management_template with Apache License 2.0

5 votes

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

Example #19

Source File: SubscriptionCard.js From Cowin-Notification-System with MIT License

5 votes

{ TabPane } = Tabs

Example #20

Source File: admin.js From ctf_platform with MIT License

5 votes

{ TabPane } = Tabs

Example #21

Source File: index.js From topology-react with MIT License

5 votes

{ TabPane } = Tabs

Example #22

Source File: ProjectWorkspace.jsx From node-project-manager with Apache License 2.0

5 votes

{ TabPane } = Tabs

Example #23

Source File: menu.js From deadviz with MIT License

5 votes

{ TabPane } = Tabs

Example #24

Source File: LoginTab.js From online-test-platform with Apache License 2.0

5 votes

{ TabPane } = Tabs

Example #25

Source File: index.js From scalable-form-platform with MIT License

5 votes

{TabPane} = Tabs

Example #26

Source File: MainPage.js From bonded-stablecoin-ui with MIT License

5 votes

{ TabPane } = Tabs

Example #27

Source File: index.js From react-drag with MIT License

5 votes

{ TabPane } = Tabs

Example #28

Source File: App-bsc.js From dToken with MIT License

5 votes

{ TabPane } = Tabs

Example #29

Source File: index.js From AgileTC with Apache License 2.0

5 votes

TabPane = Tabs.TabPane