import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; class App extends React.Component { render() { return ( <div> <Tabs type="line"> <TabPane tab="Document" itemKey="1"> <h3>Document</h3> <p style={{ lineHeight: 1.8 }}> Semi Design is a design system developed and maintained by IES Front-end Team and UED Team </p> <p style={{ lineHeight: 1.8 }}> Semi Design create a consistent, good-looking, easy-to-use, and efficient user experience with a user-centric, content-first, and human-friendly design system. </p> <ul> <li> <p>Content-first</p> </li> <li> <p>Customized theming</p> </li> <li> <p>Internationalized</p> </li> <li> <p>Humanism</p> </li> </ul> </TabPane> <TabPane tab="Quick Start" itemKey="2"> <h3>Quick Start</h3> <p style={{ lineHeight: 1.8 }}> If it is a new project, it is recommended that you use Eden to initialize the project and initialize the project type to select the React direction. </p> <pre style={{ margin: '24px 0', padding: '20px', border: 'none', whiteSpace: 'normal', borderRadius: 'var(--semi-border-radius-medium)', color: 'var(--semi-color-text-1)', backgroundColor: 'var(--semi-color-fill-0)', }} > <code>yarn add @douyinfe/semi-ui</code> </pre> </TabPane> <TabPane tab="Help" itemKey="3"> <h3>Help</h3> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}> Q: Who should I look for if there are new component requirements, or existing component does not meet my needs? </p> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}> {`Give feedbacks in the upper right corner, submit an Issue, describe your needs as well as the business scenario. We'll handle these issues with priorities.`} </p> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}> Q: Have questions when using components? </p> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}> Welcome to ask anything in our Lark customer service group. </p> </TabPane> </Tabs> </div> ); } }

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; class App extends React.Component { render() { return ( <Tabs type="button"> <TabPane tab="Document" itemKey="1"> Document </TabPane> <TabPane tab="Quick Start" itemKey="2"> Quick Start </TabPane> <TabPane tab="Help" itemKey="3"> Help </TabPane> </Tabs> ); } }

import React from 'react'; import { Tabs } from '@douyinfe/semi-ui'; class TabDemo extends React.Component { constructor() { super(); this.state = { key: '1' }; this.onTabClick = this.onTabClick.bind(this); } onTabClick(key, type) { this.setState({ [type]: key }); } render() { // eslint-disable-next-line react/jsx-key const contentList = [<div>Document</div>, <div>Quick Start</div>, <div>Help</div>]; const tabList = [ { tab: 'Document', itemKey: '1' }, { tab: 'Quick Start', itemKey: '2' }, { tab: 'Help', itemKey: '3' }, ]; return ( <Tabs type="card" tabList={tabList} onChange={key => { this.onTabClick(key, 'key'); }} > {contentList[this.state.key - 1]} </Tabs> ); } }

import React from 'react'; import { Tabs } from '@douyinfe/semi-ui'; class TabDemo extends React.Component { constructor() { super(); this.state = { key: '1' }; this.onTabClick = this.onTabClick.bind(this); } onTabClick(key, type) { this.setState({ [type]: key }); } render() { // eslint-disable-next-line react/jsx-key const contentList = [<div>Document</div>, <div>Quick Start</div>, <div>Help</div>]; const tabList = [ { tab: 'Document', itemKey: '1' }, { tab: 'Quick Start', itemKey: '2' }, { tab: 'Help', itemKey: '3' }, ]; return ( <Tabs type="slash" tabList={tabList} onChange={key => { this.onTabClick(key, 'key'); }} > {contentList[this.state.key - 1]} </Tabs> ); } }

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons'; class App extends React.Component { render() { return ( <Tabs> <TabPane tab={ <span> <IconFile /> Document </span> } itemKey="1" > Document </TabPane> <TabPane tab={ <span> <IconGlobe /> Quick Start </span> } itemKey="2" > Quick Start </TabPane> <TabPane tab={ <span> <IconHelpCircle /> Help </span> } itemKey="3" > Help </TabPane> </Tabs> ); } }

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; function Demo() { return ( <Tabs more={4} style={{ width: '60%', margin: '20px' }} type="card"> {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => ( <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}> Content of card tab {i} </TabPane> ))} </Tabs> ); }

import React from 'react'; import { Tabs, TabPane, Button } from '@douyinfe/semi-ui'; function Demo() { return ( <Tabs more={{ count: 4, render: () => { return <Button type='tertiary'>Click to show More</Button>; }, dropdownProps: { trigger: 'click', position: 'bottomRight' }, }} style={{ width: '60%', margin: '20px' }} type="card" > {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => ( <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}> Content of card tab {i} </TabPane> ))} </Tabs> ); }

import React from 'react'; import { Tabs, TabPane, Radio, RadioGroup } from '@douyinfe/semi-ui'; import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons'; class App extends React.Component { constructor() { super(); this.state = { type: 'line', }; } onSelect(e) { this.setState({ type: e.target.value, }); } render() { return ( <> <RadioGroup onChange={e => this.onSelect(e)} value={this.state.type} type="button" style={{ display: 'flex', width: 200, justifyContent: 'center', }} > <Radio value={'line'}>Line</Radio> <Radio value={'card'}>Card</Radio> <Radio value={'button'}>Button</Radio> </RadioGroup> <br /> <br /> <Tabs tabPosition="left" type={this.state.type}> <TabPane tab={ <span> <IconFile /> Document </span> } itemKey="1" > <div style={{ padding: '0 24px' }}> Document </div> </TabPane> <TabPane tab={ <span> <IconGlobe /> Quick Start </span> } itemKey="2" > <div style={{ padding: '0 24px' }}>Quick Start</div> </TabPane> <TabPane tab={ <span> <IconHelpCircle /> Help </span> } itemKey="3" > <div style={{ padding: '0 24px' }}>Help</div> </TabPane> </Tabs> </> ); } }

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; class App extends React.Component { render() { return ( <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible> {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => ( <TabPane tab={`Tab-${item}`} itemKey={`Tab-${item}`} key={item}> Content of card tab {index} </TabPane> ))} </Tabs> ); } }

