BackgroundElement

Description of View's background

Create from source

func NewBackgroundImage(params Params) BackgroundElement

Creates the new background image

func NewBackgroundConicGradient(params Params) BackgroundElement

Creates the new background conic gradient

func NewBackgroundLinearGradient(params Params) BackgroundElement

Creates the new background linear gradient

func NewBackgroundRadialGradient(params Params) BackgroundElement

Creates the new background radial gradient

func NewCircleRadialGradient[radiusType SizeUnit | RadialGradientRadiusType](xCenter, yCenter SizeUnit, radius radiusType, repeating bool, point1 GradientPoint, point2 GradientPoint, points ...GradientPoint) BackgroundElement

Creates the new background circle radial gradient.

func NewEllipseRadialGradient[radiusType []SizeUnit | RadialGradientRadiusType](xCenter, yCenter SizeUnit, radius radiusType, repeating bool, point1 GradientPoint, point2 GradientPoint, points ...GradientPoint) BackgroundElement

Creates the new background ellipse radial gradient.

func NewLinearGradient[DirectionType LinearGradientDirectionType | AngleUnit](direction DirectionType, repeating bool, point1 GradientPoint, point2 GradientPoint, points ...GradientPoint) BackgroundElement

Creates the new background linear gradient.

Create from resource

View {
    background = image {
        src = "background.jpg",
        attachment = local,
    },
}

View {
    background = conic-gradient {
        gradient = "#FF000000,#FF008000",
    }
}

View {
    background = linear-gradient {
        gradient = "#FF000000,#FF008000",
        direction = to-bottom,
    }
}

View {
    background = radial-gradient {
        gradient = "#FF008000,#FF000000",
    }
}

Interface description

Inherit methods from Properties, fmt.Stringer

Clone() BackgroundElement

Creates a new copy of BackgroundElement

Tag() string

Return type of the background element. Possible values are: "image", "conic-gradient", "linear-gradient", "radial-gradient"

Properties

"attachment"

Used for image background only. Sets whether a background image's position is fixed within the viewport or scrolls with its containing block

Constant: Attachment

Types: int, string

Values

int	string	Description
`0`(`ScrollAttachment`)	"scroll"	The background image will scroll with the page
`1`(`FixedAttachment`)	"fixed"	The background image will not scroll with the page
`2`(`LocalAttachment`)	"local"	The background image will scroll with the element's contents

"center-x"

Used for conic and radial gradients only. Center X point of the gradient

Constant: CenterX

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 {
    width = 100%,
    height = 100%,
    background = [
        radial-gradient {
            center-x = 90px,
            center-y = 90px,
            radial-gradient-radius = 10px,
            gradient = "white 0%,#00FFFFFF 100%"
        },
        radial-gradient {
            center-x = 100px,
            center-y = 100px,
            radial-gradient-radius = 100px,
            gradient = "black 0%,black 30%,#FF9FD6E4 40%,black 100%",
        },
    ]
}

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundRadialGradient(rui.Params{
            rui.CenterX:              rui.Px(90),
            rui.CenterY:              rui.Px(90),
            rui.RadialGradientRadius: rui.Px(10),
            rui.Gradient: []rui.GradientPoint{
                {Offset: 0, Color: rui.White},
                {Offset: 1, Color: 0x00FFFFFF},
            },
        }),
        rui.NewBackgroundRadialGradient(rui.Params{
            rui.CenterX:              rui.Px(100),
            rui.CenterY:              rui.Px(100),
            rui.RadialGradientRadius: rui.Px(100),
            rui.Gradient: []rui.GradientPoint{
                {Offset: 0, Color: rui.Black},
                {Offset: 0.3, Color: rui.Black},
                {Offset: 0.4, Color: 0xFF9FD6E4},
                {Offset: 1, Color: rui.Black},
            },
        }),
    },
})

"center-y"

Used for conic and radial gradients only. Center Y point of the gradient

