Space 间距

设置组件之间的间距

代码演示

基本使用

基本使用

收起源代码

import React from 'react'
import { Button, Space } from '@dance-ui/ui'

export default () => (
  <Space justify="center" direction="vertical" align="center">
    <Space gap="large" bgColor="red">
      <Button>1</Button>
      <Button>2</Button>
      <Button>3</Button>
      <Button>4</Button>
    </Space>
    <Space gap="middle" bgColor="blue">
      <Button>1</Button>
      <Button>2</Button>
      <Button>3</Button>
      <Button>4</Button>
    </Space>
    <Space direction="vertical" bgColor="yellow">
      <Button>1</Button>
      <Button>2</Button>
      <Button>3</Button>
      <Button>4</Button>
    </Space>
  </Space>
)

API

属性名	描述	类型	默认值
direction	水平/垂直排列	`"horizontal"	"vertical"`	horizontal
justify	主轴对齐方式 justify-content	`"start"	"center"	"end"	"between"	"around"`	start
align	交叉轴对齐方式 align-items	`"start"	"center"	"end"	"baseline"	"stretch"`	stretch
gap	间距大小 gap，有 3 预设可选，也可自行选择 px 值	`number	"small"	"middle"	"large"`	middle
className	组件额外的 CSS className	string	--
style	组件额外的 CSS style	CSSProperties	--

组件源码

组件源码

import { CSSProperties, ReactNode } from 'react'
import classNames from 'classnames'
import styled from 'styled-components'

export type SpaceProps = {
  /**
   * 水平/垂直排列
   * @default horizontal
   */
  direction?: 'horizontal' | 'vertical'
  /**
   * 主轴对齐方式 justify-content
   * @default start
   */
  justify?: 'start' | 'center' | 'end' | 'between' | 'around'
  /**
   * 交叉轴对齐方式 align-items
   * @default stretch
   */
  align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch'
  /**
   * 间距大小 gap
   * 有 3 预设可选，也可自行选择px值
   * @default middle
   */
  gap?: number | 'small' | 'middle' | 'large'
  /** 背景色 */
  bgColor?: string
  /** 组件额外的 CSS className */
  className?: string
  /** 组件额外的 CSS style */
  style?: CSSProperties
  /** 子组件 */
  children?: ReactNode
}

type SpaceStyledProps = {
  gap?: number
  bgColor?: string
}
const SpaceWrapper = styled.div`
  gap: ${({ gap }: SpaceStyledProps) => (gap ? `${gap}px` : undefined)};
  background-color: ${({ bgColor }: SpaceStyledProps) => bgColor};
`
const gapClass = {
  small: 'gap-1',
  middle: 'gap-3',
  large: 'gap-5',
}
const justifyClass = {
  start: 'justify-start',
  center: 'justify-center',
  end: 'justify-end',
  between: 'justify-between',
  around: 'justify-around',
}
const alignClass = {
  start: 'items-start',
  center: 'items-center',
  end: 'items-end',
  baseline: 'items-baseline',
  stretch: 'items-stretch',
}

const Space = ({ gap, direction, justify, align, bgColor, className, style, children }: SpaceProps): JSX.Element => {
  return (
    <SpaceWrapper
      className={classNames(
        'flex flex-wrap items-center',
        { 'flex-col': direction === 'vertical' },
        justifyClass[justify ?? 'start'],
        alignClass[align ?? 'stretch'],
        typeof gap !== 'number' ? gapClass[gap ?? 'middle'] : null,
        className,
      )}
      gap={typeof gap === 'number' ? gap : undefined}
      bgColor={bgColor}
      style={style}>
      {children}
    </SpaceWrapper>
  )
}
Space.defaultProps = {}

export default Space