Tabs

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

export default function TabsDemo() {
    return (
        <div>
            <Tabs type="line">
                <TabPane tab="文档" itemKey="1">
                    <h3>文档</h3>
                    <p style={{ 'line-height': '1.8' }}>Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
                    <p style={{ 'line-height': '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',
                            'white-space': 'normal',
                            'border-radius': 'var(--semi-border-radius-medium)',
                            color: 'var(--semi-color-text-1)',
                            'background-color': 'var(--semi-color-fill-0)',
                        }}
                    >
                        <code>yarn add @fibrous/semi-ui-solid</code>
                    </pre>
                </TabPane>
                <TabPane tab="帮助" itemKey="3">
                    <h3>帮助</h3>
                    <p style={{ 'line-height': '1.8', color: 'var(--semi-color-text-0)', 'font-weight': '600' }}>Q：有新组件需求、或者现有组件feature不能满足业务需求？</p>
                    <p style={{ 'line-height': '1.8', color: 'var(--semi-color-text-1)' }}>右上角问题反馈，提交issue，label选择Feature Request / New Component Request 我们会高优处理这些需求。</p>
                    <p style={{ 'line-height': '1.8', color: 'var(--semi-color-text-0)', 'font-weight': '600' }}>Q：对组件的使用有疑惑？</p>
                    <p style={{ 'line-height': '1.8', color: 'var(--semi-color-text-1)' }}>欢迎进我们的客服lark群进行咨询提问。</p>
                </TabPane>
            </Tabs>
        </div>
    );
}

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

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 { createSignal } from 'solid-js';
import { Tabs } from '@fibrous/semi-ui-solid';

const contentList = ['文档', '快速起步', '帮助'];
const tabList = [
    { tab: '文档', itemKey: '1' },
    { tab: '快速起步', itemKey: '2' },
    { tab: '帮助', itemKey: '3' },
];

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

    return (
        <Tabs type="card" tabList={tabList} onChange={setKey}>
            <div>{contentList[Number(key()) - 1]}</div>
        </Tabs>
    );
}

import { createSignal } from 'solid-js';
import { Tabs } from '@fibrous/semi-ui-solid';

const contentList = ['文档', '快速起步', '帮助'];
const tabList = [
    { tab: '文档', itemKey: '1' },
    { tab: '快速起步', itemKey: '2' },
    { tab: '帮助', itemKey: '3' },
];

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

    return (
        <Tabs type="slash" tabList={tabList} onChange={setKey}>
            <div>{contentList[Number(key()) - 1]}</div>
        </Tabs>
    );
}

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

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 { For } from 'solid-js';
import { Tabs, TabPane } from '@fibrous/semi-ui-solid';

const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

export default function TabsDemo() {
    return (
        <Tabs more={4} style={{ width: '60%', margin: '20px' }} type="card">
            <For each={indexes}>
                {(i) => (
                    <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`}>
                        Content of card tab {i}
                    </TabPane>
                )}
            </For>
        </Tabs>
    );
}

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

const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

export default function TabsDemo() {
    return (
        <Tabs
            more={{
                count: 4,
                render: () => <Button type="tertiary">Click to show More</Button>,
                dropdownProps: { trigger: 'click', position: 'bottomRight' },
            }}
            style={{ width: '60%', margin: '20px' }}
            type="card"
        >
            <For each={indexes}>
                {(i) => (
                    <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`}>
                        Content of card tab {i}
                    </TabPane>
                )}
            </For>
        </Tabs>
    );
}

import { createSignal } from 'solid-js';
import { IconFile, IconGlobe, IconHelpCircle } from '@fibrous/semi-icons-solid';
import { Tabs, TabPane, RadioGroup, Radio, type TabType, type RadioChangeEvent } from '@fibrous/semi-ui-solid';

