App Designer is a drag-and drop tool for developing application user interfaces with rows and columns as the basic design structure. Various UI elements such as buttons, input fields, text areas, and more can be dragged into a column that sits in a row. Amongst the available elements, there are a set of items that focus on animated bars.
Adding an Animated Sidebar/Crossbar
- In the “Layout” panel, drag the Animated Sidebar/Crossbar to the layout
- The bar will snap to the appropriate side of the layout
The containers contains the following properties:
- Style (animation)
- Sidebar Width
- Initially Open
- Swipeable (click and drag to open/close)
- Triggered By (secondary item toggles the container)
Styling is also available for animated containers for the background, thumb, border, shadow and gutter. A button is present on the layout to toggle the container between an open and close state. This is good for previewing the animation and accessing the element. Other elements such as input fields and buttons can be added to the container to create menus or context points. For viewing the “Triggered By” property, the project will need to be viewed in a separate tab in the browser by clicking the “Preview” button.
Adding Animated Container Overhang feature
- Click the checkbox for “Overhang width”
- Input the appropriate size in the field to have the container appear on the layout
- Click the “Thumb” checkbox to create a textured edge