View

Table of contents

A fundamental element that represents a rectangular area on the screen. It serves as the base for all other elements and interfaces in the library, providing properties such as "height", "width" parameters, etc. Interface provides a way for developers to create custom user interfaces by defining their own types that extend from it, adding new properties and behaviors as needed

Create from source

func NewView(session Session, params Params) View

Create new view object and returns its interface

Create from resource

View {
    id = view,
    width = 100px,
    height = 100px,
}

Interface description

Inherit methods, properties from ViewStyle, fmt.Stringer

Focusable() bool

Returns true if the view receives the focus

Frame() Frame

Returns the location and size of the view in pixels

HasFocus() bool

Returns 'true' if the view has focus

ID() string

Returns the id of the view

Parent() View

Returns the parent view

Scroll() Frame

Returns the location and size of the scrollable view in pixels

Session() Session

Returns the current Session interface

SetAnimated(tag string, value any, animation Animation) bool

Sets the value (second argument) of the property with name defined by the first argument. Return "true" if the value has been set, in the opposite case "false" are returned and a description of the error is written to the log

SetChangeListener(tag string, listener func(View, string))

Set the function to track the change of the View property

Tag() string

Returns the tag of View interface

Properties

"accent-color"

Sets the accent color for UI controls generated by some elements

Constant: AccentColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

ProgressBar {
    value = 0.7,
    accent-color = red,
}

progress := rui.NewProgressBar(session, rui.Params{
    rui.ProgressBarValue: 0.7,
    rui.AccentColor:      rui.Red,
})

"animation"

Sets and starts animations

Constant: AnimationTag

Types: Animation, []Animation

Internal type is []Animation, other types converted to it during assignment

See Animation description for more details

Examples

Expandable search bar

var expanded bool
var arrowImage rui.View
var searchBar rui.GridLayout
var extraSettings rui.ColumnLayout

// Arrow on the button which will be rotated back and forth
arrowImage = rui.NewImageView(session, rui.Params{
    rui.Source: "up-arrow.svg",
    rui.Fit:    rui.ContainFit,
    rui.Width:  rui.Em(1),
})

// Extra search settings
extraSettings = rui.NewColumnLayout(session, rui.Params{
    rui.Padding:    rui.Em(1),
    rui.Visibility: rui.Gone,
    rui.Content: []rui.View{
        rui.NewCheckbox(session, rui.Params{
            rui.Content: []rui.View{
                rui.NewTextView(session, rui.Params{
                    rui.Text: "Search setting 1",
                }),
            },
        }),
        rui.NewCheckbox(session, rui.Params{
            rui.Content: []rui.View{
                rui.NewTextView(session, rui.Params{
                    rui.Text: "Search setting 2",
                }),
            },
        }),
    },
})

// Main search bar container with hidden extra search settings
searchBar = rui.NewGridLayout(session, rui.Params{
    rui.BackgroundColor: rui.SkyBlue,
    rui.Content: []rui.View{
        rui.NewListLayout(session, rui.Params{
            rui.Row:     0,
            rui.Column:  0,
            rui.Padding: rui.Em(1),
            rui.Content: []rui.View{
                rui.NewEditView(session, rui.Params{
                    rui.Width: rui.Percent(50),
                }),
                rui.NewButton(session, rui.Params{
                    rui.Content: rui.NewTextView(session, rui.Params{
                        rui.Text: "Search",
                    }),
                }),
                rui.NewButton(session, rui.Params{
                    rui.Content:    arrowImage,
                    rui.ClickEvent: advancedSearchClicked,
                }),
            },
        }),
        extraSettings,
    },
})

// Handler for advanced search button
func advancedSearchClicked(view rui.View, event rui.MouseEvent) {
    anim := rui.NewAnimation(rui.Params{
        rui.Duration:       0.2,
        rui.TimingFunction: rui.EaseOutTiming,
    })

    if !expanded {
        anim.Set(rui.PropertyTag, rui.AnimatedProperty{
            Tag:  rui.Rotate,
            From: 0,
            To:   rui.Deg(180),
        })

        arrowImage.Set(rui.AnimationTag, anim)
        extraSettings.Set(rui.Visibility, rui.Visible)
        expanded = true
    } else {
        anim.Set(rui.PropertyTag, rui.AnimatedProperty{
            Tag:  rui.Rotate,
            From: rui.Deg(180),
            To:   0,
        })

        arrowImage.Set(rui.AnimationTag, anim)
        extraSettings.Set(rui.Visibility, rui.Gone)
        expanded = false
    }
}

"backdrop-filter"

Applies graphical effects to the area behind a view, such as blurring, color shifting, changing brightness/contrast, etc

Constant: BackdropFilter

Types: ViewFilter

See ViewFilter description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    background = image {
        src = background.jpg,
        fit = cover
    },
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = View {
        width = 50%,
        height = 50%,
        backdrop-filter = _{
            blur = 4,
        }
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Background: rui.NewBackgroundImage(rui.Params{
        rui.Source: "background.jpg",
        rui.Fit:    rui.CoverFit,
    }),
})

rui.ShowMenu(session, rui.Params{
    // rui.PopupMenuResult: menuSelected,
    rui.BackdropFilter: rui.NewViewFilter(rui.Params{
        rui.Blur: 4,
    }),
    rui.Opacity: 0.8,
    rui.Items: []string{
        "Menu 1",
        "Menu 2",
        "Menu 3",
    },
})

"backface-visibility"

Controls whether the back face of a view is visible when turned towards the user. Default value is true

Constant: BackfaceVisible

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" Back face is visible when turned towards the user
false 0 "false", "no", "off", "0" Back face is hidden, effectively making the view invisible when turned away from the user

"background"

Set one or more background images and/or gradients for the view

Constant: Background

Types: BackgroundElement, []BackgroundElement, string

Internal type is []BackgroundElement, other types converted to it during assignment

See BackgroundElement description for more details

Conversion rules

string - must contain text representation of background element(s) like in resource files

Examples

ListLayout {
    width = 100%,
    height = 100%,
    orientation = up-down,
    padding = 1em,
    list-row-gap = 1em,
    background = image {
        src = "background.jpg",
        fit = cover,
    },
    content = [
        TextView {
            text = "Some text"
        },
        TextView {
            text = "Some text"
        },
    ]
}

view := rui.NewListLayout(session, rui.Params{
    rui.Width:       rui.Percent(100),
    rui.Height:      rui.Percent(100),
    rui.Orientation: rui.TopDownOrientation,
    rui.Padding:     rui.Em(1),
    rui.ListRowGap:  rui.Em(1),
    rui.Background: rui.NewBackgroundImage(rui.Params{
        rui.Source: "background.jpg",
        rui.Fit:    rui.CoverFit,
    }),
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Text: "Some text",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Text: "Some text",
        }),
    },
})

view := rui.NewListLayout(session, rui.Params{
    rui.Width:       rui.Percent(100),
    rui.Height:      rui.Percent(100),
    rui.Orientation: rui.TopDownOrientation,
    rui.Padding:     rui.Em(1),
    rui.ListRowGap:  rui.Em(1),
    rui.Background:  "image {src = \"background.jpg\", fit = cover}",
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Text: "Some text",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Text: "Some text",
        }),
    },
})

"background-blend-mode"

Sets how view's background images should blend with each other and with the view's background color

Constant: BackgroundBlendMode

Types: int, string

Values

int string Description
0(BlendNormal) "normal" The final color is the top color, regardless of what the bottom color is. The effect is like two opaque pieces of paper overlapping
1(BlendMultiply) "multiply" The final color is the result of multiplying the top and bottom colors. A black layer leads to a black final layer, and a white layer leads to no change. The effect is like two images printed on transparent film overlapping
2(BlendScreen) "screen" The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen
3(BlendOverlay) "overlay" The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter. This blend mode is equivalent to hard-light but with the layers swapped
4(BlendDarken) "darken" The final color is composed of the darkest values of each color channel
5(BlendLighten) "lighten" The final color is composed of the lightest values of each color channel
6(BlendColorDodge) "color-dodge" The final color is the result of dividing the bottom color by the inverse of the top color. A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color. This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to create a fully lit color
7(BlendColorBurn) "color-burn" The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value. A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image. This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black
8(BlendHardLight) "hard-light" The final color is the result of multiply if the top color is darker, or screen if the top color is lighter. This blend mode is equivalent to overlay but with the layers swapped. The effect is similar to shining a harsh spotlight on the backdrop
9(BlendSoftLight) "soft-light" The final color is similar to hard-light, but softer. This blend mode behaves similar to hard-light. The effect is similar to shining a diffused spotlight on the backdrop
10(BlendDifference) "difference" The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer's color
11(BlendExclusion) "exclusion" The final color is similar to difference, but with less contrast. As with difference, a black layer has no effect, while a white layer inverts the other layer's color
12(BlendHue) "hue" The final color has the hue of the top color, while using the saturation and luminosity of the bottom color
13(BlendSaturation) "saturation" The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect
14(BlendColor) "color" The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground
15(BlendLuminosity) "luminosity" The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to BlendColor, but with the layers swapped

"background-clip"

Determines how the background color and/or background image will be displayed below the box borders

Constant: BackgroundClip

Types: int, string

Values

int string Description
0(BorderBoxClip) "border-box" The background extends to the outer edge of the border(but below the border in z-order)
1(PaddingBoxClip) "padding-box" The background extends to the outer edge of the padding. No background is drawn below the border
2(ContentBoxClip) "content-box" The background is painted inside(clipped) of the content box

"background-color"

Set the background color of a view

Constant: BackgroundColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

Checkbox {
    background-color = skyblue,
    content = TextView {
        text = "Some text",
    }
}

view := rui.NewCheckbox(session, rui.Params{
    rui.BackgroundColor: rui.SkyBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text: "Some text",
    }),
})

"border"

Set a view's border. It sets the values of a border width, style, and color

Constant: Border

Types: BorderProperty, ViewBorder, ViewBorders

Internal type is BorderProperty, other types converted to it during assignment

See BorderProperty, ViewBorder, ViewBorders description for more details

Conversion rules

ViewBorder - style, width and color applied to all borders and stored in internal implementation of BorderProperty

ViewBorders - style, width and color of each border like top, right, bottom and left applied to related borders, stored in internal implementation of BorderProperty

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border = _{
            style = solid,
            width = 1px,
            color = black,
        },
    },
}

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border = _{
            top = _{
                style = solid,
                width = 1px,
                color = black,
            },
            bottom = _{
                style = solid,
                width = 1px,
                color = black,
            },
            left = _{
                style = solid,
                width = 1px,
                color = black,
            },
            right = _{
                style = solid,
                width = 1px,
                color = black,
            },
        }
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text: "Some text",
        rui.Border: rui.ViewBorder{
            Style: rui.SolidLine,
            Width: rui.Px(1),
            Color: rui.Black,
        },
    }),
})

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text: "Some text",
        rui.Border: rui.ViewBorders{
            Top: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(1),
                Color: rui.Black,
            },
            Bottom: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(1),
                Color: rui.Black,
            },
            Left: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(1),
                Color: rui.Black,
            },
            Right: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(1),
                Color: rui.Black,
            },
        },
    }),
})

"border-bottom"

Set a view's bottom border. It sets the values of a border width, style, and color

Constant: BorderBottom

Types: ViewBorder, BorderProperty, string

Internal type is BorderProperty, other types converted to it during assignment

See ViewBorder, BorderProperty description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-bottom = _{
            style = solid,
            width = 1px,
            color = black,
        }
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text: "Some text",
        rui.BorderBottom: rui.ViewBorder{
            Style: rui.SolidLine,
            Width: rui.Px(1),
            Color: rui.Black,
        },
    }),
})

"border-bottom-color"

Set the line color of a view's bottom border

Constant: BorderBottomColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-bottom-style = solid,
        border-bottom-color = black,
        border-bottom-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:              "Some text",
        rui.BorderBottomStyle: rui.SolidLine,
        rui.BorderBottomColor: rui.Black,
        rui.BorderBottomWidth: rui.Px(1),
    }),
})

"border-bottom-style"

Sets the line style of a view's bottom border

Constant: BorderBottomStyle

Types: int, string

Values

int string Description
0(NoneLine) "none" The border will not be drawn
1(SolidLine) "solid" Solid line as a border
2(DashedLine) "dashed" Dashed line as a border
3(DottedLine) "dotted" Dotted line as a border
4(DoubleLine) "double" Double line as a border

"border-bottom-width"

Set the line width of a view's bottom border

Constant: BorderBottomWidth

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-bottom-style = solid,
        border-bottom-color = black,
        border-bottom-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:              "Some text",
        rui.BorderBottomStyle: rui.SolidLine,
        rui.BorderBottomColor: rui.Black,
        rui.BorderBottomWidth: rui.Px(1),
    }),
})

"border-color"

Set the line color for all four sides of a view's border

Constant: BorderColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-style = solid,
        border-color = black,
        border-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:        "Some text",
        rui.BorderStyle: rui.SolidLine,
        rui.BorderColor: rui.Black,
        rui.BorderWidth: rui.Px(1),
    }),
})

"border-left"

Set a view's left border. It sets the values of a border width, style, and color

Constant: BorderLeft

Types: ViewBorder, BorderProperty, string

Internal type is BorderProperty, other types converted to it during assignment

See ViewBorder, BorderProperty description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-left = _{
            style = solid,
            width = 1px,
            color = black,
        }
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text: "Some text",
        rui.BorderLeft: rui.ViewBorder{
            Style: rui.SolidLine,
            Width: rui.Px(1),
            Color: rui.Black,
        },
    }),
})

"border-left-color"

Set the line color of a view's left border

Constant: BorderLeftColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-left-style = solid,
        border-left-color = black,
        border-left-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:              "Some text",
        rui.BorderLeftStyle: rui.SolidLine,
        rui.BorderLeftColor: rui.Black,
        rui.BorderLeftWidth: rui.Px(1),
    }),
})

"border-left-style"

Set the line style of a view's left border

Constant: BorderLeftStyle

Types: int, string

Values

int string Description
0(NoneLine) "none" The border will not be drawn
1(SolidLine) "solid" Solid line as a border
2(DashedLine) "dashed" Dashed line as a border
3(DottedLine) "dotted" Dotted line as a border
4(DoubleLine) "double" Double line as a border

"border-left-width"

Set the line width of a view's left border

Constant: BorderLeftWidth

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-left-style = solid,
        border-left-color = black,
        border-left-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:              "Some text",
        rui.BorderLeftStyle: rui.SolidLine,
        rui.BorderLeftColor: rui.Black,
        rui.BorderLeftWidth: rui.Px(1),
    }),
})

"border-right"

Set a view's right border. It sets the values of a border width, style, and color

Constant: BorderRight

Types: ViewBorder, BorderProperty, string

Internal type is BorderProperty, other types converted to it during assignment

See ViewBorder, BorderProperty description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-right = _{
            style = solid,
            width = 1px,
            color = black,
        }
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text: "Some text",
        rui.BorderRight: rui.ViewBorder{
            Style: rui.SolidLine,
            Width: rui.Px(1),
            Color: rui.Black,
        },
    }),
})

"border-right-color"

Set the line color of a view's right border

Constant: BorderRightColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-right-style = solid,
        border-right-color = black,
        border-right-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:              "Some text",
        rui.BorderRightStyle: rui.SolidLine,
        rui.BorderRightColor: rui.Black,
        rui.BorderRightWidth: rui.Px(1),
    }),
})

"border-right-style"

Set the line style of a view's right border

Constant: BorderRightStyle

Types: int, string

Values

int string Description
0(NoneLine) "none" The border will not be drawn
1(SolidLine) "solid" Solid line as a border
2(DashedLine) "dashed" Dashed line as a border
3(DottedLine) "dotted" Dotted line as a border
4(DoubleLine) "double" Double line as a border

"border-right-width"

Set the line width of a view's right border

