meo-canvas - v8.0.1
    Preparing search index...

    Interface GridProps

    Defines the properties for a GridNode.

    interface GridProps {
        alignContent?: Align;
        alignItems?: Align;
        alignSelf?: Align;
        aspectRatio?: number;
        autoFlow?: "row" | "column" | "row-dense" | "column-dense";
        autoRows?: GridTrackSize;
        backgroundColor?: string;
        border?:
            | number
            | Partial<
                Record<
                    | "Top"
                    | "Bottom"
                    | "Left"
                    | "Right"
                    | "Start"
                    | "End"
                    | "Horizontal"
                    | "Vertical"
                    | "All",
                    number,
                >,
            >;
        borderColor?: string
        | EdgeColors;
        borderRadius?: number | CornerRadii;
        borderStyle?: Solid | Dashed | Dotted;
        boxShadow?: BoxShadowProps | BoxShadowProps[];
        boxSizing?: BoxSizing;
        children?: Children | Children[];
        color?: string;
        columns?: number;
        direction?: Direction;
        display?: Display;
        dither?: boolean;
        flexBasis?: number | "auto" | `${number}%`;
        flexDirection?: FlexDirection;
        flexGrow?: number;
        flexShrink?: number;
        flexWrap?: Wrap;
        fontFamily?: string;
        fontSize?: number;
        fontStyle?: "normal" | "italic";
        fontVariant?: FontVariantSetting;
        fontWeight?:
            | number
            | "bold"
            | "normal"
            | "100"
            | "200"
            | "300"
            | "400"
            | "500"
            | "600"
            | "700"
            | "800"
            | "900";
        gap?: | number
        | `${number}%`
        | Partial<Record<"All" | "Column" | "Row", number | `${number}%`>>;
        gradient?: Gradient;
        height?: number | `${number}%`;
        justifyContent?: Justify;
        key?: string;
        letterSpacing?: number | "normal" | `${number}px` | `${number}em`;
        lineGap?: number;
        lineHeight?: number;
        margin?:
            | number
            | "auto"
            | `${number}%`
            | Partial<
                Record<
                    | "Top"
                    | "Bottom"
                    | "Left"
                    | "Right"
                    | "Start"
                    | "End"
                    | "Horizontal"
                    | "Vertical"
                    | "All",
                    number
                    | "auto"
                    | `${number}%`,
                >,
            >;
        mask?: Mask;
        maxHeight?: number | `${number}%`;
        maxWidth?: number | `${number}%`;
        minHeight?: number | `${number}%`;
        minWidth?: number | `${number}%`;
        name?: string;
        opacity?: number;
        overflow?: Overflow;
        padding?:
            | number
            | `${number}%`
            | Partial<
                Record<
                    | "Top"
                    | "Bottom"
                    | "Left"
                    | "Right"
                    | "Start"
                    | "End"
                    | "Horizontal"
                    | "Vertical"
                    | "All",
                    number
                    | `${number}%`,
                >,
            >;
        position?:
            | number
            | `${number}%`
            | Partial<
                Record<
                    | "Top"
                    | "Bottom"
                    | "Left"
                    | "Right"
                    | "Start"
                    | "End"
                    | "Horizontal"
                    | "Vertical"
                    | "All",
                    number
                    | `${number}%`,
                >,
            >;
        positionType?: PositionType;
        templateColumns?: GridTrackSize[];
        templateRows?: GridTrackSize[];
        textAlign?: "center" | "end" | "left" | "right" | "start" | "justify";
        textDecoration?:
            | "none"
            | string & {}
            | "underline"
            | "overline"
            | "line-through";
        transform?: TransformProps;
        verticalAlign?: "bottom"
        | "middle"
        | "top";
        width?: number | `${number}%`;
        wordSpacing?: number | "normal" | `${number}px` | `${number}em`;
        zIndex?: number;
    }

    Hierarchy (View Summary)

    Index
    alignContent? alignItems? alignSelf? aspectRatio? autoFlow? autoRows? backgroundColor? border? borderColor? borderRadius? borderStyle? boxShadow? boxSizing? children? color? columns? direction? display? dither? flexBasis? flexDirection? flexGrow? flexShrink? flexWrap? fontFamily? fontSize? fontStyle? fontVariant? fontWeight? gap? gradient? height? justifyContent? key? letterSpacing? lineGap? lineHeight? margin? mask? maxHeight? maxWidth? minHeight? minWidth? name? opacity? overflow? padding? position? positionType? templateColumns? templateRows? textAlign? textDecoration? transform? verticalAlign? width? wordSpacing? zIndex?
    alignContent?: Align

    Defines how lines are distributed along the cross axis when flexWrap is WRAP or WRAP_REVERSE. Has no effect when there is only one line of flex items.

    Yoga default (FLEX_START)

    alignItems?: Align

    Defines how flex items are aligned along the cross axis of the container.

    Yoga default (STRETCH)

    alignSelf?: Align

    Allows overriding the parent's alignItems value for a specific flex item.

    Yoga default (AUTO) - Inherits from alignItems.

    aspectRatio?: number

    Locks the aspect ratio (width / height) of the node. If set, Yoga might adjust the height based on the calculated width or vice versa.

    Ratio (e.g., 16 / 9).

    Yoga default (undefined)

    https://yogalayout.dev/docs/styling/aspect-ratio

    autoFlow?: "row" | "column" | "row-dense" | "column-dense"

    Controls how the auto-placement algorithm works.

    'row'
    autoRows?: GridTrackSize

    Specifies the size of implicitly created rows.

    'auto'
    backgroundColor?: string

    Sets the background color of the node. Drawn beneath the content and padding, extending to the border edge. Accepts standard CSS color strings.

    undefined (transparent)
    border?:
        | number
        | Partial<
            Record<
                | "Top"
                | "Bottom"
                | "Left"
                | "Right"
                | "Start"
                | "End"
                | "Horizontal"
                | "Vertical"
                | "All",
                number,
            >,
        >

    Sets the width of the node's border. Can be a single number for all edges or an object specifying individual edges.

    Pixels.

    Yoga default (0 for each edge)

    https://yogalayout.dev/docs/styling/margin-padding-border

    borderColor?: string | EdgeColors

    Colour of the node's border — one colour for every edge, or a colour per edge.

    Accepts standard CSS colour strings ('red', '#FF0000', 'rgba(255,0,0,0.5)'). Given an object, an edge left out falls back to black. Where two edges of different colours meet at a rounded corner the arc is split between them, as CSS joins them.

    'black' (set in BoxNode constructor)

    Box({ border: 2, borderColor: '#cbd5e1' })
    Box({ border: { Left: 4 }, borderColor: { Left: '#2563eb' } })
    borderRadius?: number | CornerRadii

    Sets the radius of the node's corners, creating rounded effects. Can be a single number for all corners or an object specifying individual corners (TopLeft, TopRight, BottomLeft, BottomRight).

    Pixels.

    undefined (no rounding)
    borderStyle?: Solid | Dashed | Dotted

    Sets the style of the node's border.

    • Style.Border.Solid (0)
    • Style.Border.Dashed (1)
    • Style.Border.Dotted (2)
    Style.Border.Solid (set in BoxNode constructor)
    boxShadow?: BoxShadowProps | BoxShadowProps[]

    Applies one or more box-shadow effects to the node. Can be a single shadow object or an array of shadow objects. Shadows are drawn in the order specified.

    BoxShadowProps

    undefined (no shadow)
    boxSizing?: BoxSizing

    Defines how the width and height properties are interpreted regarding padding and border. CONTENT_BOX: Width/height apply only to the content area. Padding and border are added outside. BORDER_BOX: Width/height include content, padding, and border.

    Style.BoxSizing (CONTENT_BOX, BORDER_BOX)

    Style.BOX_SIZING_BORDER_BOX (set in setLayout)

    children?: Children | Children[]

    Child nodes to be laid out within this node. Can be a single BoxNode or an array of BoxNodes.

    undefined
    color?: string

    Text color. Accepts standard CSS color strings.

    'black'
    columns?: number

    Number of columns in the grid layout.

    1
    direction?: Direction

    Sets the primary text and layout direction (Left-to-Right or Right-to-Left). Affects the meaning of Start and End edges for properties like position, margin, padding, border. INHERIT: Uses the direction of the parent node.

    Style.DIRECTION_LTR (set in setLayout)

    display?: Display

    Controls whether the node and its children are included in the layout calculation and rendering. FLEX: The node participates in a flex layout. NONE: The node and its subtree are ignored by layout and rendering.

    Yoga default (FLEX)

    dither?: boolean

    Dither this node's drawing, trading a little noise for the banding an eight-bit surface shows across a long, subtle gradient.

    Costs nothing where nothing bands: a flat fill, text and a blurred shadow encode to identical bytes either way, because a dither only perturbs a pixel whose colour falls between two the surface can hold. On a gradient reckon on about a third again the PNG bytes, and near nothing for WebP or JPEG, whose quantizers absorb the noise.

    Inherited by descendants, so setting it on Root covers the page and a node overrides it for its own subtree without touching its siblings. Pointless under a float colorType, which has the precision to draw the ramp outright.

    false

    Root({ width: 800, dither: true, children: [
      Box({ height: 400, gradient: { type: 'linear', direction: 'to-bottom', colors: ['#0b1220', '#1e2b4a'] } }),
      Box({ dither: false, children: [Text({ children: 'left alone' })] }),
    ] })
    flexBasis?: number | "auto" | `${number}%`

    Defines the default size of a flex item along the main axis before the remaining space is distributed.

    Pixels.

    Yoga default (AUTO)

    https://yogalayout.dev/docs//styling/flex-basis-grow-shrink

    flexDirection?: FlexDirection

    Defines the direction of the main axis for flex items within this container.

    Yoga default (COLUMN)

    flexGrow?: number

    Defines the ability of a flex item to grow if necessary, relative to other items. A non-negative number indicating the proportion of available space the item should take.

    Yoga default (0) - Item does not grow.

    https://yogalayout.dev/docs/styling/flex-basis-grow-shrink

    flexShrink?: number

    Defines the ability of a flex item to shrink if necessary, relative to other items. A non-negative number indicating the proportion of overflow space the item should lose.

    Yoga default (1 for non-root nodes, 0 for root) - Item can shrink.

    https://yogalayout.dev/docs/styling/flex-basis-grow-shrink

    flexWrap?: Wrap

    Controls whether flex items are forced onto a single line or can wrap onto multiple lines.

    Yoga default (NO_WRAP)

    fontFamily?: string

    Font family (e.g., 'Arial', 'Helvetica', 'sans-serif'). Ensure the font is available in the rendering environment.

    'sans-serif'
    fontSize?: number

    Font size.

    Pixels.

    16
    fontStyle?: "normal" | "italic"

    Font style.

    'normal'
    fontVariant?: FontVariantSetting

    Specifies font variation settings. Provides fine control over font variation axis. Accepts string in CSS font-variation-settings format.

    "normal" | "historical-forms" | "small-caps" | "all-small-caps" | "petite-caps" | "all-petite-caps" | "unicase" | "titling-caps" | "lining-nums" | "oldstyle-nums" | "proportional-nums" | ...

    undefined
    fontWeight?:
        | number
        | "bold"
        | "normal"
        | "100"
        | "200"
        | "300"
        | "400"
        | "500"
        | "600"
        | "700"
        | "800"
        | "900"

    Font weight (e.g., 'normal', 'bold', 400, 700).

    'normal'
    gap?:
        | number
        | `${number}%`
        | Partial<Record<"All" | "Column" | "Row", number | `${number}%`>>

    Defines the space between flex items along the main axis.

    Pixels.

    Yoga default (0)

    https://yogalayout.dev/docs/styling/gap

    gradient?: Gradient

    Sets a linear gradient as the background. Overrides backgroundColor if provided. colors: Array of CSS color strings for the gradient stops. direction: Array of four numbers [x0, y0, x1, y1] defining the start and end points of the gradient line, relative to the node's top-left corner.

    undefined
    height?: number | `${number}%`

    Sets the height of the node.

    Pixels if it's number, percentage of the parent's height if it's string.

    Yoga default (typically 'auto')

    https://yogalayout.dev/docs/styling/width-height

    justifyContent?: Justify

    Defines how flex items are distributed along the main axis of the container.

    Yoga default (FLEX_START)

    key?: string

    Optional key identifier for component reconciliation.

    letterSpacing?: number | "normal" | `${number}px` | `${number}em`

    Sets the spacing between letters (tracking). Accepts CSS units like 'normal', '2px', '0.1em'.

    'normal' (relies on canvas default)

    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing

    lineGap?: number

    Additional vertical spacing between lines of text.

    Pixels.

    0
    lineHeight?: number

    Height of each line box.

    Left unset, a line is the face's own height — its ascent plus its descent — which is what line-height: normal means in CSS and is a little over 1.3em for most text faces. Set smaller than that and the lines overlap rather than the box quietly growing, again as CSS does.

    Pixels.

    undefined (the face's own height)
    margin?:
        | number
        | "auto"
        | `${number}%`
        | Partial<
            Record<
                | "Top"
                | "Bottom"
                | "Left"
                | "Right"
                | "Start"
                | "End"
                | "Horizontal"
                | "Vertical"
                | "All",
                number
                | "auto"
                | `${number}%`,
            >,
        >

    Sets the margin space on the outside of the node's border. Can be a single number for all edges or an object specifying individual edges.

    Pixels.

    Yoga default (0 for each edge)

    https://yogalayout.dev/docs/styling/margin-padding-border

    mask?: Mask

    Limits what of this node is drawn — see Mask.

    Covers everything the node renders, its background, border, content and children alike. A shape or path clips; a gradient fades. Inherited by every component, so Text, Image, Chart and Grid take it too.

    undefined (nothing masked)

    Image({ src: avatar, width: 96, height: 96, mask: { shape: 'circle' } })
    Box({ mask: { gradient: { type: 'linear', direction: 'to-bottom', colors: ['#000', 'transparent'] } } })
    maxHeight?: number | `${number}%`

    Sets the maximum height of the node.

    Pixels if it's number, percentage of the parent's height if it's string.

    Yoga default (undefined / infinity)

    https://yogalayout.dev/docs/styling/min-max-width-height

    maxWidth?: number | `${number}%`

    Sets the maximum width of the node.

    Pixels if it's number, percentage of the parent's width if it's string.

    Yoga default (undefined / infinity)

    https://yogalayout.dev/docs/styling/min-max-width-height

    minHeight?: number | `${number}%`

    Sets the minimum height of the node.

    Pixels if it's number, percentage of the parent's height if it's string.

    Yoga default (0)

    https://yogalayout.dev/docs/styling/min-max-width-height

    minWidth?: number | `${number}%`

    Sets the minimum width of the node.

    Pixels if it's number, percentage of the parent's width if it's string.

    Yoga default (0)

    https://yogalayout.dev/docs/styling/min-max-width-height

    name?: string

    Optional display name for debugging purposes.

    opacity?: number

    Sets the opacity of the node and its children when drawing. A value between 0 (fully transparent) and 1 (fully opaque).

    The node's whole drawing — background, border, content and children — is composited once and then faded, as CSS does. Two overlapping children inside a half-transparent parent are exactly as dark as one of them, rather than compounding into a darker patch where they meet.

    Nesting multiplies: a child at 0.5 inside a parent at 0.5 draws at 0.25 against the page.

    1
    overflow?: Overflow

    Defines how content that overflows the node's bounds is handled. VISIBLE: Content is not clipped and may render outside the node's box. HIDDEN: Content is clipped and the rest is invisible. SCROLL: Yoga lays the node out as a scroll container, but nothing is clipped — a scroll container is a box a reader moves, and nothing here is interactive. It draws as VISIBLE.

    Yoga default (VISIBLE)

    padding?:
        | number
        | `${number}%`
        | Partial<
            Record<
                | "Top"
                | "Bottom"
                | "Left"
                | "Right"
                | "Start"
                | "End"
                | "Horizontal"
                | "Vertical"
                | "All",
                number
                | `${number}%`,
            >,
        >

    Sets the padding space on the inside of the node's border, around the content. Can be a single number for all edges or an object specifying individual edges.

    Pixels.

    Yoga default (0 for each edge)

    https://yogalayout.dev/docs/styling/margin-padding-border

    position?:
        | number
        | `${number}%`
        | Partial<
            Record<
                | "Top"
                | "Bottom"
                | "Left"
                | "Right"
                | "Start"
                | "End"
                | "Horizontal"
                | "Vertical"
                | "All",
                number
                | `${number}%`,
            >,
        >

    Specifies the offset distances for positioned elements (positionType: 'ABSOLUTE' or RELATIVE). Can be a single number for all edges or an object specifying individual edges (Top, Right, Bottom, Left, Start, End). Start and End are affected by direction (LTR/RTL).

    Pixels.

    Yoga default (undefined for each edge)

    https://yogalayout.dev/docs/styling/position

    positionType?: PositionType

    Specifies the positioning method used for the node. RELATIVE: Positioned according to the normal flow, then offset relative to that position. ABSOLUTE: Taken out of the flow and positioned against its immediate parent.

    That last part is where this differs from CSS, and the difference is Yoga's rather than this library's. CSS resolves an absolute node against the nearest positioned ancestor, skipping every static box in between; Yoga always uses the parent, whether or not it is positioned. A layout ported from the browser that relies on skipping an intermediate box will land somewhere else — give the node's own parent the offsets instead.

    Yoga default (RELATIVE)

    templateColumns?: GridTrackSize[]

    Defines the columns of the grid with a space-separated list of track sizes.

    ['100px', '1fr', 'auto']
    templateRows?: GridTrackSize[]

    Defines the rows of the grid with a space-separated list of track sizes.

    ['100px', '1fr', 'auto']
    textAlign?: "center" | "end" | "left" | "right" | "start" | "justify"

    Horizontal text alignment within the node's bounds.

    'left'
    textDecoration?:
        | "none"
        | string & {}
        | "underline"
        | "overline"
        | "line-through"

    Lines drawn on the text, in the notation CSS text-decoration uses.

    A line keyword on its own is the common case; a style, a colour and a thickness may follow in any order, and two line keywords may be combined. Anything that does not parse draws nothing rather than throwing. Inherited, so a heading and its nested spans are decorated together.

    undefined (no lines)

    Text('Sold out', { textDecoration: 'line-through' })
    Text('Heading', { textDecoration: 'underline 3px #2563eb' })
    Text('Misspelt', { textDecoration: 'underline wavy #dc2626' })
    Text('Both', { textDecoration: 'underline line-through' })
    transform?: TransformProps

    Defines the 2D transformations (translate, rotate, scale) applied to the node after layout.

    TransformProps

    undefined (no transformation)
    verticalAlign?: "bottom" | "middle" | "top"

    Vertical text alignment within the node's bounds. Note: Simple implementation aligns based on the first line.

    'top'
    width?: number | `${number}%`

    Sets the width of the node.

    Pixels if it's number, percentage of the parent's width if it's string.

    Yoga default (typically 'auto')

    https://yogalayout.dev/docs/styling/width-height

    wordSpacing?: number | "normal" | `${number}px` | `${number}em`

    Sets the spacing between words. Accepts CSS units like 'normal', '10px', '0.5em'. This space is added to the intrinsic width of the space character.

    'normal' (relies on canvas default)

    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/wordSpacing

    zIndex?: number

    Stack order among absolutely positioned siblings. A larger value paints over a smaller one, and equal values paint in the order they were declared.

    Only absolutely positioned nodes take part. An in-flow child is painted in flow order and is never lifted by a zIndex.

    Leaving it unset is CSS's z-index: auto, which shares a layer with 0 — so an absolutely positioned child still paints above in-flow siblings, whether it is declared before or after them. A negative value puts it below them instead, which is how a decoration is placed behind the content of its own parent.

    Box({
      positionType: Style.PositionType.Relative,
      children: [
        // Behind the content, though it is declared first.
        Box({ positionType: Style.PositionType.Absolute, zIndex: -1, backgroundColor: '#eef' }),
        Text('over the decoration'),
      ],
    })

    Settings
    Member Visibility

    On This Page
    Properties