NativeColumn

A customizable column block for Nativeblocks.

@NativeBlock(
    keyType = "NATIVE_COLUMN",
    name = "Native Column",
    description = "Nativeblocks column block",
    version = 2
)
@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.dp,
    paddingTop = 16.dp,
    background = Color.white,
    onClick = { println("Column clicked!") }
)

---

Inheritance

Composable

---

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

---

Datas

list

A JSON array (e.g., "[,,...]") used to render child content dynamically. The size of the list determines the number of repetitions of the content.

@NativeBlockData(
    "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."
)
list: String = ""

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")
    ],
    defaultValue = "wrap"
) width: String = "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")
    ],
    defaultValue = "wrap"
) 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")
    ],
    defaultValue = "false"
) scrollable: Boolean = false

padding

Configures padding for the column.

@NativeBlockProp(
    description = "Padding on the start (left) side in DP.",
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing"),
    defaultValue = "0.0"
) paddingStart: Dp = 0.dp

@NativeBlockProp(
    description = "Padding on the top side in DP.",
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing"),
    defaultValue = "0.0"
) paddingTop: Dp = 0.dp

@NativeBlockProp(
    description = "Padding on the end (right) side in DP.",
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing"),
    defaultValue = "0.0"
) paddingEnd: Dp = 0.dp

@NativeBlockProp(
    description = "Padding on the bottom side in DP.",
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing"),
    defaultValue = "0.0"
) paddingBottom: Dp = 0.dp

background

Sets the background color of the column.

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

cornerRadius

Configures corner radii for the column.

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

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

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

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

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", "spaceBetween"),
        NativeBlockValuePickerOption("spaceAround", "spaceAround"),
        NativeBlockValuePickerOption("spaceEvenly", "spaceEvenly"),
    ],
    defaultValue = "top"
) verticalArrangement: Arrangement.Vertical = Arrangement.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", "centerHorizontally"),
    ],
    defaultValue = "start"
) horizontalAlignment: Alignment.Horizontal = Alignment.Start

Events

onClick

Handles tap events.

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