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
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
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.
