Kendo UI for Angular

Angular ActionSheet

  • Also called a "BottomSheet", the Angular ActionSheet adds a menu that slides up from the bottom of mobile screens.
  • Part of the Kendo UI for Angular library along with 110+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
  • Slide Up a Navigation Menu From the Bottom of the Screen

    The Angular ActionSheet, sometimes called BottomSheet, is a UX device used for smaller screens when you need to alert or prompt users to action. It appears on the bottom of a screen as a modal dialog and presents users with a choice of actions that they must take. Since this element is popular in iOS and Android, it gives you an easy way to add a popular workflow to mobile or responsive applications.

    See the Angular ActionSheet demo

    actionsheet overview
  • Interaction modes

    The Kendo UI for Angular ActionSheet component allows you to customize the initial display state (expanded or collapsed) and alter it as needed by using the available API options.

    See the Angular ActionSheet Interaction Modes demo

  • Animations

    By leveraging the input properties of the Kendo UI for Angular ActionSheet, you can effortlessly configure the opening and closing animations, as well as the visibility of the ActionSheet component. The animations are included by default, and you have the option to disable them or control their duration.

    See the Angular ActionSheet Animations demo

    Kendo UI for Angular ActionSheet Animations
  • Templates

    The Angular ActionSheet supports templates to help you make the menu fit your menu's appearance requirements. Set the title template or the item template to uniformly configure the component with styles, colors, icons, images, and more. 

    See the Angular ActionSheet Templates demo

    Actionsheet items
  • Events

    The Kendo UI for Angular ActionSheet emits certain events that enable you to control its behavior upon user interaction:

    • ItemClick – fires when an ActionSheet item is clicked
    • OverlayClick – fires when the modal overlay is clicked
    • expand/collapse - fires when the ActionSheet is expanded or collapsed and the animation is complete
    • expandedChange - notifies any changes in the expanded state

    See the Angular ActionSheet Events demo

    Kendo UI for Angular ActionSheet Events
  • Accessibility

    To ensure full accessibility, the ActionSheet is WCAG 2.1 AAA and Section 508 compliant. The component also follows the WAI-ARIA best practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers.

    See the Angular ActionSheet Accessibility demo

  • Keyboard Navigation

    With both UX and accessibility in mind, the ActionSheet supports keyboard shortcuts for interacting with the component. Users who prefer keyboard navigation can open, navigate, and select items.

    See the Angular ActionSheet Keyboard Navigation demo

    Keyboard Navigation

All Kendo UI for Angular Components

Next Steps

Get Started with Kendo UI for Angular

Kendo UI for Angular - Kendoka