按钮

<script lang="ts">
    import { Button } from '@fibrae/semi-ui-svelte';
</script>

<div class="btn-margin-right">
    <Button>主要按钮</Button>
    <Button type="secondary">次要按钮</Button>
    <Button type="tertiary">第三按钮</Button>
    <Button type="warning">警告按钮</Button>
    <Button type="danger">危险按钮</Button>
</div>

<script lang="ts">
    const types = [
        ['primary', '主要'],
        ['secondary', '次要'],
        ['tertiary', '第三'],
        ['warning', '警告'],
        ['danger', '危险'],
    ];
</script>

<article>
    {#each types as [type, label] (type)}
        <strong style={`color: var(--semi-color-${type}); margin-right: 10px`}>
            {label}
        </strong>
    {/each}
</article>

<script lang="ts">
    import { Button } from '@fibrae/semi-ui-svelte';
</script>

<Button style="margin-right: 8px" theme="light" type="primary">浅色主要</Button>
<Button style="margin-right: 8px" theme="light" type="secondary">浅色次要</Button>
<Button style="margin-right: 8px" theme="light" type="tertiary">浅色第三</Button>
<Button style="margin-right: 8px" theme="light" type="warning">浅色警告</Button>
<Button style="margin-right: 8px" theme="light" type="danger">浅色危险</Button>

<script lang="ts">
    import { Button } from '@fibrae/semi-ui-svelte';
</script>

<Button style="margin-right: 8px" theme="solid" type="primary">深色主要</Button>
<Button style="margin-right: 8px" theme="solid" type="secondary">深色次要</Button>
<Button style="margin-right: 8px" theme="solid" type="tertiary">深色第三</Button>
<Button style="margin-right: 8px" theme="solid" type="warning">深色警告</Button>
<Button style="margin-right: 8px" theme="solid" type="danger">深色危险</Button>

<script lang="ts">
    import { Button } from '@fibrae/semi-ui-svelte';
</script>

<Button style="margin-right: 8px" theme="borderless" type="primary">主要</Button>
<Button style="margin-right: 8px" theme="borderless" type="secondary">次要</Button>
<Button style="margin-right: 8px" theme="borderless" type="tertiary">第三</Button>
<Button style="margin-right: 8px" theme="borderless" type="warning">警告</Button>
<Button style="margin-right: 8px" theme="borderless" type="danger">危险</Button>

<script lang="ts">
    import { Button } from '@fibrae/semi-ui-svelte';
</script>

<Button style="margin-right: 8px" theme="outline" type="primary">主要</Button>
<Button style="margin-right: 8px" theme="outline" type="secondary">次要</Button>
<Button style="margin-right: 8px" theme="outline" type="tertiary">第三</Button>
<Button style="margin-right: 8px" theme="outline" type="warning">警告</Button>
<Button style="margin-right: 8px" theme="outline" type="danger">危险</Button>

<script lang="ts">
    import { Button } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <Button size="large" style="margin-right: 8px">大尺寸</Button>
    <Button size="default" style="margin-right: 8px">默认尺寸</Button>
    <Button size="small">小尺寸</Button>
</div>

<script lang="ts">
    import { Button } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <Button block>块级按钮</Button>
</div>

<script lang="ts">
    import { IconCamera, IconChevronDown, IconSidebar } from '@fibrae/semi-icons-svelte';
    import { Button } from '@fibrae/semi-ui-svelte';
</script>

{#snippet camera()}
    <IconCamera />
{/snippet}

<div>
    <strong>默认状态：</strong>
    <Button aria-label="截屏" icon={camera} />
    <br />
    <br />
    <strong>禁用状态：</strong>
    <Button aria-label="截屏" disabled icon={camera} />
    <br />
    <br />
    <strong>复合类型：</strong>
    <span class="btn-margin-right">
        <Button aria-label="截屏" icon={camera} type="primary" />
        <Button aria-label="截屏" icon={camera} type="secondary" />
        <Button aria-label="截屏" icon={camera} type="warning" />
        <Button aria-label="截屏" icon={camera} type="danger" />
    </span>
    <br />
    <br />
    <strong>更改主题：</strong>
    <Button aria-label="截屏" icon={camera} style="margin-right: 10px" theme="solid" />
    <Button aria-label="截屏" icon={camera} theme="light" />
    <br />
    <br />
    <strong>更改图标位置：</strong>
    <Button style="margin-right: 10px" theme="solid">
        {#snippet icon()}
            <IconSidebar />
        {/snippet}
        收起
    </Button>
    <Button iconPosition="right" theme="solid">
        {#snippet icon()}
            <IconChevronDown />
        {/snippet}
        展开选项
    </Button>
    <br />
    <br />
</div>

<script lang="ts">
    import { IconLink } from '@fibrae/semi-icons-svelte';
    import { TypographyText } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <TypographyText link={{ href: 'https://semi.design/' }}>链接文本</TypographyText>
    <br />
    <br />
    <TypographyText link={{ href: 'https://semi.design/' }}>打开网站</TypographyText>
    <br />
    <br />
    <TypographyText link underline>
        {#snippet icon()}
            <IconLink />
        {/snippet}
        带下划线的网页链接
    </TypographyText>
</div>

<script lang="ts">
    import { Button } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <Button disabled>禁用</Button>
    <Button disabled theme="borderless">无背景禁用</Button>
    <Button disabled theme="light">浅色禁用</Button>
    <Button disabled theme="borderless" type="primary">无背景主要禁用</Button>
    <Button disabled theme="solid" type="warning">深色警告禁用</Button>
</div>

<script lang="ts">
    import { IconDelete } from '@fibrae/semi-icons-svelte';
    import { Button } from '@fibrae/semi-ui-svelte';

    let saveLoading = $state(false);
    let delLoading = $state(true);
    let repLoading = $state(true);

    const reset = (status: boolean) => {
        saveLoading = status;
        delLoading = status;
        repLoading = status;
    };
</script>

<div>
    <div>
        <div class="btn-margin-right" style="display: inline-flex; align-items: center; padding-bottom: 14px">
            <Button onclick={() => reset(false)}>关闭加载态</Button>
            <Button onclick={() => reset(true)}>开启加载态</Button>
        </div>
    </div>
    <hr />
    <Button loading={saveLoading} style="margin-right: 14px" onclick={() => (saveLoading = true)}>保存</Button>
    <Button loading={delLoading} style="margin-right: 14px" type="danger" onclick={() => (delLoading = true)}>
        {#snippet icon()}
            <IconDelete />
        {/snippet}
        删除
    </Button>
    <div style="width: 200px; display: inline-block">
        <Button block loading={repLoading} theme="solid" type="warning" onclick={() => (repLoading = true)}>撤销</Button>
    </div>
</div>

<script lang="ts">
    import { IconAIFilledLevel1, IconAIFilledLevel2, IconAIFilledLevel3 } from '@fibrae/semi-icons-svelte';
    import { Button } from '@fibrae/semi-ui-svelte';

    const contents = ['Colorful', undefined];
    const rows = [
        { theme: 'solid', primaryIcon: IconAIFilledLevel1, tertiaryIcon: IconAIFilledLevel3 },
        { theme: 'light', primaryIcon: IconAIFilledLevel3, tertiaryIcon: IconAIFilledLevel2 },
        { theme: 'outline', primaryIcon: IconAIFilledLevel1, tertiaryIcon: IconAIFilledLevel2 },
        { theme: 'borderless', primaryIcon: IconAIFilledLevel3, tertiaryIcon: IconAIFilledLevel2 },
    ] as const;
    const variants = [
        { type: 'primary', state: 'default' },
        { type: 'primary', state: 'loading' },
        { type: 'primary', state: 'disabled' },
        { type: 'tertiary', state: 'default' },
        { type: 'tertiary', state: 'loading' },
        { type: 'tertiary', state: 'disabled' },
    ] as const;
</script>

<!-- The text is the children snippet; leaving it out makes the button icon-only, so the label is passed or omitted as a whole. -->
{#each contents as content (content ?? 'icon-only')}
    {#snippet text()}{content}{/snippet}
    <div style="display: flex; row-gap: 16px; margin-top: 20px; margin-left: 10px; flex-direction: column">
        {#each rows as row (row.theme)}
            <div style="display: flex; column-gap: 16px">
                {#each variants as variant (`${variant.type}-${variant.state}`)}
                    {@const Icon = variant.type === 'primary' ? row.primaryIcon : row.tertiaryIcon}
                    {#snippet icon({ fill }: { fill?: string[] })}
                        <Icon {fill} />
                    {/snippet}
                    <Button aria-label={content ? undefined : 'AI'} children={content ? text : undefined} colorful disabled={variant.state === 'disabled'} {icon} loading={variant.state === 'loading'} theme={row.theme} type={variant.type} />
                {/each}
            </div>
        {/each}
    </div>
{/each}

<script lang="ts">
    import { Button, ButtonGroup } from '@fibrae/semi-ui-svelte';

    const sizes = ['large', 'default', 'small'] as const;
</script>

<div style="display: flex">
    {#each sizes as size (size)}
        <div style="margin-right: 10px">
            <ButtonGroup aria-label="操作按钮组" {size}>
                <Button>拷贝</Button>
                <Button>查询</Button>
                <Button>剪切</Button>
            </ButtonGroup>
        </div>
    {/each}
</div>

<script lang="ts">
    import { Button, ButtonGroup } from '@fibrae/semi-ui-svelte';
</script>

<div style="display: flex">
    <div style="margin-right: 10px">
        <ButtonGroup disabled>
            <Button>拷贝</Button>
            <Button>查询</Button>
            <Button>剪切</Button>
        </ButtonGroup>
    </div>
</div>

<script lang="ts">
    import { Button, ButtonGroup } from '@fibrae/semi-ui-svelte';

    const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'] as const;
</script>

<div style="display: flex">
    {#each types as type (type)}
        <div style="margin-right: 10px">
            <ButtonGroup aria-label="操作按钮组" {type}>
                <Button>拷贝</Button>
                <Button>查询</Button>
                <Button>剪切</Button>
            </ButtonGroup>
        </div>
    {/each}
</div>

<script lang="ts">
    import { IconTreeTriangleDown } from '@fibrae/semi-icons-svelte';
    import { Button, Dropdown, SplitButtonGroup, type DropDownMenuItem } from '@fibrae/semi-ui-svelte';

    const menu: DropDownMenuItem[] = [
        { node: 'item', name: '编辑项目', onclick: () => console.log('编辑项目点击') },
        { node: 'item', name: '重置项目' },
        { node: 'divider' },
        { node: 'item', name: '复制项目' },
        { node: 'item', name: '从项目创建模版' },
        { node: 'divider' },
        { node: 'item', name: '删除项目', type: 'danger' },
    ];

    let btnVisible = $state<Record<number, boolean>>({ 1: false, 2: false, 3: false });
</script>

<div>
    <SplitButtonGroup aria-label="项目操作按钮组" style="margin-right: 10px">
        <Button theme="solid" type="primary">分裂按钮</Button>
        <Dropdown {menu} onVisibleChange={(visible) => (btnVisible[1] = visible)} position="bottomRight" trigger="click">
            {#snippet child({ props })}
                <Button {...props} aria-label="更多操作" style={`${btnVisible[1] ? 'background: var(--semi-color-primary-hover); ' : ''}padding: 8px 4px`} theme="solid" type="primary">
                    {#snippet icon()}
                        <IconTreeTriangleDown />
                    {/snippet}
                </Button>
            {/snippet}
        </Dropdown>
    </SplitButtonGroup>
    <SplitButtonGroup aria-label="项目操作按钮组" style="margin-right: 10px">
        <Button theme="light" type="primary">分裂按钮</Button>
        <Dropdown {menu} onVisibleChange={(visible) => (btnVisible[2] = visible)} position="bottomRight" trigger="click">
            {#snippet child({ props })}
                <Button {...props} aria-label="更多操作" style={`${btnVisible[2] ? 'background: var(--semi-color-fill-1); ' : ''}padding: 8px 4px`} theme="light" type="primary">
                    {#snippet icon()}
                        <IconTreeTriangleDown />
                    {/snippet}
                </Button>
            {/snippet}
        </Dropdown>
    </SplitButtonGroup>
    <SplitButtonGroup aria-label="项目操作按钮组">
        <Button style={btnVisible[3] ? 'background: var(--semi-color-fill-0)' : undefined} theme="borderless" type="primary">分裂按钮</Button>
        <Dropdown {menu} onVisibleChange={(visible) => (btnVisible[3] = visible)} position="bottomRight" trigger="click">
            {#snippet child({ props })}
                <Button {...props} aria-label="更多操作" style={`${btnVisible[3] ? 'background: var(--semi-color-fill-1); ' : ''}padding: 8px 4px`} theme="borderless" type="primary">
                    {#snippet icon()}
                        <IconTreeTriangleDown />
                    {/snippet}
                </Button>
            {/snippet}
        </Dropdown>
    </SplitButtonGroup>
</div>