• Vant React

Space 间距

介绍

设置组件之间的间距。

引入

import { Button, Space } from "@taroify/core"
// or
import Space from "@taroify/core/space"

代码演示

基础用法

<Space>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

垂直

<Space direction="vertical">
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

间隙

<Space size="large">
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

居中

<Space justify="center">
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

不换行

<Space wrap="nowrap">
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>

API

Props

参数 说明 类型 默认值
direction 垂直排列方式 可选值 horizontal vertical string horizontal
size 间距，可选值为 mini small medium large string small
wrap 子元素的换行方式，可选值为 nowrap wrap wrap-reverse boolean wrap
justify 主轴对齐方式，可选值为 start end center space-around space-between string start
align 交叉轴对齐方式，可选值为 start center end baseline stretch string start

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
—space-item-gap-mini var(—padding-xs) -
—space-item-gap-small var(—padding-sm) -
—space-item-gap-medium var(—padding-md) -
—space-item-gap-large var(—padding-lg) -
—space-item-vertical-gap-mini var(—space-item-gap-mini) -
—space-item-vertical-gap-small var(—space-item-gap-small) -
—space-item-vertical-gap-medium var(—space-item-gap-medium) -
—space-item-vertical-gap-large var(—space-item-gap-large) -
—space-item-horizontal-gap-mini var(—space-item-gap-mini) -
—space-item-horizontal-gap-small var(—space-item-gap-small) -
—space-item-horizontal-gap-medium var(—space-item-gap-medium) -
—space-item-horizontal-gap-large var(—space-item-gap-large) -