Space - Semi Design Next

Demos

How to import

<script setup lang="ts">
    import { Space } from '@fibrous/semi-ui-vue';
</script>

Basic Usage

Code

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

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

Alignment

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

文本

标签

文本

标签

文本

标签

文本

标签

Code

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

    const aligns = ['start', 'center', 'end', 'baseline'] as const;
    const boxStyle = {
        width: '80px',
        height: '100px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        border: '1px solid var(--semi-color-border)',
        borderRadius: '3px',
    };
</script>

<template>
    <Space vertical>
        <Space v-for="align in aligns" :key="align" :align="align">
            <div :style="boxStyle">文本</div>
            <Button theme="solid" type="primary">按钮</Button>
            <Tag color="green" size="large">标签</Tag>
        </Space>
    </Space>
</template>

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 setup lang="ts">
    import { Button, Space, TabPane, Tabs } from '@fibrous/semi-ui-vue';

    const presets = ['tight', 'medium', 'loose'] as const;
</script>

<template>
    <Tabs type="line">
        <TabPane v-for="(preset, index) in presets" :key="preset" :itemKey="String(index + 1)">
            <template #tab>{{ preset }}</template>
            <Space :spacing="preset" :style="{ marginTop: '15px' }">
                <Button v-for="i in 4" :key="i" theme="solid" type="primary">按钮</Button>
            </Space>
        </TabPane>
        <TabPane itemKey="4">
            <template #tab>array</template>
            <Space :spacing="[8, 16]" :style="{ marginTop: '15px' }" wrap>
                <Button v-for="i in 10" :key="i" theme="solid" type="primary">按钮</Button>
            </Space>
        </TabPane>
    </Tabs>
</template>

Direction

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

Code

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

<template>
    <Space vertical>
        <Button v-for="i in 4" :key="i" theme="solid" type="primary">按钮</Button>
    </Space>
</template>

Wrap

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

Code

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

<template>
    <Space wrap>
        <Button v-for="i in 10" :key="i" theme="solid" type="secondary">按钮</Button>
    </Space>
</template>

API Reference

Space renders its default slot directly without wrapping the children. class, style and other undeclared attributes fall through to the root element. A numeric spacing is output in pixels, and columnGap or rowGap in style take precedence over it.

Props

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

Events

Event	Description	Callback parameters
None

Slots

Slot	Description	Scope parameters
default	Children to space out.	`any`

Exposes

Name	Description	Type
None

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	宽松间距尺寸