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

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)"