Taroify

Space 间距

介绍

设置组件之间的间距。

引入

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

代码演示

基础用法

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

垂直

<Block title="垂直">
  <Space direction="vertical" fill>
    <Button color="primary" block>主要按钮</Button>
    <Button color="primary" block>主要按钮</Button>
    <Button color="primary" block>主要按钮</Button>
  </Space>
</Block>

间距

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

自定义间距

<Space size={16}>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>
<Space size={[16, 32]}>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
  <Button color="primary">主要按钮</Button>
</Space>
<Space size={[16]}>
  <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 \| number \| [number, number?]	`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`
fill	是否填充整个父元素	boolean	`false`

主题定制

样式变量

组件提供了下列 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)	-