Constant: BorderRightWidth

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-right-style = solid,
        border-right-color = black,
        border-right-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:              "Some text",
        rui.BorderRightStyle: rui.SolidLine,
        rui.BorderRightColor: rui.Black,
        rui.BorderRightWidth: rui.Px(1),
    }),
})

"border-style"

Set the line style for all four sides of a view's border

Constant: BorderStyle

Types: int, string

Values

int string Description
0(NoneLine) "none" The border will not be drawn
1(SolidLine) "solid" Solid line as a border
2(DashedLine) "dashed" Dashed line as a border
3(DottedLine) "dotted" Dotted line as a border
4(DoubleLine) "double" Double line as a border

"border-top"

Set a view's top border. It sets the values of a border width, style, and color

Constant: BorderTop

Types: ViewBorder, BorderProperty, string

Internal type is BorderProperty, other types converted to it during assignment

See ViewBorder, BorderProperty description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-top = _{
            style = solid,
            width = 1px,
            color = black,
        }
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text: "Some text",
        rui.BorderTop: rui.ViewBorder{
            Style: rui.SolidLine,
            Width: rui.Px(1),
            Color: rui.Black,
        },
    }),
})

"border-top-color"

Set the line color of a view's top border

Constant: BorderTopColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-top-style = solid,
        border-top-color = black,
        border-top-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:              "Some text",
        rui.BorderTopStyle: rui.SolidLine,
        rui.BorderTopColor: rui.Black,
        rui.BorderTopWidth: rui.Px(1),
    }),
})

"border-top-style"

Set the line style of a view's top border

Constant: BorderTopStyle

Types: int, string

Values

int string Description
0(NoneLine) "none" The border will not be drawn
1(SolidLine) "solid" Solid line as a border
2(DashedLine) "dashed" Dashed line as a border
3(DottedLine) "dotted" Dotted line as a border
4(DoubleLine) "double" Double line as a border

"border-top-width"

Set the line width of a view's top border

Constant: BorderTopWidth

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-top-style = solid,
        border-top-color = black,
        border-top-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:              "Some text",
        rui.BorderTopStyle: rui.SolidLine,
        rui.BorderTopColor: rui.Black,
        rui.BorderTopWidth: rui.Px(1),
    }),
})

"border-width"

Set the line width for all four sides of a view's border

Constant: BorderWidth

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text = "Some text",
        border-style = solid,
        border-color = black,
        border-width = 1px,
    }
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:        "Some text",
        rui.BorderStyle: rui.SolidLine,
        rui.BorderColor: rui.Black,
        rui.BorderWidth: rui.Px(1),
    }),
})

"bottom"

Offset from bottom border of the container. Used only for views placed in an AbsoluteLayout

Constant: Bottom

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

AbsoluteLayout {
    width = 100%,
    height = 100%,
    content = View {
        background-color = gray,
        radius = 0.5em,
        left = 1em,
        top = 1em,
        right = 1em,
        bottom = 1em,
    }
}

view := rui.NewAbsoluteLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: rui.NewView(session, rui.Params{
        rui.BackgroundColor: rui.Gray,
        rui.Radius:          rui.Em(0.5),
        rui.Left:            rui.Em(1),
        rui.Top:             rui.Em(1),
        rui.Right:           rui.Em(1),
        rui.Bottom:          rui.Em(1),
    }),
})

"caret-color"

Sets the color of the insertion caret, the visible marker where the next character typed will be inserted. This is sometimes referred to as the text input cursor

Constant: CaretColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    caret-color = red,
    content = EditView {},
}

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = EditView {
        caret-color = red,
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CaretColor:          rui.Red,
    rui.Content:             rui.NewEditView(session, rui.Params{}),
})

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.CaretColor: rui.Red,
    }),
})

"clip"

Creates a clipping region that sets what part of a view should be shown

Constant: Clip

Types: ClipShape, string

Internal type is ClipShape, other types converted to it during assignment

See ClipShape description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ImageView {
        width = 5em,
        height = 5em,
        src = "avatar.jpg",
        fit = cover,
        clip = circle {
            x = 50%,
            y = 50%,
            radius = 50%,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewImageView(session, rui.Params{
        rui.Source: "avatar.jpg",
        rui.Width:  rui.Em(5),
        rui.Height: rui.Em(5),
        rui.Fit:    rui.CoverFit,
        rui.Clip:   rui.CircleClip(rui.Percent(50), rui.Percent(50), rui.Percent(50)),
    }),
})

"column"

Column of the view inside the container like GridLayout

Constant: Column

Types: Range, int, string

Internal type is Range, other types converted to it during assignment

Conversion rules

int - set single value(index)

string - can contain single integer value(index) or a range of integer values(indices), examples: "0", "0:3"

Examples

GridLayout {
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            row = 0,
            column = "0:1",
            text = "Employees",
            text-weight = bold
        },
        TextView {
            row = 1,
            column = 0,
            text = "Name",
            text-weight = bold
        },
        TextView {
            row = 1,
            column = 1,
            text = "Department",
            text-weight = bold
        },
        TextView {
            row = 2,
            column = 0,
            text = "Alex",
        },
        TextView {
            row = 2,
            column = 1,
            text = "R&D",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:        0,
            rui.Column:     rui.Range{First: 0, Last: 1},
            rui.TextWeight: rui.BoldFont,
            rui.Text:       "Employees",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:        1,
            rui.Column:     0,
            rui.TextWeight: rui.BoldFont,
            rui.Text:       "Name",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:        1,
            rui.Column:     1,
            rui.TextWeight: rui.BoldFont,
            rui.Text:       "Department",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    2,
            rui.Column: 0,
            rui.Text:   "Alex",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    2,
            rui.Column: 1,
            rui.Text:   "R&D",
        }),
    },
})

"cursor"

Sets the type of mouse cursor, if any, to show when the mouse pointer is over the view

Constant: Cursor

Types: int, string

Values

int string Description
0 "auto" Auto cursor
1 "default" Default cursor
2 "none" None cursor
3 "context-menu" Context menu cursor
4 "help" Help cursor
5 "pointer" Pointer cursor
6 "progress" Progress cursor
7 "wait" Wait cursor
8 "cell" Cell cursor
9 "crosshair" Crosshair cursor
10 "text" Text cursor
11 "vertical-text" Vertical text cursor
12 "alias" Alias cursor
13 "copy" Copy cursor
14 "move" Move cursor
15 "no-drop" No drop cursor
16 "not-allowed" Not allowed cursor
17 "e-resize" Resize cursor
18 "n-resize" Resize cursor
19 "ne-resize" Resize cursor
20 "nw-resize" Resize cursor
21 "s-resize" Resize cursor
22 "se-resize" Resize cursor
23 "sw-resize" Resize cursor
24 "w-resize" Resize cursor
25 "ew-resize" Resize cursor
26 "ns-resize" Resize cursor
27 "nesw-resize" Resize cursor
28 "nwse-resize" Resize cursor
29 "col-resize" Col resize cursor
30 "row-resize" Row resize cursor
31 "all-scroll" All scroll cursor
32 "zoom-in" Zoom in cursor
33 "zoom-out" Zoom out cursor
34 "grab" Grab cursor
35 "grabbing" Grabbing cursor

"filter"

Applies graphical effects to a view, such as blurring, color shifting, changing brightness/contrast, etc

Constant: Filter

Types: ViewFilter

See ViewFilter description for more details

Examples

backgroundPlayer := rui.NewVideoPlayer(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Loop:   true,
    rui.Muted:  true,
    rui.Source: "video.mp4",
    rui.Filter: rui.NewViewFilter(rui.Params{
        rui.Blur:     10,
        rui.Saturate: 10,
    }),
    rui.CanPlayEvent: canPlay,
})

player := rui.NewVideoPlayer(session, rui.Params{
    rui.Width:        rui.Percent(50),
    rui.Height:       rui.Percent(50),
    rui.TranslateX:   rui.Percent(50),
    rui.TranslateY:   rui.Percent(50),
    rui.Loop:         true,
    rui.Source:       "video.mp4",
    rui.CanPlayEvent: canPlay,
})

view := rui.NewAbsoluteLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: []rui.View{
        backgroundPlayer,
        player,
    },
})

func canPlay(player rui.MediaPlayer) {
    player.Play()
}

"float"

Places a view on the left or right side of its container, allowing text and inline views to wrap around it

Constant: Float

Types: int, string

Values

int string Description
0(NoneFloat) "none" Text and other views inside the container will not wrap around this view
1(LeftFloat) "left" Text and other views inside the container will wrap around this view on the right side
2(RightFloat) "right" Text and other views inside the container will wrap around this view on the left side

"focusable"

Controls whether view can receive focus

Constant: Focusable

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" View can have a focus
false 0 "false", "no", "off", "0" View can't have a focus

"font-name"

Specifies a prioritized list of one or more font family names and/or generic family names for the view. Values are separated by commas to indicate that they are alternatives. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: FontName

Types: string

Examples

TextView {
    padding = 1em,
    text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
    font-name = "Times, Arial",
}

view := rui.NewTextView(session, rui.Params{
    rui.Padding:  rui.Em(1),
    rui.Text:     "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
    rui.FontName: "Times, Arial",
})

ListLayout {
    padding = 1em,
    font-name = "Times, Arial",
    orientation = up-down,
    content = TextView {
        text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Padding:     rui.Em(1),
    rui.FontName:    "Times, Arial",
    rui.Orientation: rui.TopDownOrientation,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text: "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
    }),
})

"height"

Set a view's height

Constant: Height

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ImageView {
    width = 5em,
    height = 5em,
    src = "avatar.jpg",
    fit = contain,
}

view := rui.NewImageView(session, rui.Params{
    rui.Width:  rui.Em(5),
    rui.Height: rui.Em(5),
    rui.Source: "avatar.jpg",
    rui.Fit:    rui.CoverFit,
})

"id"

Optional textual identifier for the view. Used to reference view from source code if needed

Constant: ID

Types: string

Examples

mainView.rui file content:

TextView {
    id = name,
    padding = 1em,
}

view := rui.CreateViewFromResources(session, "mainView")

if textView := rui.TextViewByID(view, "name"); textView != nil {
    textView.Set(rui.Text, "Michael")
}

"italic"

Controls whether the text is displayed in italics. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is false

Constant: Italic

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" Text is displayed in italics
false 0 "false", "no", "off", "0" Normal text

"left"

Offset from left border of the container. Used only for views placed in an AbsoluteLayout

Constant: Left

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

AbsoluteLayout {
    width = 100%,
    height = 100%,
    content = View {
        background-color = gray,
        radius = 0.5em,
        left = 1em,
        top = 1em,
        right = 1em,
        bottom = 1em,
    }
}

view := rui.NewAbsoluteLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: rui.NewView(session, rui.Params{
        rui.BackgroundColor: rui.Gray,
        rui.Radius:          rui.Em(0.5),
        rui.Left:            rui.Em(1),
        rui.Top:             rui.Em(1),
        rui.Right:           rui.Em(1),
        rui.Bottom:          rui.Em(1),
    }),
})

"letter-spacing"

Set the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing causes characters to spread farther apart, while negative values of letter-spacing bring characters closer together. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: LetterSpacing

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    padding = 1em,
    orientation = up-down,
    content = [
        TextView {
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            letter-spacing = 0px,
        },
        TextView {
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            letter-spacing = 1px,
        },
        TextView {
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            letter-spacing = -1px,
        },
    ],
}

view := rui.NewListLayout(session, rui.Params{
    rui.Padding:     rui.Em(1),
    rui.Orientation: rui.TopDownOrientation,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Text:          "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.LetterSpacing: rui.Px(0),
        }),
        rui.NewTextView(session, rui.Params{
            rui.Text:          "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.LetterSpacing: rui.Px(1),
        }),
        rui.NewTextView(session, rui.Params{
            rui.Text:          "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.LetterSpacing: rui.Px(-1),
        }),
    },
})

"line-height"

Set the height of a line box. It's commonly used to set the distance between lines of text. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: LineHeight

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

TextView {
    width = 10em,
    line-height = 1.5em,
    padding = 1em,
    text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
}

view := rui.NewTextView(session, rui.Params{
    rui.Width:      rui.Em(10),
    rui.LineHeight: rui.Em(1.5),
    rui.Padding:    rui.Em(1),
    rui.Text:       "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
})

"margin"

Set the margin area on all four sides of an element

Constant: Margin

Types: BoundsProperty, Bounds, SizeUnit, float32, float64, int, string

Internal type could be BoundsProperty or SizeUnit depending on whether single value or multiple values has been set, other types converted to them during assignment

See BoundsProperty, Bounds, SizeUnit for more information

Conversion rules

BoundsProperty - stored as is, no conversion performed

Bounds - new BoundsProperty will be created and corresponding values for top, right, bottom and left border will be set

SizeUnit - stored as is and the same value will be used for all borders

float - new SizeUnit will be created and the same value(in pixels) will be used for all borders

int - new SizeUnit will be created and the same value(in pixels) will be used for all borders

string - can contain one or four SizeUnit separated with comma(,). In case one value will be provided a new SizeUnit will be created and the same value will be used for all borders. If four values will be provided then they will be set respectively for top, right, bottom and left border

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        margin = 1em,
        background-color = lightgreen,
        text = "Some text",
    }
}

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        margin = "1em, 2em, 1em, 2em",
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Margin:          "1em, 2em, 1em, 2em",
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Margin:          rui.Em(1),
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Margin: rui.NewBoundsProperty(rui.Params{
            rui.Top:    rui.Em(1),
            rui.Bottom: rui.Em(1),
            rui.Left:   rui.Em(2),
            rui.Right:  rui.Em(2),
        }),
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Margin: rui.Bounds{
            Top:    rui.Em(1),
            Bottom: rui.Em(1),
            Left:   rui.Em(2),
            Right:  rui.Em(2),
        },
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

"margin-bottom"

Set the margin area on the bottom of a view. A positive value places it farther from its neighbors, while a negative value places it closer

Constant: MarginBottom

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        margin-top = 1em,
        margin-bottom = 1em,
        margin-left = 2em,
        margin-right = 2em,
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.MarginTop:       rui.Em(1),
        rui.MarginBottom:    rui.Em(1),
        rui.MarginLeft:      rui.Em(2),
        rui.MarginRight:     rui.Em(2),
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

"margin-left"

Set the margin area on the left of a view. A positive value places it farther from its neighbors, while a negative value places it closer

Constant: MarginLeft

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        margin-top = 1em,
        margin-bottom = 1em,
        margin-left = 2em,
        margin-right = 2em,
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.MarginTop:       rui.Em(1),
        rui.MarginBottom:    rui.Em(1),
        rui.MarginLeft:      rui.Em(2),
        rui.MarginRight:     rui.Em(2),
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

"margin-right"

Set the margin area on the right of a view. A positive value places it farther from its neighbors, while a negative value places it closer

Constant: MarginRight

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        margin-top = 1em,
        margin-bottom = 1em,
        margin-left = 2em,
        margin-right = 2em,
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.MarginTop:       rui.Em(1),
        rui.MarginBottom:    rui.Em(1),
        rui.MarginLeft:      rui.Em(2),
        rui.MarginRight:     rui.Em(2),
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

"margin-top"

Set the margin area on the top of a view. A positive value places it farther from its neighbors, while a negative value places it closer

Constant: MarginTop

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        margin-top = 1em,
        margin-bottom = 1em,
        margin-left = 2em,
        margin-right = 2em,
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.MarginTop:       rui.Em(1),
        rui.MarginBottom:    rui.Em(1),
        rui.MarginLeft:      rui.Em(2),
        rui.MarginRight:     rui.Em(2),
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

"max-height"

Set a view's maximal height

Constant: MaxHeight

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

TextView {
    max-height = 1em,
    max-width = 15em,
    padding = 1em,
    text-overflow = ellipsis,
    white-space = nowrap,
    text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
}

view := rui.NewTextView(session, rui.Params{
    rui.MaxHeight:    rui.Em(1),
    rui.MaxWidth:     rui.Em(15),
    rui.Padding:      rui.Em(1),
    rui.TextOverflow: rui.TextOverflowEllipsis,
    rui.WhiteSpace:   rui.WhiteSpaceNowrap,
    rui.Text:         "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
})

