FastLayout demo

by ShukantPal

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-filters.js"></script>
<script src="https://raw.githack.com/pixijs/pixi-ui/master/bundles/puxi.js/dist/puxi.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>FastLayout Demo</title>
  </head>
  <body>
     <canvas id="app-canvas"></canvas>
  </body>
</html>

JavaScript

const app = new PIXI.Application({
  width: 512,
  height: 512,
  backgroundColor: 0xfbfbfb,
  view: document.getElementById("app-canvas")
});

const stage = app.stage.addChild(new PUXI.Stage(512, 512));

// Instead of creating a layout widget-group, you can add children
// directly to the stage. This is because Stage supports FastLayout
// natively.
const layout = new PUXI.WidgetGroup()

layout.useLayout(new PUXI.FastLayout());
layout.setBackground(0xffeaff);

layout.addChild(new PUXI.TextWidget("Text1").setLayoutOptions(new PUXI.FastLayoutOptions({
  x: 16,
  y: 32,
  width: PUXI.LayoutOptions.WRAP_CONTENT,
  height: 48
})).setBackground(0xffff00));

layout.addChild(new PUXI.TextWidget("T2").setLayoutOptions(new PUXI.FastLayoutOptions({
  x: 0.75,
  y: 0.4,
  width: 0.1,
  height: 0.1
})).setBackground(0xff00ff))

stage.addChild(layout);