The Linear Gradient component allows you to apply a linear gradient background to elements in your app's UI.
You can think of the Linear Gradient component as essentially a View which has configuration options for styling the background with a color gradient.
- Select the Linear Gradient component from the Components drawer. You can open the list of components by clicking the
+button next to Components.
- Then, add one or more child components whose content you want to display inside.
In the example below, we have used it to create custom buttons and a card element.
You can also use the Linear Gradient component as a background for your whole Screen.
|Component Name||To alter the name of the component. The name is reflected in the Components tree. Defaults to 'Linear Gradient'.|
|End Y||The ending point of Y as a number 0 - 100|
|End X||The ending point of X as a number 0 - 100|
|Start Y||The starting point of Y as a number 0 - 100|
|Start X||The starting point of X as a number 0 - 100|
|Color 3||Optional. The 3rd color stop|
|Color 2||Required. The 2nd color stop|
|Color 1||Required. The 1st color stop|
On web, the Start and End properties only change the angle of the gradient because CSS gradients don't support changing the start and end position.
|Start X: 10; Start Y: 20||The gradient will start 10% from the left and 20% from the top|
|End X: 10; End Y: 20||The gradient will end 10% from the left and 20% from the bottom|
Updated about 1 year ago