The style bar is designed to provide at-a-glance information about the currently selected element and enable quick editing.

At-a-glance styling information

The style bar has been designed so that designers can quickly see information about the most commonly used styling properties.


 In the above image we can see the following information:


The cell is visible by default

Style bar - Size

The width is controlled manually (SizeManual-gray) at 100px and the height is also manually controlled at 30px

Style Bar - Fill

The fill of the element is a gradient that goes from red to a light grey

Style bar - Border

The border is dotted and 1 px thick, there are multiple colors used in the border

Screenshot_2013-12-05_09.04.39 11

The element uses a vertical layout ( LayoutVerticalFlow-gray ) and all child elements will be laid out from the centre (quickbar-alignment-middle)

Style Bar - Rounded Corners

The two top corners are rounded with a value of 5

Screenshot_2013-12-05_09.04.39 5

The left and right margins are 3 and there are no margins on the top and bottom


 All 4 sides internally use a padding of 4 for any child elements

Screenshot_2013-12-05_09.04.39 6

There is a drop shadow applied to the element

Screenshot_2013-12-05_09.04.39 7

There is no inner shadow used by the element
Screenshot_2013-12-05_09.04.39 8

 The element is not floating
Screenshot_2013-12-05_09.04.39 9

The element can be nested

Single update / revert indicators for widgets

At the end of the style bar there are two controls that only appear when the properties of an instance of a widget do not match the definition of the widget.


 Using the update control the properties of the currently selected widget will overwrite the widget definition and all other instances of the widget will also get those properties


Using the revert control the properties of the instance will revert back to the values from the widget definition.

For more detail about which properties have changed - please consult the widget inspector.

Change widget state

When a widget is selected the first control in the style bar is a control that shows the currently selected state of a widget. 



Screenshot 2013-12-10 12.34.57 

In this case the selected state is Normal - this control can be used to change the state of a widget from one state to another. You can also choose to Select All States, to make a more complex selection of states or to add and remove states from a widget chooser Manage States to show the Style Inspector where you can make changes to the states.

Focused Popup Editors

A few controls in the style bar can be interacted with directly in the style bar, e.g. state and nest. Most of the controls will open a Style Editor when they are clicked e.g. Visibility, Size etc. The Style Editors are designed to be focused on single task.

Copy / Paste Styles

All controls in the style bar come with a hidden feature that allow the designer to copy or paste all the styling properties for that control between elements. If you ctrl-click on any of the controls in the style bar that open a Style Editing popup you will see a context menu that enables you to copy or paste the style relevant to that particular part of the style bar. Pasting can also be achieved with the keyboard shortcut ⌥⌘V.