Constant: CenterY

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 {
    width = 100%,
    height = 100%,
    background = [
        radial-gradient {
            center-x = 90px,
            center-y = 90px,
            radial-gradient-radius = 10px,
            gradient = "white 0%,#00FFFFFF 100%"
        },
        radial-gradient {
            center-x = 100px,
            center-y = 100px,
            radial-gradient-radius = 100px,
            gradient = "black 0%,black 30%,#FF9FD6E4 40%,black 100%",
        },
    ]
}

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundRadialGradient(rui.Params{
            rui.CenterX:              rui.Px(90),
            rui.CenterY:              rui.Px(90),
            rui.RadialGradientRadius: rui.Px(10),
            rui.Gradient: []rui.GradientPoint{
                {Offset: 0, Color: rui.White},
                {Offset: 1, Color: 0x00FFFFFF},
            },
        }),
        rui.NewBackgroundRadialGradient(rui.Params{
            rui.CenterX:              rui.Px(100),
            rui.CenterY:              rui.Px(100),
            rui.RadialGradientRadius: rui.Px(100),
            rui.Gradient: []rui.GradientPoint{
                {Offset: 0, Color: rui.Black},
                {Offset: 0.3, Color: rui.Black},
                {Offset: 0.4, Color: 0xFF9FD6E4},
                {Offset: 1, Color: rui.Black},
            },
        }),
    },
})

"direction"

Used for linear gradient only. Defines the direction of the gradient line. Default is 4(ToBottomGradient) or "to-bottom"

Constant: Direction

Types: AngleUnit, LinearGradientDirectionType, int, string

See AngleUnit and LinearGradientDirectionType description for more details

Values

int	string	Description
`0`(`ToTopGradient`)	"to-top"	Line goes from bottom to top
`1`(`ToRightTopGradient`)	"to-right-top"	From bottom left to top right
`2`(`ToRightGradient`)	"to-right"	From left to right
`3`(`ToRightBottomGradient`)	"to-right-bottom"	From top left to bottom right
`4`(`ToBottomGradient`)	"to-bottom"	From top to bottom
`5`(`ToLeftBottomGradient`)	"to-left-bottom"	From the upper right corner to the lower left
`6`(`ToLeftGradient`)	"to-left"	From right to left
`7`(`ToLeftTopGradient`)	"to-left-top"	From the bottom right corner to the top left

Examples

View {
    width = 100%,
    height = 100%,
    background = [
        linear-gradient {
            direction = to-right,
            gradient = "#FF6138C6 0%,#FFD38039 100%"
        },
    ]
}

View {
    width = 100%,
    height = 100%,
    background = [
        linear-gradient {
            direction = 90deg,
            gradient = "#FF6138C6 0%,#FFD38039 100%"
        },
    ]
}

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundLinearGradient(rui.Params{
            rui.Direction: rui.ToRightGradient,
            rui.Gradient: []rui.GradientPoint{
                {Offset: 0, Color: 0xFF6138C6},
                {Offset: 1, Color: 0xFFD38039},
            },
        }),
    },
})

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundLinearGradient(rui.Params{
            rui.Direction: rui.Deg(90),
            rui.Gradient: []rui.GradientPoint{
                {Offset: 0, Color: 0xFF6138C6},
                {Offset: 1, Color: 0xFFD38039},
            },
        }),
    },
})

"fit"

Used for image background only. Defines the image scaling parameters

Constant: Fit

Types: int, string

Values

int	string	Description
`0`(`NoneFit`)	"none"	The image is not resized
`1`(`ContainFit`)	"contain"	The image is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box
`2`(`CoverFit`)	"cover"	The image is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit

"from"

Used for conic gradient only. Start angle position of the gradient

Constant: From

Types: AngleUnit, string, float, int

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

See AngleUnit description for more details

Examples

View {
    width = 100%,
    height = 100%,
    background = [
        conic-gradient {
            from = 0deg,
            center-x = 50%,
            center-y = 50%,
            gradient = "red,orange,yellow,green,skyblue,blue,purple,red",
        },
    ]
}

View {
    width = 100%,
    height = 100%,
    background = [
        conic-gradient {
            from = 90deg,
            center-x = 50%,
            center-y = 50%,
            gradient = "red 0deg,orange 51deg,yellow 103deg,green 154deg,skyblue 206deg,blue 257deg,purple 309deg,red 360deg",
        },
    ]
}

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundConicGradient(rui.Params{
            rui.From:    rui.Deg(0),
            rui.CenterX: rui.Percent(50),
            rui.CenterY: rui.Percent(50),
            rui.Gradient: "red,orange,yellow,green,skyblue,blue,purple,red",
        }),
    },
})

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundConicGradient(rui.Params{
            rui.From:    rui.Deg(90),
            rui.CenterX: rui.Percent(50),
            rui.CenterY: rui.Percent(50),
            rui.Gradient: []rui.BackgroundGradientAngle{
                {Angle: rui.Deg(0), Color: rui.Red},
                {Angle: rui.Deg(51), Color: rui.Orange},
                {Angle: rui.Deg(103), Color: rui.Yellow},
                {Angle: rui.Deg(154), Color: rui.Green},
                {Angle: rui.Deg(206), Color: rui.SkyBlue},
                {Angle: rui.Deg(257), Color: rui.Blue},
                {Angle: rui.Deg(309), Color: rui.Purple},
                {Angle: rui.Deg(360), Color: rui.Red},
            },
        }),
    },
})

