Class “LinearGradient”
Represents a linear gradient. See also LinearGradientValue
| Constructor | public |
| Singleton | No |
| Namespace | tabris |
| Direct subclasses | None |
| JSX support | No |
Example
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
Constructor
new LinearGradient(colorStops, direction?)
| Parameter | Type | Optional | Description |
|---|---|---|---|
| colorStops | (Color | [Color, Percent])[] |
No | An array with at least one color stop. Defines the position and the offset of the gradient color stop. |
| direction | number |
Yes | The direction of the gradient line in degrees. |
Methods
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 | Optional | Description |
|---|---|---|---|
| linearGradientValue | LinearGradientValue |
No | 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 | Optional | Description |
|---|---|---|---|
| value | any |
No | The value to test |
Returns value is LinearGradientValue
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 | Optional | Description |
|---|---|---|---|
| value | any |
No | The value to test |
Returns value is LinearGradientValue
Properties
colorStops
An array with the gradient color stops. Defines the position and the offset of the gradient color stop.
| Type | (Color | [Color, Percent])[] |
| Settable | No |
| Change events | 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 |
| Change events | No |
This property can only be set via constructor. Once set, it cannot change anymore.
