# \[Phaser 3\] rexUI plugins

**URL:** <https://phaser.discourse.group/t/phaser-3-rexui-plugins/384>\
**Category:** Showcase\
**Created:** [December 19, 2018, 2:49am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384 "2018-12-19T02:49:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [December 19, 2018, 2:49am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/1 "2018-12-19T02:49:55Z")

</div>

Here are some UI components of phaser3.

Live demos

- [Yes/No dialog](https://codepen.io/rexrainbow/pen/MPZWZG)
- [Single choice dialog](https://codepen.io/rexrainbow/pen/ePoRVz)
- [Tabs-tables](https://codepen.io/rexrainbow/pen/BGKvXK)
- [Pop-up menus](https://codepen.io/rexrainbow/pen/PxOEBr)
- [Textbox](https://codepen.io/rexrainbow/pen/MzGoJv)
- [Number bar](https://codepen.io/rexrainbow/pen/qLZPXr)
- [Round rectangle](https://codepen.io/rexrainbow/pen/ZqqJjG)

### Sizer

Layout children game objects.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-sizer/)

### Grid sizer

Layout children game objects in grids.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-gridsizer/)

### Label

A container with an icon, text, and background.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-label/)

### Dialog

A container with a title, content, buttons and background.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-dialog/)

### Tabs

A container with 4 groups of buttons around a center panel.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-tabs/)

### Grid table

A container with a [grid table](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/gridtable/), slider, and scroller.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-gridtable/)

### Menu

A container with buttons and sub-menu.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-menu/)

### Textbox

A container with an icon, ([typing](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/texttyping/) and [paging](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/textpage/)) text, and background.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-textbox/)

### Slider

A container with a track, indicator, thumb and background.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-slider/)

### Number bar

A container with an icon, slider, text, and background.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-numberbar/)

### Round rectangle

Round rectangle shape.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shape-roundrectangle/)

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [February 18, 2019, 12:10pm UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/2 "2019-02-18T12:10:03Z")

</div>

