Tabs

import { Tabs, TabPane } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    return (
        <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 @fibrous/semi-ui-react</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 { Tabs, TabPane } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    return (
        <Tabs type="button">
            <TabPane tab="文档" itemKey="1">
                文档
            </TabPane>
            <TabPane tab="快速起步" itemKey="2">
                快速起步
            </TabPane>
            <TabPane tab="帮助" itemKey="3">
                帮助
            </TabPane>
        </Tabs>
    );
}

import { useState } from 'react';
import { Tabs } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    const [key, setKey] = useState('1');

    const contentList = ['文档', '快速起步', '帮助'];
    const tabList = [
        { tab: '文档', itemKey: '1' },
        { tab: '快速起步', itemKey: '2' },
        { tab: '帮助', itemKey: '3' },
    ];
    return (
        <Tabs type="card" tabList={tabList} onChange={setKey}>
            <div>{contentList[Number(key) - 1]}</div>
        </Tabs>
    );
}

import { useState } from 'react';
import { Tabs } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    const [key, setKey] = useState('1');

    const contentList = ['文档', '快速起步', '帮助'];
    const tabList = [
        { tab: '文档', itemKey: '1' },
        { tab: '快速起步', itemKey: '2' },
        { tab: '帮助', itemKey: '3' },
    ];
    return (
        <Tabs type="slash" tabList={tabList} onChange={setKey}>
            <div>{contentList[Number(key) - 1]}</div>
        </Tabs>
    );
}

