Espaciado

Contenedor de maquetación que añade espaciado entre elementos adyacentes. Admite las direcciones horizontal y vertical, tamaños predefinidos y espaciado personalizado, ajuste de línea y alineación.

Espaciado

<template>
  <div class="demo-col">
    <p class="demo-note">Dirección horizontal + espaciado predefinido</p>
    <LhSpace>
      <LhButton>Tinta china</LhButton>
      <LhButton>Flores y pájaros</LhButton>
      <LhButton>Figuras</LhButton>
    </LhSpace>
    <p class="demo-note">Dirección vertical</p>
    <LhSpace direction="vertical">
      <LhButton>Tinta china</LhButton>
      <LhButton>Flores y pájaros</LhButton>
    </LhSpace>
    <p class="demo-note">Espaciado personalizado + ajuste de línea</p>
    <LhSpace :size="24" wrap>
      <LhTag v-for="item in items" :key="item">{{ item }}</LhTag>
    </LhSpace>
    <p class="demo-note">Alineación alignment=start</p>
    <LhSpace alignment="start">
      <LhButton>Corto</LhButton>
      <div style="height: 48px; padding: 12px; border: 1px dashed var(--lh-border-color)">Bloque alto</div>
    </LhSpace>
  </div>
</template>

<script>
export default {
  data: () => ({ items: ['Tinta china', 'Flores y pájaros', 'Figuras', 'Pincel detallado', 'Trazo libre', 'Sin contornos (mogu)'] }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
direction	Dirección de disposición	'horizontal' \| 'vertical'	'horizontal'
size	Espaciado: tamaño predefinido / número de píxeles / [horizontal, vertical]	'small' \| 'medium' \| 'large' \| number \| [number, number]	'medium'
wrap	Permitir el ajuste de línea (solo en dirección horizontal)	boolean	false
alignment	Alineación en el eje transversal	'start' \| 'center' \| 'end' \| 'baseline'	'center'
sx	Prop abreviada de maquetación	—	—