IBest-UI

Appearance

GridsAlbum 九宫格相册 ​

介绍 ​

用于将图片分块展示在九宫格内。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

ts
import { IBestGridAlbum } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column() {
      IBestGridAlbum({
        url: "https://q8.itc.cn/q_70/images03/20251108/5e7ed50788e94e9bba8e8aecfa810156.jpeg"
      })
    }
  }
}

横向长图 ​

横向长图

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column() {
      IBestGridAlbum({
        url: "https://gips2.baidu.com/it/u=641660390,3943119249&fm=3074&app=3074&f=PNG?w=2560&h=1440"
      })
    }
  }
}

自定义尺寸样式 ​

自定义尺寸样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column() {
      IBestGridAlbum({
        url: "https://img1.baidu.com/it/u=2498831369,2480570398&fm=253&app=138&f=JPEG?w=800&h=1353",
        componentWidth: 300,
        space: 6,
        bgColor: "#f2f3f5",
        gridBgColor: "#969799",
        radius: 10
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
url图片地址ResourceStr''
componentWidth整体宽度string | number100%
bgColor背景色ResourceColor''
gridBgColor格子背景色ResourceColor''
space格子间距number3
radius外圆角Length | BorderRadiuses | LocalizedBorderRadiuses0