Space 間隔

隣り合う要素に間隔を追加するレイアウトコンテナです。水平 / 垂直方向、プリセット段階とカスタム間隔、折り返しと整列をサポートします。

間隔

<template>
  <div class="demo-col">
    <p class="demo-note">水平方向 + プリセット間隔</p>
    <LhSpace>
      <LhButton>水墨</LhButton>
      <LhButton>花鳥</LhButton>
      <LhButton>人物</LhButton>
    </LhSpace>
    <p class="demo-note">垂直方向</p>
    <LhSpace direction="vertical">
      <LhButton>水墨</LhButton>
      <LhButton>花鳥</LhButton>
    </LhSpace>
    <p class="demo-note">カスタム間隔 + 折り返し</p>
    <LhSpace :size="24" wrap>
      <LhTag v-for="item in items" :key="item">{{ item }}</LhTag>
    </LhSpace>
    <p class="demo-note">整列方法 alignment=start</p>
    <LhSpace alignment="start">
      <LhButton>短</LhButton>
      <div style="height: 48px; padding: 12px; border: 1px dashed var(--lh-border-color)">高いブロック</div>
    </LhSpace>
  </div>
</template>

<script>
export default {
  data: () => ({ items: ['水墨', '花鳥', '人物', '工筆', '写意', '没骨'] }),
}
</script>

Props

プロパティ	説明	型	デフォルト値
direction	並べる方向	'horizontal' \| 'vertical'	'horizontal'
size	間隔：プリセット段階 / ピクセル数 / [水平, 垂直]	'small' \| 'medium' \| 'large' \| number \| [number, number]	'medium'
wrap	折り返しを許可（水平方向のみ）	boolean	false
alignment	クロス軸の整列	'start' \| 'center' \| 'end' \| 'baseline'	'center'
sx	sx によるレイアウト省略記法	—	—