间距

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

<Space>
    <Switch aria-label="示例开关" checked />
    <Button type="secondary">次要</Button>
    <Button type="tertiary">第三</Button>
    <Button type="warning">警告</Button>
</Space>

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

    const aligns = ['start', 'center', 'end', 'baseline'] as const;
    const boxStyle = 'width: 80px; height: 100px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--semi-color-border); border-radius: 3px';
</script>

<Space vertical>
    {#each aligns as align (align)}
        <Space {align}>
            <div style={boxStyle}>文本</div>
            <Button theme="solid" type="primary">按钮</Button>
            <Tag color="green" size="large">标签</Tag>
        </Space>
    {/each}
</Space>

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

    const presets = ['tight', 'medium', 'loose'] as const;
    const four = [1, 2, 3, 4];
    const ten = Array.from({ length: 10 }, (_, index) => index);
</script>

<!-- Tabs is not ported to Svelte yet, so the four spacing variants are stacked with plain headings -->
{#each presets as preset (preset)}
    <h4>{preset}</h4>
    <Space spacing={preset} style="margin-top: 15px">
        {#each four as item (item)}
            <Button theme="solid" type="primary">按钮</Button>
        {/each}
    </Space>
{/each}
<h4>array</h4>
<Space spacing={[8, 16]} style="margin-top: 15px" wrap>
    {#each ten as item (item)}
        <Button theme="solid" type="primary">按钮</Button>
    {/each}
</Space>

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

    const items = [1, 2, 3, 4];
</script>

<Space vertical>
    {#each items as item (item)}
        <Button theme="solid" type="primary">按钮</Button>
    {/each}
</Space>

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

    const items = Array.from({ length: 10 }, (_, index) => index);
</script>

<Space wrap>
    {#each items as item (item)}
        <Button theme="solid" type="secondary">按钮</Button>
    {/each}
</Space>