NativeBox

A customizable box block for Nativeblocks.

@NativeBlock(
    name = "Native Box",
    keyType = "NATIVE_BOX",
    description = "Nativeblocks box block",
    version = 1
)
@Composable
fun NativeBox : Unit

NativeBox is a flexible container block designed for server-driven UI. It supports padding, background styling, alignment, click events, and customizable layout direction.

---

Features:

• Configurable padding for all sides.
• Flexible width and height properties (wrap or match parent).
• Customizable corner radii, background color, and alignment.
• Layout direction support (LTR or RTL).
• Slot for dynamic child content and click event handling.

---

Example

NativeBox(
    width = "wrap",
    height = "wrap",
    paddingStart = 16.0,
    paddingTop = 8.0,
    paddingEnd = 16.0,
    paddingBottom = 8.0,
    background = "#FF5733",
    radiusTopStart = 12.0,
    radiusTopEnd = 12.0,
    radiusBottomStart = 0.0,
    radiusBottomEnd = 0.0,
    direction = "LTR",
    verticalAlignment = "center",
    onClick = { println("NativeBox clicked") },
    content = { index -> 
        Text("Child Content: $index")
    }
)

---

Slots

content

The content of the box, provided as a slot for dynamic child components.

@NativeBlockSlot(description = "Dynamic child content inside the box.")
var content: @Composable (index: BlockIndex) -> Unit

---

Properties

width

Specifies the width of the box.

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

Specifies the height of the box.

@NativeBlockProp(
    description = "Specifies the height of the box (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"

---

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

The background color of the box in hexadecimal format.

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

---

radiusTopStart

Top-start corner radius of the box.

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

---

radiusTopEnd

Top-end corner radius of the box.

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

---

radiusBottomStart

Bottom-start corner radius of the box.

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

---

radiusBottomEnd

Bottom-end corner radius of the box.

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

---

direction

The layout direction of the box (LTR or RTL).

@NativeBlockProp(
    description = "Specifies the layout direction of the box (LTR or RTL).",
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("LTR", "LTR"),
        NativeBlockValuePickerOption("RTL", "RTL")
    ],
    valuePickerGroup = NativeBlockValuePickerPosition("Direction")
)
var direction: String = "LTR"

---

verticalAlignment

Specifies the vertical alignment of content inside the box.

@NativeBlockProp(
    description = "Specifies the vertical alignment of content inside the box.",
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("center", "Center"),
        NativeBlockValuePickerOption("top", "Top"),
        NativeBlockValuePickerOption("bottom", "Bottom")
    ],
    valuePickerGroup = NativeBlockValuePickerPosition("Alignment")
)
var verticalAlignment: String = "center"

---

Events

onClick

Triggered when the box is clicked.

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