NativeBox

A customizable box block for Nativeblocks.

@NativeBlock(
    keyType = "NATIVE_BOX",
    name = "Native Box",
    description = "Nativeblocks box block",
    version = 2
)
@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.

---

Features:

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

---

Example

NativeBox(
    width = "wrap",
    height = "wrap",
    paddingStart = 16.dp,
    paddingTop = 8.dp,
    paddingEnd = 16.dp,
    paddingBottom = 8.dp,
    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').",
    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 box.

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

padding

Padding of the box.

@NativeBlockProp(
    description = "Padding on the start 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 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

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,
    defaultValue = "#00000000"
) background: Color = Color.Transparent

radius

Corner radius of the box.

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

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

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

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

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("centerStart", "centerStart"),
        NativeBlockValuePickerOption("centerEnd", "centerEnd"),
        NativeBlockValuePickerOption("bottomCenter", "bottomCenter"),
        NativeBlockValuePickerOption("bottomStart", "bottomStart"),
        NativeBlockValuePickerOption("bottomEnd", "bottomEnd"),
        NativeBlockValuePickerOption("topStart", "topStart"),
        NativeBlockValuePickerOption("topEnd", "topEnd"),
        NativeBlockValuePickerOption("topCenter", "topCenter")
    ],
    defaultValue = "center"
) verticalAlignment: Alignment = Alignment.Center

Events

onClick

Triggered when the box is clicked.

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