View Opacity

To enhance accessibility, create dimming effects, visually appealing transitions and hover effects, or improve user interaction, we can use the "opacity" property. It's value is in range from 0 to 100 percent, where 0% means that the view is fully transparent.

Property Type Description
"opacity" float Degree of the view opacity

As an example to demonstrate this property lets have a look at the login screen of the application where input fields for the user name and password will be semi-transparent. We'll first implement it using the Golang and then show how to use that property in the resource file.

Go

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.Background: rui.NewBackgroundImage(rui.Params{
        rui.Source: "background.jpg",
        rui.Fit:    rui.CoverFit,
    }),
    rui.Content: rui.NewListLayout(session, rui.Params{
        rui.Orientation: rui.TopDownOrientation,
        rui.Opacity:     0.8, // Setting an opacity of the view
        rui.Content: []rui.View{
            rui.NewEditView(session, rui.Params{
                rui.Radius: rui.Em(1),
                rui.Hint:   "Username",
            }),
            rui.NewEditView(session, rui.Params{
                rui.Radius:       rui.Em(1),
                rui.Hint:         "Password",
                rui.EditViewType: rui.PasswordText,
            }),
        },
    }),
})

When describing "opacity" property in resource description file we can use either string representation of the float or integer type.

Below is the same login view but created in resources:

RUI

GridLayout {
    width = 100%,
    height = 100%,
    background = image {
        src = "background.jpg",
        fit = cover,
    },
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ListLayout {
        opacity = 0.8, // Setting an opacity of the view
        gap = 0.5em,
        orientation = up-down,
        content = [
            EditView {
                radius = 1em,
                hint = "Username",
            },
            EditView {
                radius = 1em,
                hint = "Password",
                edit-view-type = "password",
            }
        ]
    }
}

Depending on the browser we ran our application on the results may be different but here is the variant where we ran it in Safari:

Opacity example

The library has a convenient global function of getting back the value of the view opacity called GetOpacity().

Go

opacity := rui.GetOpacity(rootView, "view-id")
// Do something with the value

To get more information on how to work with view properties please check Property System tutorial.

© Alxanosoft inc.