The Kendo UI for Vue ActionSheet, also known as a BottomSheet, is a slide-up pane for displaying a set of available options in a modal view. It appears at the bottom of a screen and presents users with a choice of actions that they can choose from. Since this element is popular in iOS and Android, it enables you to easily add a popular workflow to mobile or responsive applications.
The ActionSheet items are highly customizable elements that enables you to customize their look and feel based on your needs. You can configure the title and description, define groups of items with similar functionality, and choose between different styling options for additional customization. Additionally, you can enhance the item content by adding different icons, and disable certain items when needed.
The ActionSheet component enables you to use custom components to tailor the appearance of its building blocks:
Header – displayed at the top of the content
Content – forms the primary content section of the ActionSheet
Footer – appears below the content
By leveraging the input properties of the Kendo UI for Vue ActionSheet, you can easily 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.
The Kendo UI for Vue ActionSheet component emits certain events that enable you to control its behavior upon user interaction:
onClose – fires when the modal overlay clicked
onItemselect – fires when an item is clicked or selected
With both UX and accessibility in mind, the Vue ActionSheet supports keyboard shortcuts for interacting with the component. Users who prefer the keyboard navigation can navigate between items, select a given item, as well as close the ActionSheet component.
To ensure full accessibility, the Kendo UI for Vue ActionSheet component is compliant with the Web Content Accessibility Guidelines (WCAG) 2.1 AA standards and Section 508 requirements. It follows the Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) best practices for implementing the keyboard navigation , and provides various options for managing its focus. The component is also tested against the most popular screen readers.