diff --git a/docs/images/inheritance-properties.png b/docs/images/inheritance-properties.png new file mode 100644 index 00000000..0a719ea2 Binary files /dev/null and b/docs/images/inheritance-properties.png differ diff --git a/docs/inheritance b/docs/inheritance index 94507fc0..6517a947 100644 --- a/docs/inheritance +++ b/docs/inheritance @@ -1,8 +1,8 @@ ## Inheritance -Inheritance is an ability of an element to transfer a pack of propereties to its `children` elements 'wrapped inside'. +Inheritance is an ability of an element to transfer a pack of properties to its `children` elements 'wrapped inside'. -Properties have to be set in specific order: +Properties have to be set in a specific order: ### Main properties' inheritance: * styles * parents @@ -16,18 +16,45 @@ As for `prototypes`, this property has to be set after styles, but before parent * parents * parent's styles * defaults - ------------------------ - Let's take a closer look using a [Muon Monitor Visualization](demo/muon-monitor/README.md). Running the demo, we will see this: + ![](../docs/images/inheritance-1.png) +You can see a tree of elements on the left; 'World' is a `root`, 'bottom', 'middle', and 'top' are 'World's `children` and so on. + ![](../docs/images/inheritance-tree.png) + +On the right, there is a list with changeable properties. + +![](../docs/images/inheritance-properties.png) + +Properties, which can or cannot be inherited, are these: +* `visible` - toggles the visibility of an element. To be exact, the invisibility of an element is inheritable. + If a `parent` element is invisible, other elements are invisible as well, and they cannot be changed to visible mode. ![](../docs/images/inheritance-2-1-1.png) ![](../docs/images/inheritance-2-1-2.png) + +* `material` - a group of properties, which can be inherited and which can be changed in `children` elements. + * `color` - color of an element. + +Let's see how elements of the `material` group inherits changing `color` property; other properties of the same group inherits in the same way. + +Let's change color of 'World' element. ![](../docs/images/inheritance-2-2-1.png) +It is a `parent`, so 'bottom', 'middle', and 'top' elements inherit this color. + +Now, let's change 'top's color. ![](../docs/images/inheritance-2-2-2.png) +It changes only, 'bottom' and 'middle' stays the same. + +'top' is a `parent` element as well: it has `children` - 'SC72', 'SC73', ... ,'SC80'. Let's change the color of 'SC76'. ![](../docs/images/inheritance-2-2-3.png) + ![](../docs/images/inheritance-2-2-4.png) -![](../docs/images/inheritance-2-2-5.png) \ No newline at end of file +![](../docs/images/inheritance-2-2-5.png) + * `opacity` - a number from 0 to 1 which represents percents of opacity (0 for 0%, 1 for 100%). + * `wireframe` - toggles the wireframe mode. +* `rotation` - rotation of an element. Here, it is set by `x` value. It is inheritable and unable to be changed in `children` elements. +* `position` - position of an element, cannot be inherited.