组件
    基础

    间距

    设置组件之间的间距。

    代码演示

    如何引入

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

    基本用法

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

    对齐方式

    可使用 align 设置对齐方式，可选值：start、center（默认）、end、baseline。

    文本
    标签
    文本
    标签
    文本
    标签
    文本
    标签
    代码
    <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 设置间距大小，内置可选值：tight（8px，默认）、medium（16px）、loose（24px），并且支持传入 number 来自定义间距大小，也支持传入 array 来同时设置水平和垂直方向的间距。

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

    间距方向

    可使用 vertical 设置间距是否为垂直方向，默认情况下为 false。

    代码
    <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 设置是否自动换行，默认情况下为 false。

    代码
    <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参考

    Space 直接渲染默认插槽，不包裹子节点；class、style 及其余未声明的属性透传到根元素。数字 spacing 按像素输出，style 中的 columnGap、rowGap 优先于数字 spacing。

    Props

    属性说明类型默认值
    wrap是否自动换行，仅水平方向生效。booleansemiDefault("Space", "wrap", false)
    align对齐方式，可选 start、center、end、baseline。AlignsemiDefault("Space", "align", "center")
    vertical是否为垂直间距。booleansemiDefault("Space", "vertical", false)
    spacing间距尺寸，可选 loose、medium、tight 或数字（像素）；传入 [水平, 垂直] 数组分别设置两个方向。Spacing | [Spacing, Spacing]semiDefault("Space", "spacing", "tight")

    Events

    事件说明回调参数
    无

    Slots

    插槽说明作用域参数
    default需要设置间距的子节点。any

    Exposes

    名称说明类型
    无

    设计变量

    下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。
    Sass 变量值用法
    $spacing-space-tight$spacing-tight默认间距尺寸
    $spacing-space-medium$spacing-base中等间距尺寸
    $spacing-space-loose$spacing-loose宽松间距尺寸