Skip to main content

<Line />

A basic line component.

length?: Size

The length of the line.


strokeCap?: StrokeCap

The decoration applied to the line endpoints.


stroke?: HexCode | Color | SolidPaint | GradientPaint | (SolidPaint | GradientPaint)[]

The paints used to fill the area of the node's stroke.


strokeWidth?: number

The thickness of the stroke, in pixels. This value must be non-negative and can be fractional.


rotation?: number

The rotation of the node in degrees. Expects values from -180 to 180.

The rotation is with respect to the top-left of the object. Therefore, it is independent from the position of the object.


BaseProps

name?: string

The name of the component. This is useful to specify a data-layer attribute to make things more debuggable when you inspect the sublayers of your widget.


hidden?: boolean

Toggles whether to show the component.


onClick?: (event: WidgetClickEvent) => Promise<any> | void

Attach a click handler on the given node. If the given function is async or returns a promise, the widget is only terminated when the async function has completed and the promise has been resolved. The click handler is also passed a WidgetClickEvent object that contains additional information about the click.

See also: Handling User Events.


key?: string | number

The key of the component.


hoverStyle?: HoverStyle

The style to be applied when the mouse is hovering over the component.


tooltip?: string

The tooltip that is shown to the user when hovering over the component.


positioning?: 'auto' | 'absolute'

This value is ignored unless the node is a direct child of an AutoLayout frame.

valuedescription
'auto'Layout this node according to auto-layout rules.
'absolute'Take this node out of the auto-layout flow, while still nesting it inside the auto-layout frame. This allows explicitly setting x, y, width, and height.

BlendProps

blendMode?: BlendMode

The blendMode of the component.


opacity?: number

The opacity of the component.


effect?: Effect | Effect[]

The effect of the component.


ConstraintProps

x?: number | HorizontalConstraint

The x position of the node.

This value is ignored if the node is a child of an AutoLayout frame and has positioning set to 'auto'.


y?: number | VerticalConstraint

The y position of the node.

This value is ignored if the node is a child of an AutoLayout frame and has positioning set to 'auto'.


Default Props

PropDefault
name""
hiddenfalse
stroke#000000
strokeWidth1
length100
x0
y0
blendMode"pass-through"
opacity1
fill[]
effect[]