Gradient Component Code · Learn Power Apps

Gradient Component Code

All,

I created a Power Apps Component with a gradient to use as an editable background. It has 3 color choices and three transparency choices. It also has horizontal and vertical selections so it can be edited to have it up and down or diagonal based on user selection. Here is the code:

ComponentDefinitions:

comp_GradientBackground:

DefinitionType: CanvasComponent

AllowCustomization: true

CustomProperties:

Color1:

PropertyKind: Input

DisplayName: Color 1

Description: Color 1

DataType: Text

Default: ="#ffffff"

Color2:

PropertyKind: Input

DisplayName: Color 2

Description: Color 2

DataType: Text

Default: ="#00ff00"

Color3:

PropertyKind: Input

DisplayName: Color 3

Description: Color 3

DataType: Text

Default: ="#0000ff"

GradientHeight:

PropertyKind: Input

DisplayName: Gradient Height

Description: Gradient Height

DataType: Number

Default: =640

GradientWidth:

PropertyKind: Input

DisplayName: Gradient Width

Description: Gradient Width

DataType: Number

Default: =640

HorizontalDirection:

PropertyKind: Input

DisplayName: Horizontal Direction

Description: Horizontal Direction

DataType: Text

Default: ="right"

Transparency1:

PropertyKind: Input

DisplayName: Transparency 1

Description: Transparency 1

DataType: Text

Default: ="00"

Transparency2:

PropertyKind: Input

DisplayName: Transparency 2

Description: Transparency 2

DataType: Text

Default: ="80"

Transparency3:

PropertyKind: Input

DisplayName: Transparency 3

Description: Transparency 3

DataType: Text

Default: ="FF"

VerticalDirection:

PropertyKind: Input

DisplayName: Vertical Direction

Description: Vertical Direction

DataType: Text

Default: ="bottom"

Properties:

Height: =comp_GradientBackground.GradientHeight

Width: =comp_GradientBackground.GradientWidth

Children:

- contGradientBackground:

Control: GroupContainer@1.3.0

Variant: AutoLayout

Properties:

DropShadow: =DropShadow.None

Height: =Parent.Height

LayoutDirection: =LayoutDirection.Vertical

RadiusBottomLeft: =0

RadiusBottomRight: =0

RadiusTopLeft: =0

RadiusTopRight: =0

Width: =Parent.Width

Children:

- htmlGradient:

Control: HtmlViewer@2.1.0

Properties:

DisabledBorderColor: =RGBA(56, 56, 56, 1)

Font: =Font.'Open Sans'

Height: =Parent.Height

HtmlText: |-

="<div style=""background: " & comp_GradientBackground.Color1 & ";

background: linear-gradient(to " & comp_GradientBackground.VerticalDirection & " " & comp_GradientBackground.HorizontalDirection & ", " & comp_GradientBackground.Color1 & comp_GradientBackground.Transparency1 & ", " & comp_GradientBackground.Color2 & comp_GradientBackground.Transparency2 & ", " & comp_GradientBackground.Color3 & comp_GradientBackground.Transparency3 & "); width:" & Parent.Width & ";

height:" & Parent.Height -1 & "px;""></div>"

PaddingBottom: =0

PaddingLeft: =0

PaddingRight: =0

PaddingTop: =0

Size: =12

Width: =comp_GradientBackground.Width

Y: =0.00

These settings make the attached gradient.

0 comments