Space 間距
為子元件提供統一間距的版面配置容器，基於原生 CSS gap 實現。純版面配置容器（role="presentation"），不參與無障礙樹。
基礎用法
水平間距
vue
<script setup lang="ts">
</script>
<template>
<LhSpace>
<LhButton>按钮一</LhButton>
<LhButton>按钮二</LhButton>
<LhButton>按钮三</LhButton>
</LhSpace>
</template>vue
<script>
export default {}
</script>
<template>
<LhSpace>
<LhButton>按钮一</LhButton>
<LhButton>按钮二</LhButton>
<LhButton>按钮三</LhButton>
</LhSpace>
</template>垂直間距
垂直間距
vue
<script setup lang="ts">
</script>
<template>
<LhSpace direction="vertical">
<LhButton>按钮一</LhButton>
<LhButton>按钮二</LhButton>
</LhSpace>
</template>vue
<script>
export default {}
</script>
<template>
<LhSpace direction="vertical">
<LhButton>按钮一</LhButton>
<LhButton>按钮二</LhButton>
</LhSpace>
</template>間距尺寸
預設三檔映射 --lh-spacing-* 主題 token；也支援像素數字或 [水平, 垂直] 陣列。
間距尺寸
vue
<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>vue
<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 控制子項的對齊方式，預設置中，可切換為起始或末尾對齊。
對齊方式
較高內容
較高內容
vue
<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>vue
<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
ts
export interface LhSpaceProps {
/** 排列方向 */
direction?: 'horizontal' | 'vertical'
/** 間距：預設檔位 / 像素數字 / [水平, 垂直] */
size?: LhSpaceSizeInput
/** 是否允許換行（僅水平方向） */
wrap?: boolean
/** 對齊方式 */
alignment?: LhSpaceAlignment
/** sx 快速版面配置屬性 */
sx?: LhSxProps
}LhSpaceSizeInput （來自 @lh-ui/share/core/space）
ts
/**
* 歸一化間距：預設檔位映射 spacing token，數字視為 px
*/
export type LhSpaceSizeInput = 'small' | 'medium' | 'large' | number | [number, number]LhSpaceAlignment （來自 @lh-ui/share/core/space）
ts
/** 間距對齊方式 */
export type LhSpaceAlignment = 'start' | 'center' | 'end' | 'baseline'