Style

CSS layout configuration for a node, including flexbox, sizing, spacing, and alignment properties.

This class holds all CSS layout properties for a node. Create an instance with new Style() and configure properties before passing to TaffyTree.newLeaf().

Default Value

When created, all properties are set to their CSS default values:

display: Display.Block
position: Position.Relative
flexDirection: FlexDirection.Row
flexWrap: FlexWrap.NoWrap
flexGrow: 0
flexShrink: 1
All alignment properties: undefined (use default behavior)
All dimensions: "auto"
All spacing: 0

Constructors

Constructor

new Style(props?): Style;

Creates a new Style instance with default values

Parameters

Parameter	Type	Description
`props?`	`any`	Optional object with initial style properties

Returns

Style

A new Style object with all properties set to CSS defaults

Example

// Create with defaults
const style = new Style();
console.log(style.display); // Display.Block

// Create with initial properties
const style2 = new Style({
  display: Display.Flex,
  flexDirection: FlexDirection.Column,
  width: 200,
  marginLeft: 10,
});

Properties

Property	Type	Default value	Description
`alignContent`	`AlignContent` \| `undefined`	`undefined`	Gets the align-content property Controls distribution of space between lines in a multi-line flex container.
`alignItems`	`AlignItems` \| `undefined`	`undefined`	Gets the align-items property Defines the default alignment for all children on the cross axis.
`alignSelf`	`AlignSelf` \| `undefined`	`undefined`	Gets the align-self property Overrides the parent's align-items for this specific element.
`aspectRatio`	`number` \| `undefined`	`undefined`	Gets the aspect ratio The ratio of width to height. Used to maintain proportions.
`border`	`Rect`<`LengthPercentage`>	`undefined`	Gets the border width Width of the element's border on each side.
`borderBottom`	`any`	`undefined`	Gets the bottom border width
`borderLeft`	`any`	`undefined`	Gets the left border width
`borderRight`	`any`	`undefined`	Gets the right border width
`borderTop`	`any`	`undefined`	Gets the top border width
`bottom`	`any`	`undefined`	Gets the bottom inset offset
`boxSizing`	`BoxSizing`	`BoxSizing.BorderBox`	Gets the box sizing mode Determines whether padding and border are included in dimensions.
`columnGap`	`any`	`undefined`	Gets the column gap (horizontal spacing between items)
`display`	`Display`	- `Display.Block`	Gets the display mode Determines the layout algorithm used for this element and its children.
`flexBasis`	`Dimension`	`undefined`	Gets the flex-basis The initial size of a flex item before growing/shrinking.
`flexDirection`	`FlexDirection`	- `FlexDirection.Row`	Gets the flex direction Defines the main axis direction for flex items.
`flexGrow`	`number`	`undefined`	Gets the flex grow factor Determines how much the item grows relative to siblings when there is extra space available.
`flexShrink`	`number`	`undefined`	Gets the flex shrink factor Determines how much the item shrinks relative to siblings when there is insufficient space.
`flexWrap`	`FlexWrap`	- `FlexWrap.NoWrap`	Gets the flex wrap mode Controls whether flex items wrap to new lines.
`gap`	`Size`<`LengthPercentage`>	`undefined`	Gets the gap Spacing between flex/grid items.
`gridAutoColumns`	`TrackSizingFunction`[]	`undefined`	Gets the grid-auto-columns property Defines the size of implicitly created columns.
`gridAutoFlow`	`GridAutoFlow`	- `GridAutoFlow.Row`	Gets the grid-auto-flow property Controls how auto-placed items are inserted into the grid.
`gridAutoRows`	`TrackSizingFunction`[]	`undefined`	Gets the grid-auto-rows property Defines the size of implicitly created rows.
`gridColumn`	`Line`<`GridPlacement`>	`undefined`	Gets the grid-column property Defines which column in the grid the item should start and end at. Corresponds to CSS `grid-column` shorthand.
`gridColumnEnd`	`any`	`undefined`	Gets the grid-column-end property
`gridColumnStart`	`any`	`undefined`	Gets the grid-column-start property
`gridRow`	`Line`<`GridPlacement`>	`undefined`	Gets the grid-row property Defines which row in the grid the item should start and end at. Corresponds to CSS `grid-row` shorthand.
`gridRowEnd`	`any`	`undefined`	Gets the grid-row-end property
`gridRowStart`	`any`	`undefined`	Gets the grid-row-start property
`gridTemplateAreas`	`GridTemplateArea`[]	`undefined`	Gets the grid-template-areas property Defines named grid areas that can be referenced by grid items.
`gridTemplateColumnNames`	`string`[][]	`undefined`	Gets the grid-template-column-names property Defines the named lines between the columns.
`gridTemplateColumns`	`GridTemplateComponent`[]	`undefined`	Gets the grid-template-columns property Defines the track sizing functions (widths) of the grid columns.
`gridTemplateRowNames`	`string`[][]	`undefined`	Gets the grid-template-row-names property Defines the named lines between the rows.
`gridTemplateRows`	`GridTemplateComponent`[]	`undefined`	Gets the grid-template-rows property Defines the track sizing functions (heights) of the grid rows.
`height`	`Dimension`	`undefined`	Gets the height
`inset`	`Rect`<`LengthPercentageAuto`>	`undefined`	Gets the inset Positioning offsets for absolutely positioned elements.
`itemIsReplaced`	`boolean`	- `false`	Gets whether this item is a replaced element Replaced elements have special sizing behavior (e.g., `<img>`, `<video>`).
`itemIsTable`	`boolean`	- `false`	Gets whether this item is a table Table children are handled specially in block layout.
`justifyContent`	`JustifyContent` \| `undefined`	`undefined`	Gets the justify-content property Defines alignment and spacing of items along the main axis.
`justifyItems`	`AlignItems` \| `undefined`	`undefined`	Gets the justify-items property Defines the default justify-self for all children in the inline axis. This is primarily used for CSS Grid layout.
`justifySelf`	`AlignSelf` \| `undefined`	`undefined`	Gets the justify-self property Overrides the parent's justify-items for this specific element in the inline axis.
`left`	`any`	`undefined`	Gets the left inset offset
`margin`	`Rect`<`LengthPercentageAuto`>	`undefined`	Gets the margin Outer spacing around the element.
`marginBottom`	`any`	`undefined`	Gets the bottom margin
`marginLeft`	`any`	`undefined`	Gets the left margin
`marginRight`	`any`	`undefined`	Gets the right margin
`marginTop`	`any`	`undefined`	Gets the top margin
`maxHeight`	`Dimension`	`undefined`	Gets the maximum height
`maxSize`	`Size`<`Dimension`>	`undefined`	Gets the maximum size constraints
`maxWidth`	`Dimension`	`undefined`	Gets the maximum width
`minHeight`	`Dimension`	`undefined`	Gets the minimum height
`minSize`	`Size`<`Dimension`>	`undefined`	Gets the minimum size constraints
`minWidth`	`Dimension`	`undefined`	Gets the minimum width
`overflow`	`Point`<`Overflow`>	`undefined`	Gets the overflow behavior Controls how content that exceeds the container is handled.
`overflowX`	`Overflow`	`undefined`	Gets the horizontal overflow behavior
`overflowY`	`Overflow`	`undefined`	Gets the vertical overflow behavior
`padding`	`Rect`<`LengthPercentage`>	`undefined`	Gets the padding Inner spacing between the element's border and content.
`paddingBottom`	`any`	`undefined`	Gets the bottom padding
`paddingLeft`	`any`	`undefined`	Gets the left padding
`paddingRight`	`any`	`undefined`	Gets the right padding
`paddingTop`	`any`	`undefined`	Gets the top padding
`position`	`Position`	- `Position.Relative`	Gets the position mode Determines how the element is positioned within its parent.
`right`	`any`	`undefined`	Gets the right inset offset
`rowGap`	`any`	`undefined`	Gets the row gap (vertical spacing between items)
`scrollbarWidth`	`number`	- `0`	Gets the scrollbar width The width of the scrollbar gutter when `overflow` is set to `Scroll`.
`size`	`Size`<`Dimension`>	`undefined`	Gets the size (width and height)
`textAlign`	`TextAlign`	- `TextAlign.Auto`	Gets the text-align property Used by block layout to implement legacy text alignment behavior.
`top`	`any`	`undefined`	Gets the top inset offset
`width`	`Dimension`	`undefined`	Gets the width

