Skip to content

Space 间距


按需引入

::: CopyCode

ts
import { createApp } from 'vue'
import App from './App.vue'
import { MeSpace } from 'mine-h5-ui'
import 'mine-h5-ui/styles/MeSpace.css'

createApp(App).use(MeSpace).mount('#app')

:::

复制

  • 如果你觉得重新编写 HTML 结构麻烦,可以直接复制下面的代码。

代码演示

基础用法

  • 通过属性 size 来设置组件的间距大小,默认为 10px

::: CopyCode

html
<me-space size="10px">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</me-space>

:::

间距方向

  • 通过属性 direction 来设置组件的间距方向,默认为 horizontal

::: CopyCode

html
<me-space direction="vertical">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</me-space>

:::

API

参数

参数说明类型可选值默认值版本
size间距大小string--10pxv2.3.8
direction间距方向stringhorizontal / verticalhorizontalv2.3.8

基于 MIT 许可发布