const contentStyle = { padding: '0 24px' };
const paragraphStyle = { 'line-height': '1.8' };
const questionStyle = { 'line-height': '1.8', color: 'var(--semi-color-text-0)', 'font-weight': '600' };
const answerStyle = { 'line-height': '1.8', color: 'var(--semi-color-text-1)' };
const codeStyle = {
    margin: '24px 0',
    padding: '20px',
    border: 'none',
    'white-space': 'normal',
    'border-radius': '6px',
    color: 'var(--semi-color-text-1)',
    'background-color': 'var(--semi-color-fill-0)',
};

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

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

    return (
        <>
            <RadioGroup
                onChange={onSelect}
                value={type()}
                type="button"
                style={{
                    display: 'flex',
                    width: '200px',
                    'justify-content': '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={contentStyle}>
                        <h3>文档</h3>
                        <p style={paragraphStyle}>Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</p>
                        <p style={paragraphStyle}>区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有以下优势：</p>
                    </div>
                </TabPane>
                <TabPane
                    tab={
                        <span>
                            <IconGlobe />
                            快速起步
                        </span>
                    }
                    itemKey="2"
                >
                    <div style={contentStyle}>
                        <h3>快速起步</h3>
                        <pre style={codeStyle}>
                            <code>yarn add @fibrous/semi-ui-solid</code>
                        </pre>
                    </div>
                </TabPane>
                <TabPane
                    tab={
                        <span>
                            <IconHelpCircle />
                            帮助
                        </span>
                    }
                    itemKey="3"
                >
                    <div style={contentStyle}>
                        <h3>帮助</h3>
                        <p style={questionStyle}>Q：有新组件需求、或者现有组件feature不能满足业务需求？</p>
                        <p style={answerStyle}>右上角问题反馈，提交issue，label选择Feature Request / New Component Request 我们会高优处理这些需求。</p>
                        <p style={questionStyle}>Q：对组件的使用有疑惑？</p>
                        <p style={answerStyle}>欢迎进我们的客服lark群进行咨询提问。</p>
                    </div>
                </TabPane>
            </Tabs>
        </>
    );
}

import { For } from 'solid-js';
import { Tabs, TabPane } from '@fibrous/semi-ui-solid';

const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

export default function TabsDemo() {
    return (
        <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible>
            <For each={indexes}>
                {(i) => (
                    <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`}>
                        Content of card tab {i}
                    </TabPane>
                )}
            </For>
        </Tabs>
    );
}

import { createSignal, For } from 'solid-js';
import { Tabs, TabPane, Dropdown, type TabsProps } from '@fibrous/semi-ui-solid';

const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

const arrowStyle = {
    width: '32px',
    height: '32px',
    margin: '0 12px',
    display: 'flex',
    'justify-content': 'center',
    'align-items': 'center',
    padding: '0',
    border: 'none',
    'border-radius': '100%',
    background: 'var(--semi-grey-1)',
    color: 'var(--semi-color-text)',
    'font-family': 'inherit',
    'font-size': 'inherit',
    cursor: 'pointer',
};

export default function TabsDemo() {
    const [activeKey, setActiveKey] = createSignal('Tab-0');

    const renderArrow: TabsProps['renderArrow'] = (items, pos, handleArrowClick) => (
        <Dropdown
            render={
                <Dropdown.Menu>
                    <For each={items}>{(item) => <Dropdown.Item onClick={() => setActiveKey(item.itemKey)}>{item.itemKey}</Dropdown.Item>}</For>
                </Dropdown.Menu>
            }
        >
            {(trigger) => (
                <button type="button" {...trigger()} style={arrowStyle} onClick={handleArrowClick}>
                    {pos === 'start' ? '←' : '→'}
                </button>
            )}
        </Dropdown>
    );

    return (
        <Tabs renderArrow={renderArrow} style={{ width: '50%', margin: '20px' }} activeKey={activeKey()} type="card" collapsible onChange={setActiveKey}>
            <For each={indexes}>
                {(i) => (
                    <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`}>
                        Content of card tab {i}
                    </TabPane>
                )}
            </For>
        </Tabs>
    );
}

import { For } from 'solid-js';
import { Tabs, TabPane } from '@fibrous/semi-ui-solid';

const indexes = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const positions = ['start', 'both', 'end'] as const;