import React from 'react'; import { Tabs, TabPane, Dropdown } from '@douyinfe/semi-ui'; () => { const [activeKey, setActiveKey] = useState('Tab-0'); const renderArrow = (items, pos, handleArrowClick) => { const style = { width: 32, height: 32, margin: '0 12px', display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '100%', background: 'rgba(var(--semi-grey-1), 1)', color: 'var(--semi-color-text)', cursor: 'pointer', }; return ( <Dropdown render={ <Dropdown.Menu> {items.map(item => { return ( <Dropdown.Item onClick={() => setActiveKey(item.itemKey)}>{item.itemKey}</Dropdown.Item> ); })} </Dropdown.Menu> } > {pos === 'start' ? ( <div style={style} onClick={handleArrowClick}> ← </div> ) : ( <div style={style} onClick={handleArrowClick}> → </div> )} </Dropdown> ); }; return ( <Tabs renderArrow={renderArrow} style={{ width: '50%', margin: '20px' }} activeKey={activeKey} type="card" collapsible onChange={k => setActiveKey(k)} > {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => ( <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}> Content of card tab {i} </TabPane> ))} </Tabs> ); };

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; class App extends React.Component { render() { return ( <> <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'start'}> {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => ( <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}> Content of card tab {i} </TabPane> ))} </Tabs> <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'both'}> {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => ( <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}> Content of card tab {i} </TabPane> ))} </Tabs> <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'end'}> {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => ( <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}> Content of card tab {i} </TabPane> ))} </Tabs> </> ); } }

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; class App extends React.Component { render() { return ( <Tabs defaultActiveKey="1"> <TabPane tab="Document" itemKey="1"> Document </TabPane> <TabPane tab="Quick Start" itemKey="2" disabled> Quick Start </TabPane> <TabPane tab="Help" itemKey="3"> Help </TabPane> </Tabs> ); } }

import React from 'react'; import { Tabs, TabPane, Button } from '@douyinfe/semi-ui'; class App extends React.Component { render() { return ( <Tabs defaultActiveKey="1" tabBarExtraContent={ <Button onClick={() => { alert('you have clicked me!'); }} > Extra Action </Button> } > <TabPane tab="Document" itemKey="1"> Document </TabPane> <TabPane tab="Quick Start" itemKey="2"> Quick Start </TabPane> <TabPane tab="Help" itemKey="3"> Help </TabPane> </Tabs> ); } }

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; class App extends React.Component { render() { return ( <Tabs defaultActiveKey="1" renderTabBar={(tabBarProps, DefaultTabBar) => { return ( <div className="tab-bar-box"> This is a custom rendered tabBar. Current activeKey is: {tabBarProps.activeKey} <DefaultTabBar {...tabBarProps} /> </div> ); }} > <TabPane tab="Document" itemKey="1"> Document </TabPane> <TabPane tab="Quick Start" itemKey="2"> Quick Start </TabPane> <TabPane tab="Help" itemKey="3"> Help </TabPane> </Tabs> ); } }

import React from 'react'; import { Tabs, TabPane, ButtonGroup, Button } from '@douyinfe/semi-ui'; class App extends React.Component { constructor(props) { super(props); this.newTabIndex = 0; const panes = [ { title: 'Tab 1', content: 'Content of Tab Pane 1', itemKey: '1' }, { title: 'Tab 2', content: 'Content of Tab Pane 2', itemKey: '2' }, ]; this.state = { panes, activeKey: panes[0].itemKey, }; } add() { const { panes } = this.state; const index = this.newTabIndex++; panes.push({ title: `New Tab ${index}`, content: 'New Tab Pane', itemKey: `newTab${index}` }); this.setState({ panes, activeKey: `newTab${index}` }); } remove() { const { panes } = this.state; if (panes.length > 1) { panes.pop(); this.setState({ panes, activeKey: panes[panes.length - 1].itemKey }); } } handleChange(activeKey) { this.setState({ activeKey }); } render() { const { panes, activeKey } = this.state; return ( <Tabs defaultActiveKey="1" activeKey={activeKey} onChange={this.handleChange.bind(this)} tabBarExtraContent={ <ButtonGroup> <Button onClick={() => this.add()}>Add</Button> <Button onClick={() => this.remove()}>Delete</Button> </ButtonGroup> } > {panes.map(pane => ( <TabPane tab={pane.title} itemKey={pane.itemKey} key={pane.itemKey}> {pane.content} </TabPane> ))} </Tabs> ); } }

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; class App extends React.Component { constructor(props) { super(props); this.state = { tabList: [ { tab: 'Doc', itemKey: '1', text: 'Doc', closable: true }, { tab: 'Quick Start', itemKey: '2', text: 'Quick Start', closable: true }, { tab: 'Help', itemKey: '3', text: 'Help' }, ], }; } close(key) { const newTabList = [...this.state.tabList]; const closeIndex = newTabList.findIndex(t => t.itemKey === key); newTabList.splice(closeIndex, 1); this.setState({ tabList: newTabList }); } render() { return ( <Tabs type="card" defaultActiveKey="1" onTabClose={this.close.bind(this)}> {this.state.tabList.map(t => ( <TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}> {t.text} </TabPane> ))} </Tabs> ); } }