"max-width"

Set a view's maximal width

Constant: MaxWidth

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

TextView {
    max-height = 1em,
    max-width = 15em,
    padding = 1em,
    text-overflow = ellipsis,
    white-space = nowrap,
    text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
}

view := rui.NewTextView(session, rui.Params{
    rui.MaxHeight:    rui.Em(1),
    rui.MaxWidth:     rui.Em(15),
    rui.Padding:      rui.Em(1),
    rui.TextOverflow: rui.TextOverflowEllipsis,
    rui.WhiteSpace:   rui.WhiteSpaceNowrap,
    rui.Text:         "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
})

"min-height"

Set a view's minimal height

Constant: MinHeight

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

TextView {
    min-height = 1em,
    max-height = 2em,
    min-width = 15em,
    max-width = 20em,
    padding = 1em,
    border = _{
        style = solid,
        width = 1px,
        color = black,
    }
    text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
}

view := rui.NewTextView(session, rui.Params{
    rui.MinHeight: rui.Em(1),
    rui.MaxHeight: rui.Em(2),
    rui.MinWidth:  rui.Em(15),
    rui.MaxWidth:  rui.Em(20),
    rui.Padding:   rui.Em(1),
    rui.Border: rui.ViewBorder{
        Style: rui.SolidLine,
        Width: rui.Px(1),
        Color: rui.Black,
    },
    rui.Text: "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
})

"min-width"

Set a view's minimal width

Constant: MinWidth

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

TextView {
    min-height = 1em,
    max-height = 2em,
    min-width = 15em,
    max-width = 20em,
    padding = 1em,
    border = _{
        style = solid,
        width = 1px,
        color = black,
    }
    text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
}

view := rui.NewTextView(session, rui.Params{
    rui.MinHeight: rui.Em(1),
    rui.MaxHeight: rui.Em(2),
    rui.MinWidth:  rui.Em(15),
    rui.MaxWidth:  rui.Em(20),
    rui.Padding:   rui.Em(1),
    rui.Border: rui.ViewBorder{
        Style: rui.SolidLine,
        Width: rui.Px(1),
        Color: rui.Black,
    },
    rui.Text: "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
})

"mix-blend-mode"

Sets how view's content should blend with the content of the view's parent and the view's background

Constant: MixBlendMode

Types: int, string

Values

int string Description
0(BlendNormal) "normal" The final color is the top color, regardless of what the bottom color is. The effect is like two opaque pieces of paper overlapping
1(BlendMultiply) "multiply" The final color is the result of multiplying the top and bottom colors. A black layer leads to a black final layer, and a white layer leads to no change. The effect is like two images printed on transparent film overlapping
2(BlendScreen) "screen" The final color is the result of inverting the colors, multiplying them, and inverting that value. A black layer leads to no change, and a white layer leads to a white final layer. The effect is like two images shone onto a projection screen
3(BlendOverlay) "overlay" The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter. This blend mode is equivalent to hard-light but with the layers swapped
4(BlendDarken) "darken" The final color is composed of the darkest values of each color channel
5(BlendLighten) "lighten" The final color is composed of the lightest values of each color channel
6(BlendColorDodge) "color-dodge" The final color is the result of dividing the bottom color by the inverse of the top color. A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color. This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to create a fully lit color
7(BlendColorBurn) "color-burn" The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value. A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image. This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black
8(BlendHardLight) "hard-light" The final color is the result of multiply if the top color is darker, or screen if the top color is lighter. This blend mode is equivalent to overlay but with the layers swapped. The effect is similar to shining a harsh spotlight on the backdrop
9(BlendSoftLight) "soft-light" The final color is similar to hard-light, but softer. This blend mode behaves similar to hard-light. The effect is similar to shining a diffused spotlight on the backdrop
10(BlendDifference) "difference" The final color is the result of subtracting the darker of the two colors from the lighter one. A black layer has no effect, while a white layer inverts the other layer's color
11(BlendExclusion) "exclusion" The final color is similar to difference, but with less contrast. As with difference, a black layer has no effect, while a white layer inverts the other layer's color
12(BlendHue) "hue" The final color has the hue of the top color, while using the saturation and luminosity of the bottom color
13(BlendSaturation) "saturation" The final color has the saturation of the top color, while using the hue and luminosity of the bottom color. A pure gray backdrop, having no saturation, will have no effect
14(BlendColor) "color" The final color has the hue and saturation of the top color, while using the luminosity of the bottom color. The effect preserves gray levels and can be used to colorize the foreground
15(BlendLuminosity) "luminosity" The final color has the luminosity of the top color, while using the hue and saturation of the bottom color. This blend mode is equivalent to BlendColor, but with the layers swapped

"not-translate"

Controls whether the text require translation. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is false

Constant: NotTranslate

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" No need to lookup for text translation in resources
false 0 "false", "no", "off", "0" Lookup for text translation

"opacity"

In [1..0] range sets the opacity of view. Opacity is the degree to which content behind the view is hidden, and is the opposite of transparency

Constant: Opacity

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    background = image {
        width = 100%,
        height = 100%,
        src = "background.jpg",
        fill = cover,
    },
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = EditView {
        opacity = 0.6,
        radius = 0.5em,
        hint = "User name",
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: rui.NewBackgroundImage(rui.Params{
        rui.Width:  rui.Percent(100),
        rui.Height: rui.Percent(100),
        rui.Source: "background.jpg",
        rui.Fit:    rui.CoverFit,
    }),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Opacity: 0.8,
        rui.Radius:  rui.Em(0.5),
        rui.Hint:    "User name",
    }),
})

"Order"

Set the order to layout an item in a ListLayout or GridLayout container. Items in a container are sorted by ascending order value and then by their addition to container order

Constant: Order

Types: int, string

Values

int string Description
< 0 < "0" Views with lower value will be at the beginning
>= 0 >= "0" Views with higher value will be at the end

"orientation"

Specify layout of the children or view

Constant: Orientation

Types: int, string

Values

int string Description
0(TopDownOrientation) "up-down" Child elements are arranged in a column from top to bottom
1(StartToEndOrientation) "start-to-end" Child elements are laid out in a row from beginning to end
2(BottomUpOrientation) "bottom-up" Child elements are arranged in a column from bottom to top
3(EndToStartOrientation) "end-to-start" Child elements are laid out in a line from end to beginning

"origin-x"

x-coordinate of the point around which a view transformation is applied. The default value is 50%

Constant: OriginX

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            row = 0,
            column = 0,
            origin-x = 0,
            origin-y = 0,
            rotate = 90deg,
            text = "Some rotated text",
        },
        TextView {
            row = 0,
            column = 1,
            origin-x = 50%,
            origin-y = 50%,
            rotate = 90deg,
            text = "Some rotated text",
        },
        TextView {
            row = 0,
            column = 2,
            origin-x = 100%,
            origin-y = 100%,
            rotate = 90deg,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:     0,
            rui.Column:  0,
            rui.OriginX: 0,
            rui.OriginY: 0,
            rui.Rotate:  rui.Deg(90),
            rui.Text:    "Some rotated text",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:     0,
            rui.Column:  1,
            rui.OriginX: rui.Percent(50),
            rui.OriginY: rui.Percent(50),
            rui.Rotate:  rui.Deg(90),
            rui.Text:    "Some rotated text",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:     0,
            rui.Column:  2,
            rui.OriginX: rui.Percent(100),
            rui.OriginY: rui.Percent(100),
            rui.Rotate:  rui.Deg(90),
            rui.Text:    "Some rotated text",
        }),
    },
})

"origin-y"

y-coordinate of the point around which a view transformation is applied. The default value is 50%

Constant: OriginY

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            row = 0,
            column = 0,
            origin-x = 0,
            origin-y = 0,
            rotate = 90deg,
            text = "Some rotated text",
        },
        TextView {
            row = 0,
            column = 1,
            origin-x = 50%,
            origin-y = 50%,
            rotate = 90deg,
            text = "Some rotated text",
        },
        TextView {
            row = 0,
            column = 2,
            origin-x = 100%,
            origin-y = 100%,
            rotate = 90deg,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:     0,
            rui.Column:  0,
            rui.OriginX: 0,
            rui.OriginY: 0,
            rui.Rotate:  rui.Deg(90),
            rui.Text:    "Some rotated text",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:     0,
            rui.Column:  1,
            rui.OriginX: rui.Percent(50),
            rui.OriginY: rui.Percent(50),
            rui.Rotate:  rui.Deg(90),
            rui.Text:    "Some rotated text",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:     0,
            rui.Column:  2,
            rui.OriginX: rui.Percent(100),
            rui.OriginY: rui.Percent(100),
            rui.Rotate:  rui.Deg(90),
            rui.Text:    "Some rotated text",
        }),
    },
})

"origin-z"

z-coordinate of the point around which a view transformation is applied. The default value is 50%

Constant: OriginZ

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = TextView {
        origin-x = 50%,
        origin-y = 50%,
        origin-z = 50%,
        rotate-x = 0,
        rotate-y = 1,
        rotate-z = 0,
        rotate = 45deg,
        perspective = 1px,
        text = "Some rotated text",
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.OriginX:     rui.Percent(50),
            rui.OriginY:     rui.Percent(50),
            rui.OriginZ:     rui.Percent(50),
            rui.RotateX:     0,
            rui.RotateY:     1,
            rui.RotateZ:     0,
            rui.Rotate:      rui.Deg(45),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some rotated text",
        }),
    },
})

"outline"

Set a view's outline. It sets the values of an outline width, style, and color

Constant: Outline

Types: OutlineProperty, ViewOutline, ViewBorder

Internal type is OutlineProperty, other types converted to it during assignment

See OutlineProperty, ViewOutline and ViewBorder description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = TextView {
        text = "Some text",
        outline = _{ style = solid, width = 2px, color = lightgray},
        border = _{ style = solid, width = 2px, color = gray},
        radius = 2px,
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Outline: rui.NewOutlineProperty(rui.Params{
                rui.Style:    rui.SolidLine,
                rui.Width:    rui.Px(2),
                rui.ColorTag: rui.LightGray,
            }),
            rui.Border: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(2),
                Color: rui.Gray,
            },
            rui.Radius: rui.Px(2),
            rui.Text:   "Some text",
        }),
    },
})

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Outline: rui.ViewOutline{
                Style: rui.SolidLine,
                Width: rui.Px(2),
                Color: rui.LightGray,
            },
            rui.Border: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(2),
                Color: rui.Gray,
            },
            rui.Radius: rui.Px(2),
            rui.Text:   "Some text",
        }),
    },
})

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Outline: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(2),
                Color: rui.LightGray,
            },
            rui.Border: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(2),
                Color: rui.Gray,
            },
            rui.Radius: rui.Px(2),
            rui.Text:   "Some text",
        }),
    },
})

"outline-color"

Set the color of an view's outline

Constant: OutlineColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = TextView {
        text = "Some text",
        outline-color = lightgray,
        outline-width = 2px,
        outline-style = solid,
        border = _{ style = solid, width = 2px, color = gray},
        radius = 2px,
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.OutlineColor: rui.LightGray,
            rui.OutlineWidth: rui.Px(2),
            rui.OutlineStyle: rui.SolidLine,
            rui.Border: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(2),
                Color: rui.Gray,
            },
            rui.Radius: rui.Px(2),
            rui.Text:   "Some text",
        }),
    },
})

"outline-offset"

Set the amount of space between an outline and the edge or border of a view

Constant: OutlineOffset

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = TextView {
        text = "Some text",
        outline = _{ style = solid, width = 2px, color = lightgray},
        outline-offset = 1px,
        border = _{ style = solid, width = 2px, color = gray},
        radius = 2px,
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Outline: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(2),
                Color: rui.LightGray,
            },
            rui.OutlineOffset: rui.Px(1),
            rui.Border: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(2),
                Color: rui.Gray,
            },
            rui.Radius: rui.Px(2),
            rui.Text:   "Some text",
        }),
    },
})

"outline-style"

Set the style of an view's outline

Constant: OutlineStyle

Types: int, string

Values

int string Description
0(NoneLine) "none" The outline will not be drawn
1(SolidLine) "solid" Solid line as an outline
2(DashedLine) "dashed" Dashed line as an outline
3(DottedLine) "dotted" Dotted line as an outline
4(DoubleLine) "double" Double line as an outline

"outline-width"

Set the width of an view's outline

Constant: OutlineWidth

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = TextView {
        text = "Some text",
        outline-color = lightgray,
        outline-width = 2px,
        outline-style = solid,
        border = _{ style = solid, width = 2px, color = gray},
        radius = 2px,
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.OutlineColor: rui.LightGray,
            rui.OutlineWidth: rui.Px(2),
            rui.OutlineStyle: rui.SolidLine,
            rui.Border: rui.ViewBorder{
                Style: rui.SolidLine,
                Width: rui.Px(2),
                Color: rui.Gray,
            },
            rui.Radius: rui.Px(2),
            rui.Text:   "Some text",
        }),
    },
})

"overflow"

Set the desired behavior for an element's overflow i.e. when an element's content is too big to fit in its block formatting context in both directions

Constant: Overflow

Types: int, string

Values

int string Description
0(OverflowHidden) "hidden" The overflow is clipped, and the rest of the content will be invisible
1(OverflowVisible) "visible" The overflow is not clipped. The content renders outside the element's box
2(OverflowScroll) "scroll" The overflow is clipped, and a scrollbar is added to see the rest of the content
3(OverflowAuto) "auto" Similar to OverflowScroll, but it adds scrollbars only when necessary

"overline"

Controls whether the line needs to be displayed on top of the text. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is false

Constant: Overline

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" Overline text
false 0 "false", "no", "off", "0" No overline

"padding"

Sets the padding area on all four sides of a view at once. An element's padding area is the space between its content and its border

Constant: Padding

Types: BoundsProperty, Bounds, SizeUnit, float32, float64, int, string

Internal type could be BoundsProperty or SizeUnit depending on whether single value or multiple values has been set, other types converted to them during assignment

See BoundsProperty, Bounds, SizeUnit for more information

Conversion rules

BoundsProperty - stored as is, no conversion performed

Bounds - new BoundsProperty will be created and corresponding values for top, right, bottom and left border will be set

SizeUnit - stored as is and the same value will be used for all borders

float - new SizeUnit will be created and the same value(in pixels) will be used for all borders

int - new SizeUnit will be created and the same value(in pixels) will be used for all borders

string - can contain one or four SizeUnit separated with comma(,). In case one value will be provided a new SizeUnit will be created and the same value will be used for all borders. If four values will be provided then they will be set respectively for top, right, bottom and left border

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        padding = 1em,
        background-color = lightgreen,
        text = "Some text",
    }
}

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        padding = "1em, 2em, 1em, 2em",
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Padding:         "1em, 2em, 1em, 2em",
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Padding:         rui.Em(1),
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Padding: rui.NewBoundsProperty(rui.Params{
            rui.Top:    rui.Em(1),
            rui.Bottom: rui.Em(1),
            rui.Left:   rui.Em(2),
            rui.Right:  rui.Em(2),
        }),
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Padding: rui.Bounds{
            Top:    rui.Em(1),
            Bottom: rui.Em(1),
            Left:   rui.Em(2),
            Right:  rui.Em(2),
        },
        rui.BackgroundColor: rui.LightGreen,
        rui.Text:            "Some text",
    }),
})

"padding-bottom"

Set the height of the padding area to the bottom of a view

Constant: PaddingBottom

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        padding-top = 1em,
        padding-bottom = 1em,
        padding-left = 2em,
        padding-right = 2em,
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.PaddingTop:       rui.Em(1),
        rui.PaddingBottom:    rui.Em(1),
        rui.PaddingLeft:      rui.Em(2),
        rui.PaddingRight:     rui.Em(2),
        rui.BackgroundColor:  rui.LightGreen,
        rui.Text:             "Some text",
    }),
})

"padding-left"

Set the width of the padding area to the left of a view

