间隔 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
属性设置间隔大小,支持 small
、medium
、large
,也可以自定义数值或对象。
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
属性设置排列方向,支持 horizontal
和 vertical
。
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 |
wrap | boolean | 是 | true | 是否自动换行。 | 0.0.0-beta |
inline | boolean | 是 | false | 是否为行内布局。 | 0.0.0-beta |
SpaceSlots
插槽 | 参数 | 描述 | 版本 |
---|---|---|---|
default |
| Space 的内容。 | 0.0.0-beta |