Scrollbar

View source
ceramic.Entity → ceramic.Visual → elements.Scrollbar (Class)
Implements: tracker.Observable

A basic scrollbar visual component that provides visual feedback for scrollable content.

The Scrollbar displays as a rectangular indicator that changes appearance based on user interaction (hover, press states). It consists of an inner quad with configurable insets and responds to pointer events for interactive feedback.

Usage example:

var scrollbar = new Scrollbar();
scrollbar.size(12, 100);
scrollbar.inset(1, 1, 1, 1); // top, right, bottom, left
add(scrollbar);

Instance Members

elements
observedDirty: Bool

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

elements
theme: Theme

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

elements
invalidateTheme(): Void
elements
invalidateHover(): Void
elements
invalidatePressed(): Void
elements
inset(insetTop: Float, insetRight: Float, insetBottom: Float, insetLeft: Float): Void

Set the insets for the inner quad on all sides.

Name Type Description
insetTop Float Top inset in pixels
insetRight Float Right inset in pixels
insetBottom Float Bottom inset in pixels
insetLeft Float Left inset in pixels
elements
new(): Void

Creates a new Scrollbar instance.

Sets up the inner quad with default insets, configures pointer event handlers for hover and press states, and initializes with a default size of 12x12 pixels.

Private Members

elements
unobservedTheme: Theme
elements
hover: Bool

Whether the mouse pointer is currently hovering over the scrollbar

elements
unobservedHover: Bool
elements
pressed: Bool

Whether the scrollbar is currently being pressed/clicked

elements
unobservedPressed: Bool
elements
insetLeft: Float

Left inset for the inner quad relative to the scrollbar bounds

elements
insetRight: Float

Right inset for the inner quad relative to the scrollbar bounds

elements
insetTop: Float

Top inset for the inner quad relative to the scrollbar bounds

elements
insetBottom: Float

Bottom inset for the inner quad relative to the scrollbar bounds

elements
quad: ceramic.Quad

The inner quad that provides the visual appearance of the scrollbar

elements
emitObservedDirty(instance: Scrollbar, fromSerializedField: Bool): Void

Event when any observable value as changed on this instance.

Name Type
instance Scrollbar
fromSerializedField Bool
elements
emitThemeChange(current: Theme, previous: Theme): Void

Event when theme field changes.

Name Type
current Theme
previous Theme
elements
emitHoverChange(current: Bool, previous: Bool): Void

Event when hover field changes.

Name Type
current Bool
previous Bool
elements
emitPressedChange(current: Bool, previous: Bool): Void

Event when pressed field changes.

Name Type
current Bool
previous Bool
elements
updateStyle(): Void

Updates the visual style of the scrollbar based on current state.

Colors the inner quad differently based on pressed/hover states:

  • Pressed: Darker color (50% interpolation between background and text)
  • Hover: Medium color (25% interpolation)
  • Normal: Light background color

Metadata

Name Parameters
:build tracker.macros.ObservableMacro.build()
:autoBuild tracker.macros.ObservableMacro.build()
:build tracker.macros.EventsMacro.build()
:autoBuild tracker.macros.EventsMacro.build()
:build ceramic.macros.EntityMacro.buildForCompletion()
:autoBuild ceramic.macros.EntityMacro.buildForCompletion()