Constant: PaddingLeft

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        padding-top = 1em,
        padding-bottom = 1em,
        padding-left = 2em,
        padding-right = 2em,
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.PaddingTop:       rui.Em(1),
        rui.PaddingBottom:    rui.Em(1),
        rui.PaddingLeft:      rui.Em(2),
        rui.PaddingRight:     rui.Em(2),
        rui.BackgroundColor:  rui.LightGreen,
        rui.Text:             "Some text",
    }),
})

"padding-right"

Set the width of the padding area to the right of a view

Constant: PaddingRight

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        padding-top = 1em,
        padding-bottom = 1em,
        padding-left = 2em,
        padding-right = 2em,
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.PaddingTop:       rui.Em(1),
        rui.PaddingBottom:    rui.Em(1),
        rui.PaddingLeft:      rui.Em(2),
        rui.PaddingRight:     rui.Em(2),
        rui.BackgroundColor:  rui.LightGreen,
        rui.Text:             "Some text",
    }),
})

"padding-top"

Set the height of the padding area to the top of a view

Constant: PaddingTop

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    orientation = up-down,
    background-color = lightblue,
    content = TextView {
        padding-top = 1em,
        padding-bottom = 1em,
        padding-left = 2em,
        padding-right = 2em,
        background-color = lightgreen,
        text = "Some text",
    }
}

view := rui.NewListLayout(session, rui.Params{
    rui.Orientation:     rui.TopDownOrientation,
    rui.BackgroundColor: rui.LightBlue,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.PaddingTop:       rui.Em(1),
        rui.PaddingBottom:    rui.Em(1),
        rui.PaddingLeft:      rui.Em(2),
        rui.PaddingRight:     rui.Em(2),
        rui.BackgroundColor:  rui.LightGreen,
        rui.Text:             "Some text",
    }),
})

"perspective"

Distance between the z-plane and the user in order to give a 3D-positioned element some perspective. Each 3D element with z > 0 becomes larger, each 3D-element with z < 0 becomes smaller. The default value is 0 (no 3D effects)

Constant: Perspective

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            row = 0,
            column = 0,
            perspective = 1px,
            rotate-x = 1,
            rotate-y = 0,
            rotate-z = 0,
            rotate = 20deg,
            text = "Some rotated text",
        },
        TextView {
            row = 0,
            column = 1,
            perspective = 1px,
            rotate-x = 1,
            rotate-y = 0,
            rotate-z = 0,
            rotate = 40deg,
            text = "Some rotated text",
        },
        TextView {
            row = 0,
            column = 2,
            perspective = 1px,
            rotate-x = 1,
            rotate-y = 0,
            rotate-z = 0,
            rotate = 60deg,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:         0,
            rui.Column:      0,
            rui.RotateX:     1,
            rui.RotateY:     0,
            rui.RotateZ:     0,
            rui.Perspective: rui.Px(1),
            rui.Rotate:      rui.Deg(20),
            rui.Text:        "Some rotated text",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:         0,
            rui.Column:      1,
            rui.RotateX:     1,
            rui.RotateY:     0,
            rui.RotateZ:     0,
            rui.Perspective: rui.Px(1),
            rui.Rotate:      rui.Deg(40),
            rui.Text:        "Some rotated text",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:         0,
            rui.Column:      2,
            rui.RotateX:     1,
            rui.RotateY:     0,
            rui.RotateZ:     0,
            rui.Perspective: rui.Px(1),
            rui.Rotate:      rui.Deg(60),
            rui.Text:        "Some rotated text",
        }),
    },
})

"perspective-origin-x"

x-coordinate of the position at which the viewer is looking. It is used as the vanishing point by the "perspective" property. The default value is 50%

Constant: PerspectiveOriginX

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            perspective = 1px,
            perspective-origin-x = 50%,
            perspective-origin-y = 50%,
            rotate-x = 1,
            rotate-y = 0,
            rotate-z = 0,
            rotate = 45deg,
            text = "Some rotated text",
            text-size = 3em,
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Perspective:        rui.Px(1),
        rui.PerspectiveOriginX: rui.Percent(50),
        rui.PerspectiveOriginY: rui.Percent(50),
        rui.RotateX:            1,
        rui.RotateY:            0,
        rui.RotateZ:            0,
        rui.Rotate:             rui.Deg(45),
        rui.Text:               "Some rotated text",
        rui.TextSize:           rui.Em(3),
    }),
})

"perspective-origin-y"

y-coordinate of the position at which the viewer is looking. It is used as the vanishing point by the "perspective" property. The default value is 50%

Constant: PerspectiveOriginY

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            perspective = 1px,
            perspective-origin-x = 50%,
            perspective-origin-y = 50%,
            rotate-x = 1,
            rotate-y = 0,
            rotate-z = 0,
            rotate = 45deg,
            text = "Some rotated text",
            text-size = 3em,
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Perspective:        rui.Px(1),
        rui.PerspectiveOriginX: rui.Percent(50),
        rui.PerspectiveOriginY: rui.Percent(50),
        rui.RotateX:            1,
        rui.RotateY:            0,
        rui.RotateZ:            0,
        rui.Rotate:             rui.Deg(45),
        rui.Text:               "Some rotated text",
        rui.TextSize:           rui.Em(3),
    }),
})

"radius"

Specifies the corners rounding radius of an element's outer border edge

Constant: Radius

Types: RadiusProperty, SizeUnit, SizeFunc, BoxRadius, string, float, int

Internal type is either RadiusProperty or SizeUnit, other types converted to them during assignment

See RadiusProperty, SizeUnit, SizeFunc and BoxRadius description for more details

Conversion rules

RadiusProperty - stored as is, no conversion performed

SizeUnit - stored as is and set all corners to have the same value

BoxRadius - a new RadiusProperty will be created and all corresponding elliptical radius values will be set

string - if one value will be provided then it will be set as a radius for all corners. If two values will be provided divided by (/) then x and y radius will be set for all corners. Examples: "1em", "1em/0.5em", "2/4". Values which doesn't have size prefix will use size in pixels by default

float - values of this type will set radius for all corners in pixels

int - values of this type will set radius for all corners in pixels

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius = "0.5em/0.5em",
            hint = "User name"
        },
    ],
}

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius = _{ x = 0.2em, y = 0.2em, top-left = 0.5em, bottom-right = 0.5em },
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:   "User name",
        rui.Radius: rui.Em(0.5),
    }),
})

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint: "User name",
        rui.Radius: rui.NewRadiusProperty(rui.Params{
            rui.X:           rui.Em(0.2),
            rui.Y:           rui.Em(0.2),
            rui.TopLeft:     rui.Em(0.5),
            rui.BottomRight: rui.Em(0.5),
        }),
    }),
})

"radius-bottom-left"

Specifies the bottom-left corner rounding radius of an element's outer border edge

Constant: RadiusBottomLeft

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-bottom-left = 0.5em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:             "User name",
        rui.RadiusBottomLeft: rui.Em(0.5),
    }),
})

"radius-bottom-left-x"

Specifies the x-axis bottom-left corner elliptic rounding radius of an element's outer border edge

Constant: RadiusBottomLeftX

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-bottom-left = 0.5em,
            radius-bottom-left-x = 1em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:              "User name",
        rui.RadiusBottomLeft:  rui.Em(0.5),
        rui.RadiusBottomLeftX: rui.Em(1),
    }),
})

"radius-bottom-left-y"

Specifies the y-axis bottom-left corner elliptic rounding radius of an element's outer border edge

Constant: RadiusBottomLeftY

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-bottom-left = 0.5em,
            radius-bottom-left-y = 1em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:              "User name",
        rui.RadiusBottomLeft:  rui.Em(0.5),
        rui.RadiusBottomLeftY: rui.Em(1),
    }),
})

"radius-bottom-right"

Specifies the bottom-right corner rounding radius of an element's outer border edge

Constant: RadiusBottomRight

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-bottom-right = 0.5em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:              "User name",
        rui.RadiusBottomRight: rui.Em(0.5),
    }),
})

"radius-bottom-right-x"

Specifies the x-axis bottom-right corner elliptic rounding radius of an element's outer border edge

Constant: RadiusBottomRightX

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-bottom-right = 0.5em,
            radius-bottom-right-x = 1em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:              "User name",
        rui.RadiusBottomRight:  rui.Em(0.5),
        rui.RadiusBottomRightX: rui.Em(1),
    }),
})

"radius-bottom-right-y"

Specifies the y-axis bottom-right corner elliptic rounding radius of an element's outer border edge

Constant: RadiusBottomRightY

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-bottom-right = 0.5em,
            radius-bottom-right-y = 1em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:              "User name",
        rui.RadiusBottomRight:  rui.Em(0.5),
        rui.RadiusBottomRightY: rui.Em(1),
    }),
})

"radius-top-left"

Specifies the top-left corner rounding radius of an element's outer border edge

Constant: RadiusTopLeft

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-top-left = 0.5em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:          "User name",
        rui.RadiusTopLeft: rui.Em(0.5),
    }),
})

"radius-top-left-x"

Specifies the x-axis top-left corner elliptic rounding radius of an element's outer border edge

Constant: RadiusTopLeftX

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-top-left = 0.5em,
            radius-top-left-x = 1em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:              "User name",
        rui.RadiusTopLeft:  rui.Em(0.5),
        rui.RadiusTopLeftX: rui.Em(1),
    }),
})

"radius-top-left-y"

Specifies the y-axis top-left corner elliptic rounding radius of an element's outer border edge

Constant: RadiusTopLeftY

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-top-left = 0.5em,
            radius-top-left-y = 1em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:              "User name",
        rui.RadiusTopLeft:  rui.Em(0.5),
        rui.RadiusTopLeftY: rui.Em(1),
    }),
})

"radius-top-right"

Specifies the top-right corner rounding radius of an element's outer border edge

Constant: RadiusTopRight

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-top-right = 0.5em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:           "User name",
        rui.RadiusTopRight: rui.Em(0.5),
    }),
})

"radius-top-right-x"

Specifies the x-axis top-right corner elliptic rounding radius of an element's outer border edge

Constant: RadiusTopRightX

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-top-right = 0.5em,
            radius-top-right-x = 1em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:              "User name",
        rui.RadiusTopRight:  rui.Em(0.5),
        rui.RadiusTopRightX: rui.Em(1),
    }),
})

"radius-top-right-y"

Specifies the y-axis top-right corner elliptic rounding radius of an element's outer border edge

Constant: RadiusTopRightY

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-top-right = 0.5em,
            radius-top-right-y = 1em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:              "User name",
        rui.RadiusTopRight:  rui.Em(0.5),
        rui.RadiusTopRightY: rui.Em(1),
    }),
})

"radius-x"

Specifies the x-axis corners elliptic rounding radius of an element's outer border edge

Constant: RadiusX

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-x = 0.5em,
            radius-y = 0.2em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:    "User name",
        rui.RadiusX: rui.Em(0.5),
        rui.RadiusY: rui.Em(0.2),
    }),
})

"radius-y"

Specifies the y-axis corners elliptic rounding radius of an element's outer border edge

Constant: RadiusY

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        EditView {
            radius-x = 0.5em,
            radius-y = 0.2em,
            hint = "User name"
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:    "User name",
        rui.RadiusX: rui.Em(0.5),
        rui.RadiusY: rui.Em(0.2),
    }),
})

"resize"

Sets whether view is resizable, and if so, in which directions. Default value is "none"

Constant: Resize

Types: int, string

Values

int string Description
0(NoneResize) "none" View cannot be resized
1(BothResize) "both" The View displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically
2(HorizontalResize) "horizontal" The View displays a mechanism for allowing the user to resize it in the horizontal direction
3(VerticalResize) "vertical" The View displays a mechanism for allowing the user to resize it in the vertical direction

Offset from right border of the container. Used only for views placed in an AbsoluteLayout

Constant: Right

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

AbsoluteLayout {
    width = 100%,
    height = 100%,
    content = View {
        background-color = gray,
        radius = 0.5em,
        left = 1em,
        top = 1em,
        right = 1em,
        bottom = 1em,
    }
}

view := rui.NewAbsoluteLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: rui.NewView(session, rui.Params{
        rui.BackgroundColor: rui.Gray,
        rui.Radius:          rui.Em(0.5),
        rui.Left:            rui.Em(1),
        rui.Top:             rui.Em(1),
        rui.Right:           rui.Em(1),
        rui.Bottom:          rui.Em(1),
    }),
})

"rotate"

Angle of the view rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise

Constant: Rotate

Types: AngleUnit, string, float, int

Internal type is AngleUnit, other types will be converted to it during assignment

See AngleUnit description for more details

Conversion rules

AngleUnit - stored as is, no conversion performed

string - must contain string representation of AngleUnit. If numeric value will be provided without any suffix then AngleUnit with value and Radian value type will be created

float - a new AngleUnit value will be created with Radian as a type

int - a new AngleUnit value will be created with Radian as a type

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            rotate = 45deg,
            text = "Some rotated text",
        },
    ],
}

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            rotate = 1,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Rotate: rui.Deg(45),
            rui.Text:   "Some rotated text",
        }),
    },
})

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Rotate: 1,
            rui.Text:   "Some rotated text",
        }),
    },
})

"rotate-x"

x-coordinate of the vector denoting the axis of rotation in range 0 to 1

Constant: RotateX

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            rotate-x = 1,
            rotate-y = 0,
            rotate-z = 0,
            rotate = 45deg,
            perspective = 1px,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.RotateX:     1,
            rui.RotateY:     0,
            rui.RotateZ:     0,
            rui.Rotate:      rui.Deg(45),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some rotated text",
        }),
    },
})

"rotate-y"

y-coordinate of the vector denoting the axis of rotation in range 0 to 1

Constant: RotateY

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            rotate-x = 0,
            rotate-y = 1,
            rotate-z = 0,
            rotate = 45deg,
            perspective = 1px,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.RotateX:     0,
            rui.RotateY:     1,
            rui.RotateZ:     0,
            rui.Rotate:      rui.Deg(45),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some rotated text",
        }),
    },
})

"rotate-z"

z-coordinate of the vector denoting the axis of rotation in range 0 to 1

Constant: RotateZ

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            rotate-x = 0,
            rotate-y = 0,
            rotate-z = 1,
            rotate = 45deg,
            perspective = 1px,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.RotateX:     0,
            rui.RotateY:     0,
            rui.RotateZ:     1,
            rui.Rotate:      rui.Deg(45),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some rotated text",
        }),
    },
})

"row"

Row of the view inside the container like GridLayout

Constant: Row

Types: Range, int, string

Internal type is Range, other types converted to it during assignment

Conversion rules

int - set single value(index)

string - can contain single integer value(index) or a range of integer values(indices), examples: "0", "0:3"

Examples

GridLayout {
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            row = 0,
            column = "0:1",
            text = "Employees",
            text-weight = bold
        },
        TextView {
            row = 1,
            column = 0,
            text = "Name",
            text-weight = bold
        },
        TextView {
            row = 1,
            column = 1,
            text = "Department",
            text-weight = bold
        },
        TextView {
            row = 2,
            column = 0,
            text = "Alex",
        },
        TextView {
            row = 2,
            column = 1,
            text = "R&D",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Row:        0,
            rui.Column:     rui.Range{First: 0, Last: 1},
            rui.TextWeight: rui.BoldFont,
            rui.Text:       "Employees",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:        1,
            rui.Column:     0,
            rui.TextWeight: rui.BoldFont,
            rui.Text:       "Name",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:        1,
            rui.Column:     1,
            rui.TextWeight: rui.BoldFont,
            rui.Text:       "Department",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    2,
            rui.Column: 0,
            rui.Text:   "Alex",
        }),
        rui.NewTextView(session, rui.Params{
            rui.Row:    2,
            rui.Column: 1,
            rui.Text:   "R&D",
        }),
    },
})

"scale-x"

x-axis scaling value of a 2D/3D scale. The original scale is 1. Values between 0 and 1 are used to decrease original scale, more than 1 - to increase. The default value is 1

