Class Sizes

Example

export class SizesExamplePanel extends PanelPlugin {
  connections: any[];
  static descriptor() {
    const d = new Descriptor();
    d.id = 'com.docs.SizesExample';
    d.name = 'Sizes Example';
    d.defaultDockState = DockState.Detached;
    d.defaultSize = new Size(350, 250);
    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);
    root.layout = layout;

    // Sizes provides standard dimension constants for consistent UI styling.
    // Apply Sizes constants to match the native Lens Studio look.
    layout.spacing = Sizes.Spacing;
    layout.setContentsMargins(Sizes.Padding, Sizes.Padding, Sizes.Padding, Sizes.Padding);

    const title = new Label(root);
    title.text = 'Sizes Constants Demo';
    layout.addWidget(title);

    const info = new Label(root);
    info.text =
      'Padding: ' + Sizes.Padding +
      '\nHalfPadding: ' + Sizes.HalfPadding +
      '\nDoublePadding: ' + Sizes.DoublePadding +
      '\nSpacing: ' + Sizes.Spacing +
      '\nButtonHeight: ' + Sizes.ButtonHeight +
      '\nButtonRadius: ' + Sizes.ButtonRadius +
      '\nInputHeight: ' + Sizes.InputHeight +
      '\nIconSide: ' + Sizes.IconSide;
    info.wordWrap = true;
    layout.addWidget(info);

    const btn = new PushButton(root);
    btn.text = 'Styled Button';
    layout.addWidget(btn);

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