This page is for application designers who want to know how style settings are applied.
Overview
When applying styles, it is possible to set a value globally, using a shared style, or specifically on the object. PhixFlow applies the CSS in a 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
- Styles
- CSS Properties.
These sections provide the options
...
where you can set the common style settings. To set other options, use CSS Properties where you can specify a CSS tag and its value.
You can apply
...
:
- object level styles which only apply to the selected
...
Global-level - share styles, reusable, consistent look and feel. Update the source and all occurences get updated across application. Remember to test your changes and check that they look OK in all places.
...
- component. These styles override any shared styles. However, if you use the styles on multiple components, then decide to change the style, you have to update each item to make the change.
- global level styles are set in one place and shared by multiple components. Use global styles when you want your application to have a consistent look and feel. When you make a change to a shared style, all components that use it are automatically updated. If you make a change to a shared style, remember to test that it looks correct for all components.
To share a CSS property, simply open the shared style and drag the CSS Property to it.
Style Order
Object level styles override Global level
...
Summary of the order in which styles are applied
...
...
you can hide an "Update" button until the user had made a change to the data.
Expressions
...
| Iframe | ||||||
|---|---|---|---|---|---|---|
|
...