import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; () => ( <div> <Tabs type="line"> <TabPane tab="文档" itemKey="1"> <h3>文档</h3> <p style={{ lineHeight: 1.8 }}> Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 </p> <p style={{ lineHeight: 1.8 }}> 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势： </p> <ul> <li> <p>Semi Design 以内容优先进行设计。</p> </li> <li> <p>更容易地自定义主题。</p> </li> <li> <p>适用国际化场景。</p> </li> <li> <p>效率场景加入人性化关怀。</p> </li> </ul> </TabPane> <TabPane tab="快速起步" itemKey="2"> <h3>快速起步</h3> <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="帮助" itemKey="3"> <h3>帮助</h3> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}> Q：有新组件需求、或者现有组件feature不能满足业务需求？ </p> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}> 右上角问题反馈，提交issue，label选择Feature Request / New Component Request 我们会高优处理这些需求。 </p> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}> Q：对组件的使用有疑惑？ </p> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}> 欢迎进我们的客服lark群进行咨询提问。 </p> </TabPane> </Tabs> </div> );

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; () => ( <Tabs type="button"> <TabPane tab="文档" itemKey="1"> 文档 </TabPane> <TabPane tab="快速起步" itemKey="2"> 快速起步 </TabPane> <TabPane tab="帮助" itemKey="3"> 帮助 </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>文档</div>, <div>快速起步</div>, <div>帮助</div>]; const tabList = [ { tab: '文档', itemKey: '1' }, { tab: '快速起步', itemKey: '2' }, { tab: '帮助', 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, TabPane } from '@douyinfe/semi-ui'; import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons'; () => ( <Tabs> <TabPane tab={ <span> <IconFile /> 文档 </span> } itemKey="1" > 文档 </TabPane> <TabPane tab={ <span> <IconGlobe /> 快速起步 </span> } itemKey="2" > 快速起步 </TabPane> <TabPane tab={ <span> <IconHelpCircle /> 帮助 </span> } itemKey="3" > 帮助 </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, RadioGroup, Radio } 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 /> 文档 </span> } itemKey="1" > <div style={{ padding: '0 24px' }}> <h3>文档</h3> <p style={{ lineHeight: 1.8 }}> Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 </p> <p style={{ lineHeight: 1.8 }}> 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势： </p> </div> </TabPane> <TabPane tab={ <span> <IconGlobe /> 快速起步 </span> } itemKey="2" > <div style={{ padding: '0 24px' }}> <h3>快速起步</h3> <pre style={{ margin: '24px 0', padding: '20px', border: 'none', whiteSpace: 'normal', borderRadius: '6px', color: 'var(--semi-color-text-1)', backgroundColor: 'var(--semi-color-fill-0)', }} > <code>yarn add @douyinfe/semi-ui</code> </pre> </div> </TabPane> <TabPane tab={ <span> <IconHelpCircle /> 帮助 </span> } itemKey="3" > <div style={{ padding: '0 24px' }}> <h3>帮助</h3> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}> Q：有新组件需求、或者现有组件feature不能满足业务需求？ </p> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}> 右上角问题反馈，提交issue，label选择Feature Request / New Component Request 我们会高优处理这些需求。 </p> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}> Q：对组件的使用有疑惑？ </p> <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}> 欢迎进我们的客服lark群进行咨询提问。 </p> </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(i => ( <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}> Content of card tab {i} </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="文档" itemKey="1"> 文档 </TabPane> <TabPane tab="快速起步" itemKey="2" disabled> 快速起步 </TabPane> <TabPane tab="帮助" itemKey="3"> 帮助 </TabPane> </Tabs> ); } }

import React from 'react'; import { Tabs, TabPane, Button } from '@douyinfe/semi-ui'; () => ( <Tabs defaultActiveKey="1" tabBarExtraContent={ <Button onClick={() => { alert('you have clicked me!'); }} > Extra Action </Button> } > <TabPane tab="文档" itemKey="1"> 文档 </TabPane> <TabPane tab="快速起步" itemKey="2"> 快速起步 </TabPane> <TabPane tab="帮助" itemKey="3"> 帮助 </TabPane> </Tabs> );

import React from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; () => ( <Tabs defaultActiveKey="1" renderTabBar={(tabBarProps, DefaultTabBar) => { return ( <div className="tab-bar-box"> 这是二次封装的Tab Bar，当前ActiveKey：{tabBarProps.activeKey} <DefaultTabBar {...tabBarProps} /> </div> ); }} > <TabPane tab="文档" itemKey="1"> 文档 </TabPane> <TabPane tab="快速起步" itemKey="2"> 快速起步 </TabPane> <TabPane tab="帮助" itemKey="3"> 帮助 </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()}>新增</Button> <Button onClick={() => this.remove()}>删除</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: '文档', itemKey: '1', text: '文档', closable: true }, { tab: '快速起步', itemKey: '2', text: '快速起步', closable: true }, { tab: '帮助', itemKey: '3', text: '帮助' }, ], }; } 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> ); } }