Space - Svelte - Semi Design Next

Demos

How to import

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

Basic Usage

Code

<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>

Alignment

You can use align to set the alignment, optional: start, center (default), end, baseline.

文本

标签

文本

标签

文本

标签

文本

标签

Code

<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>

Spacing

You can use spacing to set the spacing size, optional: tight (8px, default), medium (16px), loose (24px), and allow to pass in number to customize the spacing size, and also support to pass in array to set the horizontal and vertical spacing at the same time.

tight

medium

loose

array

Code

<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>

Direction

You can use vertical to set whether the spacing is vertical, the default is false.

Code

<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>

Wrap

When the spacing is horizontal, you can use wrap to set whether to wrap automatically, the default is false.

Code

<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>

API Reference

Space renders children directly without wrapping them. class, style and other native attributes and listeners land on the root div. A numeric spacing is output in pixels, and column-gap or row-gap in the style string take precedence over it.

Props

Property	Description	Type	Default
align	Alignment: start, center, end or baseline.	`Align`	`"center"`
children	Children to space out.	`Snippet`	-
spacing	Spacing size: loose, medium, tight or a number of pixels. Pass a [horizontal, vertical] array to set each direction.	`Spacing \| [Spacing, Spacing]`	`"tight"`
vertical	Whether the spacing is vertical.	`boolean`	`false`
wrap	Whether to wrap automatically. Only applies to horizontal spacing.	`boolean`	`false`

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$spacing-space-tight	$spacing-tight	默认间距尺寸
$spacing-space-medium	$spacing-base	中等间距尺寸
$spacing-space-loose	$spacing-loose	宽松间距尺寸