TypeScript Widget.addClass方法代碼示例

  activate: (app: JupyterLab, palette: ICommandPalette): IMainMenu => {
    let menu = new MainMenu(app.commands);
    menu.id = 'jp-MainMenu';

    let logo = new Widget();
    logo.addClass('jp-MainAreaPortraitIcon');
    logo.addClass('jp-JupyterIcon');
    logo.id = 'jp-MainLogo';

    // Create the application menus.
    createEditMenu(app, menu.editMenu);
    createFileMenu(app, menu.fileMenu);
    createKernelMenu(app, menu.kernelMenu);
    createRunMenu(app, menu.runMenu);
    createSettingsMenu(app, menu.settingsMenu);
    createViewMenu(app, menu.viewMenu);
    createTabsMenu(app, menu.tabsMenu);

    palette.addItem({
      command: CommandIDs.shutdownAllKernels,
      category: 'Kernel Operations'
    });

    app.shell.addToTopArea(logo);
    app.shell.addToTopArea(menu);

    return menu;
  }

    execute: args => {
      // Clone the OutputArea
      const current = getCurrent({ ...args, activate: false });
      const nb = current.notebook;
      const outputAreaView = (nb.activeCell as CodeCell).cloneOutputArea();
      // Create an empty toolbar
      const toolbar = new Widget();
      toolbar.addClass('jp-Toolbar');
      toolbar.addClass('jp-LinkedOutputView-toolbar');
      // Create a MainAreaWidget
      const layout = new PanelLayout();
      const widget = new MainAreaWidget({ layout });
      widget.id = `LinkedOutputView-${uuid()}`;
      widget.title.label = 'Output View';
      widget.title.icon = NOTEBOOK_ICON_CLASS;
      widget.title.caption = current.title.label ? `For Notebook: ${current.title.label}` : 'For Notebook:';
      widget.addClass('jp-LinkedOutputView');
      layout.addWidget(toolbar);
      layout.addWidget(outputAreaView);
      current.context.addSibling(
        widget, { ref: current.id, mode: 'split-bottom' }
      );

      // Remove the output view if the parent notebook is closed.
      nb.disposed.connect(widget.dispose);
    },

  activate: (app: JupyterLab): IMainMenu => {
    let menu = new MainMenu();
    menu.id = 'jp-MainMenu';

    let logo = new Widget();
    logo.addClass('jp-MainAreaPortraitIcon');
    logo.addClass('jp-JupyterIcon');
    logo.id = 'jp-MainLogo';

    app.shell.addToTopArea(logo);
    app.shell.addToTopArea(menu);

    return menu;
  }

  /**
   * Create a dialog panel instance.
   *
   * @param options - The dialog setup options.
   *
   * @param resolve - The function that resolves the dialog promise.
   *
   * @param reject - The function that rejects the dialog promise.
   *
   * #### Notes
   * Currently the dialog resolves with `cancelButton` rather than
   * rejecting the dialog promise.
   */
  constructor(options: IDialogOptions, resolve: (value: IButtonItem) => void, reject?: (error: any) => void) {
    super();

    if (!(options.body instanceof Widget)) {
      throw 'A widget dialog can only be created with a widget as its body.';
    }

    this.resolve = resolve;
    this.reject = reject;

    // Create the dialog nodes (except for the buttons).
    let content = new Panel();
    let header = new Widget({node: document.createElement('div')});
    let body = new Panel();
    let footer = new Widget({node: document.createElement('div')});
    let title = document.createElement('span');
    this.addClass(DIALOG_CLASS);
    if (options.dialogClass) {
      this.addClass(options.dialogClass);
    }
    content.addClass(CONTENT_CLASS);
    header.addClass(HEADER_CLASS);
    body.addClass(BODY_CLASS);
    footer.addClass(FOOTER_CLASS);
    title.className = TITLE_CLASS;
    this.addWidget(content);
    content.addWidget(header);
    content.addWidget(body);
    content.addWidget(footer);
    header.node.appendChild(title);

    // Populate the nodes.
    title.textContent = options.title || '';
    let child = options.body as Widget;
    child.addClass(BODY_CONTENT_CLASS);
    body.addWidget(child);
    this._buttons = options.buttons.slice();
    this._buttonNodes = options.buttons.map(createButton);
    this._buttonNodes.map(buttonNode => {
      footer.node.appendChild(buttonNode);
    });
    let primary = options.primary || this.lastButtonNode;
    if (typeof primary === 'number') {
      primary = this._buttonNodes[primary];
    }
    this._primary = primary as HTMLElement;
  }

 /**
  * Create the footer of the dialog.
  *
  * @param buttonNodes - The buttons nodes to add to the footer.
  *
  * @returns A widget for the footer.
  */
 createFooter(buttons: ReadonlyArray<HTMLElement>): Widget {
   let footer = new Widget();
   footer.addClass('jp-Dialog-footer');
   each(buttons, button => {
     footer.node.appendChild(button);
   });
   Styling.styleNode(footer.node);
   return footer;
 }

 /**
  * Create the header of the dialog.
  *
  * @param title - The title of the dialog.
  *
  * @returns A widget for the dialog header.
  */
 createHeader(title: string): Widget {
   let header = new Widget();
   header.addClass('jp-Dialog-header');
   let titleNode = document.createElement('span');
   titleNode.textContent = title;
   titleNode.className = 'jp-Dialog-title';
   header.node.appendChild(titleNode);
   return header;
 }

  activate: (app: JupyterLab, palette: ICommandPalette): IMainMenu => {
    let menu = new MainMenu(app.commands);
    menu.id = 'jp-MainMenu';

    let logo = new Widget();
    logo.addClass('jp-MainAreaPortraitIcon');
    logo.addClass('jp-JupyterIcon');
    logo.id = 'jp-MainLogo';

    let quitButton = PageConfig.getOption('quit_button');
    menu.fileMenu.quitEntry = quitButton === 'True';

    // Create the application menus.
    createEditMenu(app, menu.editMenu);
    createFileMenu(app, menu.fileMenu);
    createKernelMenu(app, menu.kernelMenu);
    createRunMenu(app, menu.runMenu);
    createSettingsMenu(app, menu.settingsMenu);
    createViewMenu(app, menu.viewMenu);
    createTabsMenu(app, menu.tabsMenu);

    if (menu.fileMenu.quitEntry) {
      palette.addItem({
        command: CommandIDs.quit,
        category: 'Main Area'
      });
    }

    palette.addItem({
      command: CommandIDs.shutdownAllKernels,
      category: 'Kernel Operations'
    });

    palette.addItem({
      command: CommandIDs.activatePreviouslyUsedTab,
      category: 'Main Area'
    });

    app.shell.addToTopArea(logo);
    app.shell.addToTopArea(menu);

    return menu;
  }

 /**
  * Create the header of the dialog.
  *
  * @param title - The title of the dialog.
  *
  * @returns A widget for the dialog header.
  */
 createHeader(title: HeaderType): Widget {
   let header: Widget;
   if (typeof title === 'string') {
     header = new Widget({ node: document.createElement('span') });
     header.node.textContent = title;
   } else {
     header = new Widget({ node: VirtualDOM.realize(title) });
   }
   header.addClass('jp-Dialog-header');
   Styling.styleNode(header.node);
   return header;
 }

 /**
  * Create the body of the dialog.
  *
  * @param value - The input value for the body.
  *
  * @returns A widget for the body.
  */
 createBody(value: BodyType<any>): Widget {
   let body: Widget;
   if (typeof value === 'string') {
     body = new Widget({ node: document.createElement('span') });
     body.node.textContent = value;
   } else if (value instanceof Widget) {
     body = value;
   } else {
     body = new Widget({ node: VirtualDOM.realize(value) });
   }
   body.addClass('jp-Dialog-body');
   Styling.styleNode(body.node);
   return body;
 }

  /**
   * Construct a new `AppWidget`.
   */
  constructor(content: Widget) {
    super();
    this.addClass('jp-FAQ');
    this.title.closable = true;
    this.node.tabIndex = -1;
    this.id = 'faq';
    this.title.label = 'FAQ';

    let toolbar = new Widget();
    toolbar.addClass('jp-FAQ-toolbar');

    let layout = this.layout = new PanelLayout();
    layout.addWidget(toolbar);
    layout.addWidget(content);
  }