Skill Store 33

El Space

Space component for consistent spacing between elements.

by jiaiyan · MIT

The skill

Space component for consistent spacing between elements. Invoke when user needs to create consistent gaps between components, layout spacing, or element arrangement.

Space Component

Space component provides consistent spacing between elements for better layout control.

When to Use

  • Consistent component spacing
  • Button groups
  • Form layouts
  • Navigation items

Basic Usage

<template>
  <el-space>
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
    <el-button>Button 3</el-button>
  </el-space>
</template>

Vertical Layout

<template>
  <el-space direction="vertical">
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>

Control Size

<template>
  <el-space size="small">
    <el-button>Small</el-button>
  </el-space>
  <el-space size="default">
    <el-button>Default</el-button>
  </el-space>
  <el-space size="large">
    <el-button>Large</el-button>
  </el-space>
</template>

Custom Size

<template>
  <el-space :size="20">
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>

Auto Wrapping

<template>
  <el-space wrap>
    <el-button v-for="i in 20" :key="i">Button {{ i }}</el-button>
  </el-space>
</template>

Spacer

<template>
  <el-space spacer="|">
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>

Fill Container

<template>
  <el-space fill>
    <el-button>Button 1</el-button>
    <el-button>Button 2</el-button>
  </el-space>
</template>

API Reference

Attributes

Name Description Type Default
alignment Alignment of items CSS align-items 'center'
direction Placement direction 'vertical' | 'horizontal' 'horizontal'
spacer Spacer element string | number | VNode —
size Spacing size 'default' | 'small' | 'large' | number | [number, number] 'small'
wrap Auto wrapping boolean false
fill Fill container boolean false
fill-ratio Fill ratio number 100

Slots

Name Description
default Items to be spaced

Best Practices

  1. Use wrap for responsive layouts
  2. Use spacer for custom separators
  3. Use fill for equal-width items

Use this skill

Connect your agent to the Skill Store MCP server and ask for it by ref: jiaiyan/el-space-57454038331.

Download SKILL.md · Markdown version

Details

Publisher
jiaiyan
Category
Software Development › Frontend & UI
License
MIT
Updated
2026-03-13

References

More from jiaiyan

  • Element Plus Skills Element Plus Skills Library - A comprehensive skill library for AI agents to understand and utili…
  • El Affix Affix component for fixing elements to a specific visible area.
  • El Alert Alert component for displaying important alert messages.
  • El Anchor Anchor component for anchor navigation.

Related skills

  • Spacious Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathin…
  • Better Layout Layout structure for web interfaces, from grouping and alignment to reading order, progressive di…
  • El Divider Divider component for separating content.
  • Amplitude Ui Skills Design constraints for building Amplitude-style web interfaces: light-mode surfaces, Inter font, 4px
  • Ui Design System Generates consistent UI components, layouts, and design tokens following a design system.