NativeRow

A customizable Row block for Nativeblocks.

@NativeBlock(
    keyType = "NATIVE_ROW",
    name = "Native Row",
    description = "Nativeblocks row block",
    version = 2
)
@Composable
fun NativeRow

NativeRow is a flexible horizontal row layout that integrates with the Nativeblocks ecosystem. It supports features like customizable alignment, padding, scrolling behavior, background styling, and click events.

Features:

• Dynamic content defined using slots.

• Configurable alignment, padding, and size.

• Background color, corner radius, and scrolling support.

• Trigger actions on tap events.

Example:

NativeRow(
    content = { _ -> Text("Hello, World!") },
    horizontalArrangement = Arrangement.Start,
    verticalAlignment = Alignment.Top,
    scrollable = true,
    onClick = { println("Row clicked") }
)

Inheritance

Composable

---

Slots

content

The content of the Row, defined as a slot.

@NativeBlockSlot(description = "The content displayed inside the Row.")
val content: @Composable (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

The width of the Row.

@NativeBlockProp(
    description = "The width of the row (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

The height of the Row.

@NativeBlockProp(
    description = "The height of the row (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 Row should be scrollable horizontally.

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

paddingStart

Padding at the start (left) side of the Row.

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

paddingTop

Padding at the top of the Row.

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

paddingEnd

Padding at the end (right) side of the Row.

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

paddingBottom

Padding at the bottom of the Row.

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

background

The background color of the Row.

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

horizontalArrangement

Horizontal arrangement of child components in the Row.

@NativeBlockProp(
    description = "Horizontal arrangement of child components inside the row.",
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("start", "start"),
        NativeBlockValuePickerOption("end", "end"),
        NativeBlockValuePickerOption("center", "center"),
        NativeBlockValuePickerOption("spaceBetween", "spaceBetween"),
        NativeBlockValuePickerOption("spaceAround", "spaceAround"),
        NativeBlockValuePickerOption("spaceEvenly", "spaceEvenly"),
    ],
    defaultValue = "start"
) horizontalArrangement: Arrangement.Horizontal = Arrangement.Start

verticalAlignment

Vertical alignment of child components in the Row.

@NativeBlockProp(
    description = "Vertical alignment of child components inside the row.",
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("top", "top"),
        NativeBlockValuePickerOption("bottom", "bottom"),
        NativeBlockValuePickerOption("centerVertically", "centerVertically"),
    ],
    defaultValue = "top"
) verticalAlignment: Alignment.Vertical = Alignment.Top

Events

onClick

The action triggered when the Row is clicked.

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