Skip to content

Commit 03c4626

Browse files
bbohlenderbbohlender
committed
add zIndexOffset Explanation
1 parent ae4ff23 commit 03c4626

File tree

1 file changed

+39
-36
lines changed

1 file changed

+39
-36
lines changed

‎docs/getting-started/components-and-properties.md

+39-36
Original file line numberDiff line numberDiff line change
@@ -88,42 +88,45 @@ In addition to the flexbox properties, the container has properties for styling
8888
<details>
8989
<summary>View all properties for styling the background panel</summary>
9090

91-
| Property | Type |
92-
| -------------------------------- | ------------------- |
93-
| zIndexOffset | number |
94-
| receiveShadow | boolean |
95-
| castShadow | boolean |
96-
| depthTest | boolean |
97-
| depthWrite | boolean |
98-
| renderOrder | number |
99-
| backgroundColor | ColorRepresentation |
100-
| backgroundOpacity | number |
101-
| panelMaterialClass | Material class |
102-
| borderOpacity | number |
103-
| borderColor | ColorRepresentation |
104-
| borderRadius | number |
105-
| borderLeftRadius | number |
106-
| borderRightRadius | number |
107-
| borderTopRadius | number |
108-
| borderBottomRadius | number |
109-
| borderTopLeftRadius | number |
110-
| borderTopRightRadius | number |
111-
| borderBottomRightRadius | number |
112-
| borderBottomLeftRadius | number |
113-
| borderBend | number |
114-
| scrollbarPanelMaterialClass | Material class |
115-
| scrollbarBackgroundOpacity | number |
116-
| scrollbarBackgroundColor | ColorRepresentation |
117-
| scrollbarWidth | number |
118-
| scrollbarBorderRadius | number |
119-
| scrollbarBorderLeftRadius | number |
120-
| scrollbarBorderRightRadius | number |
121-
| scrollbarBorderTopRadius | number |
122-
| scrollbarBorderBottomRadius | number |
123-
| scrollbarBorderTopLeftRadius | number |
124-
| scrollbarBorderTopRightRadius | number |
125-
| scrollbarBorderBottomRightRadius | number |
126-
| scrollbarBorderBottomLeftRadius | number |
91+
| Property | Type |
92+
| -------------------------------- | ------------------------------------------- |
93+
| receiveShadow | boolean |
94+
| castShadow | boolean |
95+
| depthTest | boolean |
96+
| depthWrite | boolean |
97+
| renderOrder | number |
98+
| backgroundColor | ColorRepresentation |
99+
| backgroundOpacity | number |
100+
| panelMaterialClass | Material class |
101+
| borderOpacity | number |
102+
| borderColor | ColorRepresentation |
103+
| borderRadius | number |
104+
| borderLeftRadius | number |
105+
| borderRightRadius | number |
106+
| borderTopRadius | number |
107+
| borderBottomRadius | number |
108+
| borderTopLeftRadius | number |
109+
| borderTopRightRadius | number |
110+
| borderBottomRightRadius | number |
111+
| borderBottomLeftRadius | number |
112+
| borderBend | number |
113+
| scrollbarPanelMaterialClass | Material class |
114+
| scrollbarBackgroundOpacity | number |
115+
| scrollbarBackgroundColor | ColorRepresentation |
116+
| scrollbarWidth | number |
117+
| scrollbarBorderRadius | number |
118+
| scrollbarBorderLeftRadius | number |
119+
| scrollbarBorderRightRadius | number |
120+
| scrollbarBorderTopRadius | number |
121+
| scrollbarBorderBottomRadius | number |
122+
| scrollbarBorderTopLeftRadius | number |
123+
| scrollbarBorderTopRightRadius | number |
124+
| scrollbarBorderBottomRightRadius | number |
125+
| scrollbarBorderBottomLeftRadius | number |
126+
| zIndexOffset | number or { minor?: number, major?: number } |
127+
128+
**`zIndexOffset` Explanation:**
129+
`zIndexOffset={1}` allows to manipulate the default order deduced from the UI hierachy, giving the developer the option to shift the order of specific elements backwards or forwards making them appear behind or infront of other elements. Note that sibling elements are treated as having the same UI hiearchy and are therefore not explicitly ordered. `zIndexOffset={1}` is the same as `zIndexOffset={{ major: 1 }}`. While giving a major zIndexOffset causes more draw calls, a minor offset with `zIndexOffset={{ minor: 1 }}` causes no direct performance implications and allows to order sibling elements of the same type e.g. with two overlapping panels beeing siblings in the UI hiearchy.
127130

128131
</details>
129132

0 commit comments

Comments
 (0)