空间 ​

<template>
  <el-space class="space-stack">
    <div v-for="card in cards" :key="card.title" class="space-card">
      <div class="space-card__header">
        <span>{{ card.title }}</span>
        <el-button text>{{ card.action }}</el-button>
      </div>
      <div v-for="item in card.items" :key="item" class="space-card__item">
        {{ item }}
      </div>
    </div>
  </el-space>
</template>

<script setup lang="ts">
const cards = [
  {
    title: '待办事项',
    action: '继续处理',
    items: ['补充收货信息', '确认支付方式', '提交订单'],
  },
  {
    title: '收货地址',
    action: '切换地址',
    items: ['公司前台', '手机 138 0000 0000', '工作日 9:00 - 18:00'],
  },
  {
    title: '发票信息',
    action: '编辑抬头',
    items: ['企业普通发票', '抬头已认证', '邮箱自动发送'],
  },
] as const
</script>

<style scoped>
.space-stack {
  width: 100%;
}

.space-card {
  padding: 1rem;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 1rem;
  background: var(--el-fill-color-light);
}

.space-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.space-card__item {
  margin-top: 0.5rem;
  color: var(--el-text-color-regular);
  line-height: 1.5;
}
</style>

<template>
  <el-space direction="horizontal" wrap>
    <div v-for="i in 20" :key="i">
      <el-button text>筛选条件 {{ i }}</el-button>
    </div>
  </el-space>
</template>

<template>
  <el-space alignment="start" :size="30">
    <el-radio-group v-model="size">
      <el-radio value="large">宽松</el-radio>
      <el-radio value="default">标准</el-radio>
      <el-radio value="small">紧凑</el-radio>
    </el-radio-group>

    <el-space direction="horizontal" wrap :size="size">
      <el-tag v-for="tag in tags" :key="tag" class="space-chip">
        {{ tag }}
      </el-tag>
    </el-space>
  </el-space>
</template>

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

import type { ComponentSize } from 'element-plus-mobile'

const size = ref<ComponentSize>('default')
const tags = ['待付款', '待发货', '配送中', '待评价', '售后中'] as const
</script>

<style scoped>
.space-chip {
  min-height: 2.25rem;
  padding-inline: 0.875rem;
}
</style>

<template>
  <el-space alignment="start">
    <el-text size="small">拖动滑块调整按钮之间的间距。</el-text>
    <el-slider v-model="size" />
    <el-space direction="horizontal" wrap :size="size">
      <el-button v-for="action in actions" :key="action" plain>
        {{ action }}
      </el-button>
    </el-space>
  </el-space>
</template>

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

const size = ref(20)
const actions = ['发起退款', '催促发货', '联系商家', '再次购买'] as const
</script>

<template>
  <el-space direction="horizontal" :size="size" spacer="|">
    <div v-for="i in 2" :key="i">
      <el-button>操作 {{ i }}</el-button>
    </div>
  </el-space>
</template>

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

const size = ref(10)
</script>

<template>
  <el-space direction="horizontal" :size="size" :spacer="spacer">
    <div v-for="i in 2" :key="i">
      <el-button>操作 {{ i }}</el-button>
    </div>
  </el-space>
</template>

<script lang="ts" setup>
import { h, ref } from 'vue'
import { ElDivider } from 'element-plus-mobile'

const size = ref(10)
const spacer = h(ElDivider, { direction: 'vertical' })
</script>

<template>
  <div class="alignment-container">
    <el-space direction="horizontal">
      <span>默认对齐</span>
      <el-button>立即支付</el-button>
      <div class="demo-card">
        <div class="demo-card__title">订单摘要</div>
        <div class="demo-card__desc">金额与优惠信息</div>
      </div>
    </el-space>
  </div>
  <div class="alignment-container">
    <el-space direction="horizontal" alignment="flex-start">
      <span>顶部对齐</span>
      <el-button>立即支付</el-button>
      <div class="demo-card">
        <div class="demo-card__title">订单摘要</div>
        <div class="demo-card__desc">金额与优惠信息</div>
      </div>
    </el-space>
  </div>
  <div class="alignment-container">
    <el-space direction="horizontal" alignment="flex-end">
      <span>底部对齐</span>
      <el-button>立即支付</el-button>
      <div class="demo-card">
        <div class="demo-card__title">订单摘要</div>
        <div class="demo-card__desc">金额与优惠信息</div>
      </div>
    </el-space>
  </div>
</template>

<style scoped>
.alignment-container {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 1px solid var(--el-border-color-lighter);
  background: var(--el-fill-color-light);
}

.demo-card {
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--el-border-color);
  background: var(--el-bg-color);
}

.demo-card__title {
  font-weight: 600;
}

.demo-card__desc {
  margin-top: 0.25rem;
  color: var(--el-text-color-secondary);
}
</style>

<template>
  <el-space alignment="start">
    <div class="space-control">自动铺满：<el-switch v-model="fill" /></div>
    <el-space direction="horizontal" :fill="fill" wrap class="fill-demo">
      <div v-for="item in items" :key="item.title" class="fill-card">
        <div class="fill-card__title">{{ item.title }}</div>
        <div class="fill-card__desc">{{ item.desc }}</div>
      </div>
    </el-space>
  </el-space>
</template>

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

const fill = ref(true)
const items = [
  { title: '地址确认', desc: '核对收货信息后进入下一步。' },
  { title: '支付方式', desc: '支持银行卡、钱包与优惠券组合。' },
  { title: '提交订单', desc: '确认后直接发起支付。' },
] as const
</script>

<style scoped>
.space-control {
  margin-bottom: 0.25rem;
}

.fill-demo {
  width: 100%;
}

.fill-card {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--el-border-color-lighter);
  background: var(--el-fill-color-light);
}

.fill-card__title {
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.fill-card__desc {
  margin-top: 0.5rem;
  color: var(--el-text-color-regular);
  line-height: 1.5;
}
</style>

<template>
  <el-space alignment="start">
    <div class="space-control">填充比例：<el-slider v-model="fillRatio" /></div>
    <el-space
      fill
      wrap
      direction="horizontal"
      :fill-ratio="fillRatio"
      class="fill-ratio-demo"
    >
      <div v-for="item in items" :key="item.title" class="ratio-card">
        <div class="ratio-card__title">{{ item.title }}</div>
        <div class="ratio-card__desc">{{ item.desc }}</div>
      </div>
    </el-space>
  </el-space>
</template>

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

const fillRatio = ref(30)
const items = [
  { title: '地址确认', desc: '先确认配送信息。' },
  { title: '支付方式', desc: '再确认支付渠道。' },
  { title: '订单提交', desc: '最后完成提交。' },
] as const
</script>

<style scoped>
.space-control,
.fill-ratio-demo {
  width: 100%;
}

.ratio-card {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--el-border-color-lighter);
  background: var(--el-fill-color-light);
}

.ratio-card__title {
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.ratio-card__desc {
  margin-top: 0.5rem;
  color: var(--el-text-color-regular);
}
</style>