Space 间距 ​

<template>
  <tu-space>
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
    <tu-button>按钮3</tu-button>
  </tu-space>
</template>

<template>
  <tu-space>
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
    <tu-button>按钮3</tu-button>
  </tu-space>
</template>

<template>
  <tu-space :size="12" direction="vertical" fill>
    <tu-button long>按钮1</tu-button>
    <tu-button long>按钮2</tu-button>
    <tu-button long>按钮3</tu-button>
  </tu-space>
</template>

<template>
  <tu-space :size="12" direction="vertical" fill>
    <tu-button long>按钮1</tu-button>
    <tu-button long>按钮2</tu-button>
    <tu-button long>按钮3</tu-button>
  </tu-space>
</template>

<template>
  <tu-radio-group class="mb-2" v-model="size" type="button">
    <tu-radio label="mini">超小</tu-radio>
    <tu-radio label="small">较小</tu-radio>
    <tu-radio label="medium">中等</tu-radio>
    <tu-radio label="large">较大</tu-radio>
  </tu-radio-group>

  <br />

  <tu-space :size="size">
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
    <tu-button>按钮3</tu-button>
  </tu-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const size = ref('medium');
</script>

<template>
  <tu-radio-group class="mb-2" v-model="size" type="button">
    <tu-radio label="mini">超小</tu-radio>
    <tu-radio label="small">较小</tu-radio>
    <tu-radio label="medium">中等</tu-radio>
    <tu-radio label="large">较大</tu-radio>
  </tu-radio-group>

  <br />

  <tu-space :size="size">
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
    <tu-button>按钮3</tu-button>
  </tu-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const size = ref('medium');
</script>

<template>
  <tu-radio-group class="mb-2" v-model="align" type="button">
    <tu-radio label="start">头部对齐</tu-radio>
    <tu-radio label="center">中间对齐</tu-radio>
    <tu-radio label="end">尾部对齐</tu-radio>
    <tu-radio label="baseline">基础线对齐</tu-radio>
  </tu-radio-group>

  <br />

  <tu-space :align="align">
    <tu-card>
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-card>
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
  </tu-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const align = ref('start');
</script>

<template>
  <tu-radio-group class="mb-2" v-model="align" type="button">
    <tu-radio label="start">头部对齐</tu-radio>
    <tu-radio label="center">中间对齐</tu-radio>
    <tu-radio label="end">尾部对齐</tu-radio>
    <tu-radio label="baseline">基础线对齐</tu-radio>
  </tu-radio-group>

  <br />

  <tu-space :align="align">
    <tu-card>
      <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
      <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
    </tu-card>
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
  </tu-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const align = ref('start');
</script>

<template>
  <tu-space wrap>
    <tu-button v-for="i in 10" :key="i">按钮 {{ i + 1 }}</tu-button>
  </tu-space>
</template>

<template>
  <tu-space wrap>
    <tu-button v-for="i in 10" :key="i">按钮 {{ i + 1 }}</tu-button>
  </tu-space>
</template>

<template>
  <tu-space class="mb-2">
    <template #divider>
      <tu-divider direction="vertical" />
    </template>
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
    <tu-button>按钮3</tu-button>
  </tu-space>

  <br />

  <tu-space class="mb-2">
    <template #divider>
      <tu-icon style="margin: 0 6px"><Pouring /></tu-icon>
    </template>
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
    <tu-button>按钮3</tu-button>
  </tu-space>
</template>

<script lang="ts" setup>
import { Pouring } from '@tu-view-plus/icons-vue';
</script>

<template>
  <tu-space class="mb-2">
    <template #divider>
      <tu-divider direction="vertical" />
    </template>
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
    <tu-button>按钮3</tu-button>
  </tu-space>

  <br />

  <tu-space class="mb-2">
    <template #divider>
      <tu-icon style="margin: 0 6px"><Pouring /></tu-icon>
    </template>
    <tu-button>按钮1</tu-button>
    <tu-button>按钮2</tu-button>
    <tu-button>按钮3</tu-button>
  </tu-space>
</template>

<script lang="ts" setup>
import { Pouring } from '@tu-view-plus/icons-vue';
</script>