更新记录

1.0.5（2024-08-06） 下载此版本

修改文档

1.0.4（2024-07-29） 下载此版本

更新文档

1.0.3（2024-07-29） 下载此版本

更换实现方式

查看更多

平台兼容性

Vue2 Vue3
× √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
√ √ √ √
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

r-layout

Layout 提供了 r-row 和 r-col 两个组件来进行行列布局。

示例

​ 

<template>
  <r-config-provider>
    <view style="padding: 20rpx 0">
      <r-divider content-position="left">基本使用--示例1</r-divider>
      <r-row>
        <r-col style="background-color: #39a9ed; text-align: center" span="8">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 8
          </view>
        </r-col>
        <r-col style="background-color: #66c6f2; text-align: center" span="8">
          <view
            style="
              background-color: #66c6f2;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 8
          </view>
        </r-col>
        <r-col style="background-color: #39a9ed; text-align: center" span="8">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 8
          </view>
        </r-col>
      </r-row>
      <r-divider content-position="left">基本使用--示例2</r-divider>
      <r-row>
        <r-col span="4">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 4
          </view>
        </r-col>
        <r-col span="10" offset="4">
          <view
            style="
              background-color: #66c6f2;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            offset: 4, span: 10
          </view>
        </r-col>
      </r-row>
      <r-divider content-position="left">基本使用--示例3</r-divider>
      <r-row>
        <r-col offset="12" span="12">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            offset: 12, span: 12
          </view>
        </r-col>
      </r-row>

      <r-divider content-position="left">设置列元素间距</r-divider>

      <r-row gutter="10">
        <r-col span="8">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 8
          </view>
        </r-col>
        <r-col span="8">
          <view
            style="
              background-color: #66c6f2;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 8
          </view>
        </r-col>
        <r-col span="8">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 8
          </view>
        </r-col>
      </r-row>

      <r-divider content-position="left">垂直间距 </r-divider>

      <r-row :gutter="[20, 20]">
        <r-col span="12">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 12
          </view>
        </r-col>
        <r-col span="12">
          <view
            style="
              background-color: #66c6f2;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 12
          </view>
        </r-col>
        <r-col span="12">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 12
          </view>
        </r-col>
        <r-col span="12">
          <view
            style="
              background-color: #66c6f2;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 12
          </view>
        </r-col>
      </r-row>

      <r-divider content-position="left">对齐方式--居中</r-divider>
      <r-row justify="center">
        <r-col span="6">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
        <r-col span="6">
          <view
            style="
              background-color: #66c6f2;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
        <r-col span="6">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
      </r-row>

      <r-divider content-position="left">对齐方式--右对齐</r-divider>

      <r-row justify="end">
        <r-col span="6">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
        <r-col span="6">
          <view
            style="
              background-color: #66c6f2;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
        <r-col span="6">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
      </r-row>

      <r-divider content-position="left">对齐方式--两端对齐</r-divider>
      <r-row justify="space-between">
        <r-col span="6">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
        <r-col span="6">
          <view
            style="
              background-color: #66c6f2;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
        <r-col span="6">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
      </r-row>

      <r-divider content-position="left"
        >对齐方式--每个元素的两侧间隔相等</r-divider
      >

      <r-row justify="space-around">
        <r-col span="6">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
        <r-col span="6">
          <view
            style="
              background-color: #66c6f2;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
        <r-col span="6">
          <view
            style="
              background-color: #39a9ed;
              text-align: center;
              padding: 20rpx 0;
            "
          >
            span: 6
          </view>
        </r-col>
      </r-row>
    </view>
  </r-config-provider>
</template>

API

Row Props

参数 说明 类型 默认值 可选值
gutter 列元素之间的间距（单位为 px） String | Number | Array+ 0
justify 主轴对齐方式 String start start end center space-around space-between
align 交叉轴对齐方式 String top center bottom
wrap 是否自动换行 boolean true false

Col Props

参数 说明 类型 默认值 可选值
span 列元素宽度 Number - 1-24
offset 列元素偏移距离 Number - 1-24

Row Events

名称 说明 参数
click 点击时触发 e

Col Events

名称 说明 参数
click 点击时触发 e

更多组件，请前往rainui

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...