NativeRow

A customizable Row block for Nativeblocks.

@NativeBlock(
    name = "Native Row",
    keyType = "NATIVE_ROW",
    description = "Nativeblocks row block",
    version = 1
)
@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, direction, and size.

• Background color, corner radius, and scrolling support.

• Trigger actions on tap events.

Example:

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

Inheritance

Composable

Properties

content

The content of the Row, defined as a slot.

@NativeBlockSlot(description = "The content displayed inside the Row.")
val content: @Composable (BlockIndex) -> Unit

width

The width of the Row.

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

height

The height of the Row.

@NativeBlockProp(
    description = "The height of the row (e.g., 'match' or 'wrap').",
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("match", "Match parent"),
        NativeBlockValuePickerOption("wrap", "Wrap content")
    ],
    valuePickerGroup = NativeBlockValuePickerPosition("Size")
)
var 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")
    ]
)
var 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")
)
var paddingStart: Double = 0.0

paddingTop

Padding at the top of the Row.

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

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")
)
var paddingEnd: Double = 0.0

paddingBottom

Padding at the bottom of the Row.

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

background

The background color of the Row.

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

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")
    ]
)
var horizontalArrangement: String = "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")
    ]
)
var verticalAlignment: String = "top"

onClick

The action triggered when the Row is clicked.

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

direction

The layout direction of the Row.

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