Space 间距

为子组件提供统一间距的布局容器，基于原生 CSS gap 实现。纯布局容器（role="presentation"），不参与无障碍树。

基础用法

水平间距

<script setup lang="ts">
</script>

<template>
  <LhSpace>
    <LhButton>按钮一</LhButton>
    <LhButton>按钮二</LhButton>
    <LhButton>按钮三</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace>
    <LhButton>按钮一</LhButton>
    <LhButton>按钮二</LhButton>
    <LhButton>按钮三</LhButton>
  </LhSpace>
</template>

垂直间距

垂直间距

<script setup lang="ts">
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>按钮一</LhButton>
    <LhButton>按钮二</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>按钮一</LhButton>
    <LhButton>按钮二</LhButton>
  </LhSpace>
</template>

间距尺寸

预设三档映射 --lh-spacing-* 主题 token；也支持像素数字或 [水平, 垂直] 数组。

间距尺寸

<script setup lang="ts">
</script>

<template>
  <!-- small 预设档位 -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- medium 预设档位 -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- large 预设档位 -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- 自定义像素 8 -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- small 预设档位 -->
  <LhSpace size="small">
    <LhButton>small</LhButton>
    <LhButton>small</LhButton>
  </LhSpace>
  <!-- medium 预设档位 -->
  <LhSpace size="medium">
    <LhButton>medium</LhButton>
    <LhButton>medium</LhButton>
  </LhSpace>
  <!-- large 预设档位 -->
  <LhSpace size="large">
    <LhButton>large</LhButton>
    <LhButton>large</LhButton>
  </LhSpace>
  <!-- 自定义像素 8 -->
  <LhSpace :size="8">
    <LhButton>8px</LhButton>
    <LhButton>8px</LhButton>
  </LhSpace>
</template>

换行与对齐

换行

标签 1标签 2标签 3标签 4标签 5标签 6标签 7标签 8标签 9标签 10标签 11标签 12

alignment 控制子项的对齐方式，默认居中，可切换为起始或末尾对齐。

对齐方式

较高内容

较高内容

<script setup lang="ts">
</script>

<template>
  <!-- 允许换行 -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">标签 {{ n }}</LhTag>
  </LhSpace>
  <!-- start 对齐 -->
  <LhSpace alignment="start">
    <LhButton>start 对齐</LhButton>
    <span style="height: 48px; line-height: 48px">较高内容</span>
  </LhSpace>
  <!-- end 对齐 -->
  <LhSpace alignment="end">
    <LhButton>end 对齐</LhButton>
    <span style="height: 48px; line-height: 48px">较高内容</span>
  </LhSpace>
</template>

<script>
export default {}
</script>

<template>
  <!-- 允许换行 -->
  <LhSpace wrap>
    <LhTag v-for="n in 12" :key="n">标签 {{ n }}</LhTag>
  </LhSpace>
  <!-- start 对齐 -->
  <LhSpace alignment="start">
    <LhButton>start 对齐</LhButton>
    <span style="height: 48px; line-height: 48px">较高内容</span>
  </LhSpace>
  <!-- end 对齐 -->
  <LhSpace alignment="end">
    <LhButton>end 对齐</LhButton>
    <span style="height: 48px; line-height: 48px">较高内容</span>
  </LhSpace>
</template>

Space API

Props

属性	说明	类型	默认值
direction	排列方向	"horizontal" | "vertical"	'horizontal'
size	间距：预设档位 / 像素数字 / [水平, 垂直]	number | "small" | "medium" | "large" | [number, number]	'medium'
wrap	是否允许换行（仅水平方向）	boolean	true
alignment	对齐方式	"start" | "center" | "end" | "baseline"	'start'
sx	快速布局属性（如 { mt: 2 }），合并到内联样式且优先级高于 alignment	LhSxProps	—

无障碍

• 容器为 role="presentation" 的纯布局元素，不拦截焦点
• 间距基于原生 CSS gap，无 DOM 包裹子元素

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/space/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhSpaceProps

export interface LhSpaceProps {
  /** 排列方向 */
  direction?: 'horizontal' | 'vertical'
  /** 间距：预设档位 / 像素数字 / [水平, 垂直] */
  size?: LhSpaceSizeInput
  /** 是否允许换行（仅水平方向） */
  wrap?: boolean
  /** 对齐方式 */
  alignment?: LhSpaceAlignment
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhSpaceSizeInput _{（来自 @lh-ui/share/core/space）}

/**
 * 归一化间距：预设档位映射 spacing token，数字视为 px
 */
export type LhSpaceSizeInput = 'small' | 'medium' | 'large' | number | [number, number]

LhSpaceAlignment _{（来自 @lh-ui/share/core/space）}

/** 间距对齐方式 */
export type LhSpaceAlignment = 'start' | 'center' | 'end' | 'baseline'