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.

Setting Title and Subtitle

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

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.

Displaying 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:

• svgIcon
• icon
• iconClass
• iconSize
• iconColor

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

Displaying SVG Icons

To display an SVG icon inside the ActionSheet, select the desired one from the list of SVG icons supported by Kendo UI for Angular, and set the svgIcon to the necessary icon name.

Copy Codepublic cartIcon = cartIcon;

public items: ActionSheetItem[] = [
    {
        title: 'Add to Cart',
        svgIcon: this.cartIcon,
    },
];

The following example demonstrates how to set the svgIcon property of the ActionSheet.

Displaying Font Icons

To display an Font icon inside the Breadcrumb:

1. Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
2. Depending on the font icons library, you can set the:
   • icon property to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.

     Copy Codepublic items: ActionSheetItem[] = [
         {
             title: 'Add to Cart',
             icon: 'cart',
         },
     ];

   • iconClass property to a third-party font icon like FontAwesome.

     Copy Codepublic items: ActionSheetItem[] = [
         {
             title: 'Add to Cart',
             iconClass: 'fa fa-shopping-cart',
         },
     ];

The following example demonstrates how to set the icon and iconClass properties of the ActionSheet.

Modifying Icon Size

To modify the color of an icon inside the ActionSheet, set the iconSize property to the desired color.

The following example demonstrates how to set the iconSize property of the ActionSheet.

Modifying Icon Color

To modify the color of an icon inside the ActionSheet, set the iconColor property to the desired color.

The following example demonstrates how to set the iconColor property of the ActionSheet.

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.

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.

Suggested Links

• API Reference of the ActionSheet
• API Reference of the ActionSheetItem