Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
Next revision Both sides next revision
tutorial:styling_model [2020/06/05 16:48]
admin [Styling Transitions] 		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 and predictable, and it's a good way to maintain consistency.+This is the preferred option to style as it's more reliable / predictable, and it's a good way to maintain consistency.
  
 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 "class_GREEN".
  
 The definition of these css classes are set in //config/ide.css//.  The download package comes with two classes: //class_GREEN and class_ORANGE//.  Use these as examples to define your own classes. The definition of these css classes are set in //config/ide.css//.  The download package comes with two classes: //class_GREEN and class_ORANGE//.  Use these as examples to define your own classes.
Line 47: Line 47:
    { "border": "2px solid RED" }    { "border": "2px solid RED" }
  
-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 backgroud: +  * explicitly remove background: 
  
    { "background": "", "border": "2px solid RED" }    { "background": "", "border": "2px solid RED" }
  
-  * 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.  The container area and label can be styled independently.+Nodes are states, branches, switches, synchbars and initial / final states.  The node container area and node label can be styled independently.
  
 === States === === States ===
-States can be styled:+States can be styled on:
   * container area   * container area
   * state label   * state label
  
-Both supports advanced styling options.+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. 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 154: Line 154:
 Box container area: Box container area:
   * background   * background
 +  * border
 +  * border-radius
 +  * color
   * opacity   * opacity
 +
  
 Box label: Box label:
Line 162: Line 166:
   * left, right, top, bottom   * left, right, top, bottom
  
 +----
 +==== Styling Swimlanes ====
 +Swimlane has two variations: horizontal and vertical.  They are styled in exactly the same way.
 +
 +Swimlane has multiple lanes, each of which can also be styled independently. 
 +
 +Swimlane has a header and label, and their color can be set/changed. 
 +
 +Each lane has a label and its background color can also be changed/set.
 +
 +//Advanced styling// is not supported.
  
 ---- ----