rexrainbow/phaser3-rex-notes/rexui-dialogs-and-popups

RexUI Dialogs And Popups

Use this skill for RexUI interaction flows that open, close, select, confirm, or notify.

Use This First

Choose the popup component:

For layout details inside dialog content, use rexui-layout-sizers. For button visuals and selection state, use rexui-basic-widgets.

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/dialog-config.md: component chooser and key config fields.
• references/modal-patterns.md: modal lifecycle, promises, close behavior.
• references/dialog-recipes.md: reduced recipes for dialog, confirm, dropdown, toast, and modal.

Core Rules

• Call .layout() before .modal(), .modalPromise(), .popUp(), or relying on bounds.
• Use confirmDialog for common confirmation flows instead of hand-building dialog.
• Use dialog when the layout has custom toolbars, descriptions, choices, or action sections.
• Use modalPromise() when caller needs a result object.
• Use dropDownList when the selected value should live in the label itself.
• Use toast for one toast instance with internal message queue; use toastQueue for visible stacked messages.
• Do not use these skills for generic browser dialogs or DOM popups unless RexUI is explicitly involved.

Source File Map

• templates/ui/dialog/Dialog.d.ts
• templates/ui/confirmdialog/ConfirmDialog.d.ts
• templates/ui/confirmactionbutton/ConfirmActionButton.d.ts
• templates/ui/nameinputdialog/NameInputDialog.d.ts
• templates/ui/modal/Modal.d.ts
• templates/ui/menu/Menu.d.ts
• templates/ui/dropdownlist/DropDownList.d.ts
• templates/ui/simpledropdownlist/SimpleDropDownList.d.ts
• templates/ui/toast/Toast.d.ts
• templates/ui/toastqueue/ToastQueue.d.ts

Related Skills

• rexui-setup-and-factory: plugin setup and factory discovery.
• rexui-components-catalog: choose the correct component family.
• rexui-layout-sizers: internal dialog layout.
• rexui-basic-widgets: labels, buttons, and button state.
• rexui-text-and-input: text input and textarea content.