Constant: ScaleX

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            scale-x = 2,
            perspective = 1px,
            text = "Some scaled text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.ScaleX:      2.0,
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some scaled text",
        }),
    },
})

"scale-y"

y-axis scaling value of a 2D/3D scale. The original scale is 1. Values between 0 and 1 are used to decrease original scale, more than 1 - to increase. The default value is 1

Constant: ScaleY

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            scale-y = 2,
            perspective = 1px,
            text = "Some scaled text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.ScaleY:      2.0,
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some scaled text",
        }),
    },
})

"scale-z"

z-axis scaling value of a 3D scale. The original scale is 1. Values between 0 and 1 are used to decrease original scale, more than 1 - to increase. The default value is 1

Constant: ScaleZ

Types: float, int, string

Internal type is float, other types converted to it during assignment

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            scale-z = 2,
            translate-z = -100px,
            perspective = 400px,
            text = "Some scaled text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.ScaleZ:      2.0,
            rui.Perspective: rui.Px(400),
            rui.TranslateZ:  rui.Px(-100),
            rui.Text:        "Some scaled text",
        }),
    },
})

"semantics"

Defines the semantic meaning of the view. This property may have no visible effect, but it allows search engines to understand the structure of your application. It also helps to voice the interface to systems for people with disabilities

Constant: Semantics

Types: int, string

Values

int string Description
0(DefaultSemantics) "default" Default semantics
1(ArticleSemantics) "article" Article semantics
2(SectionSemantics) "section" Section semantics
3(AsideSemantics) "aside" Aside semantics
4(HeaderSemantics) "header" Header semantics
5(MainSemantics) "main" Main semantics
6(FooterSemantics) "footer" Footer semantics
7(NavigationSemantics) "navigation" Navigation semantics
8(FigureSemantics) "figure" Figure semantics
9(FigureCaptionSemantics) "figure-caption" Figure caption semantics
10(ButtonSemantics) "button" Button semantics
11(ParagraphSemantics) "p" Paragraph semantics
12(H1Semantics) "h1" Heading level 1 semantics
13(H2Semantics) "h2" Heading level 2 semantics
14(H3Semantics) "h3" Heading level 3 semantics
15(H4Semantics) "h4" Heading level 4 semantics
16(H5Semantics) "h5" Heading level 5 semantics
17(H6Semantics) "h6" Heading level 6 semantics
18(BlockquoteSemantics) "blockquote" Blockquote semantics
19(CodeSemantics) "code" Code semantics

"shadow"

Adds shadow effects around a view's frame. A shadow is described by X and Y offsets relative to the element, blur, spread radius and color

Constant: Shadow

Types: ViewShadow, []ViewShadow, string

Internal type is []ViewShadow, other types converted to it during assignment

See ViewShadow description for more details

Conversion rules

[]ViewShadow - stored as is. no conversion performed

ViewShadow - converted to []ViewShadow during assignment

string - must contain a string representation of ViewShadow. Example:

_{
    blur = 2px,
    color = #FF5C0700,
    inset = false,
    spread-radius = 0px,
    x-offset = 3px,
    y-offset = 5px,
}

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = Button {
        content = "Decline",
        shadow = _{
            blur = 0.1em,
            color = red,
            spread-radius = 0.1em,
        },
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewButton(session, rui.Params{
        rui.Content: "Decline",
        rui.Shadow:  rui.NewViewShadow(rui.Px(0), rui.Px(0), rui.Em(0.1), rui.Em(0.1), rui.Red),
    }),
})

"shape-outside"

WARNING Currently not supported

Property defines a shape(which may be non-rectangular) around which adjacent inline content should wrap. By default, inline content wraps around its margin box. Property provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes

Constant: ShapeOutside

Types: ClipShape, string

Internal type is ClipShape, other types converted to it during assignment

See ClipShape description for more details

"skew-x"

Angle to use to distort the element along the abscissa. The default value is 0

Constant: SkewX

Types: AngleUnit, string, float, int

Internal type is AngleUnit, other types will be converted to it during assignment

See AngleUnit description for more details

Conversion rules

AngleUnit - stored as is, no conversion performed

string - must contain string representation of AngleUnit. If numeric value will be provided without any suffix then AngleUnit with value and Radian value type will be created

float - a new AngleUnit value will be created with Radian as a type

int - a new AngleUnit value will be created with Radian as a type

Examples

ListLayout {
    padding = 1em,
    content = [
        Button {
            content = "Save",
            skew-x = -10deg,
        },
        Button {
            content = "Load",
            skew-x = -10deg,
        },
    ],
}

view := rui.NewListLayout(session, rui.Params{
    rui.Padding: rui.Em(1),
    rui.Content: []rui.View{
        rui.NewButton(session, rui.Params{
            rui.Content: "Save",
            rui.SkewX:   rui.Deg(-10),
        }),
        rui.NewButton(session, rui.Params{
            rui.Content: "Load",
            rui.SkewX:   rui.Deg(-10),
        }),
    },
})

"skew-y"

Angle to use to distort the element along the ordinate. The default value is 0

Constant: SkewY

Types: AngleUnit, string, float, int

Internal type is AngleUnit, other types will be converted to it during assignment

See AngleUnit description for more details

Conversion rules

AngleUnit - stored as is, no conversion performed

string - must contain string representation of AngleUnit. If numeric value will be provided without any suffix then AngleUnit with value and Radian value type will be created

float - a new AngleUnit value will be created with Radian as a type

int - a new AngleUnit value will be created with Radian as a type

Examples

ListLayout {
    padding = 1em,
    content = [
        Button {
            content = "Layer 1",
            skew-y = 10deg,
        },
        Button {
            content = "Layer 2",
            skew-y = 10deg,
        },
    ],
}

view := rui.NewListLayout(session, rui.Params{
    rui.Padding: rui.Em(1),
    rui.Content: []rui.View{
        rui.NewButton(session, rui.Params{
            rui.Content: "layer 1",
            rui.SkewY:   rui.Deg(10),
        }),
        rui.NewButton(session, rui.Params{
            rui.Content: "Layer 2",
            rui.SkewY:   rui.Deg(10),
        }),
    },
})

"small-caps"

Controls whether to use small caps characters while displaying the text. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is false

Constant: SmallCaps

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" Text displayed using small caps
false 0 "false", "no", "off", "0" Normal text display

"strikethrough"

Controls whether to draw line over the text. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is false

Constant: Strikethrough

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" Draw line over the text
false 0 "false", "no", "off", "0" Normal text display

"style"

Sets the name of the style that is applied to the view when the "disabled" property is set to false or "style-disabled" property is not defined

Constant: Style

Types: string

Examples

Description of theme with style listed

theme {
    styles [
        semitransparent {
            opacity = 0.8,
            backdrop-filter = _{
                blur = 4,
            }
        },
    ]
}

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    background = image {
        width = 100%,
        height = 100%,
        src = "background.jpg",
        fit = cover,
    },
    content = [
        EditView {
            hint = "User name",
            style = "semitransparent",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: rui.NewBackgroundImage(rui.Params{
        rui.Width:  rui.Percent(100),
        rui.Height: rui.Percent(100),
        rui.Source: "background.jpg",
        rui.Fit:    rui.CoverFit,
    }),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:    "User name",
        rui.Style:   "semitransparent",
    }),
})

"style-disabled"

Sets the name of the style that is applied to the view when the "disabled" property is set to true

Constant: StyleDisabled

Types: string

Examples

Description of theme with style listed

theme {
    styles [
        semitransparentDisabled {
            opacity = 0.5,
            backdrop-filter = _{
                blur = 4,
            },
        },
    ]
}

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    background = image {
        width = 100%,
        height = 100%,
        src = "background.jpg",
        fit = cover,
    },
    content = [
        EditView {
            hint = "User name",
            disabled = true,
            style-disabled = "semitransparentDisabled",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: rui.NewBackgroundImage(rui.Params{
        rui.Width:  rui.Percent(100),
        rui.Height: rui.Percent(100),
        rui.Source: "background.jpg",
        rui.Fit:    rui.CoverFit,
    }),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: rui.NewEditView(session, rui.Params{
        rui.Hint:          "User name",
        rui.Disabled:      true,
        rui.StyleDisabled: "semitransparentDisabled",
    }),
})

"tab-size"

Set the width of tab characters (U+0009) in spaces. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is 8

Constant: TabSize

Types: int, string

Values

int string Description
> 0 > "0" Number of spaces in tab character

"tabindex"

Indicates that view can be focused, and where it participates in sequential keyboard navigation(usually with the Tab key)

Constant: TabIndex

Types: int, string

Values

int string Description
< 0 < "0" View can be selected with the mouse or touch, but does not participate in sequential navigation
0 "0" View can be selected and reached using sequential navigation, the order of navigation is determined by the browser(usually in order of addition)
> 0 > "0" View will be reached(and selected) using sequential navigation, and navigation is performed by ascending "tabindex" value

"text-align"

Alignment of the text in view. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: TextAlign

Types: int, string

Values

int string Description
0(LeftAlign) "left" Left alignment
1(RightAlign) "right" Right alignment
2(CenterAlign) "center" Center alignment
3(JustifyAlign) "justify" Justify alignment

"text-color"

Set the foreground color value of a view's text and text decorations. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: TextColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text-color = red,
        text = "User name or password is incorrect",
    },
}

GridLayout {
    width = 100%,
    height = 100%,
    cell-horizontal-align = center,
    cell-vertical-align = center,
    content = TextView {
        text-color = #FFFF0000,
        text = "User name or password is incorrect",
    },
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:      "User name or password is incorrect",
        rui.TextColor: rui.Red,
    }),
})

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewTextView(session, rui.Params{
        rui.Text:      "User name or password is incorrect",
        rui.TextColor: 0xFFFF0000,
    }),
})

"text-direction"

Set the direction of text, table columns, and horizontal overflow. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used, Default value is "system"

Constant: TextDirection

Types: int, string

Values

int string Description
0(SystemTextDirection) "system" Use the system text direction
1(LeftToRightDirection) "left-to-right" For languages written from left to right (like English and most other languages)
2(RightToLeftDirection) "right-to-left" For languages written from right to left (like Hebrew or Arabic)

"text-indent"

Determines the size of the indent(empty space) before the first line of text. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: TextIndent

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    width = 100%,
    padding = 1em,
    orientation = up-down,
    content = [
        TextView {
            text = "The word chamomile is derived via French and Latin, from the Greek χαμαίμηλον, khamaimēlon, 'earth apple', from χαμαί, khamai, 'on the ground', and μῆλον, mēlon, 'apple'. First used in the 13th century, the spelling chamomile corresponds to the Latin chamomilla and the Greek chamaimelon. The spelling camomile is a British derivation from the French.",
            text-indent = 1em,
        },
        TextView {
            text = "The main compounds of interest in chamomile flowers are coumarins, flavonoids, and polyphenols, including apigenin, quercetin, patuletin, luteolin, and daphnin. It is currently unclear whether chamomile is effective in treating any medical conditions. Chamomile is under preliminary research for its potential anti-anxiety properties. There is no high-quality clinical evidence that it is useful for treating insomnia.",
            text-indent = 1em,
        },
    ],
}

view := rui.NewListLayout(session, rui.Params{
    rui.Width:       rui.Percent(100),
    rui.Padding:     rui.Em(1),
    rui.Orientation: rui.TopDownOrientation,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Text:       "The word chamomile is derived via French and Latin, from the Greek χαμαίμηλον, khamaimēlon, 'earth apple', from χαμαί, khamai, 'on the ground', and μῆλον, mēlon, 'apple'. First used in the 13th century, the spelling chamomile corresponds to the Latin chamomilla and the Greek chamaimelon. The spelling camomile is a British derivation from the French.",
            rui.TextIndent: rui.Em(1),
        }),
        rui.NewTextView(session, rui.Params{
            rui.Text:       "The main compounds of interest in chamomile flowers are coumarins, flavonoids, and polyphenols, including apigenin, quercetin, patuletin, luteolin, and daphnin. It is currently unclear whether chamomile is effective in treating any medical conditions. Chamomile is under preliminary research for its potential anti-anxiety properties. There is no high-quality clinical evidence that it is useful for treating insomnia.",
            rui.TextIndent: rui.Em(1),
        }),
    },
})

"text-line-color"

Sets the color of the lines specified by "strikethrough", "overline" and "underline" properties. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: TextLineColor

Types: Color, string

Internal type is Color, other types converted to it during assignment

See Color description for more details

Examples

ColumnLayout {
    width = 100%,
    height = 100%,
    content = [
        TextView {
            padding = 1em,
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            text-line-color = red,
            overline = true,
        },
        TextView {
            padding = 1em,
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            text-line-color = red,
            strikethrough = true,
        },
        TextView {
            padding = 1em,
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            text-line-color = red,
            underline = true,
        },
    ],
}

view := rui.NewColumnLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Padding:       rui.Em(1),
            rui.Text:          "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.TextLineColor: rui.Red,
            rui.Overline:      true,
        }),
        rui.NewTextView(session, rui.Params{
            rui.Padding:       rui.Em(1),
            rui.Text:          "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.TextLineColor: rui.Red,
            rui.Strikethrough: true,
        }),
        rui.NewTextView(session, rui.Params{
            rui.Padding:       rui.Em(1),
            rui.Text:          "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.TextLineColor: rui.Red,
            rui.Underline:     true,
        }),
    },
})

"text-line-style"

Set the style of the lines specified by "strikethrough", "overline" and "underline" properties. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: TextLineStyle

Types: int, string

Values

int string Description
1(SolidLine) "solid" Solid line as a text line
2(DashedLine) "dashed" Dashed line as a text line
3(DottedLine) "dotted" Dotted line as a text line
4(DoubleLine) "double" Double line as a text line
5(WavyLine) "wavy" Wavy line as a text line

"text-line-thickness"

Set the stroke thickness of the decoration line that is used on text in an element, such as a strikethrough, underline, or overline. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: TextLineThickness

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ColumnLayout {
    width = 100%,
    height = 100%,
    content = [
        TextView {
            padding = 1em,
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            overline = true,
            text-line-thickness = 3px,
        },
        TextView {
            padding = 1em,
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            strikethrough = true,
            text-line-thickness = 3px,
        },
        TextView {
            padding = 1em,
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            underline = true,
            text-line-thickness = 3px,
        },
    ],
}

view := rui.NewColumnLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Padding:           rui.Em(1),
            rui.Text:              "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.TextLineThickness: rui.Px(3),
            rui.Overline:          true,
        }),
        rui.NewTextView(session, rui.Params{
            rui.Padding:           rui.Em(1),
            rui.Text:              "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.TextLineThickness: rui.Px(3),
            rui.Strikethrough:     true,
        }),
        rui.NewTextView(session, rui.Params{
            rui.Padding:           rui.Em(1),
            rui.Text:              "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.TextLineThickness: rui.Px(3),
            rui.Underline:         true,
        }),
    },
})

"text-shadow"

Specify shadow for the text

Constant: TextShadow

Types: ViewShadow, []ViewShadow, string

Internal type is []ViewShadow, other types converted to it during assignment

See ViewShadow description for more details

Conversion rules

[]ViewShadow - stored as is. no conversion performed

ViewShadow - converted to []ViewShadow during assignment

string - must contain a string representation of ViewShadow. Example:

_{
    blur = 2px,
    color = #FF5C0700,
    inset = false,
    spread-radius = 0px,
    x-offset = 3px,
    y-offset = 5px,
}

Examples

TextView {
    padding = 1em,
    text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
    text-shadow = _{
        blur = 0.1em,
        color = green,
        spread-radius = 0.1em,
    },
}

view := rui.NewTextView(session, rui.Params{
    rui.Padding:    rui.Em(1),
    rui.Text:       "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
    rui.TextShadow: rui.NewTextShadow(rui.Px(0), rui.Px(0), rui.Em(0.1), rui.Green),
})

"text-size"

