Chi-UI

Appearance

Space 间距 ​

代码示例 ​

基础用法 ​

最简单的用法。

<template>
  <chi-space>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
  </chi-space>
</template>

纵向排列 ​

添加 vertical 属性可以实现纵向排列。

<template>
  <chi-space vertical>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
  </chi-space>
</template>

不同大小 ​

内置了三种大小，通过 size 设置，也可以传入数字或者数组自定义。

Small:


Default:


Large:


Custom:


Custom:
<template>
  <span style="margin-inline-end: 10px">Small:</span>
  <chi-space size="small" inline style="max-width: 150px">
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
  </chi-space>
  <br />
  <br />
  <span style="margin-inline-end: 10px">Default:</span>
  <chi-space size="default" inline style="max-width: 160px">
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
  </chi-space>
  <br />
  <br />
  <span style="margin-inline-end: 10px">Large:</span>
  <chi-space size="large" inline style="max-width: 180px">
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button></chi-space
  >
  <br />
  <br />
  <span style="margin-inline-end: 10px">Custom:</span>
  <chi-space :size="[20, 16]" inline style="max-width: 180px">
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button></chi-space
  >
  <br />
  <br />
  <span style="margin-inline-end: 10px">Custom:</span>
  <chi-space :size="24" inline style="max-width: 180px">
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button>
    <chi-button>按钮</chi-button></chi-space
  >
</template>

各种布局 ​

通过 justify 可以设置主轴的对齐方式，还可以通过 align 设置交叉轴的对齐方式。

Start

End

Space Around

Space Between

Space Evenly

<template>
  <div style="max-width: 800px; padding: 20px">
    <p>Start</p>
    <chi-space justify="start">
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
    </chi-space>
    <p>End</p>
    <chi-space justify="end">
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
    </chi-space>
    <p>Space Around</p>
    <chi-space justify="space-around">
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
    </chi-space>
    <p>Space Between</p>
    <chi-space justify="space-between">
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
    </chi-space>
    <p>Space Evenly</p>
    <chi-space justify="space-evenly">
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
      <chi-button>按钮</chi-button>
    </chi-space>
  </div>
</template>

API ​

预设类型 ​

ts
type SpaceAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch'
type SpaceJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'
type SpaceSize = 'small' | 'default' | 'large' | number | [number, number]

Linker 属性 ​

名称类型说明默认值
alignSpaceAlign设置交叉轴的对齐方式'stretch'
inlineboolean设置是否为行内布局false
justifySpaceJustify设置主轴的对齐方式start
no-wrapboolean设置是否不换行false
sizeSpaceSize设置间距的大小'default'
verticalboolean设置主轴是否纵向false