PandaUI

Appearance

Space 间距 ​

PandaUI提供<pd-space>组件可以更加高效地进行flex布局

基础用法 ​

使用 <pd-space>组件包裹需要进行flex布局的元素，通过给gap属性设置一个只有两个值的一维数组来控制元素间的间距，其中数组第一个值控制的是y轴间距，第二个值控制的是x轴间距。

展开代码
html
<template>
  <pd-space :gap="[20, 20]" >
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
</pd-space>
</template>
<template>
  <pd-space :gap="[20, 20]" >
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
  <pd-button>Space</pd-button>
</pd-space>
</template>

排列方式 ​

在<pd-space>组件当中可以设置横向排列和纵向排列两种排列方式，具体通过设置inline属性来控制，默认排列方式为横向排列。

展开代码
html
<template>
<pd-space :gap="[20, 20]" >
  <pd-button>横向排列</pd-button>
  <pd-button>横向排列</pd-button>
  <pd-button>横向排列</pd-button>
  <pd-button>横向排列</pd-button>
  <pd-button>横向排列</pd-button>
</pd-space>
  <pd-space :inline="false" :gap="[20, 20]">
    <pd-button>纵向排列</pd-button>
    <pd-button>纵向排列</pd-button>
    <pd-button>纵向排列</pd-button>
  </pd-space>
</template>
<template>
<pd-space :gap="[20, 20]" >
  <pd-button>横向排列</pd-button>
  <pd-button>横向排列</pd-button>
  <pd-button>横向排列</pd-button>
  <pd-button>横向排列</pd-button>
  <pd-button>横向排列</pd-button>
</pd-space>
  <pd-space :inline="false" :gap="[20, 20]">
    <pd-button>纵向排列</pd-button>
    <pd-button>纵向排列</pd-button>
    <pd-button>纵向排列</pd-button>
  </pd-space>
</template>