How to use @jupyterlab/ui-components - 10 common examples

buildTag() {
    let text = document.createElement('input');
    text.value = 'Add Tag';
    text.contentEditable = 'true';
    text.className = 'add-tag';
    text.style.width = '49px';
    this.input = text;
    let tag = document.createElement('div');
    tag.className = 'tag-holder';
    tag.appendChild(text);
    let img = document.createElement('span');
    defaultIconRegistry.icon({
      name: 'add',
      container: img,
      center: true,
      height: '18px',
      width: '18px',
      marginLeft: '3px',
      marginRight: '-5px'
    });
    this.addClass('unapplied-tag');
    tag.appendChild(img);
    this.node.appendChild(tag);
  }

buildTag() {
    let text = document.createElement('span');
    text.textContent = this.name;
    text.style.textOverflow = 'ellipsis';
    let tag = document.createElement('div');
    tag.className = 'tag-holder';
    tag.appendChild(text);
    let img = document.createElement('span');
    defaultIconRegistry.icon({
      name: 'check',
      container: img,
      center: true,
      height: '18px',
      width: '18px',
      marginLeft: '5px',
      marginRight: '-3px'
    });
    if (this.applied) {
      this.addClass('applied-tag');
    } else {
      this.addClass('unapplied-tag');
      img.style.display = 'none';
    }
    tag.appendChild(img);
    this.node.appendChild(tag);

export function createCrumbs(): ReadonlyArray {
    let home = document.createElement('span');
    defaultIconRegistry.icon({
      name: BREADCRUMB_HOME,
      className: BREADCRUMB_HOME_CLASS,
      container: home,
      kind: 'breadCrumb'
    });
    home.title = PageConfig.getOption('serverRoot') || 'Jupyter Server Root';
    let ellipsis = document.createElement('span');
    ellipsis.className =
      MATERIAL_CLASS + ' ' + BREADCRUMB_ELLIPSES + ' ' + BREADCRUMB_ITEM_CLASS;
    let parent = document.createElement('span');
    parent.className = BREADCRUMB_ITEM_CLASS;
    let current = document.createElement('span');
    current.className = BREADCRUMB_ITEM_CLASS;
    return [home, ellipsis, parent, current];
  }

constructor() {
      this._sideBar = new TabBarSvg({
        kind: 'sideBar',
        insertBehavior: 'none',
        removeBehavior: 'none',
        allowDeselect: true
      });
      this._stackedPanel = new StackedPanel();
      this._sideBar.hide();
      this._stackedPanel.hide();
      this._lastCurrent = null;
      this._sideBar.currentChanged.connect(this._onCurrentChanged, this);
      this._sideBar.tabActivateRequested.connect(
        this._onTabActivateRequested,
        this
      );
      this._stackedPanel.widgetRemoved.connect(this._onWidgetRemoved, this);
    }

activate: (
    app: JupyterFrontEnd,
    labShell: ILabShell | null,
    restorer: ILayoutRestorer | null
  ): void => {
    const { shell } = app;
    const tabs = new TabBarSvg({
      kind: 'tabManager',
      orientation: 'vertical'
    });
    const header = document.createElement('header');

    if (restorer) {
      restorer.add(tabs, 'tab-manager');
    }

    tabs.id = 'tab-manager';
    tabs.title.iconClass = 'jp-TabIcon jp-SideBar-tabIcon';
    tabs.title.caption = 'Open Tabs';
    header.textContent = 'Open Tabs';
    tabs.node.insertBefore(header, tabs.contentNode);
    shell.add(tabs, 'left', { rank: 600 });

});
      let kernel = KERNEL_CATEGORIES.indexOf(cat) > -1;
      if (cat in categories) {
        section = (
          <div>
            <div>
              {kernel &amp;&amp; defaultIconRegistry.contains(iconClass) ? (
                
              ) : (
                <div>
              )}
              <h2>{cat}</h2>
            </div>
            <div>
              {toArray(
                map(categories[cat], (item: ILauncher.IItemOptions) =&gt; {
                  return Card(
                    kernel,
                    item,
                    this,
                    this._commands,</div></div></div>

const items = plugins.map(plugin => {
      const { id, schema, version } = plugin;
      const itemTitle = `${schema.description}\n${id}\n${version}`;
      const image = getHint(ICON_CLASS_KEY, registry, plugin);
      const iconClass = combineClasses(
        image,
        'jp-PluginList-icon',
        'jp-MaterialIcon'
      );
      const iconTitle = getHint(ICON_LABEL_KEY, registry, plugin);

      return (
        <li title="{itemTitle}" data-id="{id}" selection="">
          {defaultIconRegistry.contains(image) ? (
            </li>

const image = getHint(ICON_CLASS_KEY, registry, plugin);
      const iconClass = combineClasses(
        image,
        'jp-PluginList-icon',
        'jp-MaterialIcon'
      );
      const iconTitle = getHint(ICON_LABEL_KEY, registry, plugin);

      return (
        <li title="{itemTitle}" data-id="{id}" selection="">
          {defaultIconRegistry.contains(image) ? (
            
          ) : (
            <span title="{iconTitle}">
          )}
          <span>{schema.title || id}</span>
        </span></li>
      );
    });

orderedCategories.forEach(cat => {
      const item = categories[cat][0] as ILauncher.IItemOptions;
      let iconClass = this._commands.iconClass(item.command, {
        ...item.args,
        cwd: this.cwd
      });
      let kernel = KERNEL_CATEGORIES.indexOf(cat) > -1;
      if (cat in categories) {
        section = (
          <div>
            <div>
              {kernel &amp;&amp; defaultIconRegistry.contains(iconClass) ? (
                
              ) : (
                <div>
              )}
              <h2>{cat}</h2></div></div></div>

constructor() {
    super();
    this.addClass(APPLICATION_SHELL_CLASS);
    this.id = 'main';

    let headerPanel = (this._headerPanel = new Panel());
    let topHandler = (this._topHandler = new Private.PanelHandler());
    let bottomPanel = (this._bottomPanel = new BoxPanel());
    let hboxPanel = new BoxPanel();
    let dockPanel = (this._dockPanel = new DockPanelSvg({
      kind: 'dockPanelBar'
    }));
    MessageLoop.installMessageHook(dockPanel, this._dockChildHook);

    let hsplitPanel = new SplitPanel();
    let leftHandler = (this._leftHandler = new Private.SideBarHandler());
    let rightHandler = (this._rightHandler = new Private.SideBarHandler());
    let rootLayout = new BoxLayout();

    headerPanel.id = 'jp-header-panel';
    topHandler.panel.id = 'jp-top-panel';
    bottomPanel.id = 'jp-bottom-panel';
    hboxPanel.id = 'jp-main-content-panel';
    dockPanel.id = 'jp-main-dock-panel';
    hsplitPanel.id = 'jp-main-split-panel';