NativeLazyHStack

A customizable LazyHStack block for Nativeblocks.

@NativeBlock(
    name: "Native LazyHStack",
    keyType: "NATIVE_LAZY_HSTACK",
    description: "Nativeblocks LazyHStack block",
    version: 1
)
struct NativeLazyHStack<Content: View>: View 

NativeLazyHStack 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, padding, and size.

• Background, border, and shadow styling options.

• Trigger actions on tap events.

Example:

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

Inheritance

View

Datas

list

@NativeBlockData(
        description:
            "A JSON array (e.g., '[{},{},...]') used for repeating the content based on its size. If the list value is invalid, the default content slot is invoked."
    )
    var list: String = ""

Slots

content

The content of the LazyHStack, defined as a slot.

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

Properties

alignmentHorizontal

Horizontal alignment of the content in the LazyHStack.

@NativeBlockProp(
        description: "Horizontal alignment of the LazyHStack's content.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("leading", "leading"),
            NativeBlockValuePickerOption("trailing", "trailing"),
            NativeBlockValuePickerOption("center", "center"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment"),
        defaultValue: "leading"
    )
    var alignmentHorizontal: HorizontalAlignment = HorizontalAlignment.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 LazyHStack.

@NativeBlockProp(
        description: "Vertical alignment of the LazyHStack's content.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("top", "top"),
            NativeBlockValuePickerOption("bottom", "bottom"),
            NativeBlockValuePickerOption("center", "center"),
            NativeBlockValuePickerOption("firstTextBaseline", "firstTextBaseline"),
            NativeBlockValuePickerOption("lastTextBaseline", "lastTextBaseline"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment"),
        defaultValue: "top"
    )
    var alignmentVertical: VerticalAlignment = VerticalAlignment.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 LazyHStack.

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

paddingTop

Padding at the top of the LazyHStack.

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

paddingLeading

Padding at the leading edge of the LazyHStack.

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

paddingBottom

Padding at the bottom of the LazyHStack.

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

paddingTrailing

Padding at the trailing edge of the LazyHStack.

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

frameWidth

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

frameHeight

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

backgroundColor

@NativeBlockProp(
        description: "Background color of the LazyHStack.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "#00000000"
    )
    var backgroundColor: Color 

cornerRadius

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

borderColor

@NativeBlockProp(
        description: "Border color of the LazyHStack.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "#00000000"
    )
    var borderColor: Color 

borderWidth

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

shadowColor

Shadow color of the LazyHStack.

@NativeBlockProp(
        description: "Shadow color of the LazyHStack.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background"),
        defaultValue: "#00000000"
    )
    var shadowColor: Color 

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

shadowRadius

Shadow blur radius of the LazyHStack.

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

shadowX

Horizontal offset of the LazyHStack's shadow.

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

shadowY

Vertical offset of the LazyHStack's shadow.

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

Events

onClick

Action triggered when the LazyHStack is tapped.

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