New sizer – **fix-width-sizer** : Layout children game objects into lines.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-fixwidthsizer/)
- [Live demo](https://codepen.io/rexrainbow/pen/WPJPdK)

---

<div class="post-metadata">

**Author:** ![rich](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rich/32/4_2.png) [@rich](https://phaser.discourse.group/u/rich)\
**Post date:** [March 5, 2019, 7:10pm UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/3 "2019-03-05T19:10:38Z")

</div>



---

<div class="post-metadata">

**Author:** ![PBMCube](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/pbmcube/32/93_2.png) [@PBMCube](https://phaser.discourse.group/u/PBMCube)\
**Post date:** [March 16, 2019, 8:36pm UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/4 "2019-03-16T20:36:28Z")

</div>

Brilliant code support for Phaser 3!! Simply love the variety you’ve provided.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [March 18, 2019, 2:44am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/5 "2019-03-18T02:44:28Z")

</div>

Another ui component - **pages** : A container with pages, only current page is visible.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-pages/)
- [Live demo](https://codepen.io/rexrainbow/pen/vPWzBa)

And [here](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-overview/) is a list of plugins in my UI plugins package.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [March 20, 2019, 6:21am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/6 "2019-03-20T06:21:09Z")

</div>

New ui component - **text area** : A container with a text, slider, and scroller.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-textarea/)
- [Live demo](https://codepen.io/rexrainbow/pen/JzBZzy)

It can show a large amount of text.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [April 9, 2019, 8:57am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/7 "2019-04-09T08:57:19Z")

</div>

New ui component - **scroll-able panel** : A container with a panel, slider, and scroller.

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-scrollablepanel/)
- [Live demo](https://codepen.io/rexrainbow/pen/YMyBom)

* * *

Masking of cell in grid table plugin is also rewrote, now grid table will apply less mask, and have better performance.  
(Grid table applied mask to all visible game objects before)

---

<div class="post-metadata">

**Author:** ![littledemon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/littledemon/32/1135_2.png) [@littledemon](https://phaser.discourse.group/u/littledemon)\
**Post date:** [April 9, 2019, 9:23am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/8 "2019-04-09T09:23:16Z")

</div>

Nice,  
Does the table have the ability to enable and disable drag-scroll ?!  
And what’s your idea about customizing rows which multiple fields can be placed in each row (Not that, as in the present case, several fields are textually attached and form a row.)?!

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [April 9, 2019, 10:28am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/9 "2019-04-09T10:28:28Z")

</div>

Add parameter `scroller` in configuration of _grid table_, _scroll-able panel_, _text area_.  
Set it to `false` could skip installing of drag-scrolling.

* * *

@littledemon

Try this feature (`scroller: false`) in these demos:

- [Grid table](https://codepen.io/rexrainbow/pen/XyJbWX): line 50
- [Scroll-able panel](https://codepen.io/rexrainbow/pen/YMyBom): line 105
- [Text area](https://codepen.io/rexrainbow/pen/JzBZzy): line 38

---

<div class="post-metadata">

**Author:** ![littledemon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/littledemon/32/1135_2.png) [@littledemon](https://phaser.discourse.group/u/littledemon)\
**Post date:** [April 10, 2019, 1:16pm UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/10 "2019-04-10T13:16:04Z")

</div>

Another problem with the grid table is that sometimes it should be double-clicked on items in order to do something in item click handler O\_o  
The problem is the focus! When the mouse pointer stays on an item without moving more, after 3-4 seconds the focus is removed from the item and you must click on it again!

Of course, I needed to increase the depth of the table in general, when I did not get it, I increased the depth of the labels and maybe the problem would start from there…

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [April 10, 2019, 2:05pm UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/11 "2019-04-10T14:05:53Z")

</div>

Update:

Refactory Grid table, text area, scrollable panel plugins, now they have the same function names of scrolling content.

- `gridTable.setChildOY(oy)`
- `gridTable.setT(t)`
- `gridTable.scrollToTop()`
- `gridTable.scrollToBottom()`
- `gridTable.setSliderEnable(enabled)`
- `gridTable.setScrollerEnable(enabled)`

It is a breaking changing, please update function names if using them.

* * *

@littledemon

`gridTable.setSliderEnable(enabled)` and `gridTable.setScrollerEnable(enabled)` can enable/disable slider or scroller during runtime.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [April 10, 2019, 2:16pm UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/12 "2019-04-10T14:16:40Z")

</div>

> The problem is the focus! When the mouse pointer stays on an item without moving more, after 3-4 seconds the focus is removed from the item and you must click on it again!

I could not reproduce this focus issue, focus still there if mouse does not move after 10 or more seconds.

---

<div class="post-metadata">

**Author:** ![littledemon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/littledemon/32/1135_2.png) [@littledemon](https://phaser.discourse.group/u/littledemon)\
**Post date:** [April 13, 2019, 10:41am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/13 "2019-04-13T10:41:01Z")

</div>

You are right, but I do not know why this is happening in Opera and Chrome browsers!  
Especially when the mouse is out of the browser window before clicking!  
However, in the codepen environment, even if the mouse is outside the window, there will be no problem!  
[my case …](https://codepen.io/littledemon/pen/eoEydw)

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [April 19, 2019, 7:33am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/14 "2019-04-19T07:33:37Z")

</div>

New ui component - **Chart** : Draw [chart](https://www.chartjs.org/) on [canvas](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/canvas/).

- [Document](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/ui-chart/)
- [Live demo](https://codepen.io/rexrainbow/pen/qwVBNy)

---

<div class="post-metadata">

**Author:** ![luishornza](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/luishornza/32/1346_2.png) [@luishornza](https://phaser.discourse.group/u/luishornza)\
**Post date:** [May 4, 2019, 9:35am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/15 "2019-05-04T09:35:36Z")

</div>

How does one determine the bottom of the text? I have added MouseWheelUpDown to scroll using the mouse wheel but I’m having trouble stopping the scrolling when you reach the bottom of the text. Which value can I use to determine the bottom edge?

I tried using the textAread height, but no luck

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [May 4, 2019, 11:03am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/16 "2019-05-04T11:03:24Z")

</div>

I add these descriptions into documents…

- Top OY

```javascript
var topOY = textArea.topChildOY;

```

- Bottom OY

```javascript
var bottomOY = textArea.bottomChildOY;

```

Set childOY (`textArea.setChildOY(oy)`) between Top OY and Bottom OY (bottomOY is less than topOY)

Or, add `clamplChildOY: true` into config like,

```javascript
var textArea = scene.rexUI.add.textArea({
    // ...
    clamplChildOY: true,
    // ...
});

```

Default value of `clamplChildOY` property is `false`.

---

<div class="post-metadata">

**Author:** ![luishornza](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/luishornza/32/1346_2.png) [@luishornza](https://phaser.discourse.group/u/luishornza)\
**Post date:** [May 4, 2019, 11:22am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/17 "2019-05-04T11:22:24Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![luishornza](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/luishornza/32/1346_2.png) [@luishornza](https://phaser.discourse.group/u/luishornza)\
**Post date:** [May 4, 2019, 11:46am UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/18 "2019-05-04T11:46:49Z")

</div>

Whenever the text is too little to require scrolling. I get the error below when the user tries to scroll. How do I prevent scrolling when it is not required?

VM9654:1 Uncaught RangeError: Maximum call stack size exceeded  
at fs.as (:1:85954)  
at fs.get textHeight [as textHeight] (:1:88848)  
at fs.get textVisibleHeight [as textVisibleHeight] (:1:88963)  
at fs.get bottomTextOY [as bottomTextOY] (:1:88803)  
at fs.textOYExeceedBottom (:1:89151)  
at fs.set textOY [as textOY] (:1:89285)  
at fs.set t [as t] (:1:89683)  
at Ss.set t [as t] (:1:70772)  
at Ss. (:1:70173)  
at Ue.h.emit (VM9347 phaser.min.js:1)

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [May 4, 2019, 1:05pm UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/19 "2019-05-04T13:05:46Z")

</div>

Thanks for finding this bug, although the error messages are not the same in my case.  
Now I had fixed the scrolling on a short text. Please get the latest rexUI plugin.

---

<div class="post-metadata">

**Author:** ![luishornza](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/luishornza/32/1346_2.png) [@luishornza](https://phaser.discourse.group/u/luishornza)\
**Post date:** [May 4, 2019, 2:21pm UTC](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384/20 "2019-05-04T14:21:27Z")

</div>

Thank you very much. Working now.

[Next page](https://phaser.discourse.group/t/phaser-3-rexui-plugins/384.md?page=2)