App Designer - Adaptive Styles


App Designer Adaptive Style

App Designer is 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.  All of the elements has a list of supported styles that are available in the “Styles” panel such as widths and show-hide. Styles can also be triggered by wrap points to allow for form factor specific styling.

App Designer - media query

Creating an Adaptive Style

  1. Click the “Add Wrap Point” button to add a wrap point marker on the layout
  2. Click the desired UI element that will have the new style applied
  3. Click the appropriate attribute on the “Style” panel
  4. Click the “New” button
    1. A popup window will be displayed requesting the style class’s name
    2. Click Ok
      1. Numerous settings will be displayed for this newly created style to apply to your selected element
  5. Click the “+” button adjacent to the “All” tab
    1. A popup window will be displayed allowing for a media query to be configured/applied to the selected style’s properties
  6. Click the wrap point to allow for the media query to be applied
    1. Note: The wrap point can be moved across the bar to change the style application range

App Designer - AS  Post

The outcome shows how styles are applied when the layout is below the selected wrap point. Multiple adaptive styles can be applied to a single element or even multiple elements similarly to normal styles.

If you are interested in creating simple Styles using App Designer, click here.

Get started with the Intel XDK

Download Now

Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.