NativeHStack

A customizable HStack block for Nativeblocks.

@NativeBlock(
    name: "Native HStack",
    keyType: "NATIVE_HSTACK",
    description: "Nativeblocks HStack block",
    version: 1
)
struct NativeHStack<Content: View>: View 

NativeHStack is a flexible horizontal stack layout that integrates with the Nativeblocks ecosystem. It supports features like customizable alignment, spacing, padding, colors, shadows, and more.

Features:

• Dynamic content defined using slots.

• Configurable alignment, direction, padding, and size.

• Background, border, and shadow styling options.

• Trigger actions on tap events.

Example:

NativeHStack(
    content: { _ in Text("Hello, World!") },
    alignmentHorizontal: "center",
    alignmentVertical: "center",
    spacing: 10,
    onClick: { print("HStack clicked") }
)

Inheritance

View

Properties

content

The content of the HStack, defined as a slot.

@NativeBlockSlot(description: "The content displayed inside the HStack.")
    var content: (BlockIndex) -> Content

alignmentHorizontal

Horizontal alignment of the content in the HStack.

@NativeBlockProp(
        description: "Horizontal alignment of the HStack's content.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("leading", "leading"),
            NativeBlockValuePickerOption("trailing", "trailing"),
            NativeBlockValuePickerOption("center", "center"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
    )
    var alignmentHorizontal: String = "leading"

• valuePicker: A dropdown picker for choosing alignment options.

• valuePickerOptions: Contains options like "leading", "trailing", and "center".

alignmentVertical

Vertical alignment of the content in the HStack.

@NativeBlockProp(
        description: "Vertical alignment of the HStack'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"

• valuePicker: A dropdown picker for choosing vertical alignment options.

• valuePickerOptions: Contains options like "top", "bottom", "center", and baselines.

spacing

Spacing between elements in the HStack.

@NativeBlockProp(
        description: "Spacing between elements inside the HStack.",
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
    )
    var spacing: CGFloat = 0

direction

Layout direction of the HStack (LTR or RTL).

@NativeBlockProp(
        description: "The layout direction of the HStack (Left-to-Right or Right-to-Left).",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("LTR", "LTR"),
            NativeBlockValuePickerOption("RTL", "RTL"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Direction")
    )
    var direction: String = "LTR"

• valuePicker: A dropdown picker for choosing the layout direction.

• valuePickerOptions: Contains options like "LTR" (Left-to-Right) and "RTL" (Right-to-Left).

paddingTop

Padding at the top of the HStack.

@NativeBlockProp(
        description: "Padding at the top of the HStack.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingTop: CGFloat = 0

paddingLeading

Padding at the leading edge of the HStack.

@NativeBlockProp(
        description: "Padding at the leading edge of the HStack.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingLeading: CGFloat = 0

paddingBottom

Padding at the bottom of the HStack.

@NativeBlockProp(
        description: "Padding at the bottom of the HStack.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingBottom: CGFloat = 0

paddingTrailing

Padding at the trailing edge of the HStack.

@NativeBlockProp(
        description: "Padding at the trailing edge of the HStack.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingTrailing: CGFloat = 0

frameWidth

@NativeBlockProp(
        description: "Width of the HStack frame.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size")
    )
    var frameWidth: String = "notSet"

frameHeight

@NativeBlockProp(
        description: "Height of the HStack frame.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size")
    )
    var frameHeight: String = "notSet"

backgroundColor

@NativeBlockProp(
        description: "Background color of the HStack.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var backgroundColor: String = "#00000000"

cornerRadius

@NativeBlockProp(
        description: "Corner radius of the HStack's background.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var cornerRadius: CGFloat = 0

borderColor

@NativeBlockProp(
        description: "Border color of the HStack.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var borderColor: String = "#00000000"

borderWidth

@NativeBlockProp(
        description: "Border width of the HStack.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var borderWidth: CGFloat = 0

shadowColor

Shadow color of the HStack.

@NativeBlockProp(
        description: "Shadow color of the HStack.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var shadowColor: String = "#00000000"

• valuePicker: A color picker for selecting the shadow color.

shadowRadius

Shadow blur radius of the HStack.

@NativeBlockProp(
        description: "Shadow blur radius of the HStack.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var shadowRadius: CGFloat = 0

shadowX

Horizontal offset of the HStack's shadow.

@NativeBlockProp(
        description: "Horizontal offset of the HStack's shadow.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var shadowX: CGFloat = 0

shadowY

Vertical offset of the HStack's shadow.

@NativeBlockProp(
        description: "Vertical offset of the HStack's shadow.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var shadowY: CGFloat = 0

onClick

Action triggered when the HStack is tapped.

@NativeBlockEvent(
        description: "The action triggered when the HStack is tapped."
    )
    var onClick: () -> Void

body

var body: some View