Separator

class ui.common.Separator()

A custom web component that renders a visual separator line.

This component provides a flexible separator that can be oriented either horizontally or vertically. It’s commonly used in UI layouts to visually divide content sections, toolbar items, or menu groups.

The separator respects CSS custom properties for theming and automatically adjusts its styling based on the specified direction.

Index

Constructors

• constructor

Properties

• direction

Methods

• render

Constructors

ui.common.Separator.constructor()

Separator(): Separator

Returns: Separator

Properties

ui.common.Separator.direction

direction: (“horizontal” | “vertical”)

The orientation of the separator line.

Determines how the separator is displayed and oriented within its container:

• “vertical”: Creates a vertical line (default), typically used in horizontal layouts like toolbars
• “horizontal”: Creates a horizontal line, typically used in vertical layouts like menus

The direction affects the separator’s dimensions and border styling:

• Vertical separators have height (80%) and left border
• Horizontal separators have width (80%) and top border

Methods

ui.common.Separator.render()

render(): unknown

Renders the separator component template.

Creates a simple <hr> element with CSS classes that determine the separator’s appearance based on the direction property. The element uses CSS custom properties for theming and applies appropriate styling for either horizontal or vertical orientation.

The rendered element:

• Uses semantic <hr> element for accessibility
• Applies base “separator” class for common styling
• Adds direction-specific class (“separator-horizontal” or “separator-vertical”)
• Respects –hoops-separator-color CSS custom property for theming

Returns: unknown

TemplateResult containing an <hr> element with appropriate CSS classes