Space 间距

给组件之间提供统一的间距。

组件注册

import { FSpace } from '@fesjs/fes-design';

app.use(FSpace);

代码演示

基础用法

play

<template>
    <FSpace>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <!-- 注释 -->
        <FButton>
            Long! Long! Long! Long! Long! Long! Long! Long! Long! Long! Cross
            Cross the line!
        </FButton>
    </FSpace>
</template>

水平对齐

play

<template>
    <FForm labelWidth="100px">
        <FFormItem label="是否换行:">
            <FRadioGroup
                v-model="wrap"
                :options="[
                    { label: '是(默认)', value: true },
                    { label: '否', value: false },
                ]"
            />
        </FFormItem>
        <FFormItem label="垂直排列:">
            <FRadioGroup
                v-model="align"
                :options="[
                    { label: 'start', value: 'start' },
                    { label: 'end', value: 'end' },
                    { label: 'center', value: 'center' },
                    { label: 'baseline', value: 'baseline' },
                    { label: 'stretch', value: 'stretch' },
                ]"
            />
        </FFormItem>
        <FFormItem label="水平排列:">
            <FRadioGroup
                v-model="justify"
                :options="[
                    { label: 'start(默认)', value: 'start' },
                    { label: 'end', value: 'end' },
                    { label: 'center', value: 'center' },
                    { label: 'space-around', value: 'space-around' },
                    { label: 'space-between', value: 'space-between' },
                ]"
            />
        </FFormItem>
    </FForm>

    <FDivider />

    <FSpace :justify="justify" :align="align" :wrap="wrap">
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <!-- 注释 -->
        <FButton>
            Long! Long! Long! Long! Long! Long! Long! Long! Long! Long! Cross
            Cross the line!
        </FButton>
    </FSpace>

    <FDivider />

    <div class="space-wrapper">
        <FSpace :justify="justify" :align="align" :wrap="wrap">
            Text
            <FButton>Button</FButton>

            <div class="box-wrapper">
                <FSpace vertical>
                    Text
                    <FButton>Button</FButton>
                </FSpace>
            </div>
        </FSpace>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const align = ref('center');
const justify = ref('start');
const wrap = ref(true);
</script>

<style scoped>
.space-wrapper {
    width: 100%;
    padding: 8px;
    border: 1px dashed #ccc;
}
.box-wrapper {
    border: 1px dashed #ccc;
    padding: 8px;
}
</style>

垂直对齐

play

<template>
    <FForm labelWidth="100px">
        <FFormItem label="垂直排列:">
            <FRadioGroup
                v-model="align"
                :options="[
                    { label: 'start', value: 'start' },
                    { label: 'end', value: 'end' },
                    { label: 'center', value: 'center' },
                    { label: 'baseline', value: 'baseline' },
                    { label: 'stretch', value: 'stretch' },
                ]"
            />
        </FFormItem>
        <FFormItem label="水平排列:">
            <FRadioGroup
                v-model="justify"
                :options="[
                    { label: 'start(默认)', value: 'start' },
                    { label: 'end', value: 'end' },
                    { label: 'center', value: 'center' },
                    { label: 'space-around', value: 'space-around' },
                    { label: 'space-between', value: 'space-between' },
                ]"
            />
        </FFormItem>
    </FForm>

    <FDivider />

    <FSpace
        class="space-wrapper"
        vertical
        :justify="justify"
        :align="align"
        style="min-height: 200px"
    >
        <FButton>Text</FButton>
        <FButton>Checkbox</FButton>
        <FButton>Input</FButton>
        <FButton>
            Long! Long! Long! Long! Long! Long! Long! Long! Long! Long! Cross
            Cross the line!
        </FButton>
    </FSpace>
</template>

<script setup>
import { ref } from 'vue';

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

<style scoped>
.space-wrapper {
    border: 1px dashed #ccc;
    padding: 8px;
}
</style>

默认间距

play

<template>
    <FRadioGroup v-model="size">
        <FRadio value="xsmall">xsmall</FRadio>
        <FRadio value="small">small</FRadio>
        <FRadio value="middle">middle</FRadio>
        <FRadio value="large">large</FRadio>
    </FRadioGroup>

    <FDivider />

    <FSpace :size="size">
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
    </FSpace>

    <FDivider />

    <FSpace vertical :size="size">
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
    </FSpace>
</template>

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

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

自定义间距

play

<template>
    <FForm :labelWidth="160">
        <FFormItem label="间距类型：">
            <FRadioGroup v-model="sizeType">
                <FRadio value="same">水平和垂直相同</FRadio>
                <FRadio value="diff">水平和垂直不同</FRadio>
            </FRadioGroup>
        </FFormItem>
        <FFormItem v-if="sizeType === 'same'" label="水平和垂直间距：">
            <FInputNumber
                v-model="sizeHV"
                :min="5"
                :max="50"
                :step="5"
            />
            <span style="margin-left: 10px">px</span>
        </FFormItem>
        <FFormItem v-if="sizeType === 'diff'" label="水平间距：">
            <FInputNumber
                v-model="sizeH"
                :min="5"
                :max="50"
                :step="5"
            />
            <span style="margin-left: 10px">px</span>
        </FFormItem>
        <FFormItem v-if="sizeType === 'diff'" label="垂直间距：">
            <FInputNumber
                v-model="sizeV"
                :min="5"
                :max="50"
                :step="5"
            />
            <span style="margin-left: 10px">px</span>
        </FFormItem>
    </FForm>

    <FDivider />

    <FSpace :size="size">
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
    </FSpace>

    <FDivider />

    <FSpace vertical :size="size">
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
    </FSpace>
</template>

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

const sizeType = ref('same');
const sizeHV = ref(20);
const sizeH = ref(30);
const sizeV = ref(10);

const size = computed(() => {
    if (sizeType.value === 'same') {
        return sizeHV.value;
    }
    return [sizeH.value, sizeV.value];
});
</script>

内联元素

play

<template>
    <FRadioGroup v-model="inline">
        <FRadio :value="false">flex</FRadio>
        <FRadio :value="true">inline-flex</FRadio>
    </FRadioGroup>

    <FDivider />

    <FSpace class="space-wrapper" :inline="inline">
        <FButton>Text</FButton>
        <FButton>Text</FButton>
        <FButton>Text</FButton>
    </FSpace>
</template>

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

const inline = ref(false);
</script>

<style scoped>
.space-wrapper {
    border: 1px dashed #ccc;
}
</style>

Space Props

参数	说明	类型	默认值
align	垂直排列方式，可选值为 start end center baseline stretch flex-start flex-end	string	-
inline	是否为行内元素	boolean	false
itemStyle	节点样式	string / object	-
justify	水平排列方式，可选值为 start end center space-around space-between	string	start
size	为数字或字符串时，是垂直和水平间距；为数组时，是 [垂直间距, 水平间距]，字符串可选值为 xsmall small middle large	string / number / [number, number]	small
vertical	是否垂直布局	boolean	false
wrap	是否超出换行	boolean	true