How to use the @lumino/widgets.PanelLayout function in @lumino/widgets

To help you get started, we’ve selected a few @lumino/widgets examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jupyterlab / jupyterlab / packages / filebrowser / src / opendialog.ts View on Github external
iconRegistry: IIconRegistry,
    manager: IDocumentManager,
    filter?: (value: Contents.IModel) => boolean
  ) {
    super();
    this.addClass(OPEN_DIALOG_CLASS);

    this._browser = Private.createFilteredFileBrowser(
      'filtered-file-browser-dialog',
      iconRegistry,
      manager,
      filter
    );

    // Build the sub widgets
    let layout = new PanelLayout();
    layout.addWidget(this._browser);

    // Set Widget content
    this.layout = layout;
  }
github jupyterlab / jupyterlab / packages / csvviewer / src / widget.ts View on Github external
constructor(options: CSVViewer.IOptions) {
    super();

    let context = (this._context = options.context);
    let layout = (this.layout = new PanelLayout());

    this.addClass(CSV_CLASS);

    this._grid = new DataGrid({
      defaultSizes: {
        rowHeight: 24,
        columnWidth: 144,
        rowHeaderWidth: 64,
        columnHeaderHeight: 36
      }
    });
    this._grid.addClass(CSV_GRID_CLASS);
    this._grid.headerVisibility = 'all';
    this._grid.keyHandler = new BasicKeyHandler();
    this._grid.mouseHandler = new BasicMouseHandler();
    this._grid.copyConfig = {
github jupyterlab / jupyterlab / packages / filebrowser / src / browser.ts View on Github external
void model.refresh();
      },
      tooltip: 'Refresh File List'
    });

    this.toolbar.addItem('newFolder', newFolder);
    this.toolbar.addItem('upload', uploader);
    this.toolbar.addItem('refresher', refresher);

    this._listing = new DirListing({ model, renderer });

    this._crumbs.addClass(CRUMBS_CLASS);
    this.toolbar.addClass(TOOLBAR_CLASS);
    this._listing.addClass(LISTING_CLASS);

    const layout = new PanelLayout();

    layout.addWidget(this.toolbar);
    layout.addWidget(this._crumbs);
    layout.addWidget(this._listing);
    this.layout = layout;

    if (options.restore !== false) {
      void model.restore(this.id);
    }
  }
github jupyterlab / jupyterlab / packages / celltags / src / tool.ts View on Github external
constructor(tracker: INotebookTracker, app: JupyterFrontEnd) {
    super();
    app;
    this.tracker = tracker;
    this.layout = new PanelLayout();
    this.createTagInput();
  }
github jupyterlab / jupyterlab / packages / apputils / src / collapse.ts View on Github external
constructor(options: Collapse.IOptions) {
    super(options);
    const { widget, collapsed = true } = options;

    this.addClass('jp-Collapse');
    this._header = new Widget();
    this._header.addClass('jp-Collapse-header');
    this._content = new Panel();
    this._content.addClass('jp-Collapse-contents');

    let layout = new PanelLayout();
    this.layout = layout;
    layout.addWidget(this._header);
    layout.addWidget(this._content);

    this.widget = widget;
    this.collapsed = collapsed;
  }
github jupyterlab / jupyterlab / packages / statusbar / src / statusbar.ts View on Github external
constructor() {
    super();
    this.addClass(barStyle);

    let rootLayout = (this.layout = new PanelLayout());

    let leftPanel = (this._leftSide = new Panel());
    let middlePanel = (this._middlePanel = new Panel());
    let rightPanel = (this._rightSide = new Panel());

    leftPanel.addClass(sideStyle);
    leftPanel.addClass(leftSideStyle);

    middlePanel.addClass(sideStyle);

    rightPanel.addClass(sideStyle);
    rightPanel.addClass(rightSideStyle);

    rootLayout.addWidget(leftPanel);
    rootLayout.addWidget(middlePanel);
    rootLayout.addWidget(rightPanel);
github jupyterlab / jupyterlab / packages / statusbar / src / components / hover.tsx View on Github external
constructor(options: Popup.IOptions) {
    super();
    this._body = options.body;
    this._body.addClass(hoverItem);
    this._anchor = options.anchor;
    this._align = options.align;
    let layout = (this.layout = new PanelLayout());
    layout.addWidget(options.body);
    this._body.node.addEventListener('resize', () => {
      this.update();
    });
  }
github jupyterlab / jupyterlab / packages / apputils / src / dialog.ts View on Github external
constructor(options: Partial> = {}) {
    super();
    this.addClass('jp-Dialog');
    let normalized = Private.handleOptions(options);
    let renderer = normalized.renderer;

    this._host = normalized.host;
    this._defaultButton = normalized.defaultButton;
    this._buttons = normalized.buttons;
    this._buttonNodes = toArray(
      map(this._buttons, button => {
        return renderer.createButtonNode(button);
      })
    );

    let layout = (this.layout = new PanelLayout());
    let content = new Panel();
    content.addClass('jp-Dialog-content');
    layout.addWidget(content);

    this._body = normalized.body;

    let header = renderer.createHeader(normalized.title);
    let body = renderer.createBody(normalized.body);
    let footer = renderer.createFooter(this._buttonNodes);
    content.addWidget(header);
    content.addWidget(body);
    content.addWidget(footer);

    this._primary = this._buttonNodes[this._defaultButton];
    this._focusNodeSelector = options.focusNodeSelector;
github rapidsai / jupyterlab-nvdashboard / src / dashboard.tsx View on Github external
constructor(options: BokehDashboardLauncher.IOptions) {
    super();
    let layout = (this.layout = new PanelLayout());
    this._dashboard = new Widget();
    const header = new Widget();
    header.node.textContent = 'GPU Dashboards';
    header.addClass('bokeh-BokehDashboardLauncher-header')
    layout.addWidget(header);
    layout.addWidget(this._dashboard);
    this.addClass('bokeh-BokehDashboardLauncher');
    this._launchItem = options.launchItem;
    this._connection = ServerConnection.makeSettings({});
    ServerConnection.makeRequest(
      URLExt.join(this._connection.baseUrl, '/nvdashboard/index.json'),
      {},
      this._connection
    ).then(response => {
      response.json().then((data: { [x: string]: string }) => {
        this._items = [];
github jupyterlab / jupyterlab / packages / tooltip / src / widget.ts View on Github external
constructor(options: Tooltip.IOptions) {
    super();

    const layout = (this.layout = new PanelLayout());
    const model = new MimeModel({ data: options.bundle });

    this.anchor = options.anchor;
    this.addClass(TOOLTIP_CLASS);
    this.hide();
    this._editor = options.editor;
    this._rendermime = options.rendermime;

    const mimeType = this._rendermime.preferredMimeType(options.bundle, 'any');

    if (!mimeType) {
      return;
    }

    this._content = this._rendermime.createRenderer(mimeType);
    void this._content.renderModel(model);