Class Layout

Example

export class LayoutPanel extends PanelPlugin {
  connections: any[];
  static descriptor() {
    const d = new Descriptor();
    d.id = 'com.docs.UiLayoutExample';
    d.name = 'Layout 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 layout = new BoxLayout();
    layout.setDirection(Direction.TopToBottom);
    layout.spacing = 6;
    layout.setContentsMargins(8, 8, 8, 8);
    root.layout = layout;

    const title = new Label(root);
    title.text = 'Layout Properties';
    title.fontRole = FontRole.TitleBold;
    layout.addWidget(title);

    // Layout.spacing controls distance between widgets
    const spacingLabel = new Label(root);
    spacingLabel.text = 'spacing = ' + layout.spacing;
    layout.addWidget(spacingLabel);

    // Layout.enabled controls whether the layout is active
    const enabledLabel = new Label(root);
    enabledLabel.text = 'enabled = ' + layout.enabled;
    layout.addWidget(enabledLabel);

    // Layout.addWidget adds widgets to the layout
    const btn = new PushButton(root);
    btn.text = 'Widget added via layout.addWidget()';
    layout.addWidget(btn);

    // BoxLayout.addWidgetWithStretch for stretch + alignment
    const stretched = new Label(root);
    stretched.text = 'Stretched label (stretch=1, AlignCenter)';
    layout.addWidgetWithStretch(stretched, 1, Alignment.AlignCenter);

    // BoxLayout.addStretch adds spacer
    layout.addStretch(1);

    const bottom = new Label(root);
    bottom.text = 'Pushed to bottom by addStretch(1)';
    layout.addWidget(bottom);

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