间距 Space

设置组件之间的间距

基本用法

间距组件的基本用法。

---

代码事例

<template>
  <fk-space>
    <fk-typography-text>Space:</fk-typography-text>
    <fk-tag v-if="false" color='fkblue'>Tag</fk-tag>
    <fk-button type="primary">Item1</fk-button>
    <fk-button type="primary">Item2</fk-button>
    <fk-switch default-checked />
  </fk-space>
</template>

垂直间距

可以设置垂直方向排列的间距。

---

代码事例

<template>
  <fk-space direction="vertical" fill>
    <fk-button type="primary" long>Item1</fk-button>
    <fk-button type="primary" long>Item2</fk-button>
    <fk-button type="primary" long>Item3</fk-button>
  </fk-space>
</template>

尺寸

内置 4 个尺寸，mini - 4px small - 8px (默认) medium - 16px large - 24px，也支持传数字来自定义尺寸。

---

代码事例

<template>
  <div>
    <div style="marginBottom: 20px">
      <fk-radio-group v-model="size" type='button'>
        <fk-radio value="mini">mini</fk-radio>
        <fk-radio value="small">small</fk-radio>
        <fk-radio value="medium">medium</fk-radio>
        <fk-radio value="large">large</fk-radio>
      </fk-radio-group>
    </div>
    <fk-space :size="size">
      <fk-button type="primary">Item1</fk-button>
      <fk-button type="primary">Item2</fk-button>
      <fk-button type="primary">Item3</fk-button>
    </fk-space>
  </div>
</template>
<script>
export default {
  data() {
    return {
      size: 'medium',
    }
  }
};
</script>

对齐

内置 4 种对齐方式，分别为 start center end baseline，在水平模式下默认为 center。

---

代码事例

<template>
  <div>
    <div style="marginBottom: 20px">
      <fk-radio-group v-model="align" type='button'>
        <fk-radio value="start">start</fk-radio>
        <fk-radio value="center">center</fk-radio>
        <fk-radio value="end">end</fk-radio>
        <fk-radio value="baseline">baseline</fk-radio>
      </fk-radio-group>
    </div>
    <fk-space :align="align" style="backgroundColor: var(--color-fill-2);padding: 10px;">
      <fk-typography-text>Space:</fk-typography-text>
      <fk-button type="primary">Item2</fk-button>
      <fk-card title='Card'>
        Card content
      </fk-card>
    </fk-space>
  </div>
</template>
<script>
export default {
  data() {
    return {
      align: 'center',
    }
  }
};
</script>

环绕间距

环绕类型的间距，四周都有间距，一般用于换行的场景。

---

代码事例

<template>
  <fk-space wrap>
    <fk-button type="primary">Item1</fk-button>
    <fk-button type="primary">Item2</fk-button>
    <fk-button type="primary">Item3</fk-button>
    <fk-button type="primary">Item4</fk-button>
    <fk-button type="primary">Item5</fk-button>
    <fk-button type="primary">Item6</fk-button>
    <fk-button type="primary">Item7</fk-button>
    <fk-button type="primary">Item8</fk-button>
    <fk-button type="primary">Item9</fk-button>
    <fk-button type="primary">Item10</fk-button>
    <fk-button type="primary">Item11</fk-button>
    <fk-button type="primary">Item12</fk-button>
    <fk-button type="primary">Item13</fk-button>
    <fk-button type="primary">Item14</fk-button>
    <fk-button type="primary">Item15</fk-button>
    <fk-button type="primary">Item16</fk-button>
    <fk-button type="primary">Item17</fk-button>
    <fk-button type="primary">Item18</fk-button>
    <fk-button type="primary">Item19</fk-button>
    <fk-button type="primary">Item20</fk-button>
  </fk-space>
</template>

分隔符

为相邻子元素设置分隔符。

---

代码事例

<template>
  <fk-space>
    <template #split>
      <fk-divider direction="vertical" />
    </template>
    <fk-tag v-if="false" color='fkblue'>Tag</fk-tag>
    <fk-button type="primary">Item1</fk-button>
    <fk-button type="primary">Item2</fk-button>
    <fk-switch default-checked />
  </fk-space>
</template>

API

<space> Props

参数名	描述	类型	默认值	版本
align	对齐方式	'start' | 'end' | 'center' | 'baseline'	-
direction	间距方向	'vertical' | 'horizontal'	'horizontal'
size	间距大小，支持分别制定横向和竖向的间距	number | 'mini' | 'small' | 'medium' | 'large' | [SpaceSize, SpaceSize]	'small'
wrap	环绕类型的间距，用于折行的场景。	boolean	false
fill	充满整行	boolean	false	1.0.0

<space> Slots

插槽名	描述	参数
split	设置分隔符	-

Type

type SpaceSize = number | 'mini' | 'small' | 'medium' | 'large';