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:18] admin [Styling with css style] |
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 two options below: | ||
+ | * explicitly remove background: | ||
- | To remedy the above situation, you have the options below: | ||
- | - explicitly remove backgroud: | ||
{ " | { " | ||
- | | + | |
---- | ---- | ||
- | ==== Styling | + | ==== Styling |
- | Nodes are states, branches, switches, synchbars and initial / final states. | + | Nodes are states, branches, switches, synchbars and initial / final states. |
+ | === States === | ||
+ | States can be styled on: | ||
+ | * container area | ||
+ | * state label | ||
+ | |||
+ | Both support advanced styling options. | ||
+ | |||
+ | 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. | ||
+ | * background | ||
+ | * border | ||
+ | * border-radius | ||
+ | * color | ||
+ | * opacity | ||
+ | |||
+ | For state label, you can change its color, font style, font weight, | ||
+ | * color | ||
+ | * font-style, font-family, | ||
+ | * text-decoration | ||
+ | * left, right, top, bottom | ||
+ | |||
+ | === Branches === | ||
+ | Branches can be styled: | ||
+ | * container area | ||
+ | * branch node label | ||
+ | |||
+ | Only label supports advanced styling options. | ||
+ | |||
+ | For Container area, you can change background color only. | ||
+ | |||
+ | For branch node label, you can change its color, font style, font weight, | ||
+ | * color | ||
+ | * font-style, font-family, | ||
+ | * text-decoration | ||
+ | * left, right, top, bottom | ||
+ | |||
+ | === Synchbars === | ||
+ | Syncbars have two variations: horizontal and vertical, both can be styled: | ||
+ | * container area | ||
+ | |||
+ | For Container area, advanced styling is supported: | ||
+ | * background | ||
+ | * border | ||
+ | * border-radius | ||
+ | * color | ||
+ | * opacity | ||
+ | |||
+ | |||
+ | |||
+ | === Initial and Final States === | ||
+ | Initial and Final states can be styled: | ||
+ | * container area | ||
+ | * state label | ||
+ | |||
+ | Both supports advanced styling options. | ||
+ | |||
+ | 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. | ||
+ | * background | ||
+ | * color | ||
+ | * opacity | ||
+ | |||
+ | For state label, you can change its color, font style, font weight, | ||
+ | * color | ||
+ | * font-style, font-family, | ||
+ | * text-decoration | ||
+ | * left, right, top, bottom | ||
---- | ---- | ||
+ | |||
+ | ==== Styling Transitions ==== | ||
+ | Transitions have line segments and a transition label. Both are styled independently. | ||
+ | |||
+ | === Transition line segments === | ||
+ | Transition line segments and the arrow head can be styled with color name or //advanced styling//. | ||
+ | * background | ||
+ | * opacity | ||
+ | |||
+ | === Transition label === | ||
+ | Transition labels support //advanced styling//, however their position should not be changed as they are positioned relative to the connection point at the source state. | ||
+ | * color | ||
+ | * font-style, font-family, | ||
+ | * text-decoration | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== 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. | ||
+ | |||
+ | ---- | ||
+ | |||