UIZE JavaScript Framework


In this example, an instance of the Uize.Widget.ColorGrid class is wired up to provide a color grid that shows a color matrix (or color grid) of all the interpolated colors between four adjustable corner colors. Enter hex RGB values for any colors at any of the four corners and the grid will automatically update while you type. This grid is 10x10 and represents 100 colors, but the widget can be configured for different numbers of divisions on both the X and Y axes by setting the divisionsX and divisionsY state properties, respectively. With additional code, a subclass or other widget could use the color grid widget as a color selection palette, allowing the user to explore color ranges in 2D.