GridProps
interface GridProps extends ShapeProps
Properties
alignContent
alignContent?: SignalValueFlexContent
ShapeProps.alignContentalignItems
alignItems?: SignalValueFlexItems
ShapeProps.alignItemsalignSelf
alignSelf?: SignalValueFlexItems
ShapeProps.alignSelfanchor
Inherited from ShapeProps.anchoranchorX
anchorX?: SignalValuenumber
ShapeProps.anchorXanchorY
anchorY?: SignalValuenumber
ShapeProps.anchorYantialiased
antialiased?: SignalValueboolean
ShapeProps.antialiasedbasis
basis?: SignalValueFlexBasis
ShapeProps.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.
ShapeProps.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.
ShapeProps.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.
ShapeProps.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.
Inherited fromShapeProps.bowingcache
cache?: SignalValueboolean
ShapeProps.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.
ShapeProps.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.
ShapeProps.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.
ShapeProps.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.
ShapeProps.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.
ShapeProps.cachePaddingTopchildren
children?: SignalValueComponentChildren
ShapeProps.childrenclip
clip?: SignalValueboolean
ShapeProps.clipcolumnGap
columnGap?: SignalValueLength
ShapeProps.columnGapcomposite
composite?: SignalValueboolean
ShapeProps.compositecompositeOperation
compositeOperation?: SignalValueGlobalCompositeOperation
ShapeProps.compositeOperationdirection
direction?: SignalValueFlexDirection
ShapeProps.directionend
end?: SignalValuenumber
The percentage that should be clipped from the end of each grid line.
The portion of each grid line that comes after the given percentage will be made invisible.
This property is useful for animating the grid appearing on-screen.
fill
fill?: SignalValuePossibleCanvasStyle
ShapeProps.fillfillShaders
fillShaders?: PossibleShaderConfig
ShapeProps.fillShadersfilters
filters?: SignalValueFilter[]
ShapeProps.filtersfontFamily
fontFamily?: SignalValuestring
ShapeProps.fontFamilyfontSize
fontSize?: SignalValuenumber
ShapeProps.fontSizefontStyle
fontStyle?: SignalValuestring
ShapeProps.fontStylefontWeight
fontWeight?: SignalValuenumber
ShapeProps.fontWeightgap
gap?: SignalValuePossibleVector2Length
ShapeProps.gapgrow
grow?: SignalValuenumber
ShapeProps.growheight
height?: SignalValueLength
ShapeProps.heightjustifyContent
justifyContent?: SignalValueFlexContent
ShapeProps.justifyContentkey
key?: string
ShapeProps.keylayout
layout?: LayoutMode
ShapeProps.layoutlayoutChildren
layoutChildren?: LayoutMode
Whether this node lays out its own children with flex. When null
(the default), falls back to layout.
ShapeProps.layoutChildrenlayoutSelf
layoutSelf?: LayoutMode
Whether this node participates in its parent's flex layout. When
null (the default), falls back to layout.
ShapeProps.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.
ShapeProps.leftletterSpacing
letterSpacing?: SignalValuenumber
ShapeProps.letterSpacinglineCap
lineCap?: SignalValueCanvasLineCap
ShapeProps.lineCaplineDash
lineDash?: SignalValuenumber[]
ShapeProps.lineDashlineDashOffset
lineDashOffset?: SignalValuenumber
ShapeProps.lineDashOffsetlineHeight
lineHeight?: SignalValueLength
ShapeProps.lineHeightlineJoin
lineJoin?: SignalValueCanvasLineJoin
ShapeProps.lineJoinlineWidth
lineWidth?: SignalValuenumber
ShapeProps.lineWidthmargin
Inherited from ShapeProps.marginmarginBottom
marginBottom?: SignalValuenumber
ShapeProps.marginBottommarginLeft
marginLeft?: SignalValuenumber
ShapeProps.marginLeftmarginRight
marginRight?: SignalValuenumber
ShapeProps.marginRightmarginTop
marginTop?: SignalValuenumber
ShapeProps.marginTopmaxHeight
maxHeight?: SignalValueLengthLimit
ShapeProps.maxHeightmaxWidth
maxWidth?: SignalValueLengthLimit
ShapeProps.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.
ShapeProps.middleminHeight
minHeight?: SignalValueLengthLimit
ShapeProps.minHeightminWidth
minWidth?: SignalValueLengthLimit
ShapeProps.minWidthopacity
opacity?: SignalValuenumber
ShapeProps.opacitypadding
Inherited from ShapeProps.paddingpaddingBottom
paddingBottom?: SignalValuenumber
ShapeProps.paddingBottompaddingLeft
paddingLeft?: SignalValuenumber
ShapeProps.paddingLeftpaddingRight
paddingRight?: SignalValuenumber
ShapeProps.paddingRightpaddingTop
paddingTop?: SignalValuenumber
ShapeProps.paddingTopposition
Inherited from ShapeProps.positionratio
ratio?: SignalValuenumber
ShapeProps.ratioref
ref?: ReferenceReceiverany
ShapeProps.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.
ShapeProps.rightrotation
rotation?: SignalValuenumber
ShapeProps.rotationrough
rough?: SignalValueboolean
Enable rough.js rendering.
Inherited fromShapeProps.roughroughDisableMultiStroke
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.
Inherited fromShapeProps.roughDisableMultiStrokeroughDisableMultiStrokeFill
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.
Inherited fromShapeProps.roughDisableMultiStrokeFillroughFillStyle
roughFillStyle?: SignalValueRoughFillStyle
Fill style for the shape.
Inherited fromShapeProps.roughFillStyleroughFillWeight
roughFillWeight?: SignalValuenumber
Thickness of the lines used for filling.
Only applicable for hachure, cross-hatch, and similar fill styles.
Inherited fromShapeProps.roughFillWeightroughHachureAngle
roughHachureAngle?: SignalValuenumber
Angle of the hachure lines in degrees.
Only applicable for hachure and cross-hatch fill styles.
Inherited fromShapeProps.roughHachureAngleroughHachureGap
roughHachureGap?: SignalValuenumber
Gap between hachure lines in pixels.
Only applicable for hachure, cross-hatch, and similar fill styles.
Inherited fromShapeProps.roughHachureGaproughness
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.
Inherited fromShapeProps.roughnessroughSeed
roughSeed?: SignalValuenumber
Seed for the random number generator.
Using the same seed produces consistent results, which is useful for reproducible animations.
Inherited fromShapeProps.roughSeedrowGap
rowGap?: SignalValueLength
ShapeProps.rowGapscale
Inherited from ShapeProps.scalescaleX
scaleX?: SignalValuenumber
ShapeProps.scaleXscaleY
scaleY?: SignalValuenumber
ShapeProps.scaleYshaders
shaders?: PossibleShaderConfig
ShapeProps.shadersshadowBlur
shadowBlur?: SignalValuenumber
ShapeProps.shadowBlurshadowColor
Inherited from ShapeProps.shadowColorshadowOffset
Inherited from ShapeProps.shadowOffsetshadowOffsetX
shadowOffsetX?: SignalValuenumber
ShapeProps.shadowOffsetXshadowOffsetY
shadowOffsetY?: SignalValuenumber
ShapeProps.shadowOffsetYshrink
shrink?: SignalValuenumber
ShapeProps.shrinksize
size?: SignalValuePossibleVector2Length
ShapeProps.sizeskew
Inherited from ShapeProps.skewskewX
skewX?: SignalValuenumber
ShapeProps.skewXskewY
skewY?: SignalValuenumber
ShapeProps.skewYspacing
The spacing between the grid lines.
spawner
spawner?: SignalValueComponentChildren
Deprecated
Use children instead.
ShapeProps.spawnerstart
start?: SignalValuenumber
The percentage that should be clipped from the beginning of each grid line.
The portion of each grid line that comes before the given percentage will be made invisible.
This property is useful for animating the grid appearing on-screen.
stroke
stroke?: SignalValuePossibleCanvasStyle
ShapeProps.strokestrokeFirst
strokeFirst?: SignalValueboolean
ShapeProps.strokeFirststrokeShaders
strokeShaders?: PossibleShaderConfig
ShapeProps.strokeShaderstextAlign
textAlign?: SignalValueTextAlign
ShapeProps.textAligntextDirection
textDirection?: SignalValueCanvasDirection
ShapeProps.textDirectiontextWrap
textWrap?: SignalValueTextWrap
ShapeProps.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.
ShapeProps.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.
ShapeProps.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.
ShapeProps.topRighttranslate
Inherited from ShapeProps.translatetranslateX
translateX?: SignalValuenumber
ShapeProps.translateXtranslateY
translateY?: SignalValuenumber
ShapeProps.translateYverticalAlign
verticalAlign?: SignalValueVerticalAlign
ShapeProps.verticalAlignwidth
width?: SignalValueLength
ShapeProps.widthwordBreak
wordBreak?: SignalValueWordBreak
ShapeProps.wordBreakwrap
wrap?: SignalValueFlexWrap
ShapeProps.wrapx
x?: SignalValuenumber
ShapeProps.xy
y?: SignalValuenumber
ShapeProps.yzIndex
zIndex?: SignalValuenumber
ShapeProps.zIndex