NativeRow

A customizable LazyRow block for Nativeblocks.

@NativeBlock(
    keyType = "NATIVE_LAZY_ROW",
    name = "Native Lazy LazyRow",
    description = "Nativeblocks lazy row block",
    version = 1
)
@Composable
fun NativeLazyRow

NativeLazyRow is a flexible horizontal lazy 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:

NativeLazyRow(
    list = "[1,2]",
    content = { _ -> Text("Hello, World!") },
    horizontalArrangement = Arrangement.Start,
    verticalAlignment = Alignment.Top,
    scrollable = true,
    onClick = { println("LazyRow clicked") }
)

Inheritance

Composable

---

Slots

content

The content of the LazyRow, defined as a slot.

@NativeBlockSlot(description = "The content displayed inside the LazyRow.")
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."
)
list: String = ""

Properties

width

The width of the LazyRow.

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

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

@NativeBlockProp(
    description = "Determines if the lazy 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 LazyRow.

@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 LazyRow.

@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 LazyRow.

@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 LazyRow.

@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 LazyRow.

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

horizontalArrangement

Horizontal arrangement of child components in the LazyRow.

@NativeBlockProp(
    description = "Horizontal arrangement of child components inside the lazy 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 LazyRow.

@NativeBlockProp(
    description = "Vertical alignment of child components inside the lazy 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 LazyRow is clicked.

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