WebAtoms Expander

This article explains Expander control in detail and highlights a way to implement this control which is present in the WebAtoms framework. The Expander is the user interface control imported from the WebAtoms library.

What is Expander control?

WebAtoms Expander is the functional component. For implementing the Expander control, there is no need to extend it into our class component. It helps in easy implementation of the layout, which is needed to expand and collapse, which can help add multiple interacting options on a single screen.

Properties of Expander control

• icon - icon is a string property used in assigning the icon code or path name. It is an optional property utilized for enhancing the layout by displaying icons.

• isExpanded- isExpanded is a boolean property that expands the form layout when set to true and collapses when set to false. By toggling the isExpanded property, we can expand or collapse the view on some DOM event.

How to implement the Expander control?

In this example, we will use the Expander control to display a form in separate sections where each section is a separate Expander, shown separately in the ExpanderDemoScreen.

Code for ExpanderDemoScreen

In this example, we will create three simple forms inside an Expander where each Form in the Expander has unique user fields. The layout of the screen only allow one Form to display at a time. When one Form is in an expanded state, the other two remain collapsed.

Code snippet for css of ExpanderDemoScreen

Code snippet for ExpanderDemoViewModel

The logic for implementing desired expand and collapse behavior.

Advantages of Expander

• Expander control helps create layouts having a master-detail flow. Mainly beneficial when there is a requirement for implementing single-page applications.

• We can generate dynamic layouts, as Expander gives us control over the view displayed when a particular event has occurred.

• An Expander control is beneficial when there is a requirement of showing only a part of a large layout at a time, making it efficient in small screen sizes.

• The Expander control is a lightweight and responsive control.

• 'Expander' can be expanded or collapsed without defining any event.

• As 'Expander' is a functional component hence it is reusable and gets initialized in the constructor of the class component.