Set the size of the font. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: TextSize

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ColumnLayout {
    width = 100%,
    padding = 1em,
    column-gap = 1em,
    content = [
        TextView {
            text = "Some text",
            text-size = 0.5em,
        },
        TextView {
            text = "Some text",
            text-size = 1em,
        },
        TextView {
            text = "Some text",
            text-size = 2em,
        },
    ],
}

view := rui.NewColumnLayout(session, rui.Params{
    rui.Width:   rui.Percent(100),
    rui.Padding: rui.Em(1),
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Text:     "Some text",
            rui.TextSize: rui.Em(0.5),
        }),
        rui.NewTextView(session, rui.Params{
            rui.Text:     "Some text",
            rui.TextSize: rui.Em(1),
        }),
        rui.NewTextView(session, rui.Params{
            rui.Text:     "Some text",
            rui.TextSize: rui.Em(2),
        }),
    },
})

"text-transform"

Specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: TextTransform

Types: int, string

Values

int string Description
0(NoneTextTransform) "none" Original case of characters
1(CapitalizeTextTransform) "capitalize" Every word starts with a capital letter
2(LowerCaseTextTransform) "lowercase" All characters are lowercase
3(UpperCaseTextTransform) "uppercase" All characters are uppercase

"text-weight"

Sets weight of the text

Constant: TextWeight

Types: int, string

Values

int string Description
1(ThinFont) "thin" Thin font
2(ExtraLightFont) "extra-light" Extra light font
3(LightFont) "light" Light font
4(NormalFont) "normal" Normal font
5(MediumFont) "medium" Medium font
6(SemiBoldFont) "semi-bold" Semi-bold font
7(BoldFont) "bold" Bold font
8(ExtraBoldFont) "extra-bold" Extra bold font
9(BlackFont) "black" Black font

"text-wrap"

Controls how text inside the view is wrapped. Default value is "wrap"

Constant: TextWrap

Types: int, string

Values

int string Description
0(TextWrapOn) "wrap" Text is wrapped across lines at appropriate characters (for example spaces, in languages like English that use space separators) to minimize overflow
1(TextWrapOff) "nowrap" Text does not wrap across lines. It will overflow its containing element rather than breaking onto a new line
2(TextWrapBalance) "balance" Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (six or less for Chromium and ten or less for Firefox)

"tooltip"

Specifies the tooltip text. Tooltip pops up when hovering the mouse cursor over the view. HTML tags are supported when formatting tooltip text

Constant: Tooltip

Types: string

Examples

Button {
    content = "Save",
    tooltip = "Save and increment version",
}

view := rui.NewButton(session, rui.Params{
    rui.Content: "Save",
    rui.Tooltip: "Save and increment version",
})

"top"

Offset from top border of the container. Used only for views placed in an AbsoluteLayout

Constant: Top

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

AbsoluteLayout {
    width = 100%,
    height = 100%,
    content = View {
        background-color = gray,
        radius = 0.5em,
        left = 1em,
        top = 1em,
        right = 1em,
        bottom = 1em,
    }
}

view := rui.NewAbsoluteLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: rui.NewView(session, rui.Params{
        rui.BackgroundColor: rui.Gray,
        rui.Radius:          rui.Em(0.5),
        rui.Left:            rui.Em(1),
        rui.Top:             rui.Em(1),
        rui.Right:           rui.Em(1),
        rui.Bottom:          rui.Em(1),
    }),
})

"transform"

Specify translation, scale and rotation over x, y and z axes as well as a distorsion of a view along x and y axes

Constant: TransformTag

Types: Transform, string

See Transform description for more details

Conversion rules

Transform - stored as is, no conversion performed

string - string representation of Transform interface. Example: "_{translate-x = 10px, scale-y = 1.1}"

Examples

GridLayout {
    width = 100%,
    height = 100%,
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = [
        TextView {
            transform = _{
                rotate-x = 1,
                rotate-y = 0,
                rotate-z = 0,
                rotate = 45deg,
            },
            perspective = 1px,
            text = "Some rotated text",
        },
    ],
}

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.TransformTag: rui.NewTransform(rui.Params{
                rui.RotateX: 1,
                rui.RotateY: 0,
                rui.RotateZ: 0,
                rui.Rotate:  rui.Deg(45),
            }),
            rui.Perspective: rui.Px(1),
            rui.Text:        "Some rotated text",
        }),
    },
})

"transition"

Sets transition animation of view properties. Each provided property must contain Animation which describe how particular property will be animated on property value change. Transition animation can be applied to properties of the type SizeUnit, Color, AngleUnit, float64 and composite properties that contain elements of the listed types(for example, "shadow", "border", etc.) If we'll try to animate other properties with internal type like bool or string no error will occur, simply there will be no animation

Constant: Transition

Types: Params

See Params description for more details

Examples

Re-layout example

anim := rui.NewAnimation(rui.Params{
    rui.Duration:       0.5,
    rui.TimingFunction: rui.EaseOutTiming,
})

view := rui.NewAbsoluteLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Content: rui.NewListLayout(session, rui.Params{
        rui.ID:              "list",
        rui.ListRowGap:      rui.Em(1),
        rui.BackgroundColor: rui.LightBlue,
        rui.Top:             rui.Percent(0),
        rui.Bottom:          rui.Percent(0),
        rui.Left:            rui.Percent(0),
        rui.Right:           rui.Percent(90),
        rui.Transition: rui.Params{
            rui.Left:   anim,
            rui.Right:  anim,
            rui.Top:    anim,
            rui.Bottom: anim,
        },
        rui.Orientation: rui.TopDownOrientation,
        rui.Content: []rui.View{
            rui.NewButton(session, rui.Params{
                rui.Content:    "Re-layout",
                rui.ClickEvent: onButtonClicked,
            }),
        },
    }),
})

var layouts = []rui.Bounds{
    { // Left
        Top:    rui.Percent(0),
        Bottom: rui.Percent(0),
        Left:   rui.Percent(0),
        Right:  rui.Percent(90),
    },
    { // Right
        Top:    rui.Percent(0),
        Bottom: rui.Percent(0),
        Left:   rui.Percent(90),
        Right:  rui.Percent(0),
    },
    { // Bottom
        Top:    rui.Percent(90),
        Bottom: rui.Percent(0),
        Left:   rui.Percent(0),
        Right:  rui.Percent(0),
    },
    { // Top
        Top:    rui.Percent(0),
        Bottom: rui.Percent(90),
        Left:   rui.Percent(0),
        Right:  rui.Percent(0),
    },
}

// Index equal 0 - initial position of ListLayout
var layoutIndex = 1

func onButtonClicked(view rui.View, event rui.MouseEvent) {
    _ = event

    switchLayout(layoutIndex, view.Session())

    layoutIndex = (layoutIndex + 1) % len(layouts)
}

func switchLayout(idx int, session rui.Session) {
    if rootView := session.RootView(); rootView != nil {
        if list := rui.ListLayoutByID(rootView, "list"); list != nil {
            bounds := layouts[idx]
            list.Set(rui.Right, bounds.Right)
            list.Set(rui.Left, bounds.Left)
            list.Set(rui.Top, bounds.Top)
            list.Set(rui.Bottom, bounds.Bottom)
        }
    }
}

Setting transition animation from resource file

ListLayout {
    transition = width {
        duration = 0.5,
        timing-function = ease-in
    },
}

"translate-x"

x-axis translation value of a 2D/3D translation

Constant: TranslateX

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewButton(session, rui.Params{
        rui.ID:        "button",
        rui.Content:   "Push me",
        rui.MouseOver: hoverIn,
        rui.MouseOut:  hoverOut,
        rui.Shadow: rui.NewViewShadow(
            rui.Em(0.5),
            rui.Em(0.5),
            rui.Em(0),
            rui.Em(0),
            rui.Black,
        ),
        rui.TranslateX: rui.Em(-0.5),
        rui.TranslateY: rui.Em(-0.5),
    }),
})

func hoverIn(view rui.View, event rui.MouseEvent) {
    view.Set(rui.Shadow, nil)
    view.Set(rui.TranslateX, 0)
    view.Set(rui.TranslateY, 0)
}

func hoverOut(view rui.View, event rui.MouseEvent) {
    view.Set(rui.Shadow, rui.NewViewShadow(rui.Em(0.5), rui.Em(0.5), rui.Em(0), rui.Em(0), rui.Black))
    view.Set(rui.TranslateX, rui.Em(-0.5))
    view.Set(rui.TranslateY, rui.Em(-0.5))
}

"translate-y"

y-axis translation value of a 2D/3D translation

Constant: TranslateY

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewButton(session, rui.Params{
        rui.ID:        "button",
        rui.Content:   "Push me",
        rui.MouseOver: hoverIn,
        rui.MouseOut:  hoverOut,
        rui.Shadow: rui.NewViewShadow(
            rui.Em(0.5),
            rui.Em(0.5),
            rui.Em(0),
            rui.Em(0),
            rui.Black,
        ),
        rui.TranslateX: rui.Em(-0.5),
        rui.TranslateY: rui.Em(-0.5),
    }),
})

func hoverIn(view rui.View, event rui.MouseEvent) {
    view.Set(rui.Shadow, nil)
    view.Set(rui.TranslateX, 0)
    view.Set(rui.TranslateY, 0)
}

func hoverOut(view rui.View, event rui.MouseEvent) {
    view.Set(rui.Shadow, rui.NewViewShadow(rui.Em(0.5), rui.Em(0.5), rui.Em(0), rui.Em(0), rui.Black))
    view.Set(rui.TranslateX, rui.Em(-0.5))
    view.Set(rui.TranslateY, rui.Em(-0.5))
}

"translate-z"

z-axis translation value of a 3D translation

Constant: TranslateZ

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

view := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewButton(session, rui.Params{
        rui.ID:          "button",
        rui.Content:     "Push me",
        rui.MouseOver:   hoverIn,
        rui.MouseOut:    hoverOut,
        rui.Perspective: rui.Px(200),
        rui.TranslateZ:  rui.Px(0),
    }),
})

func hoverIn(view rui.View, event rui.MouseEvent) {
    view.Set(rui.TranslateZ, rui.Px(50))
}

func hoverOut(view rui.View, event rui.MouseEvent) {
    view.Set(rui.TranslateZ, rui.Px(0))
}

"underline"

Controls whether to draw line below the text, This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is false

Constant: Underline

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" Draw line below the text
false 0 "false", "no", "off", "0" Normal text display

"user-data"

Can contain any user data

Constant: UserData

Types: any 

type mainViewData struct {
    rootView     rui.View
    userNameView rui.View
    passwordView rui.View
    loginButton  rui.View
}

var mainView mainViewData

mainView.userNameview := rui.NewEditView(session, rui.Params{
    rui.Hint: "User name",
})

mainView.passwordview := rui.NewEditView(session, rui.Params{
    rui.EditViewType: rui.PasswordText,
    rui.Hint:         "Password",
})

mainView.loginButton = rui.NewButton(session, rui.Params{
    rui.Content: "Login",
})

mainView.rootview := rui.NewGridLayout(session, rui.Params{
    rui.Width:               rui.Percent(100),
    rui.Height:              rui.Percent(100),
    rui.CellHorizontalAlign: rui.CenterAlign,
    rui.CellVerticalAlign:   rui.CenterAlign,
    rui.Content: rui.NewListLayout(session, rui.Params{
        rui.Orientation: rui.TopDownOrientation,
        rui.ListRowGap:  rui.Em(1),
        rui.Content: []rui.View{
            mainView.userNameView,
            mainView.passwordView,
            mainView.loginButton,
        },
    }),
    rui.UserData: mainView,
})

"user-select"

Controls whether the user can select the text. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is false

Constant: UserSelect

Types: bool, int, string

Values

bool int string Description
true 1 "true", "yes", "on", "1" User can select the text
false 0 "false", "no", "off", "0" Text is not selectable

"vertical-text-orientation"

Set the orientation of the text characters in a line. It only affects text in vertical mode ("writing-mode" property). This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: VerticalTextOrientation

Types: int, string

Values

int string Description
0(MixedTextOrientation) "mixed" Symbols rotated 90° clockwise
1(UprightTextOrientation) "upright" Symbols are arranged normally(vertically)

"visibility"

Specifies the visibility of the view

Constant: Visibility

Types: int, string

Values

int string Description
0(Visible) "visible" The view is visible
1(Invisible) "invisible" The view is invisible but takes up space
2(Gone) "gone" The view is invisible and does not take up space

"white-space"

Sets how white space inside an element is handled. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: WhiteSpace

Types: int, string

Values

int string Description
0(WhiteSpaceNormal) "normal" Sequences of spaces are concatenated into one space. Newlines in the source are treated as a single space. Applying this value optionally splits lines to fill inline boxes
1(WhiteSpaceNowrap) "nowrap" Concatenates sequences of spaces into one space, like a normal value, but does not wrap lines(text wrapping) within the text
2(WhiteSpacePre) "pre" Sequences of spaces are saved as they are specified in the source. Lines are wrapped only where newlines are specified in the source and where "br" elements are specified in the source
3(WhiteSpacePreWrap) "pre-wrap" Sequences of spaces are saved as they are indicated in the source. Lines are wrapped only where newlines are specified in the source and there, where "br" elements are specified in the source, and optionally to fill inline boxes
4(WhiteSpacePreLine) "pre-line" Sequences of spaces are concatenated into one space. Lines are split on newlines, on "br" elements, and optionally to fill inline boxes
5(WhiteSpaceBreakSpaces) "break-spaces" The behavior is identical to WhiteSpacePreWrap with the following differences:
1. Sequences of spaces are preserved as specified in the source, including spaces at the end of lines.
2. Lines are wrapped on any spaces, including in the middle of a sequence of spaces.
3. Spaces take up space and do not hang at the ends of lines, which means they affect the internal dimensions (min-content and max-content)

"width"

Set a view's width

Constant: Width

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ImageView {
    width = 5em,
    height = 5em,
    src = "avatar.jpg",
    fit = contain,
}

view := rui.NewImageView(session, rui.Params{
    rui.Width:  rui.Em(5),
    rui.Height: rui.Em(5),
    rui.Source: "avatar.jpg",
    rui.Fit:    rui.CoverFit,
})

"word-break"

Set whether line breaks appear wherever the text would otherwise overflow its content box. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is "normal"

Constant: WordBreak

Types: int, string

Values

int string Description
0(WordBreakNormal) "normal" Default behavior for linefeed placement
1(WordBreakAll) "break-all" If the block boundaries are exceeded, a line break will be inserted between any two characters(except for Chinese/Japanese/Korean text)
2(WordBreakKeepAll) "keep-all" Line break will not be used in Chinese/Japanese/ Korean text. For text in other languages, the default behavior(normal) will be applied
3(WordBreakWord) "break-word" When the block boundaries are exceeded, the remaining whole words can be broken in an arbitrary place, if a more suitable place for line break is not found

"word-spacing"

Set the length of space between words and between tags. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used

Constant: WordSpacing

Types: SizeUnit, SizeFunc, string, float, int

Internal type is SizeUnit, other types converted to it during assignment

See SizeUnit description for more details

Examples

ListLayout {
    padding = 1em,
    orientation = up-down,
    content = [
        TextView {
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            word-spacing = -0.2em,
        },
        TextView {
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            word-spacing = 0em,
        },
        TextView {
            text = "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            word-spacing = 0.2em,
        },
    ],
}

view := rui.NewListLayout(session, rui.Params{
    rui.Padding:     rui.Em(1),
    rui.Orientation: rui.TopDownOrientation,
    rui.Content: []rui.View{
        rui.NewTextView(session, rui.Params{
            rui.Text:        "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.WordSpacing: rui.Em(-0.2),
        }),
        rui.NewTextView(session, rui.Params{
            rui.Text:        "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.WordSpacing: rui.Em(0),
        }),
        rui.NewTextView(session, rui.Params{
            rui.Text:        "Ullamco id ut reprehenderit cupidatat elit nisi magna laborum est incididunt est",
            rui.WordSpacing: rui.Em(0.2),
        }),
    },
})

"writing-mode"

