UISpace

UISpace

A utility component that provides consistent spacing between child elements in horizontal or vertical layouts. Helps maintain uniform spacing in component arrangements without additional wrapper elements or manual margin/padding adjustments.

<template>
  <UISpace
    :size="16"
    :vertical="false"
    :wrap="true"
    justify="start"
    align="center"
  >
    <UIButton type="primary">Submit</UIButton>
    <UIButton>Cancel</UIButton>
    <UIButton type="text">Reset</UIButton>
  </UISpace>
</template>

Props

• size (number | ‘small’ | ‘medium’ | ‘large’ | [number, number]): Space size between items
• vertical (boolean): Arrange items vertically
• wrap (boolean): Allow line wrapping
• justify (‘start’ | ‘end’ | ‘center’ | ‘space-around’ | ‘space-between’): Horizontal alignment
• align (‘start’ | ‘end’ | ‘center’ | ‘baseline’ | ‘stretch’): Vertical alignment
• itemStyle (object): Custom style for each item

Slots

• default: Content to be spaced

Usage Examples

1. Basic Horizontal Spacing:

<template>
  <UISpace>
    <UIButton>Button 1</UIButton>
    <UIButton>Button 2</UIButton>
    <UIButton>Button 3</UIButton>
  </UISpace>
</template>

2. Vertical Spacing:

<template>
  <UISpace vertical>
    <UIInput placeholder="Name" />
    <UIInput placeholder="Email" />
    <UIInput placeholder="Phone" />
  </UISpace>
</template>

3. Custom Spacing Size:

<template>
  <UISpace :size="24">
    <UICard>Card 1</UICard>
    <UICard>Card 2</UICard>
    <UICard>Card 3</UICard>
  </UISpace>
</template>

4. Different Horizontal and Vertical Spacing:

<template>
  <UISpace :size="[16, 32]" wrap>
    <UIButton>Action 1</UIButton>
    <UIButton>Action 2</UIButton>
    <UIButton>Action 3</UIButton>
    <UIButton>Action 4</UIButton>
    <UIButton>Action 5</UIButton>
  </UISpace>
</template>

5. Space Between Justification:

<template>
  <UISpace justify="space-between">
    <div>Left content</div>
    <div>Center content</div>
    <div>Right content</div>
  </UISpace>
</template>

Best Practices

1. Layout Consistency:

   • Use consistent spacing sizes
   • Consider responsive behavior
   • Choose appropriate justification
   • Maintain visual rhythm

2. Nested Layouts:

   • Combine vertical and horizontal spacing
   • Use wrap for responsive layouts
   • Consider alignment with parent containers
   • Handle nested spacing carefully

3. Performance:

   • Avoid excessive nesting
   • Use efficient styling methods
   • Consider DOM complexity
   • Use appropriate sizing units

4. Responsive Design:

   • Adjust spacing for different screens
   • Use wrap for flexible layouts
   • Consider vertical stacking on small screens
   • Test spacing across device sizes