NativeZStack
A customizable ZStack block for Nativeblocks.
@NativeBlock(
name: "Native ZStack",
keyType: "NATIVE_ZSTACK",
description: "Nativeblocks ZStack block",
version: 1
)
struct NativeZStack<Content: View>: View
NativeZStack allows you to stack child views on top of one another with alignment, spacing, padding, and styling options. It supports click events and customizable layout direction.
Features:
-
Customizable alignment (horizontal and vertical).
-
Configurable padding, frame sizing, and background styling.
-
Layout direction options (LTR or RTL).
-
Shadow and border customization.
Example:
NativeZStack(
content: { _ in
Text("Top Left Aligned")
.padding()
},
alignmentHorizontal: "center",
alignmentVertical: "top",
backgroundColor: "#ffffff",
onClick: { print("ZStack clicked") }
)
Inheritance
View
Properties
content
The content of the ZStack, provided as a slot.
@NativeBlockSlot(description: "The content to display inside the ZStack.")
var content: (BlockIndex) -> Content
alignmentHorizontal
The horizontal alignment of the ZStack's content.
@NativeBlockProp(
description: "The horizontal alignment of the ZStack's content.",
valuePicker: NativeBlockValuePicker.DROPDOWN,
valuePickerOptions: [
NativeBlockValuePickerOption("leading", "leading"),
NativeBlockValuePickerOption("trailing", "trailing"),
NativeBlockValuePickerOption("center", "center"),
],
valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
)
var alignmentHorizontal: String = "leading"
alignmentVertical
The vertical alignment of the ZStack's content.
@NativeBlockProp(
description: "The vertical alignment of the ZStack's content.",
valuePicker: NativeBlockValuePicker.DROPDOWN,
valuePickerOptions: [
NativeBlockValuePickerOption("top", "top"),
NativeBlockValuePickerOption("bottom", "bottom"),
NativeBlockValuePickerOption("center", "center"),
NativeBlockValuePickerOption("firstTextBaseline", "firstTextBaseline"),
NativeBlockValuePickerOption("lastTextBaseline", "lastTextBaseline"),
],
valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
)
var alignmentVertical: String = "top"
spacing
The spacing between child views in the ZStack.
@NativeBlockProp(
description: "The spacing between child views in the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
)
var spacing: CGFloat = 0
direction
The layout direction of the ZStack (LTR or RTL).
@NativeBlockProp(
description: "The layout direction of the ZStack.",
valuePicker: NativeBlockValuePicker.DROPDOWN,
valuePickerOptions: [
NativeBlockValuePickerOption("LTR", "LTR"),
NativeBlockValuePickerOption("RTL", "RTL"),
],
valuePickerGroup: NativeBlockValuePickerPosition("Direction")
)
var direction: String = "LTR"
paddingTop
The top padding inside the ZStack.
@NativeBlockProp(
description: "The top padding inside the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Padding")
)
var paddingTop: CGFloat = 0
paddingLeading
The leading (left) padding inside the ZStack.
@NativeBlockProp(
description: "The leading padding inside the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Padding")
)
var paddingLeading: CGFloat = 0
paddingBottom
The bottom padding inside the ZStack.
@NativeBlockProp(
description: "The bottom padding inside the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Padding")
)
var paddingBottom: CGFloat = 0
paddingTrailing
The trailing (right) padding inside the ZStack.
@NativeBlockProp(
description: "The trailing padding inside the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Padding")
)
var paddingTrailing: CGFloat = 0
frameWidth
The width of the ZStack's frame.
@NativeBlockProp(
description: "The width of the ZStack's frame.",
valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
valuePickerOptions: [
NativeBlockValuePickerOption("notSet", "notSet"),
NativeBlockValuePickerOption("infinity", "infinity"),
],
valuePickerGroup: NativeBlockValuePickerPosition("Size")
)
var frameWidth: String = "notSet"
frameHeight
The height of the ZStack's frame.
@NativeBlockProp(
description: "The height of the ZStack's frame.",
valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
valuePickerOptions: [
NativeBlockValuePickerOption("notSet", "notSet"),
NativeBlockValuePickerOption("infinity", "infinity"),
],
valuePickerGroup: NativeBlockValuePickerPosition("Size")
)
var frameHeight: String = "notSet"
backgroundColor
The background color of the ZStack.
@NativeBlockProp(
description: "The background color of the ZStack.",
valuePicker: NativeBlockValuePicker.COLOR_PICKER,
valuePickerGroup: NativeBlockValuePickerPosition("Background")
)
var backgroundColor: String = "#00000000"
cornerRadius
The corner radius of the ZStack.
@NativeBlockProp(
description: "The corner radius of the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Background")
)
var cornerRadius: CGFloat = 0
borderColor
The border color of the ZStack.
@NativeBlockProp(
description: "The border color of the ZStack.",
valuePicker: NativeBlockValuePicker.COLOR_PICKER,
valuePickerGroup: NativeBlockValuePickerPosition("Background")
)
var borderColor: String = "#00000000"
borderWidth
The border width of the ZStack.
@NativeBlockProp(
description: "The border width of the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Background")
)
var borderWidth: CGFloat = 0
shadowColor
The shadow color of the ZStack.
@NativeBlockProp(
description: "The shadow color of the ZStack.",
valuePicker: NativeBlockValuePicker.COLOR_PICKER,
valuePickerGroup: NativeBlockValuePickerPosition("Background")
)
var shadowColor: String = "#00000000"
shadowRadius
The shadow radius of the ZStack.
@NativeBlockProp(
description: "The shadow radius of the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Background")
)
var shadowRadius: CGFloat = 0
shadowX
The horizontal shadow offset of the ZStack.
@NativeBlockProp(
description: "The horizontal shadow offset of the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Background")
)
var shadowX: CGFloat = 0
shadowY
The vertical shadow offset of the ZStack.
@NativeBlockProp(
description: "The vertical shadow offset of the ZStack.",
valuePickerGroup: NativeBlockValuePickerPosition("Background")
)
var shadowY: CGFloat = 0
onClick
Triggered when the ZStack is clicked.
@NativeBlockEvent(description: "Triggered when the ZStack is clicked.")
var onClick: () -> Void
body
var body: some View