rexrainbow/phaser3-rex-notes/rexui-basic-widgets

RexUI Basic Widgets

Use this skill for common RexUI controls used in HUDs, settings panels, menus, and compact tool surfaces.

Use This First

Choose the widget family:

For layout-only work, use rexui-layout-sizers first. For popups or modal flows, use rexui-dialogs-and-popups.

Required Setup

This skill assumes RexUI is available as this.rexUI. If not, use rexui-setup-and-factory.

References

Read these only when needed:

• references/widget-catalog.md: what each widget is for and where its public API lives.
• references/basic-widget-recipes.md: reduced recipes for labels, buttons, tabs, sliders, and choice controls.
• references/events.md: common button/value events and state handling.

Core Rules

• Most widgets are RexUI sizers internally; call .layout() after creation.
• Build button visuals with label unless the user needs a custom game object.
• Use buttonsType: 'radio' for single selection and buttonsType: 'checkboxes' for multi-selection.
• Use setValueCallback to reflect selected state in button visuals.
• Use valuechangeCallback or valuechange events for slider, knob, and numberBar.
• Use package imports only in full setup examples; local templates/ui/... paths are source-map paths.

Source File Map

• templates/ui/label/Label.d.ts
• templates/ui/buttons/Buttons.d.ts
• templates/ui/gridbuttons/GridButtons.d.ts
• templates/ui/fixwidthbuttons/FixWidthButtons.d.ts
• templates/ui/tabs/Tabs.d.ts
• templates/ui/slider/Slider.d.ts
• templates/ui/numberbar/NumberBar.d.ts
• templates/ui/knob/Knob.d.ts
• templates/ui/checkbox/Checkbox.d.ts
• templates/ui/toggleswitch/ToggleSwitch.d.ts
• templates/ui/utils/buttongroup/Buttons.d.ts

Related Skills

• rexui-setup-and-factory: plugin setup and factory discovery.
• rexui-components-catalog: choose the right component family.
• rexui-layout-sizers: layout composition.
• rexui-dialogs-and-popups: modal and popup workflows.
• rexui-shapes-and-states: state-aware skins and visual primitives.