Set whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. This is an inherited property, i.e. if it is not defined, then the value of the parent view is used. Default value is "horizontal-top-to-bottom"

Constant: WritingMode

Types: int, string

Values

int string Description
0(HorizontalTopToBottom) "horizontal-top-to-bottom" Horizontal lines are displayed from top to bottom
1(HorizontalBottomToTop) "horizontal-bottom-to-top" Horizontal lines are displayed from bottom to top
2(VerticalRightToLeft) "vertical-right-to-left" Vertical lines are output from right to left
3(VerticalLeftToRight) "vertical-left-to-right" Vertical lines are output from left to right

"z-index"

Sets the z-order of a positioned view. Overlapping views with a larger z-index cover those with a smaller one

Constant: ZIndex

Types: int, string

Values

int string Description
< 0 < "0" Views with lower value will be behind views with higher value
>= 0 >= "0" Views with higher value will be on top of views with lower value

Events

"animation-cancel-event"

Fired when an animation unexpectedly aborts. In other words, any time it stops running without sending the "animation-end-event". This might happen when the animation-name is changed such that the animation is removed, or when the animating view is hidden. Therefore, either directly or because any of its containing views are hidden. The event is not supported by all browsers

Constant: AnimationCancelEvent

General listener format:

func(view rui.View, animationId string)

where: * view - Interface of a view which generated this event * animationId - Id of the animation

Allowed listener formats:

func(view rui.View)

func(animationId string)

func()

"animation-end-event"

Fired when an animation has completed. If the animation aborts before reaching completion, such as if the element is removed or the animation is removed from the element, the "animation-end-event" is not fired

Constant: AnimationEndEvent

General listener format:

func(view rui.View, animationId string)

where: * view - Interface of a view which generated this event * animationId - Id of the animation

Allowed listener formats:

func(view rui.View)

func(animationId string)

func()

"animation-iteration-event"

Fired when an iteration of an animation ends, and another one begins. This event does not occur at the same time as the animation end event, and therefore does not occur for animations with an "iteration-count" of one

Constant: AnimationIterationEvent

General listener format:

func(view rui.View, animationId string)

where: * view - Interface of a view which generated this event * animationId - Id of the animation

Allowed listener formats:

func(view rui.View)

func(animationId string)

func()

"animation-start-event"

Fired when an animation has started. If there is an "animation-delay", this event will fire once the delay period has expired

Constant: AnimationStartEvent

General listener format:

func(view rui.View, animationId string)

where: * view - Interface of a view which generated this event * animationId - Id of the animation

Allowed listener formats:

func(view rui.View)

func(animationId string)

func()

"click-event"

Occur when the user clicks on the view

Constant: ClickEvent

General listener format:

func(view rui.View, event rui.MouseEvent)

where: * view - Interface of a view which generated this event * event - Mouse event

Allowed listener formats:

func(view rui.View)

func(event rui.MouseEvent)

func()

"context-menu-event"

Occur when the user calls the context menu by the right mouse clicking

Constant: ContextMenuEvent

General listener format:

func(view rui.View, event rui.MouseEvent)

where: * view - Interface of a view which generated this event * event - Mouse event

Allowed listener formats:

func(view rui.View)

func(event rui.MouseEvent)

func()

"double-click-event"

Occur when the user double clicks on the view

Constant: DoubleClickEvent

General listener format:

func(view rui.View, event rui.MouseEvent)

where: * view - Interface of a view which generated this event * event - Mouse event

Allowed listener formats:

func(view rui.View)

func(event rui.MouseEvent)

func()

"focus-event"

Occur when the view takes input focus

Constant: FocusEvent

General listener format:

func(View)

where: * view - Interface of a view which generated this event

Allowed listener formats:

func()

"key-down-event"

Is fired when a key is pressed

Constant: KeyDownEvent

General listener format:

func(view rui.View, event rui.KeyEvent)

where: * view - Interface of a view which generated this event * event - Key event

Allowed listener formats:

func(view rui.View)

func(event rui.KeyEvent)

func()

"key-up-event"

Is fired when a key is released

Constant: KeyUpEvent

General listener format:

func(view rui.View, event rui.KeyEvent)

where: * view - Interface of a view which generated this event * event - Key event

Allowed listener formats:

func(view rui.View)

func(event rui.KeyEvent)

func()

"lost-focus-event"

Occur when the View lost input focus

Constant: LostFocusEvent

General listener format:

func(view rui.View)

where: * view - Interface of a view which generated this event

Allowed listener formats:

func()

"mouse-down"

Is fired at a View when a pointing device button is pressed while the pointer is inside the view.

Constant: MouseDown

General listener format:

func(view rui.View, event rui.MouseEvent)

where: * view - Interface of a view which generated this event * event - Mouse event

Allowed listener formats:

func(view rui.View)

func(event rui.MouseEvent)

func()

"mouse-move"

Is fired at a view when a pointing device(usually a mouse) is moved while the cursor's hotspot is inside it

Constant: MouseMove

General listener format:

func(view rui.View, event rui.MouseEvent)

where: * view - Interface of a view which generated this event * event - Mouse event

Allowed listener formats:

func(view rui.View)

func(event rui.MouseEvent)

func()

"mouse-out"

Is fired at a View when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the view or one of its children. "mouse-out" is also delivered to a view if the cursor enters a child view, because the child view obscures the visible area of the view

Constant: MouseOut

General listener format:

func(view rui.View, event rui.MouseEvent)

where: * view - Interface of a view which generated this event * event - Mouse event

Allowed listener formats:

func(view rui.View)

func(event rui.MouseEvent)

func()

"mouse-over"

Is fired at a View when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the view or one of its child views

Constant: MouseOver

General listener format:

func(view rui.View, event rui.MouseEvent)

where: * view - Interface of a view which generated this event * event - Mouse event

Allowed listener formats:

func(view rui.View)

func(event rui.MouseEvent)

func()

"mouse-up"

Is fired at a View when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it. "mouse-up" events are the counterpoint to "mouse-down" events

Constant: MouseUp

General listener format:

func(view rui.View, event rui.MouseEvent)

where: * view - Interface of a view which generated this event * event - Mouse event

Allowed listener formats:

func(view rui.View)

func(event rui.MouseEvent)

func()

"pointer-cancel"

Is fired if the pointer will no longer be able to generate events (for example the related device is deactivated)

Constant: PointerCancel

General listener format:

func(view rui.View, event rui.PointerEvent)

where: * view - Interface of a view which generated this event * event - Pointer event

Allowed listener formats:

func(event rui.PointerEvent)

func(view rui.View)

func()

"pointer-down"

Fired when a pointer becomes active. For mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed. For touch, it is fired when physical contact is made with the digitizer. For pen, it is fired when the stylus makes physical contact with the digitizer

Constant: PointerDown

General listener format:

func(view rui.View, event rui.PointerEvent)

where: * view - Interface of a view which generated this event * event - Pointer event

Allowed listener formats:

func(event rui.PointerEvent)

func(view rui.View)

func()

"pointer-move"

Is fired when a pointer changes coordinates

Constant: PointerMove

General listener format:

func(view rui.View, event rui.PointerEvent)

where: * view - Interface of a view which generated this event * event - Pointer event

Allowed listener formats:

func(event rui.PointerEvent)

func(view rui.View)

func()

"pointer-out"

Is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the "pointer-up" event for a device that does not support hover (see "pointer-up"); after firing the "pointer-cancel" event (see "pointer-cancel"); when a pen stylus leaves the hover range detectable by the digitizer

Constant: PointerOut

General listener format:

func(view rui.View, event rui.PointerEvent)

where: * view - Interface of a view which generated this event * event - Pointer event

Allowed listener formats:

func(event rui.PointerEvent)

func(view rui.View)

func()

"pointer-over"

Is fired when a pointing device is moved into an view's hit test boundaries

Constant: PointerOver

General listener format:

func(view rui.View, event rui.PointerEvent)

where: * view - Interface of a view which generated this event * event - Pointer event

Allowed listener formats:

func(event rui.PointerEvent)

func(view rui.View)

func()

"pointer-up"

Is fired when a pointer is no longer active

Constant: PointerUp

General listener format:

func(view rui.View, event rui.PointerEvent)

where: * view - Interface of a view which generated this event * event - Pointer event

Allowed listener formats:

func(event rui.PointerEvent)

func(view rui.View)

func()

"resize-event"

Is fired when the view changes its size

Constant: ResizeEvent

General listener format:

func(view rui.View, frame rui.Frame)

where: * view - Interface of a view which generated this event * frame - New offset and size of the view's visible area

Allowed listener formats:

func(frame rui.Frame)

func(view rui.View)

func()

"scroll-event"

Is fired when the content of the view is scrolled

Constant: ScrollEvent

General listener format:

func(view rui.View, frame rui.Frame)

where: * view - Interface of a view which generated this event * frame - New offset and size of the view's visible area

Allowed listener formats:

func(frame rui.Frame)

func(view rui.View)

func()

"touch-cancel"

Is fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created)

Constant: TouchCancel

General listener format:

func(view rui.View, event rui.TouchEvent)

where: * view - Interface of a view which generated this event * event - Touch event

Allowed listener formats:

func(event rui.TouchEvent)

func(view rui.View)

func()

"touch-end"

Fired when one or more touch points are removed from the touch surface

Constant: TouchEnd

General listener format:

func(view rui.View, event rui.TouchEvent)

where: * view - Interface of a view which generated this event * event - Touch event

Allowed listener formats:

func(event rui.TouchEvent)

func(view rui.View)

func()

"touch-move"

Is fired when one or more touch points are moved along the touch surface

Constant: TouchMove

General listener format:

func(view rui.View, event rui.TouchEvent)

where: * view - Interface of a view which generated this event * event - Touch event

Allowed listener formats:

func(event rui.TouchEvent)

func(view rui.View)

func()

"touch-start"

Is fired when one or more touch points are placed on the touch surface

Constant: TouchStart

General listener format:

func(view rui.View, event rui.TouchEvent)

where: * view - Interface of a view which generated this event * event - Touch event

Allowed listener formats:

func(event rui.TouchEvent)

func(view rui.View)

func()

"transition-cancel-event"

Is fired when a transition is cancelled. The transition is cancelled when: * A new property transition has begun * The "visibility" property is set to "gone" * The transition is stopped before it has run to completion, e.g. by moving the mouse off a hover-transitioning view

Constant: TransitionCancelEvent

General listener format:

func(view rui.View, propertyName string)

where: * view - Interface of a view which generated this event * propertyName - Name of the property

Allowed listener formats:

func(view rui.View)

func(propertyName string)

func()

"transition-end-event"

Is fired when a transition has completed

Constant: TransitionEndEvent

General listener format:

func(view rui.View, propertyName string)

where: * view - Interface of a view which generated this event * propertyName - Name of the property

Allowed listener formats:

func(view rui.View)

func(propertyName string)

func()

"transition-run-event"

Is fired when a transition is first created, i.e. before any transition delay has begun

Constant: TransitionRunEvent

General listener format:

func(view rui.View, propertyName string)

where: * view - Interface of a view which generated this event * propertyName - Name of the property

Allowed listener formats:

func(view rui.View)

func(propertyName string)

func()

"transition-start-event"

Is fired when a transition has actually started, i.e., after "delay" has ended

Constant: TransitionStartEvent

General listener format:

func(view rui.View, propertyName string)

where: * view - Interface of a view which generated this event * propertyName - Name of the property

Allowed listener formats:

func(view rui.View)

func(propertyName string)

func()

func NewViewStyle(params Params) ViewStyle

Create new view style object and returns its interface

func CreateViewFromObject(session Session, object DataObject) View

Create new View and initialize it by Node data

func CreateViewFromResources(session Session, name string) View

Create new View and initialize it by the content of the resource file from "views" directory

func CreateViewFromText(session Session, text string) View

Create new View and initialize it by content of text

func BlurView(view View)

Removes keyboard focus from the specified View

func BlurViewByID(viewID string, session Session)

Removes keyboard focus from the View with the specified viewID

func FocusView(view View, subviewID ...string)

Sets focus on the specified subview, if it can be focused. The focused View is the View which will receive keyboard events by default. If the second argument (subviewID) is not specified or is an empty string then focus is set on the first argument (view)

func FocusViewByID(viewID string, session Session)

Sets focus on the View with the specified viewID, if it can be focused. The focused View is the View which will receive keyboard events by default

func Get(rootView View, viewID, tag string) any

Returns a value of the property with name "tag" of the "rootView" subview with "viewID" id value. The type of return value depends on the property. If the subview don't exists or the property is not set then nil is returned

func GetAccentColor(view View, subviewID ...string) Color

Returns the accent color for UI controls generated by some elements. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetAnimationCancelListeners(view View, subviewID ...string) []func(View, string)

Returns the "animation-cancel-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetAnimationEndListeners(view View, subviewID ...string) []func(View, string)

Returns the "animation-end-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetAnimationIterationListeners(view View, subviewID ...string) []func(View, string)

Returns the "animation-iteration-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetAnimationStartListeners(view View, subviewID ...string) []func(View, string)

Returns the "animation-start-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetAvoidBreak(view View, subviewID ...string) bool

Returns "true" if avoids any break from being inserted within the principal box, and "false" if allows, but does not force, any break to be inserted within the principal box. If the second argument (subviewID) is not specified or is an empty string then a top position of the first argument (view) is returned

func GetBackfaceVisible(view View, subviewID ...string) bool

Returns a bool property that sets whether the back face of an element is visible when turned towards the user. Values: true - the back face is visible when turned towards the user (default value). false - the back face is hidden, effectively making the element invisible when turned away from the user. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetBackgroundBlendMode(view View, subviewID ...string) int

Returns a "background-blend-mode" of the subview. Returns one of next values: BlendNormal (0), BlendMultiply (1), BlendScreen (2), BlendOverlay (3), BlendDarken (4), BlendLighten (5), BlendColorDodge (6), BlendColorBurn (7), BlendHardLight (8), BlendSoftLight (9), BlendDifference (10), BlendExclusion (11), BlendHue (12), BlendSaturation (13), BlendColor (14), BlendLuminosity (15). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetBackgroundColor(view View, subviewID ...string) Color

Returns a background color of the subview. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetBorder(view View, subviewID ...string) ViewBorders

Returns ViewBorders of the subview. If the second argument (subviewID) is not specified or is an empty string then a ViewBorders of the first argument (view) is returned

func GetBottom(view View, subviewID ...string) SizeUnit

Returns a top position of the subview in an AbsoluteLayout container. If a parent view is not an AbsoluteLayout container then this value is ignored. If the second argument (subviewID) is not specified or is an empty string then a bottom position of the first argument (view) is returned

func GetClickListeners(view View, subviewID ...string) []func(View, MouseEvent)

Returns the "click-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetColumn(view View, subviewID ...string) Range

Returns the range of column numbers of a GridLayout in which the subview is placed. If the second argument (subviewID) is not specified or is an empty string then a values from the first argument (view) is returned

func GetContextMenuListeners(view View, subviewID ...string) []func(View, MouseEvent)

Returns the "context-menu" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetCurrent(view View, subviewID ...string) int

Returns the index of the selected item (<0 if there is no a selected item) or the current view index (StackLayout, TabsLayout). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetDisabledStyle(view View, subviewID ...string) string

Returns the disabled subview style id. If the second argument (subviewID) is not specified or is an empty string then a style of the first argument (view) is returned

func GetDoubleClickListeners(view View, subviewID ...string) []func(View, MouseEvent)

Returns the "double-click-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetFocusListeners(view View, subviewID ...string) []func(View)

Returns a FocusListener list. If there are no listeners then the empty list is returned If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetFontName(view View, subviewID ...string) string

Returns the subview font. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetHeight(view View, subviewID ...string) SizeUnit

Returns the subview height. If the second argument (subviewID) is not specified or is an empty string then a height of the first argument (view) is returned

func GetKeyDownListeners(view View, subviewID ...string) []func(View, KeyEvent)

Returns the "key-down-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetKeyUpListeners(view View, subviewID ...string) []func(View, KeyEvent)

Returns the "key-up-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetLeft(view View, subviewID ...string) SizeUnit

Returns a left position of the subview in an AbsoluteLayout container. If a parent view is not an AbsoluteLayout container then this value is ignored. If the second argument (subviewID) is not specified or is an empty string then a left position of the first argument (view) is returned

func GetLetterSpacing(view View, subviewID ...string) SizeUnit

Returns a letter spacing of the subview. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetLineHeight(view View, subviewID ...string) SizeUnit

Returns a height of a text line of the subview. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetLostFocusListeners(view View, subviewID ...string) []func(View)

Returns a LostFocusListener list. If there are no listeners then the empty list is returned If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetMargin(view View, subviewID ...string) Bounds

Returns the subview margin. If the second argument (subviewID) is not specified or is an empty string then a margin of the first argument (view) is returned

func GetMaxHeight(view View, subviewID ...string) SizeUnit

Returns a maximal subview height. If the second argument (subviewID) is not specified or is an empty string then a maximal height of the first argument (view) is returned

func GetMaxWidth(view View, subviewID ...string) SizeUnit

Returns a maximal subview width. If the second argument (subviewID) is not specified or is an empty string then a maximal width of the first argument (view) is returned

func GetMinHeight(view View, subviewID ...string) SizeUnit

Returns a minimal subview height. If the second argument (subviewID) is not specified or is an empty string then a minimal height of the first argument (view) is returned

func GetMinWidth(view View, subviewID ...string) SizeUnit

Returns a minimal subview width. If the second argument (subviewID) is not specified or is an empty string then a minimal width of the first argument (view) is returned

func GetMixBlendMode(view View, subviewID ...string) int

Returns a "mix-blend-mode" of the subview. Which is one of next values: BlendNormal (0), BlendMultiply (1), BlendScreen (2), BlendOverlay (3), BlendDarken (4), BlendLighten (5), BlendColorDodge (6), BlendColorBurn (7), BlendHardLight (8), BlendSoftLight (9), BlendDifference (10), BlendExclusion (11), BlendHue (12), BlendSaturation (13), BlendColor (14), BlendLuminosity (15). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetMouseDownListeners(view View, subviewID ...string) []func(View, MouseEvent)

Returns the "mouse-down" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetMouseMoveListeners(view View, subviewID ...string) []func(View, MouseEvent)

Returns the "mouse-move" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetMouseOutListeners(view View, subviewID ...string) []func(View, MouseEvent)

Returns the "mouse-out" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetMouseOverListeners(view View, subviewID ...string) []func(View, MouseEvent)

Returns the "mouse-over" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetMouseUpListeners(view View, subviewID ...string) []func(View, MouseEvent)

Returns the "mouse-up" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetNotTranslate(view View, subviewID ...string) bool

Returns the "not-translate" property value of the subview. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetOpacity(view View, subviewID ...string) float64

Returns the subview opacity. If the second argument (subviewID) is not specified or is an empty string then an opacity of the first argument (view) is returned

func GetOrder(view View, subviewID ...string) int

Returns the subview order to layout an item in a ListLayout or GridLayout container. If the second argument (subviewID) is not specified or is an empty string then an order of the first argument (view) is returned.

func GetOrigin(view View, subviewID ...string) (SizeUnit, SizeUnit, SizeUnit)

Returns a x, y, and z coordinate of the point around which a view transformation is applied. The default value is (50%, 50%, 50%). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetOutline(view View, subviewID ...string) ViewOutline

Returns ViewOutline of the subview. If the second argument (subviewID) is not specified or is an empty string then a ViewOutline of the first argument (view) is returned

func GetOutlineOffset(view View, subviewID ...string) SizeUnit

Returns the subview outline offset. If the second argument (subviewID) is not specified or is an empty string then a offset of the first argument (view) is returned

func GetOverflow(view View, subviewID ...string) int

Returns a value of the subview "overflow" property. Which is one of the next values: OverflowHidden (0), OverflowVisible (1), OverflowScroll (2), OverflowAuto (3). If the second argument (subviewID) is not specified or is an empty string then a value of the first argument (view) is returned

func GetPadding(view View, subviewID ...string) Bounds

Returns the subview padding. If the second argument (subviewID) is not specified or is an empty string then a padding of the first argument (view) is returned

func GetPerspective(view View, subviewID ...string) SizeUnit

Returns a distance between the z plane and the user in order to give a 3D-positioned element some perspective. Each 3D element with z > 0 becomes larger, each 3D-element with z < 0 becomes smaller. The default value is 0 (no 3D effects). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetPerspectiveOrigin(view View, subviewID ...string) (SizeUnit, SizeUnit)

Returns x and y coordinates of the position at which the viewer is looking. It is used as the vanishing point by the "perspective" property. The default value is (50%, 50%). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetPointerCancelListeners(view View, subviewID ...string) []func(View, PointerEvent)

Returns the "pointer-cancel" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetPointerDownListeners(view View, subviewID ...string) []func(View, PointerEvent)

Returns the "pointer-down" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetPointerMoveListeners(view View, subviewID ...string) []func(View, PointerEvent)

Returns the "pointer-move" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetPointerOutListeners(view View, subviewID ...string) []func(View, PointerEvent)

Returns the "pointer-out" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetPointerOverListeners(view View, subviewID ...string) []func(View, PointerEvent)

Returns the "pointer-over" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetPointerUpListeners(view View, subviewID ...string) []func(View, PointerEvent)

Returns the "pointer-up" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned.

func GetRadius(view View, subviewID ...string) BoxRadius

Returns the BoxRadius structure of the subview. If the second argument (subviewID) is not specified or is an empty string then a BoxRadius of the first argument (view) is returned

func GetResize(view View, subviewID ...string) int

Returns the "resize" property value of the subview. Which is one of the following values: NoneResize (0), BothResize (1), HorizontalResize (2) and VerticalResize (3). If the second argument (subviewID) is not specified or is an empty string then a value of the first argument (view) is returned.

func GetResizeListeners(view View, subviewID ...string) []func(View, Frame)

Returns the list of "resize-event" listeners. If there are no listeners then the empty list is returned If the second argument (subviewID) is not specified or is an empty string then the listeners list of the first argument (view) is returned

func GetRight(view View, subviewID ...string) SizeUnit

Returns a right position of the subview in an AbsoluteLayout container. If a parent view is not an AbsoluteLayout container then this value is ignored. If the second argument (subviewID) is not specified or is an empty string then a right position of the first argument (view) is returned.

func GetRotate(view View, subviewID ...string) (float64, float64, float64, AngleUnit)

Returns x, y and z coordinate of the vector denoting the axis of rotation, and the angle of the view rotation. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetRow(view View, subviewID ...string) Range

Returns the range of row numbers of a GridLayout in which the subview is placed. If the second argument (subviewID) is not specified or is an empty string then a values from the first argument (view) is returned

func GetScale(view View, subviewID ...string) (float64, float64, float64)

Returns x, y and z axis scaling value of a 2D/3D scale. The default value is 1. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetScrollListeners(view View, subviewID ...string) []func(View, Frame)

Returns the list of "scroll-event" listeners. If there are no listeners then the empty list is returned If the second argument (subviewID) is not specified or is an empty string then the listeners list of the first argument (view) is returned

func GetSemantics(view View, subviewID ...string) int

Returns the subview semantics. Valid semantics values are DefaultSemantics (0), ArticleSemantics (1), SectionSemantics (2), AsideSemantics (3), HeaderSemantics (4), MainSemantics (5), FooterSemantics (6), NavigationSemantics (7), FigureSemantics (8), FigureCaptionSemantics (9), ButtonSemantics (10), ParagraphSemantics (11), H1Semantics (12) - H6Semantics (17), BlockquoteSemantics (18) and CodeSemantics (19). If the second argument (subviewID) is not specified or is an empty string then a semantics of the first argument (view) is returned

func GetSkew(view View, subviewID ...string) (AngleUnit, AngleUnit)

Returns a angles to use to distort the element along the abscissa (x-axis) and the ordinate (y-axis). The default value is 0. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetStyle(view View, subviewID ...string) string

Returns the subview style id. If the second argument (subviewID) is not specified or is an empty string then a style of the first argument (view) is returned

func GetTabIndex(view View, subviewID ...string) int

Returns the subview tab-index. If the second argument (subviewID) is not specified or is an empty string then a tab-index of the first argument (view) is returned

func GetTabSize(view View, subviewID ...string) int

Returns the subview width of tab characters (U+0009) in spaces. If the second argument (subviewID) is not specified or is an empty string then a width of the first argument (view) is returned

func GetTextAlign(view View, subviewID ...string) int

Returns a text align of the subview. Possible values are LeftAlign (0), RightAlign (1), CenterAlign (2), JustifyAlign (3). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextColor(view View, subviewID ...string) Color

Returns a text color of the subview. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextDirection(view View, subviewID ...string) int

Returns a direction of text, table columns and horizontal overflow. Possible values are SystemTextDirection (0), LeftToRightDirection (1) and RightToLeftDirection (2). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextIndent(view View, subviewID ...string) SizeUnit

Returns a text indent of the subview. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextLineColor(view View, subviewID ...string) Color

Returns the stroke color of the decoration line that is used on text in an element, such as a strikethrough, underline, or overline. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextLineStyle(view View, subviewID ...string) int

Returns the stroke style of the decoration line that is used on text in an element, such as a strikethrough, underline, or overline. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextLineThickness(view View, subviewID ...string) SizeUnit

Returns the stroke thickness of the decoration line that is used on text in an element, such as a strikethrough, underline, or overline. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextShadows(view View, subviewID ...string) []ViewShadow

Returns text shadows of the subview. If the second argument (subviewID) is not specified or is an empty string then shadows of the first argument (view) is returned

func GetTextSize(view View, subviewID ...string) SizeUnit

Returns a text size of the subview. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextTransform(view View, subviewID ...string) int

Returns a text transform of the subview. Possible values are: NoneTextTransform (0), CapitalizeTextTransform (1), LowerCaseTextTransform (2) and UpperCaseTextTransform (3). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextWeight(view View, subviewID ...string) int

Returns a text weight of the subview. Possible values are: 1, 2, 3, 4 (normal text), 5, 6, 7 (bold text), 8 and 9. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTextWrap(view View, subviewID ...string) int

Returns how text inside of the subview is wrapped. Possible values are: TextWrapOn (0), TextWrapOff (1), TextWrapBalance (3). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTooltip(view View, subviewID ...string) string

Returns a tooltip text of the subview. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTop(view View, subviewID ...string) SizeUnit

Returns a top position of the subview in an AbsoluteLayout container. If a parent view is not an AbsoluteLayout container then this value is ignored. If the second argument (subviewID) is not specified or is an empty string then a top position of the first argument (view) is returned

func GetTouchCancelListeners(view View, subviewID ...string) []func(View, TouchEvent)

Returns the "touch-cancel" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTouchEndListeners(view View, subviewID ...string) []func(View, TouchEvent)

Returns the "touch-end" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTouchMoveListeners(view View, subviewID ...string) []func(View, TouchEvent)

Returns the "touch-move" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTouchStartListeners(view View, subviewID ...string) []func(View, TouchEvent)

Returns the "touch-start" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTransitionCancelListeners(view View, subviewID ...string) []func(View, string)

Returns the "transition-cancel-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTransitionEndListeners(view View, subviewID ...string) []func(View, string)

Returns the "transition-end-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTransitionRunListeners(view View, subviewID ...string) []func(View, string)

Returns the "transition-run-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTransitionStartListeners(view View, subviewID ...string) []func(View, string)

Returns the "transition-start-event" listener list. If there are no listeners then the empty list is returned. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetTranslate(view View, subviewID ...string) (SizeUnit, SizeUnit, SizeUnit)

Returns x, y and z axis translation value of a 2D/3D translation. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetVerticalTextOrientation(view View, subviewID ...string) int

Returns an orientation of the text characters in a line. It only affects text in vertical mode (when "writing-mode" is "vertical-right-to-left" or "vertical-left-to-right"). Possible values are: MixedTextOrientation (0) and UprightTextOrientation (1). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetViewFrame(view View, subviewID ...string) Frame

Returns the size and location of view's viewport. If the second argument (subviewID) is not specified or is an empty string then the value of the first argument (view) is returned

func GetViewScroll(view View, subviewID ...string) Frame

Returns view's current viewport scroll position. If the second argument (subviewID) is not specified or is an empty string then a value of the first argument (view) is returned

func GetViewShadows(view View, subviewID ...string) []ViewShadow

Returns shadows of the subview. If the second argument (subviewID) is not specified or is an empty string then shadows of the first argument (view) is returned

func GetVisibility(view View, subviewID ...string) int

Returns the subview visibility. One of the following values is returned: Visible (0), Invisible (1) and Gone (2). If the second argument (subviewID) is not specified or is an empty string then a visibility of the first argument (view) is returned

func GetWidth(view View, subviewID ...string) SizeUnit

Returns the subview width. If the second argument (subviewID) is not specified or is an empty string then a width of the first argument (view) is returned

func GetWordSpacing(view View, subviewID ...string) SizeUnit

Returns a word spacing of the subview. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetWritingMode(view View, subviewID ...string) int

Returns whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. Possible values are HorizontalTopToBottom (0), HorizontalBottomToTop (1), VerticalRightToLeft (2) and VerticalLeftToRight (3). If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func GetZIndex(view View, subviewID ...string) int

Returns the subview z-order. If the second argument (subviewID) is not specified or is an empty string then a z-order of the first argument (view) is returned

func IsDisabled(view View, subviewID ...string) bool

Returns "true" if the subview is disabled. If the second argument (subviewID) is not specified or is an empty string then a state of the first argument (view) is returned

func IsItalic(view View, subviewID ...string) bool

Returns "true" if a text font of the subview is displayed in italics, "false" otherwise. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func IsOverline(view View, subviewID ...string) bool

Returns "true" if a text font of the subview is displayed overlined, "false" otherwise. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func IsSmallCaps(view View, subviewID ...string) bool

Returns "true" if a text font of the subview is displayed in small caps, "false" otherwise. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func IsStrikethrough(view View, subviewID ...string) bool

Returns "true" if a text font of the subview is displayed strikethrough, "false" otherwise. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func IsUnderline(view View, subviewID ...string) bool

Returns "true" if a text font of the subview is displayed underlined, "false" otherwise. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func IsUserSelect(view View, subviewID ...string) bool

Returns "true" if the user can select text, "false" otherwise. If the second argument (subviewID) is not specified or is an empty string then a value from the first argument (view) is returned

func ScrollViewTo(view View, subviewID string, x, y float64)

Scrolls the view's content to the given position. If the second argument (subviewID) is "" then the first argument (view) is used

func ScrollViewToEnd(view View, subviewID ...string)

Scrolls the view's content to the end of view. If the second argument (subviewID) is not specified or is an empty string then the first argument (view) is used

func ScrollViewToStart(view View, subviewID ...string)

Scrolls the view's content to the start of view. If the second argument (subviewID) is not specified or is an empty string then the first argument (view) is used

func Set(rootView View, viewID, tag string, value any) bool

Set property value of the view. View specified by it's ID(viewID parameter), view's property by its name(tag parameter) and rootView is a starting point from which to find view with specified ID in hierarchy of UI elements on a page or screen. Returns true on success, false on error(incompatible type or invalid format of a string value, see AppLog).

func SetChangeListener(view View, viewID, tag string, listener func(View, string))

Sets a listener which will be called on subview's property value changes. If the second argument (subviewID) is not specified or is an empty string then a listener for the first argument (view) is set

func SetParams(rootView View, viewID string, params Params) bool

Sets several properties for subview. Returns true if all properties were set successfully, false on error(incompatible type or invalid format of a string value, see AppLog)

func RegisterViewCreator(tag string, creator func(Session) View) bool

RegisterViewCreator register function of creating view

func ViewByID(rootView View, id string) View

Return a View with id equal to the argument of the function or nil if there is no such View

© Alxanosoft inc.