NativeText

A customizable text block for Nativeblocks.

@NativeBlock(
    name: "Native Text",
    keyType: "NATIVE_TEXT",
    description: "Nativeblocks text block",
    version: 1
)
struct NativeText: View 

NativeText is used to display text with various customizable properties, including font, alignment, padding, and size. It allows precise control over how text appears within layouts.

Features:

• Supports font family, weight, size, and color.

• Alignment for multi-line and single-line text.

• Configurable padding and frame dimensions.

Example:

NativeText(
    text: "Hello, World!",
    fontFamily: "system",
    fontSize: 20,
    foregroundColor: "#ff0000"
)

Inheritance

View

Properties

text

The text to be displayed.

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

fontFamily

The font family of the text.

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

fontWeight

The font weight of the text.

@NativeBlockProp(
        description: "The weight of the font used for the text.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("regular", "regular"),
            NativeBlockValuePickerOption("thin", "thin"),
            NativeBlockValuePickerOption("medium", "medium"),
            NativeBlockValuePickerOption("semibold", "semibold"),
            NativeBlockValuePickerOption("bold", "bold"),
            NativeBlockValuePickerOption("heavy", "heavy"),
            NativeBlockValuePickerOption("black", "black"),
            NativeBlockValuePickerOption("light", "light"),
            NativeBlockValuePickerOption("ultralight", "ultralight"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var fontWeight: String = "regular"

fontDesign

The font design of the text.

@NativeBlockProp(
        description: "Specifies the font design for the text.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("default", "default"),
            NativeBlockValuePickerOption("monospaced", "monospaced"),
            NativeBlockValuePickerOption("rounded", "rounded"),
            NativeBlockValuePickerOption("serif", "serif"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var fontDesign: String = "default"

fontSize

The font size of the text.

@NativeBlockProp(
        description: "The font size of the text.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var fontSize: CGFloat = 16

foregroundColor

The color of the text.

@NativeBlockProp(
        description: "The color of the text.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var foregroundColor: String = "#ff000000"

multilineTextAlignment

The horizontal alignment of multi-line text.

@NativeBlockProp(
        description: "Specifies how multi-line text is aligned horizontally.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("leading", "leading"),
            NativeBlockValuePickerOption("center", "center"),
            NativeBlockValuePickerOption("trailing", "trailing"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var multilineTextAlignment: String = "leading"

lineLimit

The maximum number of lines for the text.

@NativeBlockProp(
        description: "The maximum number of lines for the text.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var lineLimit: Int = 9999

lineSpacing

The spacing between lines of text.

@NativeBlockProp(
        description: "The spacing between lines of text.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var lineSpacing: CGFloat = 0

direction

The layout direction for the text (LTR or RTL).

@NativeBlockProp(
        description: "The layout direction for the text content.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("LTR", "LTR"),
            NativeBlockValuePickerOption("RTL", "LTR"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Direction")
    )
    var direction: String = "LTR"

paddingTop

The top padding of the text.

@NativeBlockProp(
        description: "The top padding around the text.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingTop: CGFloat = 0

paddingLeading

The leading (left) padding of the text.

@NativeBlockProp(
        description: "The leading padding around the text.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingLeading: CGFloat = 0

paddingBottom

The bottom padding of the text.

@NativeBlockProp(
        description: "The bottom padding around the text.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingBottom: CGFloat = 0

paddingTrailing

The trailing (right) padding of the text.

@NativeBlockProp(
        description: "The trailing padding around the text.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingTrailing: CGFloat = 0

frameWidth

The width of the text's frame.

@NativeBlockProp(
        description: "The width of the frame surrounding the text.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size")
    )
    var frameWidth: String = "notSet"

frameHeight

The height of the text's frame.

@NativeBlockProp(
        description: "The height of the frame surrounding the text.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size")
    )
    var frameHeight: String = "notSet"

alignmentHorizontal

The horizontal alignment of the text.

@NativeBlockProp(
        description: "Specifies the horizontal alignment of the text.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("leading", "leading"),
            NativeBlockValuePickerOption("center", "center"),
            NativeBlockValuePickerOption("trailing", "trailing"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
    )
    var alignmentHorizontal: String = "leading"

alignmentVertical

The vertical alignment of the text.

@NativeBlockProp(
        description: "Specifies the vertical alignment of the text.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("top", "top"),
            NativeBlockValuePickerOption("bottom", "bottom"),
            NativeBlockValuePickerOption("center", "center"),
            NativeBlockValuePickerOption("firstTextBaseline", "firstTextBaseline"),
            NativeBlockValuePickerOption("lastTextBaseline", "lastTextBaseline"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
    )
    var alignmentVertical: String = "top"

body

var body: some View