Elin-UI

Appearance

Space 间距 ​

基础用法 ​

标题
  • Item 1
  • Item 2
  • Item 3
标题
  • Item 1
  • Item 2
  • Item 3
标题
  • Item 1
  • Item 2
  • Item 3
查看代码
vue
<template>
  <e-space wrap class="vp-raw">
    <e-card v-for="i in 3" style="width: 250px" header="标题">
      <e-list>
        <e-list-item> Item 1 </e-list-item>
        <e-list-item> Item 2 </e-list-item>
        <e-list-item> Item 3 </e-list-item>
      </e-list>
    </e-card>
  </e-space>
</template>

垂直排列 ​

标题
  • Item 1
  • Item 2
  • Item 3
标题
  • Item 1
  • Item 2
  • Item 3
标题
  • Item 1
  • Item 2
  • Item 3
查看代码
vue
<template>
  <e-space direction="vertical">
    <e-card v-for="i in 3" class="vp-raw" style="width: 250px" header="标题">
      <e-list>
        <e-list-item> Item 1 </e-list-item>
        <e-list-item> Item 2 </e-list-item>
        <e-list-item> Item 3 </e-list-item>
      </e-list>
    </e-card>
  </e-space>
</template>

API ​

defineProps ​

属性名说明类型默认值
direction排列方向'horizontal' | 'vertical''horizontal'
wrap自动换行booleanfalse
gap间距大小number20