• Components
    • Barcodes
    • Buttonsupdated
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filter
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Iconsupdated
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pagerupdated
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBarupdated
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

Items

The ActionSheet items are highly customizable elements that allow you to control their look and feel depending on the use case.

To define the ActionSheet options, provide an ActionSheetItem collection to the items property of the component.

Example
View Source
Change Theme:

Setting Title and Subtitle

To configure the item text or any additional details, use the title and subtitle properties of the ActionSheetItem object.

Example
View Source
Change Theme:

Defining Groups

To indicate a group of items with similar functionality, set the group property of the ActionSheetItem object to top or bottom. The ActionSheet will visually separate the two groups by rendering a separator line between them.

The following example demonstrates the ActionSheet groups in action.

Example
View Source
Change Theme:

Setting Icons

You can enhance the ActionSheet item content by adding icons. Set the following properties of the ActionSheetItem object to take full control over the visibility of the icons:

The following example demonstrates all icon properties in action.

Example
View Source
Change Theme:

Disabling Items

To disable certain items set the disabled property of the ActionSheetItem to true.

The following example demonstrates the disabled state of the ActionSheet items.

Example
View Source
Change Theme:

Styling Items

Some scenarios require further customizations of items layout. Use the cssClass and cssStyle options of the ActionSheetItem object to change the layout of the options as necessary.

The following example demonstrates the cssClass and cssStyle properties in action.

Example
View Source
Change Theme: