Steps

import { Steps } from '@fibrous/semi-ui-solid';

export default function StepsDemo() {
    return (
        <Steps current={1} onChange={(i) => console.log(i)}>
            <Steps.Step title="Finished" description="This is a description" />
            <Steps.Step title="In Progress" description="This is a description" />
            <Steps.Step title="Waiting" description="This is a description" />
        </Steps>
    );
}

import { Steps } from '@fibrous/semi-ui-solid';

export default function StepsDemo() {
    return (
        <Steps type="basic" current={1} onChange={(i) => console.log(i)}>
            <Steps.Step title="Finished" description="This is a description" />
            <Steps.Step title="In Progress" description="This is a description" />
            <Steps.Step title="Waiting" description="This is a description" />
        </Steps>
    );
}

import { Steps } from '@fibrous/semi-ui-solid';

export default function StepsDemo() {
    return (
        <div style={{ display: 'flex', 'justify-content': 'center' }}>
            <Steps type="nav" current={1} style={{ margin: 'auto' }} onChange={(i) => console.log(i)}>
                <Steps.Step title="注册账号" />
                <Steps.Step title="这个项目的文字比较多多多多" />
                <Steps.Step title="产品用途" />
                <Steps.Step title="期待尝试功能" />
            </Steps>
        </div>
    );
}

import { Steps } from '@fibrous/semi-ui-solid';

export default function StepsDemo() {
    return (
        <Steps type="basic" size="small" current={1} onChange={(i) => console.log(i)}>
            <Steps.Step title="Finished" description="This is a description" />
            <Steps.Step title="In Progress" description="This is a description" />
            <Steps.Step title="Waiting" description="This is a description" />
        </Steps>
    );
}

import { Steps } from '@fibrous/semi-ui-solid';

export default function StepsDemo() {
    return (
        <div style={{ display: 'flex', 'justify-content': 'center' }}>
            <Steps type="nav" size="small" current={1} style={{ margin: 'auto' }} onChange={(i) => console.log(i)}>
                <Steps.Step title="注册账号" />
                <Steps.Step title="这个项目的文字比较多多多多" />
                <Steps.Step title="产品用途" />
                <Steps.Step title="期待尝试功能" />
            </Steps>
        </div>
    );
}

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

const steps = [
    {
        title: 'First',
        content: 'First-content',
    },
    {
        title: 'Second',
        content: 'Second-content',
    },
    {
        title: 'Last',
        content: 'Last-content',
    },
];

export default function StepsDemo() {
    const [current, setCurrent] = createSignal(0);

    const next = () => {
        setCurrent(current() + 1);
    };

    const prev = () => {
        setCurrent(current() - 1);
    };

    return (
        <div>
            <Steps type="basic" current={current()} onChange={(i) => console.log(i)}>
                <For each={steps}>{(item) => <Steps.Step title={item.title} />}</For>
            </Steps>
            <div class="steps-content" style={{ 'margin-top': '4px', 'margin-bottom': '4px' }}>
                {steps[current()].content}
            </div>
            <div class="steps-action">
                <Show when={current() < steps.length - 1}>
                    <Button type="primary" onClick={next}>
                        Next
                    </Button>
                </Show>
                <Show when={current() === steps.length - 1}>
                    <Button type="primary" onClick={() => console.log('Processing complete!')}>
                        Done
                    </Button>
                </Show>
                <Show when={current() > 0}>
                    <Button style={{ 'margin-left': '8px' }} onClick={prev}>
                        Previous
                    </Button>
                </Show>
            </div>
        </div>
    );
}

import { Steps } from '@fibrous/semi-ui-solid';

export default function StepsDemo() {
    return (
        <Steps direction="vertical" current={1} style={{ width: '300px' }} onChange={(i) => console.log(i)}>
            <Steps.Step title="Finished" description="This is a description" />
            <Steps.Step title="In Progress" description="This is a description" />
            <Steps.Step title="Waiting" description="This is a description" />
        </Steps>
    );
}

import { Steps } from '@fibrous/semi-ui-solid';

export default function StepsDemo() {
    return (
        <Steps direction="vertical" type="basic" current={1} onChange={(i) => console.log(i)}>
            <Steps.Step title="Finished" description="This is a description" />
            <Steps.Step title="In Progress" description="This is a description" />
            <Steps.Step title="Waiting" description="This is a description" />
        </Steps>
    );
}

import { Steps } from '@fibrous/semi-ui-solid';

export default function StepsDemo() {
    return (
        <Steps type="basic" current={1} status="error" onChange={(i) => console.log(i)}>
            <Steps.Step title="Finished" description="This is a description" />
            <Steps.Step title="In Process" description="This is a description" />
            <Steps.Step title="Waiting" description="This is a description" />
        </Steps>
    );
}

import { IconHome, IconLock } from '@fibrous/semi-icons-solid';
import { Steps } from '@fibrous/semi-ui-solid';

export default function StepsDemo() {
    return (
        <Steps type="basic" onChange={(i) => console.log(i)}>
            <Steps.Step status="finish" title="已完成" />
            <Steps.Step status="error" title="错误" />
            <Steps.Step status="warning" title="警告" />
            <Steps.Step status="process" title="正在进行" icon={<IconHome size="extra-large" />} />
            <Steps.Step status="wait" title="等待" icon={<IconLock size="extra-large" />} />
        </Steps>
    );
}

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

const steps = [{ title: 'First' }, { title: 'Second' }, { title: 'Last' }];

export default function StepsDemo() {
    const [current, setCurrent] = createSignal(1);

    return (
        <div>
            <Steps type="basic" current={current()} onChange={(index) => setCurrent(index)}>
                <For each={steps}>{(item) => <Steps.Step title={item.title} />}</For>
            </Steps>
        </div>
    );
}