Class “LinearGradient”

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