NativeColumn

A customizable column block for Nativeblocks.

@NativeBlock(
    name = "Native Column",
    keyType = "NATIVE_COLUMN",
    description = "Nativeblocks column block",
    version = 1
)
@Composable
fun NativeColumn()

NativeColumn provides a flexible and customizable vertical layout for the Nativeblocks ecosystem. It supports dynamic content, alignment, padding, scrolling, background customization, and click actions.

Features:

• Dynamically composable content through slots.

• Configurable alignment, scrolling, padding, and size.

• Background, border, and corner radius customization.

• Trigger click events.

Example:

NativeColumn(
    content = { _ -> Text("Hello, World!") },
    width = "match",
    height = "wrap",
    scrollable = true,
    paddingStart = 16.0,
    paddingTop = 16.0,
    background = "#FFFFFF",
    onClick = { println("Column clicked!") }
)

---

Slots

content

The content of the column, defined as a slot.

@NativeBlockSlot(description = "Slot for composing child content within the column.")
    var content: @Composable (index: BlockIndex) -> Unit

---

Properties

width

Specifies the width of the column.

@NativeBlockProp(
        description = "The width of the column (e.g., 'match' or 'wrap').",
        valuePickerGroup = NativeBlockValuePickerPosition("Size"),
        valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions = [
            NativeBlockValuePickerOption("match", "Match parent"),
            NativeBlockValuePickerOption("wrap", "Wrap content")
        ]
    )
    var width: String = "wrap"

• valuePicker: Dropdown picker to choose width.

• valuePickerOptions: Includes options like "match" and "wrap".

---

height

Specifies the height of the column.

@NativeBlockProp(
        description = "The height of the column (e.g., 'match' or 'wrap').",
        valuePickerGroup = NativeBlockValuePickerPosition("Size"),
        valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions = [
            NativeBlockValuePickerOption("match", "Match parent"),
            NativeBlockValuePickerOption("wrap", "Wrap content")
        ]
    )
    var height: String = "wrap"

---

scrollable

Determines if the column should be scrollable.

@NativeBlockProp(
        description = "Determines if the column should be scrollable.",
        valuePicker = NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions = [
            NativeBlockValuePickerOption("false", "false"),
            NativeBlockValuePickerOption("true", "true")
        ]
    )
    var scrollable: Boolean = false

---

paddingStart

Padding on the start side of the box.

@NativeBlockProp(
    description = "Padding on the start side of the box.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing")
)
var paddingStart: Double = 0.0

---

paddingTop

Padding on the top side of the box.

@NativeBlockProp(
    description = "Padding on the top side of the box.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing")
)
var paddingTop: Double = 0.0

---

paddingEnd

Padding on the end side of the box.

@NativeBlockProp(
    description = "Padding on the end side of the box.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing")
)
var paddingEnd: Double = 0.0

---

paddingBottom

Padding on the bottom side of the box.

@NativeBlockProp(
    description = "Padding on the bottom side of the box.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing")
)
var paddingBottom: Double = 0.0

---

background

Sets the background color of the column.

@NativeBlockProp(
        description = "Background color of the column in hexadecimal format.",
        valuePicker = NativeBlockValuePicker.COLOR_PICKER
    )
    var background: String = "#00000000"

---

direction

Specifies the layout direction of the column.

@NativeBlockProp(
        description = "The layout direction of the column (e.g., 'LTR' or 'RTL').",
        valuePicker = NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions = [
            NativeBlockValuePickerOption("LTR", "LTR"),
            NativeBlockValuePickerOption("RTL", "RTL")
        ]
    )
    var direction: String = "LTR"

---

cornerRadius

Configures corner radii for the column.

@NativeBlockProp(
        description = "Top-start corner radius in DP.",
        valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
        valuePicker = NativeBlockValuePicker.NUMBER_INPUT
    )
    var radiusTopStart: Double = 0.0

@NativeBlockProp(
        description = "Top-end corner radius in DP.",
        valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
        valuePicker = NativeBlockValuePicker.NUMBER_INPUT
    )
    var radiusTopEnd: Double = 0.0

@NativeBlockProp(
        description = "Bottom-start corner radius in DP.",
        valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
        valuePicker = NativeBlockValuePicker.NUMBER_INPUT
    )
    var radiusBottomStart: Double = 0.0

@NativeBlockProp(
        description = "Bottom-end corner radius in DP.",
        valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
        valuePicker = NativeBlockValuePicker.NUMBER_INPUT
    )
    var radiusBottomEnd: Double = 0.0

---

verticalArrangement

Arranges child components vertically.

@NativeBlockProp(
        description = "Vertical arrangement of child components inside the column.",
        valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions = [
            NativeBlockValuePickerOption("top", "top"),
            NativeBlockValuePickerOption("bottom", "bottom"),
            NativeBlockValuePickerOption("center", "center"),
            NativeBlockValuePickerOption("spaceBetween", "Space Between"),
            NativeBlockValuePickerOption("spaceAround", "Space Around"),
            NativeBlockValuePickerOption("spaceEvenly", "Space Evenly")
        ]
    )
    var verticalArrangement: String = "top"

---

horizontalAlignment

Aligns child components horizontally.

@NativeBlockProp(
        description = "Horizontal alignment of child components inside the column.",
        valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions = [
            NativeBlockValuePickerOption("start", "Start"),
            NativeBlockValuePickerOption("end", "End"),
            NativeBlockValuePickerOption("centerHorizontally", "Center Horizontally"),
        ]
    )
    var horizontalAlignment: String = "start"

---

Events

onClick

Handles tap events.

@NativeBlockEvent(
        description = "Callback triggered when the column is clicked."
    )
    var onClick: (() -> Unit)? = null