ActionSheetComponent

Represents the Kendo UI ActionSheet component for Angular. Use this component to display a set of choices related to a user-initiated task in a modal sheet that slides up from the bottom of the screen.

html

<kendo-actionsheet [items]="actionItems" [expanded]="true">
</kendo-actionsheet>

Selector

kendo-actionsheet

Export Name

Accessible in templates as #kendoActionSheetInstance="kendoActionSheet"

Inputs

Name	Type	Default	Description
actions	ActionSheetAction[]		Specifies the action buttons displayed in the ActionSheet footer.
actionsLayout	ActionSheetActionsLayout		Configures the layout of the action buttons in the footer. By default, actions are arranged horizontally and stretched to fill the container.
animation	boolean | ActionSheetAnimation	true	Configures the opening and closing animations for the ActionSheet (see example).
cssClass	any		Applies CSS classes to the inner ActionSheet element. Accepts any value supported by ngClass.
cssStyle	any		Applies inline styles to the inner ActionSheet element. Accepts any value supported by ngStyle.
expanded	boolean	false	Controls whether the ActionSheet is expanded or collapsed.
items	ActionSheetItem[]		Provides the collection of items rendered in the ActionSheet content area.
overlayClickClose	boolean	false	Determines whether the ActionSheet closes when the overlay is clicked.
subtitle	string		Sets the subtitle text displayed below the title in the header.
title	string		Sets the title text displayed in the ActionSheet header.
titleId	string		Sets the aria-labelledby attribute of the ActionSheet wrapper element. Use this option when the built-in header element is replaced through the ActionSheetHeaderTemplate or ActionSheetContentTemplate.

Events

Name	Type	Description
action	EventEmitter<ActionSheetAction>	Fires when any of the ActionSheet action buttons is clicked.
collapse	EventEmitter<any>	Fires when the ActionSheet is collapsed and its animation is complete.
expand	EventEmitter<any>	Fires when the ActionSheet is expanded and its animation is complete.
expandedChange	EventEmitter<boolean>	Fires when the expanded property of the component is updated. You can use this event to provide two-way binding for the expanded property.
itemClick	EventEmitter<ActionSheetItemClickEvent>	Fires when an ActionSheet item is clicked.
overlayClick	EventEmitter<any>	Fires when the modal overlay is clicked.

Methods

toggle
Toggles the visibility of the ActionSheet.
Parameters expanded? boolean