Space スペース - Vant 4

Space スペース

紹介

要素間の間隔を設定します。

導入

以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。

import { createApp } from'vue'; 
import { Space } from'vant'; 
const app = createApp(); 
app.use(Space);

🎯 コード例

📐 基本用法

Space コンポーネントは子要素間に一定の間隔を設定します。デフォルトは 8px で、レイアウトを整えます。

<template>
  <van-space>
    <van-button type="primary">ボタン</van-button>
    <van-button type="primary">ボタン</van-button>
    <van-button type="primary">ボタン</van-button>
  </van-space>
</template>

📱 縦に並べる

direction を vertical に設定すると、縦方向の間隔を指定できます。縦レイアウトに適しています。

<template>
  <van-space direction="vertical" fill>
    <van-button type="primary" block>ボタン</van-button>
    <van-button type="success" block>ボタン</van-button>
    <van-button type="warning" block>ボタン</van-button>
  </van-space>
</template>

🎨 スタイル変数

size の値を調整して間隔のサイズを制御します。number タイプを渡すと、デフォルトで px 単位が使用されます；string タイプも渡せます、例えば 2rem や 5vw などの単位付きの値です。

<template>
  <div>
    <van-space :size="2">
      <van-button type="primary">小さな間隔</van-button>
      <van-button type="primary">小さな間隔</van-button>
    </van-space>
    
    <van-space :size="20">
      <van-button type="success">大きな間隔</van-button>
      <van-button type="success">大きな間隔</van-button>
    </van-space>
    
    <van-space size="2rem">
      <van-button type="warning">カスタム単位</van-button>
      <van-button type="warning">カスタム単位</van-button>
    </van-space>
  </div>
</template>

🎯 揃え

align の値で子要素の揃えを設定できます。選択肢は start、center、end、baseline。水平モードのデフォルトは center。

<template>
  <div>
    <van-field v-model="align" label="揃え" />
    <van-space :align="align">
      <van-button type="primary">按钮</van-button>
      <div style="padding: 40px 20px; background: #f7f8fa;">高さの異なる要素</div>
      <van-button type="success">ボタン</van-button>
    </van-space>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const align = ref('center');
    
    return {
      align,
    };
  },
};
</script>

🔄 自動折返し

水平モードでは wrap で子要素の折返しを制御します。レスポンシブに適しています。

<template>
  <van-space wrap>
    <van-button type="primary">ボタン 1</van-button>
    <van-button type="success">ボタン 2</van-button>
    <van-button type="warning">ボタン 3</van-button>
    <van-button type="danger">ボタン 4</van-button>
    <van-button type="primary">ボタン 5</van-button>
    <van-button type="success">ボタン 6</van-button>
  </van-space>
</template>

📋 API

🎛️ プロパティ

パラメータ	説明	タイプ	デフォルト値
direction	📐 間隔方向	vertical | horizontal	horizontal
size	📏 間隔サイズ、例 20px、2em、デフォルト単位は px、配列形式で横と縦の間隔を個別に設定可能	number | string | number[] | string[]	8px
align	🎯 子要素の配置方法を設定	start | end | center | baseline	-
wrap	🔄 自動改行を行うかどうか、水平方向配列のみ適用	boolean	false
fill	📦 Spaceをブロックレベル要素にして親要素全体を埋めるかどうか	boolean	false

🎭 スロット

名称	デフォルト値	説明
default	-	スペースの内容

🎨 スタイル変数

コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。

名称	デフォルト値	説明
--van-space-size	8px	間隔サイズ

📘 タイプ定義

コンポーネントは以下のタイプ定義をエクスポートし、TypeScript プロジェクトでの使用を容易にします：

import type { SpaceProps, SpaceSize, SpaceAlign } from 'vant';

📚 関連ドキュメント

📐 レイアウトコンポーネント

• Col レイアウト - 📦 グリッドレイアウトの列
• Divider 仕切り線 - ➖ コンテンツ領域の区切りに使用

🎨 表示コンポーネント

• Cell セル - 📱 リスト項目の表示に使用
• List リスト - 📋 データリストの表示
• Grid グリッド - 🔲 グリッドレイアウトに使用

🎛️ フォームコンポーネント

• Button ボタン - 🔘 操作のトリガーに使用
• Field 入力欄 - 📝 テキスト入力に使用

🔧 ツールコンポーネント

• ConfigProvider グローバル設定 - ⚙️ グローバル設定のカスタマイズに使用