"gradient"

Describe gradient stop points. This is a mandatory property while describing background gradients

Constant: Gradient

Types: []BackgroundGradientPoint, []BackgroundGradientAngle, []GradientPoint, []Color, string

Internal type is []BackgroundGradientPoint or []BackgroundGradientAngle, other types converted to it during assignment

See BackgroundGradientPoint, []BackgroundGradientAngle, []GradientPoint description for more details

Conversion rules

[]BackgroundGradientPoint - stored as is, no conversion performed. Used to set gradient stop points for linear and radial gradients

[]BackgroundGradientAngle - stored as is, no conversion performed. Used to set gradient stop points for conic gradient

[]GradientPoint - converted to []BackgroundGradientPoint. Used to set gradient stop points for linear and radial gradients. Since GradientPoint contains values from 0 to 1.0 they will be converted to precent values

[]Color - converted to []BackgroundGradientPoint. Used for setting gradient stop points which are uniformly distributed across gradient diretion

string - string representation of stop points or color values. Format: "color1 pos1,color2 pos2"... . Position of stop points can be described either in SizeUnit or AngleUnit string representations. Examples: "white 0deg, black 90deg, gray 360deg", "white 0%, black 100%"

Examples

View {
    width = 100%,
    height = 100%,
    background = [
        radial-gradient {
            center-x = 50%,
            center-y = 50%,
            radial-gradient-radius = 10px,
            gradient = "black 0%,#00FFFFFF 100%",
        },
    ]
}

View {
    width = 100%,
    height = 100%,
    background = [
        radial-gradient {
            center-x = 50%,
            center-y = 50%,
            radial-gradient-radius = 10px,
            gradient = "black,#00FFFFFF",
        },
    ]
}

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundRadialGradient(rui.Params{
            rui.CenterX:              rui.Percent(50),
            rui.CenterY:              rui.Percent(50),
            rui.RadialGradientRadius: rui.Px(10),
            rui.Gradient: []rui.GradientPoint{
                {Offset: 0, Color: rui.Black},
                {Offset: 1, Color: 0x00FFFFFF},
            },
        }),
    },
})

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundRadialGradient(rui.Params{
            rui.CenterX:              rui.Percent(50),
            rui.CenterY:              rui.Percent(50),
            rui.RadialGradientRadius: rui.Px(10),
            rui.Gradient: []rui.BackgroundGradientPoint{
                {Pos: rui.Percent(0), Color: rui.Black},
                {Pos: rui.Percent(100), Color: "#00FFFFFF"},
            },
        }),
    },
})

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundRadialGradient(rui.Params{
            rui.CenterX:              rui.Percent(50),
            rui.CenterY:              rui.Percent(50),
            rui.RadialGradientRadius: rui.Px(10),
            rui.Gradient:             "black 0%,#00FFFFFF 100%",
        }),
    },
})

"height"

Used for image background only. Sets image 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

StackLayout {
    width = 100%,
    height = 100%,
    background = image {
        src = "view_background_pattern.svg",
        repeat = repeat,
        width = 64px,
        height = 64px,
    },
}

view := rui.NewStackLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: rui.NewBackgroundImage(rui.Params{
        rui.Source: "view_background_pattern.svg",
        rui.Repeat: rui.RepeatXY,
        rui.Width:  rui.Px(64),
        rui.Height: rui.Px(64),
    }),
})

"image-horizontal-align"

Used for image background only. Sets the horizontal alignment of the image relative to its bounds

Constant: ImageHorizontalAlign

Types: int, string

Values

int	string	Description
`0`(`LeftAlign`)	"left"	Left alignment
`1`(`RightAlign`)	"right"	Right alignment
`2`(`CenterAlign`)	"center"	Center alignment

