<script setup lang="ts">
const props = defineProps({
    gap: {
        type: String,
        default: ''
    }
})
const gapWith = ref('1');
watch(() => props.gap, (value) => {
    gapWith.value = value
})
</script>

<template>
    <div class="NiSpace" data-prefix="Ni" :style="{ '--width': gapWith + 'rem' }" >
        <slot/>
    </div>
</template>

<style scoped lang="scss">
.NiSpace {
    position: relative;
    --NiSpace-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--NiSpace-gap) /* 行和列之间的间距 */
}
</style>