Bottom Sheet

Overview

The Bottom Sheet component is a FlexContainer that displays the content using a bottom-to-top flow animation. The Bottom Sheet component can be customized to contain data lists, action buttons, menus with selection options, logos, and even a header. A developer can add child widgets such as Segment widget or a component (such as Selection Component and Quick Links Component) to the Bottom Sheet component to achieve their requirement.

NOTE: The Bottom Sheet component is used inside the Mobile Banking application.

Bottom Sheet Contracts

The Bottom Sheet component does not contain any properties. It contains methods and events that are invoked while displaying and dismissing the component. The events and methods available for customization provided in the Bottom Sheet component are:

• showBottomSheet Method
• dismissBottomSheet Method
• onShow Event
• onDismiss Event

showBottomSheet Method

This method is invoked by the parent of the component (such as a Form Controller) to display the Bottom Sheet component. When the parent component uses this method, the Bottom Sheet component appear using the bottom to top animation on the screen.

this.view.bottomsheet.showBottomSheet();

dismissBottomSheet Method

This method is invoked by the parent of the component (such as a Form Controller) to hide the Bottom Sheet component. When the parent component uses this method, the Bottom Sheet component disappears from the screen using the top to bottom animation.

this.view.bottomsheet.dismissBottomSheet();

onShow Event

The onShow event in the Bottom Sheet component is invoked when the component is displayed on the screen. The function definition for this event can be written in the Form Controller of the parent of the component.

this.onShow(); 

onDismiss Event

The onDismiss event in the Bottom Sheet component is invoked when the component is hidden from the screen. The function definition for this event can be written in the Form Controller of the parent of the component.

this.onDismiss();