设置组件之间的间距
注意
间距组件在 H5 下可以对任意子元素进行间距控制,在小程序下只能对 view 控制,为了统一预览效果,演示代码中使用了 view 包裹
基本使用
间距组件的基本用法。
html
<iui-space>
<view>
<iui-button inline>Item1</iui-button>
</view>
<view>
<iui-button inline>Item2</iui-button>
</view>
<view>
<iui-button inline>Item3</iui-button>
</view>
</iui-space>
<iui-space>
<view>
<iui-button inline>Item1</iui-button>
</view>
<view>
<iui-button inline>Item2</iui-button>
</view>
<view>
<iui-button inline>Item3</iui-button>
</view>
</iui-space>
垂直方向
可以设置垂直方向排列的间距。
html
<iui-space direction="vertical">
<view>
<iui-button>Item1</iui-button>
</view>
<view>
<iui-button>Item2</iui-button>
</view>
<view>
<iui-button>Item3</iui-button>
</view>
</iui-space>
<iui-space direction="vertical">
<view>
<iui-button>Item1</iui-button>
</view>
<view>
<iui-button>Item2</iui-button>
</view>
<view>
<iui-button>Item3</iui-button>
</view>
</iui-space>
尺寸
内置 4 个尺寸,mini - 4px
small - 8px (默认)
medium - 16px
large - 24px
,也支持传数字来自定义尺寸。
html
<iui-space size="mini">
<view>
<iui-button inline>mini</iui-button>
</view>
<view>
<iui-button inline>mini</iui-button>
</view>
<view>
<iui-button inline>mini</iui-button>
</view>
</iui-space>
<iui-space size="mini">
<view>
<iui-button inline>mini</iui-button>
</view>
<view>
<iui-button inline>mini</iui-button>
</view>
<view>
<iui-button inline>mini</iui-button>
</view>
</iui-space>
对齐
内置 4 种对齐方式,分别为 start
center
end
baseline
,水平方向默认为 center
垂直方向默认为 start
html
<iui-space align="start" size="large">
<view>
<iui-button size="mini">start</iui-button>
</view>
<view>
<iui-button size="small">start</iui-button>
</view>
<view>
<iui-button size="large">start</iui-button>
</view>
</iui-space>
<iui-space align="start" size="large">
<view>
<iui-button size="mini">start</iui-button>
</view>
<view>
<iui-button size="small">start</iui-button>
</view>
<view>
<iui-button size="large">start</iui-button>
</view>
</iui-space>
API
<Space>
props