Background of View

"background-color" property

Constant: rui.BackgroundColor. Get function: GetBackgroundColor() Color

The "background-color" property sets the background color. Valid values are Color, an integer, the textual representation of Color,and a constant name starting with '@'. An integer must encode the color in the AARRGGBB format

In addition to color, images and gradients can also be used as backgrounds (see below).In this case, "background-color" is used for transparent areas of images.

"background-clip" property

The "background-clip" property determines how the background color and / or background image will be displayed below the box borders.

If no background image or color is specified, this property will have a visual effect onlyif the border has transparent areas or partially opaque areas; otherwise, the border hides the difference.

The property can take the following values:

"background" property

In addition to color, pictures and / or gradient fills can also be specified as the background of the View.The property "background" is used for this. The background can contain multiple images and gradients.Each background element is described by the BackgroundElement interface.BackgroundElement can be of three types: linear gradient, radial gradient, and image.

Linear gradient

A linear gradient is created using the function

func NewBackgroundLinearGradient(params Params) BackgroundElement

The linear gradient has the following options:

• Direction ("direction") - defines the direction of the gradient line (the line along which the color changes).Optional parameter. The default direction is from bottom to top. It can be either AngleUnit(the angle of inclination of the line relative to the vertical) or one of the following int values:

• Gradient ("gradient") - array of gradient key points (required parameter).Each point is described by a BackgroundGradientPoint structure, which has two fields: Pos of type SizeUnit and Color.Pos defines the position of the point relative to the start of the gradient line. The array must have at least 2 points.You can also pass a Color array as the gradient value. In this case, the points are evenly distributed along the gradient line.You can also use an array of []any as an array of cue points.The elements of this array can be BackgroundGradientPoint, Color, BackgroundGradientPoint or Color text representation, and the name of the constant
• Repeating ("repeating") - a boolean value that determines whether the gradient will repeat after the last key point.Optional parameter. The default is false (do not repeat)

The linear gradient text representation is as follows:

linear-gradient { gradient =  [, direction = ] [, repeat = ] }

Radial gradient

A radial gradient is created using the function

func NewBackgroundRadialGradient(params Params) BackgroundElement

The radial gradient has the following parameters:

• Gradient ("gradient") - array of gradient key points (required parameter). Identical to the linear gradient parameter of the same name.
• Repeating ("repeating") - a boolean value that determines whether the gradient will repeat after the last key point.Optional parameter. The default is false (do not repeat)
• RadialGradientShape ("radial-gradient-shape") or Shape ("shape") - defines the shape of the gradient.It can take one of two int values:

Optional parameter. The default is EllipseGradient

• RadialGradientRadius ("radial-gradient-radius") or Radius ("radius") - sets the radius of the gradient.Can be either SizeUnit or one of the following int values:

Optional parameter. The default is FarthestCornerGradient

• CenterX ("center-x"), CenterY ("center-y") - sets the center of the gradient relative to the upper left corner of the View. Takes in a SizeUnit value. Optional parameter.The default value is "50%", i.e. the center of the gradient is the center of the View.

The linear gradient text representation is as follows:

radial-gradient { gradient =  [, repeat = ] [, shape = ]
	[, radius = ][, center-x = ][, center-y = ]}

Conic gradient

The conic gradient is created using the function

func NewBackgroundConicGradient(params Params) BackgroundElement

The radial gradient has the following options:

• Gradient ("gradient") - array of gradient key angles (required parameter).Each key angle is described by a BackgroundGradientAngle structure:

type BackgroundGradientAngle struct {
	Color any
	Angle any
}

where Color specifies the color of the key corner and can take a value of Color type orstring (color constant or textual description of the color);Angle sets the angle relative to the initial angle specified by the From parameterand can take a value of the AngleUnit type or string (an angle constant or a textual description of the angle).

The Color field is required and cannot be nil.

The Angle field is optional. If it is nil, then the angle is set as the midpoint between adjacent corners.For the first element, the default angle is 0°, for the last element it is 360°.

• Repeating ("repeating") is a boolean value that determines whether the gradient will repeat after the last key corner.Optional parameter. Default value is false (don't repeat)
• CenterX ("center-x"), CenterY ("center-y") - sets the center of the gradient relative to the upper left corner of the View.Takes a value of SizeUnit type. Optional parameter.The default value is "50%", i.e. the center of the gradient is the same as the center of the View.

The textual representation of a conic gradient looks like this:

conic-gradient { gradient =  [, repeating = ] [, from = ]
	[, center-x = ][, center-y = ]}

Image

The image has the following parameters:

• Source ("src") - Specifies the URL of the image
• Fit ("fit") - an optional parameter that determines the scaling of the image.Can be one of the following Int values:

• Width ("width"), Height (height) - optional SizeUnit parameters that specify the height and width of the image.Used only if Fit is NoneFit. The default is Auto (original size). The percentage value sets the size relativeto the height and width of the background area, respectively
• Attachment -
• Repeat (repeat) - an optional parameter specifying the repetition of the image.Can be one of the following int values: