Space 間隔

子コンポーネント間に統一された間隔を提供するレイアウトコンテナです。ネイティブ CSS gap をベースに実装されています。純粋なレイアウトコンテナ（role="presentation"）であり、アクセシビリティツリーには参加しません。

基本的な使い方

vue

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

<template>
  <LhSpace>
    <LhButton>ボタン 1</LhButton>
    <LhButton>ボタン 2</LhButton>
    <LhButton>ボタン 3</LhButton>
  </LhSpace>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSpace>
    <LhButton>ボタン 1</LhButton>
    <LhButton>ボタン 2</LhButton>
    <LhButton>ボタン 3</LhButton>
  </LhSpace>
</template>

垂直間隔

vue

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

<template>
  <LhSpace direction="vertical">
    <LhButton>ボタン 1</LhButton>
    <LhButton>ボタン 2</LhButton>
  </LhSpace>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhSpace direction="vertical">
    <LhButton>ボタン 1</LhButton>
    <LhButton>ボタン 2</LhButton>
  </LhSpace>
</template>

間隔サイズ

3 段階のプリセットが --lh-spacing-* テーマトークンにマッピングされます。ピクセル数値や [水平, 垂直] 配列もサポートします。

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

export interface LhSpaceProps {
  /** 並び方向 */
  direction?: 'horizontal' | 'vertical'
  /** 間隔：プリセット段階 / ピクセル数値 / [水平, 垂直] */
  size?: LhSpaceSizeInput
  /** 折り返しを許可するか（水平方向のみ） */
  wrap?: boolean
  /** 整列方法 */
  alignment?: LhSpaceAlignment
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhSpaceSizeInput _{（@lh-ui/share/core/space から）}

/**
 * 正規化された間隔：プリセット段階は spacing トークンにマッピングされ、数値は px として扱われる
 */
export type LhSpaceSizeInput = 'small' | 'medium' | 'large' | number | [number, number]

LhSpaceAlignment _{（@lh-ui/share/core/space から）}

/** 間隔の整列方法 */
export type LhSpaceAlignment = 'start' | 'center' | 'end' | 'baseline'

Space 間隔 ​

基本的な使い方 ​

垂直間隔 ​

間隔サイズ ​

折り返しと整列 ​

Space API ​

Props ​

アクセシビリティ ​

型定義 ​