Wherever the style property and the Styles icon appear in the Property Editor, you can click on the icon to display the style editor.
The following menus are available in the style editor:
In release 8.0.10, the Padding menu was updated to include Margin and Padding settings. For complete information, see Style Reference.
You can quickly make adjustments to the styles by clicking on them in the Applied Styles panel.
When you hover over a style listed in the panel, a Delete icon is displayed. Click on it to delete the style.
If you made new edits to an existing style attribute, you can hover over the style and an Undo icon is displayed. Click on it to revert to the previously saved setting.
You can minimize the Applied Styles panel by clicking on the Arrow icon to the left of the name. Click the arrow again to reopen the panel.
Expanding a category enables you to set the properties associated with it. Here is an example of the Style Editor with the Text menu expanded and a few options selected:
Applying individual style elements to a component will overwrite the settings for the same style elements being applied from a Style Class.
|Some components can have multiple individual Style elements, with each one focusing on a different part of the component. When these styles have a conflict, the more specific style wins out, and sets the style for that particular property.|
Expand the Padding menu and set the padding to 8 for all four sides.
Our finished example looks like this:
Refer to Style Reference for a complete reference of all the available settings for Styles.