Formatting

The appearance, requirements and properties of a widget may be altered to match any look and feel and fit any layout through the Properties panel or the style toolbar. Each widget has its particular styles, depending on its properties (if it has text, background, border, etc.). Hence, you may not find all the formatting options defined here in every widget but in most of them.

General properties

Most of the widgets have some properties in common that you will always find in the General group of the Properties panel.

Position and size

A set of controls are provided in order to change the position and size of any widget on the canvas:

Layout

Widgets that can contain other widgets like Dynamic Panels has a 'layout' property which lets you define how the contents of the widget will be distributed:

Background

Most widgets have a background layer displaying a color or an image that can also be defined in their background properties:

Selecting a background color

To select the color of the background, click on the Color picker button and select the desired color from the drop-down. If you do not find the color there, click on 'More colors...' option to define your own color or 'Capture Color' to get the color from another widget. You can also indicate the color you want typing its hexadecimal code directly into the text input next to the capture color option.
If you just want your widget without background, select the white square that has a red diagonal line indicating no background, from the color picker drop-down.

Selecting a gradient

You can also decide to define a gradient as the background of your widget. To create a gradient, click on the Color picker button and select the 'Create gradient' option:

Text

Widgets which have text have the following font format options to be changed:

Add Googgle Fonts

The font type drop-down contains the list of fonts currently available on your system and an option to add new fonts from the Google's fonts directory.

Click on the option to open the Google FontsS dialog and select the fonts you want to download.

Padding

Widgets which have text have padding properties that can be changed:

Border

Customize the type, color and width of your widget's border using the controls provided:

Shadow

Customize the drop shadow of a widget. Widgets which have text also have the option to customize the text shadow.
Widget's shadows will be displayed when you Simulate, Publish Online or Export your prototype to HTML.

Shadow properties dialog

Spacing

Customize the spacing between cells of a Data Grid. Set the pixel distance between cells, horizontally or vertically.