Introduction

The Action Sheet component is a menu list or grid that slides up from the bottom of the screen and presents a set of related actions. It supports three display types: centered list, left-aligned list, and grid layout, with customizable title, subtitle, icons, and cancel button style. It is suitable for scenarios such as sharing, selection, and operations.

Usage

Import locally by configuring it in the index.json of the page or component that needs it:

"usingComponents": {
  "fs-action-sheet": "ava-ui/fxui/fs-action-sheet/index"
}

Code Demos

Basic Usage

List Display Types

Two list display types are supported to meet different scenario needs:

• Centered list (center): Options are center-aligned, suitable for scenarios such as action buttons
• Left-aligned 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, and supports combined display of icons and text:

• Supports image and font icons
• Automatic line-wrapping layout
• Supports disabled state

Option Status

You can set different states for options, including normal, danger, and disabled:

• normal/default: Normal state (default)
• danger: Danger state, usually displayed in red
• disabled: Disabled state, not clickable

Long Content

Supports scrollable display of long content, with automatic content height calculation:

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

API

Parameters

Parameter	Description	Type	Optional Values	Default
show	Whether to show the action sheet	boolean	—	false
displayType	Display type	string	center/left/grid	'center'
supportIcon	Whether to support icons (only effective in list mode)	boolean	—	false
title	Title	string	—	''
subtitle	Subtitle	string	—	''
options	Option data list	array	—	[]
showCancel	Whether to show the cancel button	boolean	—	true
cancelText	Cancel button text	string	—	'Cancel'

Events

Event Name	Description	Callback Parameter
itemClick	Triggered when an option is clicked
close	Triggered when the panel is closed
overlayEnter	Triggered when the overlay enters	—
overlayLeave	Triggered when the overlay leaves	—

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/default (normal) / danger / disabled
  },
  // ... more options
]

Display Type Notes

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 line-wrapping layout
• Supports image and font icons
• Icons and text are arranged vertically
• Subtitle is not supported

Icon Support

The component supports two types of icons:

1. Font icons: Use the fxui_all font icon library, pass in the icon name directly
2. Image icons: Supports network image and local image URL formats

Icon URLs support the following protocols:

• https:// / http://: Network images
• ava:// / fs:// / bundle://: Local resources
• event:// / cml:// / weex:// / native://: Special protocols

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 itemClick event
• A scrollbar is automatically displayed when content overflows
• The cancel button text supports internationalization configuration
• The component uses fs-overlay as the overlay component
• Supports enhanced scrolling experience with automatic scrollbar hiding

打开预览