export default function TabsDemo() {
    return (
        <For each={positions}>
            {(position) => (
                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={position}>
                    <For each={indexes}>
                        {(i) => (
                            <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`}>
                                Content of card tab {i}
                            </TabPane>
                        )}
                    </For>
                </Tabs>
            )}
        </For>
    );
}

import { createSignal, For } from 'solid-js';
import { Tabs, TabPane, Button } from '@fibrous/semi-ui-solid';

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

    const indexes = () => Array.from({ length: count() }, (_, i) => i);

    // Nodes can be placed once, so each Tabs gets its own copy
    const panes = () => (
        <For each={indexes()}>
            {(i) => (
                <TabPane tab={`Tab-${i + 1}`} itemKey={`${i}`}>
                    Content of Tab {i + 1}
                </TabPane>
            )}
        </For>
    );

    return (
        <div>
            <div style={{ 'margin-bottom': '12px' }}>
                <Button onClick={() => setCount(Math.max(3, count() - 2))} style={{ 'margin-right': '8px' }}>
                    减少 Tab
                </Button>
                <Button onClick={() => setCount(Math.min(15, count() + 2))}>增加 Tab</Button>
                <span style={{ 'margin-left': '12px' }}>当前 Tab 数量: {count()}</span>
            </div>

            <div style={{ border: '1px solid var(--semi-color-border)', padding: '12px', 'margin-bottom': '16px' }}>
                <p style={{ 'margin-bottom': '8px', color: 'var(--semi-color-text-2)', 'font-size': '12px' }}>collapsible=&quot;auto&quot; - 自动检测溢出</p>
                <Tabs type="card" collapsible="auto">
                    {panes()}
                </Tabs>
            </div>

            <div style={{ border: '1px solid var(--semi-color-border)', padding: '12px', 'max-width': '400px' }}>
                <p style={{ 'margin-bottom': '8px', color: 'var(--semi-color-text-2)', 'font-size': '12px' }}>固定宽度 400px，测试较窄容器</p>
                <Tabs type="card" collapsible="auto">
                    {panes()}
                </Tabs>
            </div>
        </div>
    );
}

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

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-solid';

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-solid';

export default function TabsDemo() {
    return (
        <Tabs
            defaultActiveKey="1"
            renderTabBar={(tabBarProps, DefaultTabBar) => (
                <div class="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 { createSignal, For } from 'solid-js';
import { Accessibility } from '@dnd-kit/dom';
import { arrayMove } from '@dnd-kit/helpers';
import { DragDropProvider } from '@dnd-kit/solid';
import { isSortable, useSortable } from '@dnd-kit/solid/sortable';
import { Tabs, TabPane, type PlainTab, type TabsProps, type TabItemProps } from '@fibrous/semi-ui-solid';

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

function SortableTabItem(props: SortableTabItemProps) {
    const { ref, isDragging } = useSortable({
        get id() {
            return props.item.itemKey;
        },
        get index() {
            return props.index;
        },
        get disabled() {
            return props.item.disabled;
        },
    });

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

export default function TabsDemo() {
    const [activeKey, setActiveKey] = createSignal('1');
    const [items, setItems] = createSignal([
        { itemKey: '1', tab: '文档', content: '文档内容' },
        { itemKey: '2', tab: '表格', content: '表格内容' },
        { itemKey: '3', tab: '幻灯片', content: '幻灯片内容' },
        { itemKey: '4', tab: '表单', content: '表单内容' },
    ]);

    const renderTabBar: TabsProps['renderTabBar'] = (tabBarProps) => (
        <DragDropProvider
            plugins={(defaults) => defaults.filter((plugin) => plugin !== Accessibility)}
            onDragEnd={(event) => {
                const { source } = event.operation;
                if (!event.canceled && isSortable(source)) {
                    setItems((prev) => arrayMove(prev, source.initialIndex, source.index));
                }
            }}
        >
            <div class={`semi-tabs-bar semi-tabs-bar-${tabBarProps.type} semi-tabs-bar-${tabBarProps.tabPosition}`} role="tablist">
                <For each={items()}>{(item, index) => <SortableTabItem item={item} index={index()} selected={activeKey() === item.itemKey} size={tabBarProps.size} type={tabBarProps.type} tabPosition={tabBarProps.tabPosition} onClick={(key) => setActiveKey(key)} />}</For>
            </div>
        </DragDropProvider>
    );

    return (
        <Tabs type="line" activeKey={activeKey()} onChange={setActiveKey} renderTabBar={renderTabBar}>
            <For each={items()}>
                {(item) => (
                    <TabPane tab={item.tab} itemKey={item.itemKey}>
                        <div style={{ padding: '20px' }}>{item.content}</div>
                    </TabPane>
                )}
            </For>
        </Tabs>
    );
}

import { createSignal, For } from 'solid-js';
import { Tabs, TabPane, ButtonGroup, Button } from '@fibrous/semi-ui-solid';

export default function TabsDemo() {
    let newTabIndex = 0;
    const [panes, setPanes] = createSignal([
        { 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] = createSignal('1');

    const add = () => {
        const index = newTabIndex++;
        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>
            }
        >
            <For each={panes()}>
                {(pane) => (
                    <TabPane tab={pane.title} itemKey={pane.itemKey}>
                        {pane.content}
                    </TabPane>
                )}
            </For>
        </Tabs>
    );
}

import { createSignal, For } from 'solid-js';
import { Tabs, TabPane } from '@fibrous/semi-ui-solid';

export default function TabsDemo() {
    const [tabList, setTabList] = createSignal([
        { 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}>
            <For each={tabList()}>
                {(t) => (
                    <TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey}>
                        {t.text}
                    </TabPane>
                )}
            </For>
        </Tabs>
    );
}