import { IconFile, IconGlobe, IconHelpCircle } from '@fibrous/semi-icons-react';
import { Tabs, TabPane } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    return (
        <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 { Tabs, TabPane } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    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 { Tabs, TabPane, Button } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    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 { useState } from 'react';
import { IconFile, IconGlobe, IconHelpCircle } from '@fibrous/semi-icons-react';
import { Tabs, TabPane, RadioGroup, Radio, type TabType, type RadioChangeEvent } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    const [type, setType] = useState<TabType>('line');

    const onSelect = (e: RadioChangeEvent) => {
        setType(e.target.value);
    };

    return (
        <>
            <RadioGroup
                onChange={onSelect}
                value={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={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 @fibrous/semi-ui-react</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 { Tabs, TabPane } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    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 { useState } from 'react';
import { Tabs, TabPane, Dropdown, type TabsProps } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    const [activeKey, setActiveKey] = useState('Tab-0');
    const renderArrow: TabsProps['renderArrow'] = (items, pos, handleArrowClick) => {
        const style = {
            width: 32,
            height: 32,
            margin: '0 12px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            padding: 0,
            border: 'none',
            borderRadius: '100%',
            background: 'var(--semi-grey-1)',
            color: 'var(--semi-color-text)',
            fontFamily: 'inherit',
            fontSize: 'inherit',
            cursor: 'pointer',
        };
        return (
            <Dropdown
                render={
                    <Dropdown.Menu>
                        {items.map((item) => {
                            return (
                                <Dropdown.Item key={item.itemKey} onClick={() => setActiveKey(item.itemKey)}>
                                    {item.itemKey}
                                </Dropdown.Item>
                            );
                        })}
                    </Dropdown.Menu>
                }
            >
                {pos === 'start' ? (
                    <button type="button" style={style} onClick={handleArrowClick}>
                        ←
                    </button>
                ) : (
                    <button type="button" style={style} onClick={handleArrowClick}>
                        →
                    </button>
                )}
            </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 { Tabs, TabPane } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    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 { useState } from 'react';
import { Tabs, TabPane, Button } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    const [count, setCount] = useState(8);

    const tabs = Array.from({ length: 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={() => setCount(Math.max(3, count - 2))} style={{ marginRight: 8 }}>
                    减少 Tab
                </Button>
                <Button onClick={() => setCount(Math.min(15, count + 2))}>增加 Tab</Button>
                <span style={{ marginLeft: 12 }}>当前 Tab 数量: {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=&quot;auto&quot; - 自动检测溢出</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 { Tabs, TabPane } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    return (
        <Tabs defaultActiveKey="1">
            <TabPane tab="文档" itemKey="1">
                文档
            </TabPane>
            <TabPane tab="快速起步" itemKey="2" disabled>
                快速起步
            </TabPane>
            <TabPane tab="帮助" itemKey="3">
                帮助
            </TabPane>
        </Tabs>
    );
}

import { Tabs, TabPane, Button } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    return (
        <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 { Tabs, TabPane } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    return (
        <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 { useState } from 'react';
import { Accessibility } from '@dnd-kit/dom';
import { arrayMove } from '@dnd-kit/helpers';
import { DragDropProvider, type DragEndEvent } from '@dnd-kit/react';
import { isSortable, useSortable } from '@dnd-kit/react/sortable';
import { Tabs, TabPane, type PlainTab, type TabsProps, type TabItemProps } from '@fibrous/semi-ui-react';

// The Provider drops the Accessibility plugin so TabItem keeps role="tab" and roving tabIndex, without aria-pressed
interface SortableTabItemProps extends Pick<TabItemProps, 'selected' | 'size' | 'type' | 'tabPosition' | 'onClick'> {
    item: PlainTab;
    index: number;
}

const SortableTabItem = ({ item, index, selected, size, type, tabPosition, onClick }: SortableTabItemProps) => {
    const { ref, isDragging } = useSortable({
        id: item.itemKey,
        index,
        disabled: item.disabled,
    });
    const style = {
        cursor: item.disabled ? 'not-allowed' : 'grab',
        opacity: isDragging ? 0.5 : 1,
        display: 'inline-flex',
    };
    return <Tabs.TabItem ref={ref} style={style} itemKey={item.itemKey} tab={item.tab} icon={item.icon} disabled={item.disabled} selected={selected} size={size} type={type} tabPosition={tabPosition} onClick={onClick} />;
};

export default function TabsDemo() {
    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 handleDragEnd = (event: DragEndEvent) => {
        const { source } = event.operation;
        if (!event.canceled && isSortable(source)) {
            setItems((prev) => arrayMove(prev, source.initialIndex, source.index));
        }
    };

    const renderTabBar: TabsProps['renderTabBar'] = ({ type = 'line', size = 'medium', tabPosition = 'top' }) => {
        const barCls = `semi-tabs-bar semi-tabs-bar-${type} semi-tabs-bar-${tabPosition}`;
        return (
            <DragDropProvider plugins={(defaults) => defaults.filter((plugin) => plugin !== Accessibility)} onDragEnd={handleDragEnd}>
                <div className={barCls} role="tablist">
                    {items.map((item, index) => (
                        <SortableTabItem key={item.itemKey} item={item} index={index} selected={activeKey === item.itemKey} size={size} type={type} tabPosition={tabPosition} onClick={(key) => setActiveKey(key)} />
                    ))}
                </div>
            </DragDropProvider>
        );
    };

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

import { useRef, useState } from 'react';
import { Tabs, TabPane, ButtonGroup, Button } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    const newTabIndex = useRef(0);
    const [panes, setPanes] = useState([
        { title: 'Tab 1', content: 'Content of Tab Pane 1', itemKey: '1' },
        { title: 'Tab 2', content: 'Content of Tab Pane 2', itemKey: '2' },
    ]);
    const [activeKey, setActiveKey] = useState('1');

    const add = () => {
        const index = newTabIndex.current++;
        setPanes([...panes, { title: `New Tab ${index}`, content: 'New Tab Pane', itemKey: `newTab${index}` }]);
        setActiveKey(`newTab${index}`);
    };

    const remove = () => {
        if (panes.length > 1) {
            const rest = panes.slice(0, -1);
            setPanes(rest);
            setActiveKey(rest[rest.length - 1].itemKey);
        }
    };

    return (
        <Tabs
            activeKey={activeKey}
            onChange={setActiveKey}
            tabBarExtraContent={
                <ButtonGroup>
                    <Button onClick={add}>新增</Button>
                    <Button onClick={remove}>删除</Button>
                </ButtonGroup>
            }
        >
            {panes.map((pane) => (
                <TabPane tab={pane.title} itemKey={pane.itemKey} key={pane.itemKey}>
                    {pane.content}
                </TabPane>
            ))}
        </Tabs>
    );
}

import { useState } from 'react';
import { Tabs, TabPane } from '@fibrous/semi-ui-react';

export default function TabsDemo() {
    const [tabList, setTabList] = useState([
        { tab: '文档', itemKey: '1', text: '文档', closable: true },
        { tab: '快速起步', itemKey: '2', text: '快速起步', closable: true },
        { tab: '帮助', itemKey: '3', text: '帮助' },
    ]);

    const close = (key: string) => {
        setTabList(tabList.filter((t) => t.itemKey !== key));
    };

    return (
        <Tabs type="card" defaultActiveKey="1" onTabClose={close}>
            {tabList.map((t) => (
                <TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>
                    {t.text}
                </TabPane>
            ))}
        </Tabs>
    );
}