This page is for application designers who want to know how to use style settings.
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Overview
The components on a screen have properties for applying styles
which affect their
look and feel. For example, you can add
a background colour or set how a button reacts when the mouse passes over it. Styles can be applied using a shared style which is reusable and provides a consistent look and feel across your application, or it can be applied to a single component if you want to apply a one-off style. You can combine both shared styles and object-level styling on the same component.
Style Order
| Anchor | ||||
|---|---|---|---|---|
|
PhixFlow applies styles using the principle of cascading style sheets (CSS). A component can have styles from one, some or all of the following settings:
PhixFlow applies styles in the above order.
If a different style is applied to the same aspect of a component, the later settings override the earlier settings:
| Info |
|---|
For example, the style for a button border is set to:
the button has a 2 pixel, red border. |
You can configure a shared style to have a condition that must be true for the style to be applied using a formatting rule; see Applying Formatting Rules and Formatting Rule properties. For example, you can hide an "Update" button until the user had made a change to the data.
Formatting rules require an expression for the condition logic, which must be true for the style to be applied; see Expressions and PhixScripts.
Where Styles are Applied
Every component has a Style Properties tab with the sections:
- Shared Styles (Recommended) - a global-level shared style that can be applied to multiple components to give your application a consistent look and feel.
- To change an aspect of styling, you only need to change the style in one place,
- the shared style. All
- components that use the style are automatically updated
If you change a shared style, remember to test that it looks correct for all components.on individual layout components. This
- when the style is updated. It is recommended that all styles be applied using a shared style where possible.
- Styles Settings - set common formatting options for the component. This includes position settings, which fix where a component should appear and what size it should be. This is object-level styling. It is useful to use this when you are experimenting with styles or you want to apply a one-off style to
- a component.
To use an object-level style on multiple components, you have to set the style properties for each component. You can use both global- and
- CSS Properties - a set of specific styles, defined using CSS tags and their associated values. This is object-level styling
- .
- Formatting Rules - apply a shared style when the conditions of a rule are satisfied. Formatting Rules are applied at the object-level
- .
| Iframe | ||||||
|---|---|---|---|---|---|---|
|
Where to Apply Styles
Every layout component has a property tab with the sections:
- Shared Styles - lists any global-level shared styles that apply to the component
- Styles - set common formatting options for the component
- CSS Properties - lists specific styles, defined using a CSS tag and its value.
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Creating Shared Styles
In the PhixFlow repository,
navigate to Styles and click
.Insert excerpt _new _new nopanel true - In the Basic Settings section, set the style options you require; see Style.
- Save your style.
Apply a Shared Style
To use the style in a component:
- Open the properties of the component you wish to apply the style to.
- Click on the
Insert excerpt _property_
tabs
._property_tabs name style nopanel true
Sharing Styles
To use the style in a layout component:
- Scroll down to the Shared Style section.
- Click
.Insert excerpt _styles_ccs_list _styles_ccs_list nopanel true - Drag a style from the repository and drop it into the Shared Styles section of the
- properties.
- PhixFlow adds the style to the list of shared styles that apply to
A layout component can have multiple shared styles and CSS properties. PhixFlow applies the formats in the order they appear in the property tab list.
Style Order- the
- component
- Shared Styles - global
CSS Properties - object
- Style Settings - object
- Conditional Formatting - global
- Position Settings - object
- .
If a different style is applied to the same aspect of a layout component, the later settings override the earlier settings. For example, the style for a button border is set to:
- 10px and black in a shared style
- 2px and red in the component's style settings,
the button has a 2 pixel, red border.
You can configure a shared style, to have a condition that must be true for the style to be applied. This is a Formatting Rule. For example, you can hide an "Update" button until the user had made a change to the data.
Formatting rules require an expression for the condition logic; see Regular Expressions and Scripting Regular Expressions.
