images, inheritance doc
BIN
docs/images/inheritance-1.png
Normal file
After Width: | Height: | Size: 61 KiB |
BIN
docs/images/inheritance-2-1-1.png
Normal file
After Width: | Height: | Size: 30 KiB |
BIN
docs/images/inheritance-2-1-2.png
Normal file
After Width: | Height: | Size: 26 KiB |
BIN
docs/images/inheritance-2-2-1.png
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
docs/images/inheritance-2-2-2.png
Normal file
After Width: | Height: | Size: 76 KiB |
BIN
docs/images/inheritance-2-2-3.png
Normal file
After Width: | Height: | Size: 100 KiB |
BIN
docs/images/inheritance-2-2-4.png
Normal file
After Width: | Height: | Size: 100 KiB |
BIN
docs/images/inheritance-2-2-5.png
Normal file
After Width: | Height: | Size: 78 KiB |
BIN
docs/images/inheritance-tree.png
Normal file
After Width: | Height: | Size: 33 KiB |
@ -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)
|