This page is for application designers who want to know how style settings are applied.
| 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.
If you change your mind about
- 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
If you make a change to a shared style, remember to test that it looks correct for all components.on individual layout components. This
- updated 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.
If you want to use an object-level styles on multiple components, you have to remember to set the style properties for each component.
If you want to change the style, you must change it on each component.
You can use both global and object level styling on the same layout component. PhixFlow applies styles specific order, with the values set at the object level overriding those set globally. This is explained in the following video.
| 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 - apply common formatting settings to the component
- CSS Properties - specify advanced formatting, for Styles section, set up a CSS tag and its value. To share a CSS property, simply open the shared style and drag the CSS Property to it.
- 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.
| 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
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.
Style Order
It is possible to set different information for the same style, in a shared styles and directly on a layout component. PhixFlow applies styles in the following order:
- Shared Styles - global
CSS Properties - object
- Style Settings - object
- Conditional Formatting - global - shared style
- Position Settings - object level
Conditional formatting rules determine which formatting applies, for example you can hide an "Update" button until the user had made a change to the data.
Later applied overrides earlyer
Expressions
- PhixFlow adds the style to the list of shared styles that apply to the component.