LimeUI+1.2.0

主题

LimeSpace 间距 ​

一个用于设置组件之间间距的布局组件，可以在水平或垂直方向上为子元素提供均匀的间距，让布局更加规范和美观。非uvue端使用的是flex gap实现，可能存在兼容问题。

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-space
  2. 导入后可能需要重新编译项目
  3. 在页面中使用l-space组件（组件）或lime-space（演示）

代码演示 ​

基础用法 ​

Space 组件会在各个子组件之间设置一定的间距，默认间距为 8px。

html
<l-space>
  <l-button type="primary">品牌色</l-button>
  <l-button type="primary">品牌色</l-button>
  <l-button type="warning">品牌色</l-button>
</l-space>

垂直排列 ​

将 direction 属性设置为 vertical，可以设置垂直方向排列的间距。

html
<l-space direction="vertical" :fill="true">
  <l-button type="primary" :data-block="true">品牌色</l-button>
  <l-button type="primary" :data-block="true">品牌色</l-button>
  <l-button type="warning" :data-block="true">品牌色</l-button>
</l-space>

自定义间距 ​

通过调整 size 的值来控制间距的大小。传入 number 类型时，会默认使用 px 单位；也可以传入带有单位的值。

html
<!-- 20px -->
<l-space :size="20">
  <l-button type="primary">品牌色</l-button>
  <l-button type="primary">品牌色</l-button>
  <l-button type="warning">品牌色</l-button>
</l-space>

<!-- 数组 -->
<l-space :size="[10,20]">
  <l-button type="primary">品牌色</l-button>
  <l-button type="primary">品牌色</l-button>
  <l-button type="warning">品牌色</l-button>
</l-space>

对齐方式 ​

通过调整 align 的值来设置子元素的对齐方式, 可选值为 start, center ,end ,baseline，在水平模式下的默认值为 center。

html
<radio-group @change="onChange" style="flex-direction: row;">
  <radio style="padding: 20rpx" class="radio" value="start">start</radio>
  <radio style="padding: 20rpx" class="radio" value="center">center</radio>
  <radio style="padding: 20rpx" class="radio" value="end">end</radio>
  <radio style="padding: 20rpx" class="radio" value="baseline">baseline</radio>
</radio-group>
<l-space :align="align">
  <l-button type="primary">{{align}}</l-button>
  <view style="padding: 40px 20px; background: #eee">Block</view>
</l-space>
js
export default {
	data() {
		return {
			align: 'center'
		}
	},
	methods: {
		onChange(e: RadioGroupChangeEvent){
			this.align = e.detail.value
		}
	},
	mounted() {
		
	}
}

自动换行 ​

在水平模式下, 通过 wrap 属性来控制子元素是否自动换行。

html
<l-space :wrap="true">
  <l-button type="primary">品牌色</l-button>
  <l-button type="primary">品牌色</l-button>
  <l-button type="primary">品牌色</l-button>
  <l-button type="primary">品牌色</l-button>
  <l-button type="warning">品牌色</l-button>
  <l-button type="warning">品牌色</l-button>
  <l-button type="primary">品牌色</l-button>
  <l-button type="warning">品牌色</l-button>
  <l-button type="warning">品牌色</l-button>
</l-space>

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

html
<!-- 代码位于 uni_modules/lime-space/components/lime-space -->
<lime-space />

API文档 ​

Props ​

参数说明类型默认值
direction间距方向vertical | horizontalhorizontal
size间距大小，如 20 20rpx [20, 20]，默认单位为 px，支持数组形式来分别设置横向和纵向间距number | string | number[] | string[]8
align设置子元素的对齐方式start | end | center | baseline-
wrap是否自动换行，仅适用于水平方向排列booleanfalse
fill是否让 Space 变为一个块级元素，填充整个父元素booleanfalse

Slots ​

名称说明
default间距组件内容

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码