Skip to main content

A minimal JupyterLab extension opening a main area widget.

Project description

Widgets

Add a new Widget element to the main window.

In this example you will learn how to add a new tab to JupyterLab.

Visible elements such as tabs and notebooks are represented by widgets in the Lumino library that is the basis of the JupyterLab application.

It is the fundamental brick of any visual component in the JupyterLab interface.

New Tab with a Custom Widget

ATP 定制服务端发起训练插件

img.png

A Basic Tab

The base widget class can be imported with:

// src/index.ts#L8-L8

import { Widget } from '@lumino/widgets';

It requires to add the library as package dependency:

jlpm add @lumino/widgets

A Widget can be added to the main area through the JupyterLab Shell.

Inside of the activate function, you can obtain it through the shell attribute of the app object:

// src/index.ts#L19-L19

const { commands, shell } = app;

Then the widget can be inserted by calling the add method, like in the command defined in this example:

// src/index.ts#L25-L28

execute: () => {
  const widget = new ExampleWidget();
  shell.add(widget, 'main');
}

The custom widget ExampleWidget is inherited from the base class Widget.

In this case, no specific behavior is defined for the widget. Only some properties are set:

  • addClass: Add a CSS class to allow widget styling
  • id: id of the widget's DOM node - it is mandatory to be set to be included in JupyterLab
  • title.label: The widget tab title
  • title.closable: Allow the widget tab to be closed
// src/index.ts#L36-L44

class ExampleWidget extends Widget {
  constructor() {
    super();
    this.addClass('jp-example-view');
    this.id = 'iflytek-atp-widget';
    this.title.label = 'Widget Example View';
    this.title.closable = true;
  }
}

You can associate style properties to the custom CSS class in the file style/base.css:

.jp-example-view {
  background-color: aliceblue;
}

Where to Go Next

This example uses a command to display the widget. Have a look a the commands example for more information about it.

The widget created in this example is simple. You will find more advanced widgets in the following examples:

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

jupyterlab_atp_extension-1.0.3.tar.gz (381.9 kB view hashes)

Uploaded Source

Built Distribution

jupyterlab_atp_extension-1.0.3-py3-none-any.whl (45.2 kB view hashes)

Uploaded Python 3

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page