fs-grid Grid Component

A grid layout component used to display grid-arranged content. It supports customizable column count, spacing, border, and other styles, and is suitable for scenarios such as feature entries and option lists.

Usage

When importing locally, configure it in the index.json of the page or component that needs it.

"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 (custom component/plugin) usage: only the usingComponents registration follows the format below (the avaComponent:// protocol); other usage is identical to local registration.

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

Code Demos

Basic Usage

API

fs-grid Attributes

Attribute Name	Type	Default	Description
columns	Number	4	Number of columns (in horizontal layout it is fixed to 1 column; this attribute has no effect)
layout	String	'vertical'	Unified layout for child items: vertical (top/bottom) / horizontal (left/right, forces a single column)
extStyle	String	''	External styles

fs-grid-item Attributes

Attribute Name	Type	Default	Description
icon	Object	null	Icon configuration object; see the icon object description below
text	String	''	Text content
description	String	''	Description text
layout	String	'vertical'	Layout direction: vertical (top/bottom) / horizontal (left/right)
align	String	'center'	Alignment in vertical layout: left / center / right
textColor	String	''	Text color
descriptionColor	String	''	Description text color
badge	Object	null	Badge configuration object; see the badge object description below
extStyle	String	''	External styles

icon Object Attributes

Attribute Name	Type	Default	Description
name	String	''	Icon name (iconfont class name or http link); choose one of this or imgPath
imgPath	String	''	Image npath; when set, FsImage is used to render, with higher priority than name
size	String/Number	24	Icon/image size (px)
color	String	''	Icon color (only effective for iconfont)
extStyle	String	''	External icon styles (only effective for iconfont)

For more icon configuration options, please refer to the fs-icon component documentation

badge Object Attributes

Attribute Name	Type	Default	Description
content	String/Number	''	Badge content; supports numbers and text
max	Number	99	Maximum displayed number; values exceeding this show as max+
type	String	'filled'	Badge type: filled (filled capsule) / outlined (outlined circle)
color	String	'#ff4444'	Badge color
dot	Boolean	false	Whether to show a small red dot
offset	Array	null	Badge position offset, e.g. [-10, 20] or ['10rpx', '8rpx']
contentStyle	String	''	Custom styles for the badge content

For more badge configuration options, please refer to the fs-badge component documentation

Layout Notes

By setting layout on fs-grid, you can uniformly control the layout of all child items:

• vertical (default): Grid layout with icon on top and text below; the number of columns is controlled by columns
• horizontal: List layout with icon on the left and text on the right; automatically forces a single column

Set style attributes such as align, textColor, and descriptionColor directly on each fs-grid-item.

Usage Example

<!-- Vertical layout, 4 columns -->
<fs-grid columns="4" layout="vertical">
  <fs-grid-item icon="scan" text="Scan" />
  <fs-grid-item icon="pay" text="Pay" />
  <fs-grid-item icon="receive" text="Receive" />
  <fs-grid-item icon="card" text="Bank Card" />
</fs-grid>

<!-- Horizontal layout (auto single column), each item sets its own colors -->
<fs-grid layout="horizontal">
  <fs-grid-item icon="scan" text="Scan" description="Quick scan" textColor="#333" descriptionColor="#999" />
  <fs-grid-item icon="pay" text="Pay" description="Secure payment" />
</fs-grid>

Events

fs-grid-item Events

Event Name	Description	Parameters
click	Click event

打开预览