Methods

[dispose]()

dispose: void;

Returns

void

free()

free(): void;

Returns

void

get()

Call Signature

get<K>(...keys): StylePropertyValues[K];

Reads multiple style properties in a single WASM call. Supports both object properties and individual flat properties.

Type Parameters

Type Parameter
`K` extends `StyleProperty`

Parameters

Parameter	Type
...`keys`	[`K`]

Returns

StylePropertyValues[K]

Single value for one key, tuple for 2-3 keys, array for 4+ keys

Throws

Error if any property key is unknown.

Remarks

Single property: returns exact value type (including undefined for optional properties)
2-3 properties: returns typed tuple for destructuring
4+ properties: returns array of union types

Example

const style = new Style();
style.display = Display.Flex;

// Single property - returns exact type (includes undefined for optional properties)
const display = style.get("display"); // Display | undefined

// Individual flat property - returns exact type
const width = style.get("width"); // Dimension

// Optional properties return undefined when not set
const alignItems = style.get("alignItems"); // AlignItems | undefined

// Two properties - returns tuple for destructuring
const [d, w] = style.get("display", "width"); // [Display | undefined, Dimension]

// Three properties - returns tuple for destructuring
const [d2, w2, f] = style.get("display", "width", "flexGrow");

// Four or more properties - returns array
const values = style.get("display", "width", "flexGrow", "flexShrink");
// values type is: (Display | Dimension | number | undefined)[]

