更新记录

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

修改文档

1.0.2（2024-07-30） 下载此版本

适配r-config-provider

1.0.1（2024-07-26） 下载此版本

更新依赖

平台兼容性

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

GridItem Props

GridItem Slots

GridItem Events

更多组件，请前往rainui