ShapeProps
interface ShapeProps extends LayoutProps
Extended by
CodePropsCurvePropsGridPropsSVGPropsTxtProps
Properties
alignContent
alignContent?: SignalValueFlexContent
LayoutProps.alignContentalignItems
alignItems?: SignalValueFlexItems
LayoutProps.alignItemsalignSelf
alignSelf?: SignalValueFlexItems
LayoutProps.alignSelfanchor
Inherited from LayoutProps.anchoranchorX
anchorX?: SignalValuenumber
LayoutProps.anchorXanchorY
anchorY?: SignalValuenumber
LayoutProps.anchorYantialiased
antialiased?: SignalValueboolean
basis
basis?: SignalValueFlexBasis
LayoutProps.basisbottom
The position of the bottom edge of this node.
This shortcut property will set the node's position so that the bottom edge
ends up in the given place.
If present, overrides the NodeProps.position property.
LayoutProps.bottombottomLeft
The position of the bottom left corner of this node.
This shortcut property will set the node's position so that the bottom left
corner ends up in the given place.
If present, overrides the NodeProps.position property.
LayoutProps.bottomLeftbottomRight
The position of the bottom right corner of this node.
This shortcut property will set the node's position so that the bottom
right corner ends up in the given place.
If present, overrides the NodeProps.position property.
LayoutProps.bottomRightbowing
bowing?: SignalValuenumber
Controls the curve deviation from a straight line.
A value of 0 will cause lines to be perfectly straight. Higher values introduce more curvature.
cache
cache?: SignalValueboolean
LayoutProps.cachecachePadding
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
LayoutProps.cachePaddingcachePaddingBottom
cachePaddingBottom?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
LayoutProps.cachePaddingBottomcachePaddingLeft
cachePaddingLeft?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
LayoutProps.cachePaddingLeftcachePaddingRight
cachePaddingRight?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
LayoutProps.cachePaddingRightcachePaddingTop
cachePaddingTop?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
LayoutProps.cachePaddingTopchildren
children?: SignalValueComponentChildren
LayoutProps.childrenclip
clip?: SignalValueboolean
LayoutProps.clipcolumnGap
columnGap?: SignalValueLength
LayoutProps.columnGapcomposite
composite?: SignalValueboolean
LayoutProps.compositecompositeOperation
compositeOperation?: SignalValueGlobalCompositeOperation
LayoutProps.compositeOperationdirection
direction?: SignalValueFlexDirection
LayoutProps.directionfill
fill?: SignalValuePossibleCanvasStyle
fillShaders
fillShaders?: PossibleShaderConfig
filters
filters?: SignalValueFilter[]
LayoutProps.filtersfontFamily
fontFamily?: SignalValuestring
LayoutProps.fontFamilyfontSize
fontSize?: SignalValuenumber
LayoutProps.fontSizefontStyle
fontStyle?: SignalValuestring
LayoutProps.fontStylefontWeight
fontWeight?: SignalValuenumber
LayoutProps.fontWeightgap
gap?: SignalValuePossibleVector2Length
LayoutProps.gapgrow
grow?: SignalValuenumber
LayoutProps.growheight
height?: SignalValueLength
LayoutProps.heightjustifyContent
justifyContent?: SignalValueFlexContent
LayoutProps.justifyContentkey
key?: string
LayoutProps.keylayout
layout?: LayoutMode
LayoutProps.layoutlayoutChildren
layoutChildren?: LayoutMode
Whether this node lays out its own children with flex. When null
(the default), falls back to layout.
LayoutProps.layoutChildrenlayoutSelf
layoutSelf?: LayoutMode
Whether this node participates in its parent's flex layout. When
null (the default), falls back to layout.
LayoutProps.layoutSelfleft
The position of the left edge of this node.
This shortcut property will set the node's position so that the left edge
ends up in the given place.
If present, overrides the NodeProps.position property.
LayoutProps.leftletterSpacing
letterSpacing?: SignalValuenumber
LayoutProps.letterSpacinglineCap
lineCap?: SignalValueCanvasLineCap
lineDash
lineDash?: SignalValuenumber[]
lineDashOffset
lineDashOffset?: SignalValuenumber
lineHeight
lineHeight?: SignalValueLength
LayoutProps.lineHeightlineJoin
lineJoin?: SignalValueCanvasLineJoin
lineWidth
lineWidth?: SignalValuenumber
margin
Inherited from LayoutProps.marginmarginBottom
marginBottom?: SignalValuenumber
LayoutProps.marginBottommarginLeft
marginLeft?: SignalValuenumber
LayoutProps.marginLeftmarginRight
marginRight?: SignalValuenumber
LayoutProps.marginRightmarginTop
marginTop?: SignalValuenumber
LayoutProps.marginTopmaxHeight
maxHeight?: SignalValueLengthLimit
LayoutProps.maxHeightmaxWidth
maxWidth?: SignalValueLengthLimit
LayoutProps.maxWidthmiddle
The position of the center of this node.
This shortcut property will set the node's position so that the center ends
up in the given place.
If present, overrides the NodeProps.position property.
When anchor is not set, this will be the same as the
NodeProps.position.
LayoutProps.middleminHeight
minHeight?: SignalValueLengthLimit
LayoutProps.minHeightminWidth
minWidth?: SignalValueLengthLimit
LayoutProps.minWidthopacity
opacity?: SignalValuenumber
LayoutProps.opacitypadding
Inherited from LayoutProps.paddingpaddingBottom
paddingBottom?: SignalValuenumber
LayoutProps.paddingBottompaddingLeft
paddingLeft?: SignalValuenumber
LayoutProps.paddingLeftpaddingRight
paddingRight?: SignalValuenumber
LayoutProps.paddingRightpaddingTop
paddingTop?: SignalValuenumber
LayoutProps.paddingTopposition
Inherited from LayoutProps.positionratio
ratio?: SignalValuenumber
LayoutProps.ratioref
ref?: ReferenceReceiverany
LayoutProps.refright
The position of the right edge of this node.
This shortcut property will set the node's position so that the right edge
ends up in the given place.
If present, overrides the NodeProps.position property.
LayoutProps.rightrotation
rotation?: SignalValuenumber
LayoutProps.rotationrough
rough?: SignalValueboolean
Enable rough.js rendering.
roughDisableMultiStroke
roughDisableMultiStroke?: SignalValueboolean
Whether to disable multi-stroke rendering.
By default, Rough.js renders strokes with multiple lines for a more sketchy appearance. Set to true to use a single stroke.
roughDisableMultiStrokeFill
roughDisableMultiStrokeFill?: SignalValueboolean
Whether to disable multi-stroke fill.
By default, Rough.js renders fills with multiple passes. Set to true to use a single fill pass.
roughFillStyle
roughFillStyle?: SignalValueRoughFillStyle
Fill style for the shape.
roughFillWeight
roughFillWeight?: SignalValuenumber
Thickness of the lines used for filling.
Only applicable for hachure, cross-hatch, and similar fill styles.
roughHachureAngle
roughHachureAngle?: SignalValuenumber
Angle of the hachure lines in degrees.
Only applicable for hachure and cross-hatch fill styles.
roughHachureGap
roughHachureGap?: SignalValuenumber
Gap between hachure lines in pixels.
Only applicable for hachure, cross-hatch, and similar fill styles.
roughness
roughness?: SignalValuenumber
Numerical value indicating how rough the drawing is.
A value of 0 will produce a smooth shape, while higher values introduce more irregularity. Typical range is 0-10.
roughSeed
roughSeed?: SignalValuenumber
Seed for the random number generator.
Using the same seed produces consistent results, which is useful for reproducible animations.
rowGap
rowGap?: SignalValueLength
LayoutProps.rowGapscale
Inherited from LayoutProps.scalescaleX
scaleX?: SignalValuenumber
LayoutProps.scaleXscaleY
scaleY?: SignalValuenumber
LayoutProps.scaleYshaders
shaders?: PossibleShaderConfig
LayoutProps.shadersshadowBlur
shadowBlur?: SignalValuenumber
LayoutProps.shadowBlurshadowColor
Inherited from LayoutProps.shadowColorshadowOffset
Inherited from LayoutProps.shadowOffsetshadowOffsetX
shadowOffsetX?: SignalValuenumber
LayoutProps.shadowOffsetXshadowOffsetY
shadowOffsetY?: SignalValuenumber
LayoutProps.shadowOffsetYshrink
shrink?: SignalValuenumber
LayoutProps.shrinksize
size?: SignalValuePossibleVector2Length
LayoutProps.sizeskew
Inherited from LayoutProps.skewskewX
skewX?: SignalValuenumber
LayoutProps.skewXskewY
skewY?: SignalValuenumber
LayoutProps.skewYspawner
spawner?: SignalValueComponentChildren
Deprecated
Use children instead.
LayoutProps.spawnerstroke
stroke?: SignalValuePossibleCanvasStyle
strokeFirst
strokeFirst?: SignalValueboolean
strokeShaders
strokeShaders?: PossibleShaderConfig
textAlign
textAlign?: SignalValueTextAlign
LayoutProps.textAligntextDirection
textDirection?: SignalValueCanvasDirection
LayoutProps.textDirectiontextWrap
textWrap?: SignalValueTextWrap
LayoutProps.textWraptop
The position of the top edge of this node.
This shortcut property will set the node's position so that the top edge
ends up in the given place.
If present, overrides the NodeProps.position property.
LayoutProps.toptopLeft
The position of the top left corner of this node.
This shortcut property will set the node's position so that the top left
corner ends up in the given place.
If present, overrides the NodeProps.position property.
LayoutProps.topLefttopRight
The position of the top right corner of this node.
This shortcut property will set the node's position so that the top right
corner ends up in the given place.
If present, overrides the NodeProps.position property.
LayoutProps.topRighttranslate
Inherited from LayoutProps.translatetranslateX
translateX?: SignalValuenumber
LayoutProps.translateXtranslateY
translateY?: SignalValuenumber
LayoutProps.translateYverticalAlign
verticalAlign?: SignalValueVerticalAlign
LayoutProps.verticalAlignwidth
width?: SignalValueLength
LayoutProps.widthwordBreak
wordBreak?: SignalValueWordBreak
LayoutProps.wordBreakwrap
wrap?: SignalValueFlexWrap
LayoutProps.wrapx
x?: SignalValuenumber
LayoutProps.xy
y?: SignalValuenumber
LayoutProps.yzIndex
zIndex?: SignalValuenumber
LayoutProps.zIndex