Space 间距

设置组件之间的间距。

基本用法

0px x 0px

base.vue

tsconfig.json

Import Map

xxxxxxxxxx

13

 

1

<script setup lang="ts">

2

import { Space, Switch, Button } from '@kousum/semi-ui-vue';

3

</script>

4

​

5

<template>

6

  <Space>

7

    <Switch :defaultChecked="true" />

8

    <Button type="secondary">次要</Button>

9

    <Button type="tertiary">第三</Button>

10

    <Button type="warning">警告</Button>

11

  </Space>

12

</template>

13

​

Show Error

Auto Save

对齐方式

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

0px x 0px

alignDemo.vue

tsconfig.json

Import Map

xxxxxxxxxx

41

 

1

<template>

2

  <Space vertical>

3

    <Space align='start'>

4

      <div :style="divStyle">文本</div>

5

      <Button theme='solid' type='primary'>按钮</Button>

6

      <Tag color='green' size='large'>标签</Tag>

7

    </Space>

8

    <Space align='center'>

9

      <div :style="divStyle">文本</div>

10

      <Button theme='solid' type='primary'>按钮</Button>

11

      <Tag color='green' size='large'>标签</Tag>

12

    </Space>

13

    <Space align='end'>

14

      <div :style="divStyle">文本</div>

15

      <Button theme='solid' type='primary'>按钮</Button>

16

      <Tag color='green' size='large'>标签</Tag>

17

    </Space>

18

    <Space align='baseline'>

19

      <div :style="divStyle">文本</div>

20

      <Button theme='solid' type='primary'>按钮</Button>

21

      <Tag color='green' size='large'>标签</Tag>

22

    </Space>

23

  </Space>

24

</template>

25

​

26

<script setup>

27

import { ref } from 'vue';

28

import { Space, Button, Tag } from '@kousum/semi-ui-vue';

29

​

Show Error

Auto Save

间距尺寸

可使用 spacing 设置间距大小，内置可选值：tight（8px，默认）、medium（16px）、loose（24px），并且支持传入 number 来自定义间距大小，也支持传入 array 来同时设置水平和垂直方向的间距。

0px x 0px

spacingDemo.vue

tsconfig.json

Import Map

xxxxxxxxxx

47

 

1

<template>

2

  <Tabs type="line">

3

    <TabPane tab="tight" itemKey="1">

4

      <Space :spacing="'tight'" style="margin-top: 15px">

5

        <Button theme='solid' type='primary'>按钮</Button>

6

        <Button theme='solid' type='primary'>按钮</Button>

7

        <Button theme='solid' type='primary'>按钮</Button>

8

        <Button theme='solid' type='primary'>按钮</Button>

9

      </Space>

10

    </TabPane>

11

    <TabPane tab="medium" itemKey="2">

12

      <Space :spacing="'medium'" style="margin-top: 15px">

13

        <Button theme='solid' type='primary'>按钮</Button>

14

        <Button theme='solid' type='primary'>按钮</Button>

15

        <Button theme='solid' type='primary'>按钮</Button>

16

        <Button theme='solid' type='primary'>按钮</Button>

17

      </Space>

18

    </TabPane>

19

    <TabPane tab="loose" itemKey="3">

20

      <Space :spacing="'loose'" style="margin-top: 15px">

21

        <Button theme='solid' type='primary'>按钮</Button>

22

        <Button theme='solid' type='primary'>按钮</Button>

23

        <Button theme='solid' type='primary'>按钮</Button>

24

        <Button theme='solid' type='primary'>按钮</Button>

Show Error

Auto Save

间距方向

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

0px x 0px

verticalDemo.vue

tsconfig.json

Import Map

xxxxxxxxxx

13

 

1

<template>

2

  <Space vertical>

3

    <Button theme='solid' type='primary'>按钮</Button>

4

    <Button theme='solid' type='primary'>按钮</Button>

5

    <Button theme='solid' type='primary'>按钮</Button>

6

    <Button theme='solid' type='primary'>按钮</Button>

7

  </Space>

8

</template>

9

<script setup lang="ts">

10

import { Space, Button } from '@kousum/semi-ui-vue';

11

</script>

12

​

13

​

Show Error

Auto Save

设置换行

当间距为水平方向时，可使用 wrap 设置是否自动换行，默认情况下为 false。

0px x 0px

wrapDemo.vue

tsconfig.json

Import Map

xxxxxxxxxx

17

 

1

<template>

2

  <Space wrap>

3

    <Button

4

      v-for="(item, index) in new Array(10).fill(null)"

5

      :key="index"

6

      theme="solid"

7

      type="secondary"

8

    >

9

      按钮

10

    </Button>

11

  </Space>

12

</template>

13

​

14

<script setup>

15

import { Space, Button } from '@kousum/semi-ui-vue';

16

</script>

17

​

Show Error

Auto Save

API参考

属性	说明	类型	默认值	版本
align	对齐方式, 支持 start、end、center、baseline	string	center	>=1.17.0
className	样式类名	string	-	>=1.17.0
spacing	间距尺寸, 支持 loose、medium、tight 或 number、array	string|number|array	tight	>=1.17.0
style	内联样式	CSSProperties	-	>=1.17.0
vertical	是否为垂直间距	boolean	false	>=1.17.0
wrap	是否自动换行	boolean	false	>=1.17.0

设计变量

spacing

变量	默认值	用法
$spacing-space-tight	$spacing-tight	默认间距尺寸
$spacing-space-medium	$spacing-base	中等间距尺寸
$spacing-space-loose	$spacing-loose	宽松间距尺寸

显示第 1 条-第 3 条，共 3 条

• 1