Moonwind-UI

Appearance

Space 间距 ​

设置组件之间的间距。

基础用法 ​

最基础的用法，通过 MSpace 组件包裹需要设置间距的元素。

<script setup>
import { MSpace, MButton } from 'moonwind-ui'
</script>

<template>
  <MSpace>
    <MButton>Text</MButton>
    <MButton>Text</MButton>
    <MButton>Text</MButton>
  </MSpace>
</template>

垂直间距 ​

通过 direction 属性可以设置垂直方向的间距。

<script setup>
import { MSpace, MButton } from 'moonwind-ui'
</script>

<template>
  <MSpace direction="vertical">
    <MButton>Text</MButton>
    <MButton>Text</MButton>
    <MButton>Text</MButton>
  </MSpace>
</template>

间距大小 ​

通过 size 属性控制间距大小，支持 small | middle | large 以及自定义数值。

<script setup>
import { MSpace, MButton } from 'moonwind-ui'
</script>

<template>
  <MSpace :size="20">
    <MButton>Custom Size 20</MButton>
    <MButton>Custom Size 20</MButton>
  </MSpace>
  <br />
  <MSpace size="large">
    <MButton>Large</MButton>
    <MButton>Large</MButton>
  </MSpace>
</template>

对齐方式 ​

通过 align 属性设置对齐方式。

<script setup>
import { MSpace, MButton } from 'moonwind-ui'
</script>

<template>
  <div class="space-align-container">
    <div class="space-align-block">
      <span class="mock-block">Start</span>
      <MSpace align="start">
        <MButton>Text</MButton>
        <div class="mock-block" style="height: 100px; background: #eee; padding: 10px;">Block</div>
      </MSpace>
    </div>
    <div class="space-align-block">
      <span class="mock-block">Center</span>
      <MSpace align="center">
        <MButton>Text</MButton>
        <div class="mock-block" style="height: 100px; background: #eee; padding: 10px;">Block</div>
      </MSpace>
    </div>
    <div class="space-align-block">
      <span class="mock-block">End</span>
      <MSpace align="end">
        <MButton>Text</MButton>
        <div class="mock-block" style="height: 100px; background: #eee; padding: 10px;">Block</div>
      </MSpace>
    </div>
  </div>
</template>

<style scoped>
.space-align-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.space-align-block {
  border: 1px solid #eee;
  padding: 10px;
  flex: none;
}
.mock-block {
  display: inline-block;
}
</style>

自动换行 ​

通过 wrap 属性设置是否自动换行。

<script setup>
import { MSpace, MButton } from 'moonwind-ui'
</script>

<template>
  <MSpace wrap>
    <MButton v-for="i in 20" :key="i">Button</MButton>
  </MSpace>
</template>

分隔符 ​

通过 split 属性设置分隔符。

<script setup>
import { MSpace, MButton } from 'moonwind-ui'
import { h } from 'vue'

const split = h('span', { style: { color: '#ccc' } }, '|')
</script>

<template>
  <MSpace :split="split">
    <MButton type="text">Link</MButton>
    <MButton type="text">Link</MButton>
    <MButton type="text">Link</MButton>
  </MSpace>
</template>

API ​

Space Props ​

属性名说明类型默认值
align对齐方式'start' | 'end' | 'center' | 'baseline'-
direction间距方向'vertical' | 'horizontal''horizontal'
size间距大小'small' | 'middle' | 'large' | number | [number, number]'small'
split分隔符VNode | string-
wrap是否自动换行booleanfalse
fill是否占满容器booleanfalse
fillRatio填充比例number100

Space Slots ​

插槽名说明
default内容