App Designer - Animated Container


app designer sidebar

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.

App Designer - add side bar

Adding an Animated Sidebar/Crossbar

  1. In the “Layout” panel, drag the Animated Sidebar/Crossbar to the layout
    1. The bar will snap to the appropriate side of the layout

The containers contains the following properties:

  • Style (animation)
  • Duration
  • Sidebar Width
  • Initially Open
  • Swipeable (click and drag to open/close)
  • Fixed
  • ID
  • 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.

app designer -overhang

Adding Animated Container Overhang feature

  1. Click the checkbox for “Overhang width”
  2. Input the appropriate size in the field to have the container appear on the layout
  3. Click the “Thumb” checkbox to create a textured edge

Get started with the Intel XDK

Download Now

For more complete information about compiler optimizations, see our Optimization Notice.