Introduction

fs-action-sheet-m provides modular invocation capability for the fs-action-sheet component, supporting unified management of action sheets through DialogCenter. It is suitable for scenarios such as sharing, selection, and operations, with a friendly API and Promise-style callbacks. It supports both list and grid display types, and supports custom title, subtitle, icons, etc.

Usage

Local import. Configure it in the index.json of the page or component where it is needed:

"usingComponents": {
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

Module Invocation

import dialogSet from "ava-ui/fxui/DialogCenter/DialogSet";

// Show the action sheet
dialogSet.fsActionSheet.show({
  displayType: 'center',
  supportIcon: false,
  title: 'Select Action',
  subtitle: 'Please select an action to perform',
  options: [
    { label: 'Option 1', icon: 'star' },
    { label: 'Option 2', icon: 'like' }
  ],
  showCancel: true,
  cancelText: 'Cancel',
  success: (res) => {
    console.log('Selection result:', res);
  },
  onClose: (res) => {
    console.log('Closed panel:', res);
  }
});

Code Demonstrations

List Display Type

Supports two list display types to meet different scenario needs:

• Centered list (center): Options are center-aligned, suitable for scenarios such as action buttons
• Left list (left): Options are left-aligned, suitable for scenarios such as menu selection

Grid Display Type

The grid layout is suitable for scenarios such as feature entries and sharing, supporting combined display of icon and text:

• Supports image and font icons
• Automatic wrap layout
• Supports disabled state

Option Status

Supports setting the disabled state of options; options in the disabled state are not clickable:

• Set the disabled state via status: 'disabled'
• Options in the disabled state display a gray style
• Clicking a disabled option will not trigger an event

Extra Long Content

Supports scrolling display of extra long content, automatically calculating content height:

• Automatically displays a scrollbar when content overflows
• Supports enhanced scrolling experience
• Automatically hides scrollbar

API

Parameters

Parameter	Description	Type	Possible Values/Format	Default
displayType	Display type	string	center/left/grid	'center'
supportIcon	Whether to support icons (only effective in list mode)	boolean	true/false	false
title	Title	string	—	''
subtitle	Subtitle	string	—	''
options	Option data list	array	[{label, icon, subtitle, status}]	[]
showCancel	Whether to show the cancel button	boolean	true/false	true
cancelText	Cancel button text	string	—	'Cancel'
success	Callback function for selecting an option	function	(res) => {}	—
onClose	Callback function for closing the panel	function	(res) => {}	—

Option Data Format

// Option data format
const options = [
  {
    label: 'Option 1',           // Option text
    icon: 'star',            // Icon (font icon name or image URL)
    subtitle: 'Subtitle',       // Subtitle (only supported in list mode)
    status: 'normal'         // Status: normal / disabled
  },
  // ... more options
]

Display Type Description

List Mode (center/left)

• center: Options are center-aligned, suitable for scenarios such as action buttons
• left: Options are left-aligned, suitable for scenarios such as menu selection
• Supports the supportIcon property to display icons
• Supports subtitle to display a subtitle

Grid Mode (grid)

• Automatic wrap layout
• Supports image and font icons
• Icons and text are arranged vertically
• Does not support subtitles

Callback Functions

success Callback

Triggered when the user clicks an option, returning option info:

success: (res) => {
  console.log('Selected option:', res);
  // res: { idx: 0, tag: { label: 'Option 1', icon: 'star' } }
}

onClose Callback

Triggered when the user closes the panel:

onClose: (res) => {
  console.log('Closed panel:', res);
  // res: { cancel: true, detail: { cancel: true } }
}

Notes

• The component automatically handles the close event of the physical back button
• The supportIcon property is not supported in grid mode
• Options in the disabled state will not trigger the success callback
• A scrollbar is automatically displayed when content overflows
• The cancel button text supports internationalization configuration
• The component destroys itself automatically; no need to manually manage the lifecycle

打开预览