Espacement

Conteneur de mise en page ajoutant un espacement entre des éléments adjacents. Prend en charge les directions horizontale / verticale, les échelons prédéfinis et l'espacement personnalisé, le retour à la ligne et l'alignement.

Espacement

<template>
  <div class="demo-col">
    <p class="demo-note">Direction horizontale + espacement prédéfini</p>
    <LhSpace>
      <LhButton>Encre de Chine</LhButton>
      <LhButton>Fleurs et oiseaux</LhButton>
      <LhButton>Figures</LhButton>
    </LhSpace>
    <p class="demo-note">Direction verticale</p>
    <LhSpace direction="vertical">
      <LhButton>Encre de Chine</LhButton>
      <LhButton>Fleurs et oiseaux</LhButton>
    </LhSpace>
    <p class="demo-note">Espacement personnalisé + retour à la ligne</p>
    <LhSpace :size="24" wrap>
      <LhTag v-for="item in items" :key="item">{{ item }}</LhTag>
    </LhSpace>
    <p class="demo-note">Alignement alignment=start</p>
    <LhSpace alignment="start">
      <LhButton>Court</LhButton>
      <div style="height: 48px; padding: 12px; border: 1px dashed var(--lh-border-color)">Bloc haut</div>
    </LhSpace>
  </div>
</template>

<script>
export default {
  data: () => ({ items: ["Encre de Chine", "Fleurs et oiseaux", "Figures", "Gongbi", "Xieyi", "Mogu"] }),
}
</script>

Props

Prop	Description	Type	Valeur par défaut
direction	Direction de l'agencement	'horizontal' \| 'vertical'	'horizontal'
size	Espacement : échelon prédéfini / nombre de pixels / [horizontal, vertical]	'small' \| 'medium' \| 'large' \| number \| [number, number]	'medium'
wrap	Autoriser le retour à la ligne (uniquement en horizontal)	boolean	false
alignment	Alignement sur l'axe croisé	'start' \| 'center' \| 'end' \| 'baseline'	'center'
sx	Propriétés de mise en page rapide	—	—