X-Next

Appearance

Space 间距 ​

用于在行内或纵向排列的一组元素之间设置统一间距。

基础用法 ​

vue
<template>
  <x-space size="medium">
    <x-button>取消</x-button>
    <x-button type="primary">确定</x-button>
    <x-button status="danger">删除</x-button>
  </x-space>
</template>

垂直间距 ​

vue
<template>
  <x-space direction="vertical" size="medium">
    <x-alert type="info">第一条提示</x-alert>
    <x-alert type="success">第二条提示</x-alert>
    <x-alert type="warning">第三条提示</x-alert>
  </x-space>
</template>

间距尺寸 ​

mini
mini
mini
small
small
small
medium
medium
medium
24px
24px
24px
vue
<template>
  <x-space size="mini">
    <x-tag>mini</x-tag>
    <x-tag>mini</x-tag>
    <x-tag>mini</x-tag>
  </x-space>
  <x-space size="medium">
    <x-tag>medium</x-tag>
    <x-tag>medium</x-tag>
    <x-tag>medium</x-tag>
  </x-space>
  <x-space :size="24">
    <x-tag>24px</x-tag>
    <x-tag>24px</x-tag>
    <x-tag>24px</x-tag>
  </x-space>
</template>

对齐方式 ​

Large Tag
小字号文本
Large Tag
小字号文本
vue
<template>
  <x-space align="start">
    <x-button>顶部对齐</x-button>
    <x-tag size="large">Large Tag</x-tag>
    <span style="font-size: 12px">小字号文本</span>
  </x-space>
  <x-space align="baseline">
    <x-button>基线对齐</x-button>
    <x-tag size="large">Large Tag</x-tag>
    <span style="font-size: 12px">小字号文本</span>
  </x-space>
</template>

撑满宽度 ​

vue
<template>
  <x-space block align="space-between" style="width: 100%">
    <x-button>上一页</x-button>
    <x-button type="primary">下一页</x-button>
  </x-space>
  <x-space fill direction="vertical" size="medium">
    <x-input placeholder="第一行撑满" />
    <x-input placeholder="第二行撑满" />
  </x-space>
</template>

分隔符 ​

首页
/
组件
/
Space
vue
<template>
  <x-space>
    <template #split>
      <span>/</span>
    </template>
    <x-link>首页</x-link>
    <x-link>组件</x-link>
    <x-link>Space</x-link>
  </x-space>
</template>

按需导入 ​

ts
import { Space } from 'x-next';

Props ​

参数说明类型默认值
direction排列方向'horizontal' | 'vertical''horizontal'
size间距大小number | 'mini' | 'small' | 'medium' | 'large''small'
align对齐方式。space-between 用于主轴两端分布，通常配合 block 或宽度使用'start' | 'end' | 'center' | 'baseline' | 'space-between''center'
block是否让根节点以 flex 撑满父容器布局booleanfalse
fill是否撑满父容器并让每个间距项等分可用空间booleanfalse

Slots ​

插槽名说明
default间距项
split分隔内容