Skip to content

间隔 Space

为多个排列在一起的元素添加间隔。

基础使用

让元素们不要贴在一起。

Submit this order?
<template>
	<px-space>
		Submit this order?
		<px-button>Confirm</px-button>
		<px-button theme="info">Cancel</px-button>
	</px-space>
</template>

间隔大小

通过 margin 属性设置间隔大小,支持 smallmediumlarge,也可以自定义数值或对象。

Small

Medium

Large

16px

x: 8px, y: 4px

<template>
	<h4>Small</h4>
	<px-space margin="small">
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>Medium</h4>
	<px-space>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>Large</h4>
	<px-space margin="large">
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>16px</h4>
	<px-space :margin="16">
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>x: 8px, y: 4px</h4>
	<px-space :margin="{ x: 8, y: 4 }" style="width: 320px">
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
</template>
<style lang="css" scoped>
.px-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
</style>

排列方向

通过 direction 属性设置排列方向,支持 horizontalvertical

Horizontal

Vertical

<template>
	<h4>Horizontal</h4>
	<px-space>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
		<px-button>Content</px-button>
	</px-space>
	<h4>Vertical</h4>
	<px-space direction="vertical">
		<px-button block>Content</px-button>
		<px-button block>Content</px-button>
		<px-button block>Content</px-button>
		<px-button block>Content</px-button>
	</px-space>
</template>
<style lang="css" scoped>
.px-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
</style>

主轴排列

Space 的 justify 属性设置主轴排列方式。

Flex Start

Content
Content
Content
Content

Flex End

Content
Content
Content
Content

Center

Content
Content
Content
Content

Space Between

Content
Content
Content
Content

Space Around

Content
Content
Content
Content

Space Evenly

Content
Content
Content
Content
<template>
	<h4>Flex Start</h4>
	<px-space justify="start">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Flex End</h4>
	<px-space justify="end">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Center</h4>
	<px-space justify="center">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Space Between</h4>
	<px-space justify="space-between">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Space Around</h4>
	<px-space justify="space-around">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Space Evenly</h4>
	<px-space justify="space-evenly">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
</template>
<style lang="css" scoped>
.item {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	padding: 8px;
}
.px-space {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-space:last-of-type {
	margin-bottom: 0px;
}
.px-space :deep(.px-space-item):nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-space :deep(.px-space-item):nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

交叉轴排列

Space 的 align 属性设置交叉轴排列方式。

Center

Content
Content
Content
Content

Flex Start

Content
Content
Content
Content

Flex End

Content
Content
Content
Content

Stretch

Content
Content
Content
Content
<template>
	<h4>Center</h4>
	<px-space align="center">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Flex Start</h4>
	<px-space align="start">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Flex End</h4>
	<px-space align="end">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
	<h4>Stretch</h4>
	<px-space align="stretch">
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
		<div class="item">Content</div>
	</px-space>
</template>
<style lang="css" scoped>
.item {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	padding: 8px;
}
.px-space {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-space:last-of-type {
	margin-bottom: 0px;
}
.px-space :deep(.px-space-item):nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-space :deep(.px-space-item):nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
	min-height: 64px;
}
</style>

API

SpaceProps

属性类型可选默认值描述版本
margin'small' | 'medium' | 'large' | number | { x?: number; y?: number }'medium'间隔大小,也可以是数值或对象。0.0.0-beta
direction'horizontal' | 'vertical''horizontal'间隔排列方向。0.0.0-beta
justify'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly''start'主轴排列方式,基于 CSS justify-content 属性。0.0.0-beta
align'start' | 'center' | 'end' | 'stretch'交叉轴排列方式,基于 CSS align-items 属性。direction'horizontal' 时默认为 'center',为 'vertical' 时默认为 'stretch'0.0.0-beta
wrapbooleantrue是否自动换行。0.0.0-beta
inlinebooleanfalse是否为行内布局。0.0.0-beta

SpaceSlots

插槽参数描述版本
defaultSpace 的内容。0.0.0-beta