Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
tutorial:styling_model [2020/06/05 16:46] admin |
tutorial:styling_model [2020/06/28 16:35] admin |
||
---|---|---|---|
Line 1: | Line 1: | ||
===== Tutorial: Styling Your Models ===== | ===== Tutorial: Styling Your Models ===== | ||
- | Learning Objectives: | + | ====Learning Objectives==== |
* [[#What can be styled?]] | * [[#What can be styled?]] | ||
* [[#What are the styling options?]] | * [[#What are the styling options?]] | ||
Line 28: | Line 28: | ||
==== Styling with classes ==== | ==== Styling with classes ==== | ||
- | This is the preferred option to style as it's more reliable | + | This is the preferred option to style as it's more reliable |
On the components that supports //advanced styling//, just enter the names of the css classes using space as the delimiter for multiple classes. | On the components that supports //advanced styling//, just enter the names of the css classes using space as the delimiter for multiple classes. | ||
- | All class names must be named with the prefix //class_//. | + | All class names must be named with the prefix //class_//, for example " |
The definition of these css classes are set in // | The definition of these css classes are set in // | ||
Line 47: | Line 47: | ||
{ " | { " | ||
- | By setting the above css style, you are leaving the background unchanged, which is desired. | + | By setting the above css style, you are leaving the background unchanged, which may not be desired. |
- | To remedy the above situation, you have the options below: | + | To remedy the above situation, you have two options below: |
- | * explicitly remove | + | * explicitly remove |
{ " | { " | ||
- | * save and re-open the model | + | * save and re-open the model, as when the model is re-opened, states are created without the background. |
Line 60: | Line 60: | ||
==== Styling Nodes ==== | ==== Styling Nodes ==== | ||
- | Nodes are states, branches, switches, synchbars and initial / final states. | + | Nodes are states, branches, switches, synchbars and initial / final states. |
=== States === | === States === | ||
- | States can be styled: | + | States can be styled |
* container area | * container area | ||
* state label | * state label | ||
- | Both supports | + | Both support |
For Container area, you can change color, background color, state borders, opacity, etc. Positions should not be changed as the state position coordinates are used to align the transitions. | For Container area, you can change color, background color, state borders, opacity, etc. Positions should not be changed as the state position coordinates are used to align the transitions. | ||
Line 148: | Line 148: | ||
---- | ---- | ||
+ | |||
+ | ==== Styling Boxes ==== | ||
+ | Boxes can be styled on the container area as well as their labels independently, | ||
+ | |||
+ | Box container area: | ||
+ | * background | ||
+ | * border | ||
+ | * border-radius | ||
+ | * color | ||
+ | * opacity | ||
+ | |||
+ | |||
+ | Box label: | ||
+ | * color | ||
+ | * font-style, font-family, | ||
+ | * text-decoration | ||
+ | * left, right, top, bottom | ||
+ | |||
+ | ---- | ||
+ | ==== Styling Swimlanes ==== | ||
+ | Swimlane has two variations: horizontal and vertical. | ||
+ | |||
+ | Swimlane has multiple lanes, each of which can also be styled independently. | ||
+ | |||
+ | Swimlane has a header and label, and their color can be set/ | ||
+ | |||
+ | Each lane has a label and its background color can also be changed/ | ||
+ | |||
+ | //Advanced styling// is not supported. | ||
+ | |||
+ | ---- | ||
+ | |||