Call Signature

get<K1, K2>(...keys): [StylePropertyValues[K1], StylePropertyValues[K2]];

Type Parameters

Type Parameter
`K1` extends `StyleProperty`
`K2` extends `StyleProperty`

Parameters

Parameter	Type
...`keys`	[`K1`, `K2`]

Returns

[StylePropertyValues[K1], StylePropertyValues[K2]]

Call Signature

get<K1, K2, K3>(...keys): [StylePropertyValues[K1], StylePropertyValues[K2], StylePropertyValues[K3]];

Type Parameters

Type Parameter
`K1` extends `StyleProperty`
`K2` extends `StyleProperty`
`K3` extends `StyleProperty`

Parameters

Parameter	Type
...`keys`	[`K1`, `K2`, `K3`]

Returns

[StylePropertyValues[K1], StylePropertyValues[K2], StylePropertyValues[K3]]

Call Signature

get<Keys>(...keys): StylePropertyArrayValues<Keys>;

Type Parameters

Type Parameter
`Keys` extends `StyleProperty`[]

Parameters

Parameter	Type
...`keys`	`Keys`

Returns

StylePropertyArrayValues<Keys>

set()

set(props): void;

Sets multiple style properties in a single WASM call. Supports both object properties and individual flat properties.

Parameters

Parameter	Type	Description
`props`	`StylePropertyValues`	Object mapping property keys to their values

Returns

void

Remarks

Only accepts valid property keys with their corresponding value types.

Throws

Error if any property key is unknown.

Example

const style = new Style();
style.set({
  display: Display.Flex,
  width: 200,
  marginLeft: 10,
  marginRight: "auto",
});

FilesExpand file tree

Style.md

Latest commit

History

Style.md

File metadata and controls

Style

Default Value

Constructors

Constructor

Parameters

Returns

Example

Properties

Methods

[dispose]()

Returns

free()

Returns

get()

Call Signature

Type Parameters

Parameters

Returns

Throws

Remarks

Example

Call Signature

Type Parameters

Parameters

Returns

Call Signature

Type Parameters

Parameters

Returns

Call Signature

Type Parameters

Parameters

Returns

set()

Parameters

Returns

Remarks

Throws

Example