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 } 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="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'; () => ( <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, defaultNode) => { 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, Button } from '@douyinfe/semi-ui'; class App extends React.Component { constructor() { super(); this.state = { count: 8, }; } render() { const tabs = Array.from({ length: this.state.count }, (_, i) => ( <TabPane tab={`Tab-${i + 1}`} itemKey={`${i}`} key={i}> Content of Tab {i + 1} </TabPane> )); return ( <div> <div style={{ marginBottom: 12 }}> <Button onClick={() => this.setState({ count: Math.max(3, this.state.count - 2) })} style={{ marginRight: 8 }} > 减少 Tab </Button> <Button onClick={() => this.setState({ count: Math.min(15, this.state.count + 2) })} > 增加 Tab </Button> <span style={{ marginLeft: 12 }}>当前 Tab 数量: {this.state.count}</span> </div> <div style={{ border: '1px solid var(--semi-color-border)', padding: 12, marginBottom: 16 }}> <p style={{ marginBottom: 8, color: 'var(--semi-color-text-2)', fontSize: 12 }}> collapsible="auto" - 自动检测溢出 </p> <Tabs type="card" collapsible="auto"> {tabs} </Tabs> </div> <div style={{ border: '1px solid var(--semi-color-border)', padding: 12, maxWidth: 400 }}> <p style={{ marginBottom: 8, color: 'var(--semi-color-text-2)', fontSize: 12 }}> 固定宽度 400px，测试较窄容器 </p> <Tabs type="card" collapsible="auto"> {tabs} </Tabs> </div> </div> ); } }

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, { useState } from 'react'; import { Tabs, TabPane } from '@douyinfe/semi-ui'; import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'; import { arrayMove, SortableContext, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable'; import { CSS as cssDndKit } from '@dnd-kit/utilities'; // 直接复用 Semi 内置的 TabItem，保留官方样式；外层用 useSortable 注入 ref/listeners/transform const SortableTabItem = ({ item, selected, size, type, tabPosition, onClick }) => { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.itemKey, disabled: item.disabled, }); const style = { transform: cssDndKit.Transform.toString(transform), transition, cursor: item.disabled ? 'not-allowed' : 'grab', opacity: isDragging ? 0.5 : 1, display: 'inline-flex', }; return ( <Tabs.TabItem ref={setNodeRef} style={style} itemKey={item.itemKey} tab={item.tab} icon={item.icon} disabled={item.disabled} selected={selected} size={size} type={type} tabPosition={tabPosition} onClick={onClick} {...attributes} {...listeners} /> ); }; function DraggableTabsDemo() { const [activeKey, setActiveKey] = useState('1'); const [items, setItems] = useState([ { itemKey: '1', tab: '文档', content: '文档内容' }, { itemKey: '2', tab: '表格', content: '表格内容' }, { itemKey: '3', tab: '幻灯片', content: '幻灯片内容' }, { itemKey: '4', tab: '表单', content: '表单内容' }, ]); const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } })); const handleDragEnd = ({ active, over }) => { if (over && active.id !== over.id) { setItems(prev => { const oldIndex = prev.findIndex(i => i.itemKey === active.id); const newIndex = prev.findIndex(i => i.itemKey === over.id); return arrayMove(prev, oldIndex, newIndex); }); } }; // 用 renderTabBar 自定义整条 bar：保持 Semi 原生 .semi-tabs-bar 外壳 + dnd-kit 包裹的 TabItem 列表 const renderTabBar = (tabBarProps) => { const { type = 'line', size = 'medium', tabPosition = 'top' } = tabBarProps; const barCls = `semi-tabs-bar semi-tabs-bar-${type} semi-tabs-bar-${tabPosition}`; return ( <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}> <SortableContext items={items.map(i => i.itemKey)} strategy={horizontalListSortingStrategy} > <div className={barCls} role="tablist"> {items.map(item => ( <SortableTabItem key={item.itemKey} item={item} selected={activeKey === item.itemKey} size={size} type={type} tabPosition={tabPosition} onClick={(key) => setActiveKey(key)} /> ))} </div> </SortableContext> </DndContext> ); }; return ( <Tabs type="line" activeKey={activeKey} onChange={setActiveKey} renderTabBar={renderTabBar} > {items.map(item => ( <TabPane key={item.itemKey} tab={item.tab} itemKey={item.itemKey}> <div style={{ padding: 20 }}>{item.content}</div> </TabPane> ))} </Tabs> ); } render(DraggableTabsDemo);

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