Space 内容间距

基础容器，可以给多个组件之间提供统一的间距。

基本用法

卡片名称

卡片内容

卡片名称

卡片内容

卡片名称

卡片内容

点击查看代码

<template>
  <s-space>
    <el-card v-for="i in 3" :key="i" style="width: 240px;" header="卡片名称" shadow="hover">
      <div>卡片内容</div>
    </el-card>
  </s-space>
</template>

<script setup lang="ts">
</script>

对齐方式

对齐方式:

unsetcenterflex-startflex-endstretchbaseline

文本内容

卡片内容

点击查看代码

<template>
  <s-form showColon>
    <s-form-item label="对齐方式">
      <el-radio-group v-model="spaceAlign">
        <el-radio v-for="item in spaceAlignOptions" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </s-form-item>
  </s-form>

  <div style="padding: 10px;border: 1px solid #ebeef5;">
    <s-space :align="spaceAlign">
      <span>文本内容</span>
      <el-button>按钮</el-button>
      <el-card shadow="never">卡片内容</el-card>
    </s-space>
  </div>
</template>

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

  const spaceAlign = ref<string>("center");

  const spaceAlignOptions = reactive<Record<string, any>>([
    { value: "unset", label: "unset" },
    { value: "center", label: "center" },
    { value: "flex-start", label: "flex-start" },
    { value: "flex-end", label: "flex-end" },
    { value: "stretch", label: "stretch" },
    { value: "baseline", label: "baseline" }
  ]);
</script>

间距尺寸

X轴间距:

Y轴间距:

同时设置 X、Y 轴间距

卡片 1

卡片 2

卡片 3

卡片 4

卡片 5

卡片 6

卡片 7

卡片 8

卡片 9

分别设置 X、Y 轴间距

卡片 1

卡片 2

卡片 3

卡片 4

卡片 5

卡片 6

卡片 7

卡片 8

卡片 9

点击查看代码

<template>
  <s-form :column="2" showColon>
    <s-form-item label="X轴间距">
      <el-slider v-model="spaceXSize" style="margin: 0 10px;" :min="0" :max="50" />
    </s-form-item>
    <s-form-item label="Y轴间距">
      <el-slider v-model="spaceYSize" style="margin: 0 10px;" :min="0" :max="50" />
    </s-form-item>
  </s-form>

  <el-row :gutter="20">
    <el-col :span="12">
      <div class="example-sub-title">同时设置 X、Y 轴间距</div>
      <s-space :size="spaceXSize" wrap>
        <el-card v-for="i in 9" :key="i" shadow="never">卡片 {{ i }}</el-card>
      </s-space>
    </el-col>

    <el-col :span="12">
      <div class="example-sub-title">分别设置 X、Y 轴间距</div>
      <s-space :size="[spaceXSize, spaceYSize]" wrap>
        <el-card v-for="i in 9" :key="i" shadow="never">卡片 {{ i }}</el-card>
      </s-space>
    </el-col>
  </el-row>
</template>

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

  const spaceXSize = ref<number>(8);
  const spaceYSize = ref<number>(8);
</script>

纵向排列

卡片 1

卡片 2

卡片 3

点击查看代码

<template>
  <s-space vertical inline>
    <el-card v-for="i in 3" :key="i" shadow="never">卡片 {{ i }}</el-card>
  </s-space>
</template>

<script setup lang="ts">
</script>

子元素占比

Item1

Item2

Item3

Item1

Item2

Item3

Item4

Item5

点击查看代码

<template>
  <s-space style="width: 32rem;" :itemStyle="{ border: '1px solid #dcdfe6' }" :flex="[0, 1, 0]">
    <div v-for="i in 3" :key="i" class="custom-space-item">Item{{ i }}</div>
  </s-space>

  <br />

  <s-space style="width: 32rem;" :itemStyle="{ border: '1px solid #dcdfe6' }" :flex="[0, 1, 0, 1, 0]">
    <div v-for="i in 5" :key="i" class="custom-space-item">Item{{ i }}</div>
  </s-space>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
  .custom-space-item {
    padding: 10px;
    background: #f2f6fc;
  }
</style>

分隔符

默认分隔符

Text 1

Text 2

Text 3

字符分隔符

Text 1

、

Text 2

、

Text 3

自定义分隔符

Text 1

Text 2

Text 3

点击查看代码

<template>
  <div style="margin-bottom: 20px;">
    <div class="example-sub-title">默认分隔符</div>
    <s-space spacer>
      <span v-for="i in 3" :key="i">Text {{ i }}</span>
    </s-space>
  </div>

  <div style="margin-bottom: 20px;">
    <div class="example-sub-title">字符分隔符</div>
    <s-space spacer="、">
      <span v-for="i in 3" :key="i">Text {{ i }}</span>
    </s-space>
  </div>

  <div style="margin-bottom: 20px;">
    <div class="example-sub-title">自定义分隔符</div>
    <s-space spacer>
      <template #spacer>
        <div style="height: 1em;border-left: 1px dashed #c0c4cc;"></div>
      </template>
      <span v-for="i in 3" :key="i">Text {{ i }}</span>
    </s-space>
  </div>
</template>

<script setup lang="ts">
</script>

Props

Slots