images, inheritance doc

This commit is contained in:
kiruma524 2021-08-16 22:11:00 +03:00
parent 68495c0cdf
commit 7b99ec54d2
10 changed files with 18 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

View File

@ -1,16 +1,33 @@
## Inheritance ## Inheritance
Inheritance is a very useful ability of `children` elements to get the same property in default as his parent does have (to 'inherit' it). Inheritance is an ability of an element to transfer a pack of propereties to its `children` elements 'wrapped inside'.
Properties have to be set in specific order:
### Main properties' inheritance: ### Main properties' inheritance:
* styles * styles
* parents * parents
* parent's styles * parent's styles
* defaults * defaults
As for `prototypes`, this property has to be set after styles, but before parents. So the order will be this:
### Reference properties' inheritance: ### Reference properties' inheritance:
* styles * styles
* prototypes * prototypes
* parents * parents
* parent's styles * parent's styles
* defaults * 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)
![](../docs/images/inheritance-tree.png)
![](../docs/images/inheritance-2-1-1.png)
![](../docs/images/inheritance-2-1-2.png)
![](../docs/images/inheritance-2-2-1.png)
![](../docs/images/inheritance-2-2-2.png)
![](../docs/images/inheritance-2-2-3.png)
![](../docs/images/inheritance-2-2-4.png)
![](../docs/images/inheritance-2-2-5.png)