GridMore Grid More

An advanced grid component built on fs-grid, fs-grid-item, and fs-card. It supports configuring options via an options array and provides a "More" feature to handle the case of too many options. It has a built-in fs-card container, providing a complete card-based display solution.

Import

{
  "usingComponents": {
    "fs-grid-more": "/avaui-sub/fs-grid-more/index"
  }
}

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-more": "avaComponent://avaui-sub/fs-grid-more/index"
  }
}

If you are using it within the avaui-sub subpackage, add the componentPlaceholder configuration:

"componentPlaceholder": {
  "fs-grid-more": "view",
  "fs-grid": "view",
  "fs-grid-item": "view",
  "fs-card": "view"
}

Code demo

Handling too many entries

Features

Built-in card container

The component has a built-in fs-card container, providing:

• Unified style: Standard card style and layout
• Title support: Supports displaying a card title
• Action area: Supports an actions slot to add action buttons
• Flexible configuration: Configure card properties uniformly via cardConfig

Handling too many entries

1. The last icon in the area is "More"

   • Set maxCount to limit the display count
   • A "More" button is automatically displayed at the last position
   • Supports custom "More" button styles
   • Listen to the moreClick event to navigate to a new page

2. Display a drill-down entry on the right side of the title bar

   • Use the actions slot to add a "More" button
   • Handle navigation via custom events

3. Horizontal swipe display

   • Set swiperConfig to enable swipe mode
   • Options are paginated by pageSize
   • Supports swiping horizontally to switch pages
   • Displays a page indicator at the bottom
   • Supports custom indicator color and looped swiping

API

Properties

Property	Type	Default	Description
options	Array	[]	Options data array; see the options description below
columns	Number	4	Number of columns
layout	String	'vertical'	Layout: vertical (top-bottom) / horizontal (left-right)
align	String	'center'	Alignment: left / center / right
textColor	String	''	Text color
descriptionColor	String	''	Description text color
swiperConfig	Object	See description below	Swipe configuration, includes swiper-related properties
moreConfig	Object	See description below	"More" button configuration, includes count limit
cardConfig	Object	See description below	Card configuration, includes fs-card-related properties
extStyle	String	''	External style

options array item properties

Property	Type	Default	Description
icon	String/Object	''	Icon configuration; refer to the fs-icon component
text	String	''	Text content
description	String	''	Description text
badge	String/Number/Object	''	Badge configuration; refer to the fs-badge component
value	String	''	Option value, used for identification
extStyle	String	''	External style for a single option

moreConfig object properties

Property	Type	Default	Description
maxCount	Number	0	Maximum display count; 0 means no limit; "More" is shown when exceeded
text	String	'More'	"More" button text
icon	String/Object	'gengduo'	"More" button icon
description	String	''	"More" button description
extStyle	String	''	"More" button external style

swiperConfig object properties

Property	Type	Default	Description
enable	Boolean	false	Whether to enable horizontal swipe mode
pageSize	Number	8	Number of items displayed per page in swipe mode
showIndicator	Boolean	true	Whether to show the swipe indicator; when shown, the swiper height automatically increases by 24px
indicatorColor	String	'rgba(0, 0, 0, .3)'	Indicator color
indicatorActiveColor	String	'#1890ff'	Indicator active color
circular	Boolean	false	Whether to enable looped swiping

cardConfig object properties

Property	Type	Default	Description
title	String	''	Card title
layoutStyleType	Number	1	Layout type: 0 - full-width card, 1 - rounded card
size	String	'large'	Card size: large/small
layout	Number	1	Layout spec: 1 - home/detail page, 2 - new/edit page

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

Slot

Name	Description
actions	Card action area, corresponds to the actions slot of fs-card

Events

Event	Description	Params
itemClick	Triggered when an option is tapped
moreClick	Triggered when the "More" button is tapped
pageChange	Triggered when the page changes during swiping

Usage example

Horizontal swipe mode

<fs-grid-more
  options="{{allOptions}}"
  columns="{{4}}"
  cardConfig="{{cardConfig}}"
  swiperConfig="{{swiperConfig}}"
  bind:itemClick="onItemClick"
  bind:pageChange="onPageChange"
></fs-grid-more>

打开预览