Separator

A horizontal line separator for visually dividing content sections.

Separator renders as a horizontal line positioned in the center of its container, with customizable thickness. It's commonly used in layouts to create visual separation between groups of related content.

The separator automatically centers itself vertically within its bounds and extends the full width of the container.

Usage example:

var separator = new Separator();
separator.size(200, 10);
separator.thickness = 2;
add(separator);

Instance Members #

Default is false, automatically set to true when any of this instance's observable variables has changed.

Custom theme override for this separator. If null, uses the global context theme

Thickness of the separator line in pixels.

Setting this property triggers a layout update to apply the new thickness.

Creates a new Separator.

Sets up the line quad with transparent background and initializes automatic style updates based on theme changes.

Private Members #

The quad that renders the separator line

Event when any observable value as changed on this instance.

Event when theme field changes.

Positions and sizes the separator line.

Centers the line vertically within the container and stretches it to fill the full width with the specified thickness.

Updates the visual style of the separator based on the current theme.

Sets the line color using the theme's medium border color.

Metadata #