Naive UI Space Component

A great invention for adding consistent spacing between elements. If you don't have compatibility issues for gap CSS property, it's suggested to use Flex (n-flex).

When to Use

Use this component when:

• Component spacing: Add consistent gaps between buttons, inputs, etc.
• Layout spacing: Create vertical or horizontal spacing
• Flexible layouts: Layout with wrapping support
• Legacy browser support: When CSS gap is not available

When to Invoke

Invoke this skill when:

• User needs to add spacing between elements
• User wants to create a horizontal or vertical layout with gaps
• User needs to reverse element order
• User wants to control alignment and justification
• User asks about spacing between components

Features

• Flexible Spacing: Small, medium, large, or custom number
• Direction Control: Horizontal or vertical layout
• Wrap Support: Automatic line wrapping
• Justify Options: start, end, center, space-between, space-around, space-evenly
• Align Options: start, end, center, baseline, stretch
• Reverse Order: Reverse element order
• Inline Mode: Display as inline element
• Item Wrapping: Optional item wrapper control

API Reference

Space Props

Name	Type	Default	Description
align	'start' | 'end' | 'center' | 'baseline' | 'stretch'	undefined	Vertical arrangement.
inline	boolean	false	Is it an inline element.
wrap-item	boolean	true	Whether a container exists to wrap the child elements.
item-class	string	undefined	Node class, valid when wrap-item is true.
item-style	string | object	undefined	Node style, valid when wrap-item is true.
justify	'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'	'start'	Horizontal arrangement.
reverse	boolean	false	Whether to reverse inner items.
size	'small' | 'medium' | 'large' | number | [number, number]	'medium'	Gap size.
vertical	boolean	false	Whether to lay out vertically.
wrap	boolean	true	Whether to exceed the line break.

Space Slots

Name	Parameters	Description
default	()	Spacing content.

Basic Usage

Basic Space

<template>
  <n-space>
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
    <n-button>Long! Long! Cross the line!</n-button>
  </n-space>
</template>

Vertical Layout

<template>
  <n-space vertical>
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
  </n-space>
</template>

Justify End

<template>
  <n-space justify="end">
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
  </n-space>
</template>

Space Between

<template>
  <n-space justify="space-between">
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
  </n-space>
</template>

Space Around

<template>
  <n-space justify="space-around" size="large">
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
  </n-space>
</template>

Center Content

<template>
  <n-space justify="center">
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
    <n-button>Oops!</n-button>
  </n-space>
</template>

Reverse Order

<template>
  <n-space reverse>
    <n-button>1</n-button>
    <n-button>2</n-button>
    <n-button>3</n-button>
  </n-space>
</template>

Common Patterns

Custom Gap Size

<template>
  <n-space :size="24">
    <n-button>Button 1</n-button>
    <n-button>Button 2</n-button>
    <n-button>Button 3</n-button>
  </n-space>
</template>

Different Horizontal and Vertical Gap

<template>
  <n-space :size="[16, 8]" wrap>
    <n-button v-for="i in 10" :key="i">Button {{ i }}</n-button>
  </n-space>
</template>

Align Items

<template>
  <n-space align="center">
    <n-button>Small</n-button>
    <n-button size="large">Large Button</n-button>
    <n-button>Tiny</n-button>
  </n-space>
</template>

No Wrap

<template>
  <n-space :wrap="false" style="overflow-x: auto">
    <n-button v-for="i in 20" :key="i">Button {{ i }}</n-button>
  </n-space>
</template>

With Item Style

<template>
  <n-space item-style="background: rgba(0, 128, 0, 0.1); padding: 8px;">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </n-space>
</template>

Form Actions

<template>
  <n-space justify="end">
    <n-button>Cancel</n-button>
    <n-button type="primary">Submit</n-button>
  </n-space>
</template>

Best Practices

1. Prefer n-flex: Use n-flex when possible as it uses native CSS gap property

2. Use semantic justify values: Choose appropriate justify values based on your layout needs

3. Size options: Use preset sizes for consistency, custom numbers for precise control

4. Vertical layouts: Use vertical prop for stacked layouts

5. Form actions: Use justify="end" for right-aligned form actions

6. Reverse for RTL: Use reverse prop for RTL layouts or reversed order