Class “LinearGradient”

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