NativeText

A customizable text block for Nativeblocks.

@NativeBlock(
    name = "Native Text",
    keyType = "NATIVE_TEXT",
    description = "Nativeblocks text block",
    version = 1
)
fun NativeText()

NativeText is used to display text with various customizable properties, including font, alignment, color, and overflow behavior. It offers flexible options for both simple and complex layouts.

Features:

• Customizable font family, weight, size, and color.
• Alignment for multi-line and single-line text.
• Configurable overflow behavior and padding.
• Dynamic frame dimensions.

Example:

NativeText(
    text = "Hello, World!",
    fontFamily = "default",
    fontSize = 16.0,
    textColor = "#ff0000",
    textAlign = "center"
)

---

Properties

text

The text to be displayed.

@NativeBlockData(description = "The text content to be displayed.")
var text: String

---

width

Specifies the width of the text block.

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

---

height

Specifies the height of the text block.

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

---

fontFamily

The font family of the text.

@NativeBlockProp(
    description = "The font family for the text.",
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
var fontFamily: String = "default"

---

fontSize

The font size of the text.

@NativeBlockProp(
    description = "The font size for the text in SP.",
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
var fontSize: Double = 14.0

---

textColor

The color of the text.

@NativeBlockProp(
    description = "The color of the text in hexadecimal format.",
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
var textColor: String = "#ffffffff"

---

textAlign

The alignment of the text.

@NativeBlockProp(
    description = "The alignment of the text (e.g., 'start', 'center').",
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("start", "Start"),
        NativeBlockValuePickerOption("center", "Center"),
        NativeBlockValuePickerOption("end", "End"),
        NativeBlockValuePickerOption("justify", "Justify")
    ],
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
var textAlign: String = "start"

---

fontWeight

Specifies the font weight of the text.

@NativeBlockProp(
    description = "The font weight of the text.",
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("normal", "Normal"),
        NativeBlockValuePickerOption("bold", "Bold"),
        NativeBlockValuePickerOption("light", "Light")
    ],
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
var fontWeight: String = "normal"

---

overflow

Specifies the overflow behavior of the text.

@NativeBlockProp(
    description = "The overflow behavior of the text (e.g., 'clip', 'ellipsis').",
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("clip", "Clip"),
        NativeBlockValuePickerOption("ellipsis", "Ellipsis"),
        NativeBlockValuePickerOption("visible", "Visible")
    ],
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
var overflow: String = "clip"

---

minLines

The minimum number of lines for the text.

@NativeBlockProp(
    description = "The minimum number of lines to display.",
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
var minLines: Int = 1

---

maxLines

The maximum number of lines for the text.

@NativeBlockProp(
    description = "The maximum number of lines to display.",
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
var maxLines: Int = 9999