"image-vertical-align"

Used for image background only. Sets the vertical alignment of the image relative to its bounds

Constant: ImageVerticalAlign

Types: int, string

Values

int	string	Description
`0`(`TopAlign`)	"top"	Top alignment
`1`(`BottomAlign`)	"bottom"	Bottom alignment
`2`(`CenterAlign`)	"center"	Center alignment

"radial-gradient-radius"

Define radius of the radial gradient

Constant: RadialGradientRadius

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 {
    width = 100px,
    height = 100px,
    background = [
        radial-gradient {
            center-x = 50%,
            center-y = 50%,
            radial-gradient-radius = 50%,
            gradient = "red,orange,yellow,green,skyblue,blue,purple,white",
        },
    ]
}

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Px(100),
    rui.Height: rui.Px(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundRadialGradient(rui.Params{
            rui.CenterX:              rui.Percent(50),
            rui.CenterY:              rui.Percent(50),
            rui.RadialGradientRadius: rui.Percent(50),
            rui.Gradient:             "red,orange,yellow,green,skyblue,blue,purple,white",
        }),
    },
})

"radial-gradient-shape"

Define shape of the radial gradient. The default is 0(EllipseGradient or "ellipse"

Constant: RadialGradientShape

Types: int, string

Values

int	string	Description
`0`(`EllipseGradient`)	"ellipse"	The shape is an axis-aligned ellipse
`1`(`CircleGradient`)	"circle"	The shape is a circle with a constant radius

Examples

View {
    width = 150px,
    height = 100px,
    background = [
        radial-gradient {
            center-x = 50%,
            center-y = 50%,
            radial-gradient-shape = "circle",
            gradient = "red,orange,yellow,green,skyblue,blue,purple,white",
        },
    ]
}

view := rui.NewView(session, rui.Params{
    rui.Width:  rui.Px(150),
    rui.Height: rui.Px(100),
    rui.Background: []rui.BackgroundElement{
        rui.NewBackgroundRadialGradient(rui.Params{
            rui.CenterX:             rui.Percent(50),
            rui.CenterY:             rui.Percent(50),
            rui.RadialGradientShape: "circle",
            rui.Gradient:            "red,orange,yellow,green,skyblue,blue,purple,white",
        }),
    },
})

"radius"

Same as "radial-gradient-radius"

Constant: Radius

"repeat"

Used for image background only. Specifying the repetition of the image. Used only for a background image. Default value is "no-repeat"

Constant: Repeat

Types: int, string

Values

int	string	Description
`0`(`NoRepeat`)	"no-repeat"	Image does not repeat
`1`(`RepeatXY`)	"repeat"	Image repeat horizontally and vertically
`2`(`RepeatX`)	"repeat-x"	Image repeat only horizontally
`3`(`RepeatY`)	"repeat-y"	Image repeat only vertically
`4`(`RepeatRound`)	"round"	Image is repeated so that an integer number of images fit into the background area. If this fails, then the background images are scaled
`5`(`RepeatSpace`)	"space"	Image is repeated as many times as necessary to fill the background area. If this fails, an empty space is added between the pictures

"repeating"

Define whether stop points needs to be repeated after the last one

Constant: Repeating

Types: bool, int, string

Values

bool	int	string	Description
`true`	`1`	"true", "yes", "on", "1"	Gradient will repeat after the last key point
`false`	`0`	"false", "no", "off", "0"	No repetition of gradient stop points. Value of the last point used will be extrapolated

"src"

Used for image background only. Set either the name of the image in the "images" folder of the resources, or the URL of the image or inline-image. An inline-image is the content of an image file encoded in base64 format

Constant: Source

Types: string

Examples

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

"shape"

Same as "radial-gradient-shape"

Constant: Shape

"width"

Used for image background only. Sets image 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

StackLayout {
    width = 100%,
    height = 100%,
    background = image {
        src = "view_background_pattern.svg",
        repeat = repeat,
        width = 64px,
        height = 64px,
    },
}

view := rui.NewStackLayout(session, rui.Params{
    rui.Width:  rui.Percent(100),
    rui.Height: rui.Percent(100),
    rui.Background: rui.NewBackgroundImage(rui.Params{
        rui.Source: "view_background_pattern.svg",
        rui.Repeat: rui.RepeatXY,
        rui.Width:  rui.Px(64),
        rui.Height: rui.Px(64),
    }),
})