更新记录

1.0.3(2024-08-06) 下载此版本

修改文档

1.0.2(2024-07-30) 下载此版本

适配r-config-provider

1.0.1(2024-07-26) 下载此版本

更新依赖

查看更多

平台兼容性

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

r-grid

r-grid宫格,宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航。

示例

<template>
  <r-config-provider>
    <view style="padding: 20rpx 0">
      <r-divider content-position="left">基本使用</r-divider>
      <r-grid>
        <r-grid-item icon="photo-o" text="文字" />
        <r-grid-item icon="photo-o" text="文字" />
        <r-grid-item icon="photo-o" text="文字" />
        <r-grid-item icon="photo-o" text="文字" />
      </r-grid>
      <r-divider content-position="left">自定义列数 </r-divider>
      <r-grid :column-num="3">
        <r-grid-item
          v-for="value in 6"
          :key="value"
          icon="photo-o"
          text="文字"
        />
      </r-grid>
      <r-divider content-position="left">自定义内容 </r-divider>
      <r-grid :border="false" :column-num="3">
        <r-grid-item>
          <r-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
          />
        </r-grid-item>
        <r-grid-item>
          <r-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
          />
        </r-grid-item>
        <r-grid-item>
          <r-image
            src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
          />
        </r-grid-item>
      </r-grid>

      <r-divider content-position="left">正方形格子 </r-divider>
      <r-grid square>
        <r-grid-item
          v-for="value in 8"
          :key="value"
          icon="photo-o"
          text="文字"
        />
      </r-grid>
      <r-divider content-position="left">格子间距 </r-divider>
      <r-grid :gutter="10">
        <r-grid-item
          v-for="value in 8"
          :key="value"
          icon="photo-o"
          text="文字"
        />
      </r-grid>
      <r-divider content-position="left">内容横排 </r-divider>
      <r-grid direction="horizontal" :column-num="3">
        <r-grid-item icon="photo-o" text="文字" />
        <r-grid-item icon="photo-o" text="文字" />
        <r-grid-item icon="photo-o" text="文字" />
      </r-grid>

      <r-divider content-position="left">徽标提示 </r-divider>

      <r-grid :column-num="2">
        <r-grid-item icon="home-o" text="文字" dot />
        <r-grid-item icon="search" text="文字" badge="99+" />
      </r-grid>
    </view>
  </r-config-provider>
</template>

API

Grid Props

名称 说明 类型 默认值 可选值
column-num 列数 Number 4 -
icon-size 图标大小,默认单位为px Number | String 28px card
gutter 格子之间的间距,默认单位为px Number 0
border 是否显示边框 Boolean true
center 是否将格子内容居中显示 Boolean true
square 是否将格子固定为正方形 Boolean false
clickable 是否开启格子点击反馈 Boolean false
direction 格子内容排列的方向 String vertical horizontal
reverse 是否调换图标和文本的位置 Boolean false

GridItem Props

名称 说明 类型 默认值 可选值
text 文字 String - -
icon r-icon 图标名称 String - -
icon-prefix r-icon 图标类名前缀 String van-icon -
icon-color r-icon 图标颜色 String - -
dot 是否显示图标右上角小红点 Boolean false
badge 图标右上角徽标的内容 Number | String - -
badgeColor 徽标背景颜色 String #ee0a24
max 最大值,超过最大值会显示 {max}+,仅当 content 为数字时有效 Number | String - -
offset 设置徽标的偏移量,数组的两项分别对应水平向右和垂直向下方向的偏移量,默认单位为 px Array - -
showZero 当 content 为数字 0 或字符串 '0' 时,是否展示徽标 Boolean true
position 徽标位置 String top-right top-right top-left bottom-left bottom-right
themeName r-theme 主题名称 String default

GridItem Slots

名称 说明
default 自定义宫格的所有内容
icon 自定义图标
text 自定义文字

GridItem Events

名称 说明 回调参数
click 点击格子时触发 event

更多组件,请前往rainui

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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