Action Sheet

import { AXActionSheetModule } from '@acorex/components/action-sheet';

Action sheet is a type of alert offering two or more options relevant to the context. It includes a title, an optional message, and a list of actions, with the title above and the actions below.

Overview

In this section, you can test different options of this component and see the output in real time

Title

Sub Title

Show header

Close on backdrop

Show close button

Draggable

Drag Up

Usage

A simple example of using action sheet

Preview

Code

List item

The action sheet can receive and display an array of AXActionSheetItem.

Preview

Code

Custom content

You can use the action sheet to display your desired content. It is enough to set the content value equal to a component or template ref

Preview

Code

List item and custom content together

You can have both items and use content mode in an action sheet

Preview

Code

On close

this method call when you close action sheet

Preview

Code

Draggable

The action sheet is draggable and expands to full screen when pulled upward.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-action-sheet-bg-color	var(--ax-sys-color-lightest-surface)	Background color of the action sheet.
--ax-comp-action-sheet-text-color	var(--ax-sys-color-#{$name}-surface)	Text color within the action sheet. Uses a theme color.
--ax-comp-action-sheet-hover-bg-color	var(--ax-sys-color-surface)	Background color of the action sheet when hovered.
--ax-comp-action-sheet-border-radius-size	var(--ax-sys-border-radius)	Border radius of the action sheet. Uses the system's border radius.

Methods

open	config: AXActionSheetConfig	Specifies the function to be called to open the action sheet with the given configuration.

Props

title	string	Sample Title	Sets the title of the action sheet.
subtitle	string	The subtitle is placed here so that if you have an explanation about this action sheet, you can insert it	Provides a subtitle or description for the action sheet.
showHeader	boolean	true	Determines whether the header is displayed.
closeOnBackdrop	boolean	true	Specifies whether the action sheet should close when the backdrop is clicked.
showCloseButton	boolean	true	Determines whether a close button is displayed.
items	AXActionSheetItem[]	[]	Specifies the array of button items to be displayed in the action sheet.
content	TemplateRef	-	Defines the custom template content to be displayed in the action sheet.