z
This function sets the z-index CSS property of an element for all media devices at once.
Although you can provide a custom value for the index, it is recommended to use the predefined functions (have a look at dev.fritz2.styling.theme.ZIndices) and therefore spans of the theme. Those are especially designed to define common groups of layers for clear purposes like one for a layer or also modal dialog. Those groups are designed to model an order in an ascending way.
example call:
zIndex { overlay } // use the fixed overlay layer of the theme (there is only one level of it)
zIndex { modal(2) } // use the z-index of the modal group of level "2"
zIndex { modal(nextLevel) } // inject a level-value passed by the outer component dynamically in order to bring
// the element to the front (assuming the outer context counts the consumed levels)Parameters
extension function parameter in order to bring dev.fritz2.styling.theme.ZIndices functions into scope.
This function sets the z-index CSS property of an element for each media device independently.
For a detailed overview have a look at the variant of zIndex for all media devices!
principle call example:
zIndex({
sm = { ... },
lg = { ... }
})Parameters
extension function parameter in order to bring dev.fritz2.styling.theme.ZIndices functions into scope for large media devices
extension function parameter in order to bring dev.fritz2.styling.theme.ZIndices functions into scope for medium sized media devices
extension function parameter in order to bring dev.fritz2.styling.theme.ZIndices functions into scope for small media devices
extension function parameter in order to bring dev.fritz2.styling.theme.ZIndices functions into scope for extra large media devices