fs-grid 宫格组件

宫格布局组件，用于展示网格状的内容。支持自定义列数、间距、边框等样式，适用于功能入口、选项列表等场景。

使用方法

局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "fs-grid": "/avaui-sub/fs-grid/index",
  "fs-grid-item": "/avaui-sub/fs-grid-item/index"
},
"componentPlaceholder": {
  "fs-grid": "view",
  "fs-grid-item": "view"
}

PWC（自定义组件/插件）使用：仅 usingComponents 注册方式使用 avaComponent:// 协议，其他用法与局部引入一致。

"usingComponents": {
  "fs-grid": "avaComponent://avaui-sub/fs-grid/index",
  "fs-grid-item": "avaComponent://avaui-sub/fs-grid-item/index"
}

代码演示

基础用法

API

fs-grid 属性

属性名	类型	默认值	说明
columns	Number	4	列数（水平布局时固定为 1 列，此属性不生效）
layout	String	'vertical'	统一设置子项布局：vertical(上下) / horizontal(左右，强制单列)
extStyle	String	''	外部样式

fs-grid-item 属性

属性名	类型	默认值	说明
icon	Object	null	图标配置对象，详见下方icon对象说明
text	String	''	文字内容
description	String	''	描述文字
layout	String	'vertical'	布局方向：vertical(上下) / horizontal(左右)
align	String	'center'	上下布局时的对齐方式：left(左对齐) / center(居中) / right(右对齐)
textColor	String	''	文字颜色
descriptionColor	String	''	描述文字颜色
badge	Object	null	徽章配置对象，详见下方badge对象说明
extStyle	String	''	外部样式

icon对象属性

属性名	类型	默认值	说明
name	String	''	图标名称（iconfont 类名或 http 链接），与 imgPath 二选一
imgPath	String	''	图片 npath，有值时使用 FsImage 渲染，优先级高于 name
size	String/Number	24	图标/图片大小（px）
color	String	''	图标颜色（仅 iconfont 有效）
extStyle	String	''	图标外部样式（仅 iconfont 有效）

更多图标配置选项请参考 fs-icon组件文档

badge对象属性

属性名	类型	默认值	说明
content	String/Number	''	徽章内容，支持数字和文字
max	Number	99	最大显示数字，超过显示为 max+
type	String	'filled'	徽章类型：filled(填充胶囊) / outlined(边框圆形)
color	String	'#ff4444'	徽章颜色
dot	Boolean	false	是否显示小红点
offset	Array	null	设置徽章的位置偏移，示例：[-10, 20] 或 ['10rpx', '8rpx']
contentStyle	String	''	徽章内容的自定义样式

更多徽章配置选项请参考 fs-badge组件文档

布局说明

通过在 fs-grid 上设置 layout，可以统一管理所有子项的布局方式：

• vertical（默认）：图标在上、文字在下的宫格布局，列数由 columns 控制
• horizontal：图标在左、文字在右的列表布局，自动强制 1 列

align、textColor、descriptionColor 等样式属性请直接在各 fs-grid-item 上设置。

使用示例

<!-- 垂直布局，4 列 -->
<fs-grid columns="4" layout="vertical">
  <fs-grid-item icon="scan" text="扫一扫" />
  <fs-grid-item icon="pay" text="付款" />
  <fs-grid-item icon="receive" text="收款" />
  <fs-grid-item icon="card" text="银行卡" />
</fs-grid>

<!-- 水平布局（自动单列），每项独立设置颜色 -->
<fs-grid layout="horizontal">
  <fs-grid-item icon="scan" text="扫一扫" description="快速扫码" textColor="#333" descriptionColor="#999" />
  <fs-grid-item icon="pay" text="付款" description="安全支付" />
</fs-grid>

事件

fs-grid-item 事件

事件名	说明	参数
click	点击事件

打开预览