JView UI间距组件，用于快速拉开组件间的间距，缓解你的布局焦虑。
基本用法
默认提供8px的间距，你无需做太多考虑即可上手使用。
展开查看代码
vue
<template>
<j-space>
<j-button>Item</j-button>
<j-button>Item</j-button>
<j-button>Item</j-button>
<j-button>Item</j-button>
</j-space>
</template><template>
<j-space>
<j-button>Item</j-button>
<j-button>Item</j-button>
<j-button>Item</j-button>
<j-button>Item</j-button>
</j-space>
</template>垂直方向
设置属性direction值为column，完成垂直方向的布局，并设置合适的间距。
展开查看代码
vue
<template>
<j-space direction="column" :gap="16">
<j-button>Item</j-button>
<j-button>Item</j-button>
<j-button>Item</j-button>
<j-button>Item</j-button>
</j-space>
</template><template>
<j-space direction="column" :gap="16">
<j-button>Item</j-button>
<j-button>Item</j-button>
<j-button>Item</j-button>
<j-button>Item</j-button>
</j-space>
</template>对齐设置
调整属性align可以设置交叉轴线上的对齐方式。
默认效果：
center：
flex-end：
展开查看代码
vue
<template>
<p>默认效果：</p>
<j-space>
<j-button size="small">Item</j-button>
<j-button>Item</j-button>
<j-button size="large">Item</j-button>
</j-space>
<p>center：</p>
<j-space align="center">
<j-button size="small">Item</j-button>
<j-button>Item</j-button>
<j-button size="large">Item</j-button>
</j-space>
<p>flex-end：</p>
<j-space align="flex-end">
<j-button size="small">Item</j-button>
<j-button>Item</j-button>
<j-button size="large">Item</j-button>
</j-space>
</template><template>
<p>默认效果：</p>
<j-space>
<j-button size="small">Item</j-button>
<j-button>Item</j-button>
<j-button size="large">Item</j-button>
</j-space>
<p>center：</p>
<j-space align="center">
<j-button size="small">Item</j-button>
<j-button>Item</j-button>
<j-button size="large">Item</j-button>
</j-space>
<p>flex-end：</p>
<j-space align="flex-end">
<j-button size="small">Item</j-button>
<j-button>Item</j-button>
<j-button size="large">Item</j-button>
</j-space>
</template>自定义分隔符
通过属性或插槽split配置分隔符。
用插槽配置split
用属性配置split
展开查看代码
tsx
import { defineComponent } from 'vue'
import { Space, Button } from 'jview-ui'
import { HolderOutlined } from '@jview/icons-antd'
export default defineComponent({
setup() {
return () => {
return (
<>
<p>
用插槽配置<code>split</code>
</p>
<Space
align="center"
v-slots={{
split: () => <HolderOutlined />,
}}
>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</Space>
<p>
用属性配置<code>split</code>
</p>
<Space align="center" split={<HolderOutlined />}>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</Space>
</>
)
}
},
})import { defineComponent } from 'vue'
import { Space, Button } from 'jview-ui'
import { HolderOutlined } from '@jview/icons-antd'
export default defineComponent({
setup() {
return () => {
return (
<>
<p>
用插槽配置<code>split</code>
</p>
<Space
align="center"
v-slots={{
split: () => <HolderOutlined />,
}}
>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</Space>
<p>
用属性配置<code>split</code>
</p>
<Space align="center" split={<HolderOutlined />}>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
</Space>
</>
)
}
},
})属性
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| gap | 间距大小 | string | number | '8px' | 否 |
| direction | 间距方向，参考flex-direction | "row" | "column" | 'row' | 否 |
| align | 对齐方式，参考flex布局的align-items | AlignItems | 无 | 否 |
| wrap | 是否自动换行，仅在direction为row时有效 | boolean | 无 | 否 |
| split | 分隔符，模板中支持插槽，JSX中同时支持属性或插槽 | VNode | 无 | 否 |