Class “LinearGradient”
Represents a linear gradient. See also LinearGradientValue
| Type: | LinearGradient extends Object |
| Constructor: | public |
| Singleton: | No |
| Namespace: | tabris |
| Direct subclasses: | None |
| JSX Support: | No |
Examples
JavaScript
import {LinearGradient} from 'tabris';
const linearGradient = LinearGradient.from('linear-gradient(90deg, red, blue 50%, green)');
console.log(linearGradient.direction); // "90"
See also:
JS Creating various types of linear gradients [► Run in Playground]
Constructor
new LinearGradient(colorStops, direction?)
| Parameter | Type | Description |
|---|---|---|
| colorStops | Array<Color | [Color, Percent]> |
An array with at least one color stop. Defines the position and the offset of the gradient color stop. |
| direction | number |
The direction of the gradient line in degrees. Optional. |
Methods
equals(value)
Tests if the given value is a LinearGradient instance that is deeply equal to this one.
| Parameter | Type | Description |
|---|---|---|
| value | LinearGradient |
Returns: boolean
toString()
Returns a CSS string representation of the linear gradient.
Returns: string
Static Methods
from(linearGradientValue)
Creates a new instance of LinearGradient using any valid linear gradient expression. For any other value, including null and 'initial' the method throws.
| Parameter | Type | Description |
|---|---|---|
| linearGradientValue | LinearGradientValue |
The value to create a LinearGradient instance from |
Returns: LinearGradient
isLinearGradientValue(value)
Returns true if value is a LinearGradientValue. This includes null and 'initial'. Use this to check if a value will be accepted by a linear gradient property. This is also a valid TypeScript type guard function.
| Parameter | Type | Description |
|---|---|---|
| value | any |
The value to test |
Returns: boolean
isValidLinearGradientValue(value)
Returns true if value is a valid LinearGradientValue. This excludes null and 'initial'. Use this to check if a value will be accepted by LinearGradient.from. This is also a valid TypeScript type guard function.
| Parameter | Type | Description |
|---|---|---|
| value | any |
The value to test |
Returns: boolean
Properties
colorStops
An array with the gradient color stops. Defines the position and the offset of the gradient color stop.
| Type: | Array<Color | [Color, Percent]> |
| Settable: | No |
This property can only be set via constructor. Once set, it cannot change anymore.
direction
The direction of the gradient line in degrees.
| Type: | number |
| Settable: | No |
This property can only be set via constructor. Once set, it cannot change anymore.
Related Types
LinearGradientValue
A LinearGradientValue specifies a set of colors, their relative position along a straight line, and the angle of that line. This describes a color gradient that can be drawn to fill any area, usually the background of a widget. This type allows various expressions that can all be used in place of a LinearGradient instance for convenience. All API that accept these expressions will convert them to a LinearGradient object.
In TypeScript you can import this type as a union with import {LinearGradientValue} from 'tabris'; or use tabris.LinearGradientValue. Type guards for LinearGradientValue are available as LinearGradient.isLinearGradientValue and LinearGradient.isValidLinearGradientValue.
The following are all valid LinearGradientValue types:
LinearGradientLikeObject
An object implementing the following interface:
interface LinearGradientLikeObject {
colorStops: Array<ColorValue | [ColorValue, PercentValue]>,
direction?: number | 'left' | 'top' | 'right' | 'bottom'
}
An instances of LinearGradient is a valid LinearGradientLikeObject, but LinearGradientLikeObject is less strict as it accepts more expressions for colorStops and direction.
Examples:
{colorStops: [['red', '5%'], 'green'], direction: 'left'}
{colorStops: [['red', '5%'], 'green'], direction: 45}
LinearGradient string
As a string, a subset of the CSS syntax is used:
<color-stop> ::= <color> [ <number>% ]
<linear-gradient> ::= linear-gradient(
[ <number>deg | to ( left | top | right | bottom ), ]
<color-stop> {, <color-stop>}
)
Examples:
"linear-gradient(red, green)"
"linear-gradient(to left, red 5%, green)"
"linear-gradient(45deg, red 5%, green)"
