Class StackedLayout

Example

export class StackedLayoutPanel extends PanelPlugin {
  connections: any[];
  static descriptor() {
    const d = new Descriptor();
    d.id = 'com.docs.UiStackedLayoutExample';
    d.name = 'StackedLayout Example';
    d.defaultDockState = DockState.Detached;
    d.defaultSize = new Size(350, 300);
    return d;
  }
  constructor(pluginSystem: Editor.PluginSystem, descriptor?: Descriptor) {
    super(pluginSystem, descriptor);
    this.connections = [];
  }
  createWidget(parent: Widget): Widget {
    const root = new Widget(parent);
    const outerLayout = new BoxLayout();
    outerLayout.setDirection(Direction.TopToBottom);
    outerLayout.spacing = 8;
    root.layout = outerLayout;

    const title = new Label(root);
    title.text = 'StackedLayout Demo';
    title.fontRole = FontRole.TitleBold;
    outerLayout.addWidget(title);

    // StackedLayout shows one widget at a time
    const container = new Widget(root);
    const stacked = new StackedLayout();
    stacked.stackingMode = StackingMode.StackOne;
    container.layout = stacked;
    outerLayout.addWidget(container);

    // Create pages
    const pageA = new Label(container);
    pageA.text = 'Page A content';
    stacked.addWidget(pageA);

    const pageB = new Label(container);
    pageB.text = 'Page B content';
    stacked.addWidget(pageB);

    stacked.currentIndex = 0;

    const switchBtn = new PushButton(root);
    switchBtn.text = 'Switch Page';
    outerLayout.addWidget(switchBtn);

    const status = new Label(root);
    status.text = 'Current page: 0';
    outerLayout.addWidget(status);

    this.connections.push(
      switchBtn.onClick.connect(() => {
        stacked.currentIndex = stacked.currentIndex === 0 ? 1 : 0;
        status.text = 'Current page: ' + stacked.currentIndex;
      })
    );

    return root;
  }
  deinit(): void {
    this.connections.forEach((c: any) => c?.disconnect());
    this.connections = [];
  }
}
Copy