TypeScript widgets.PanelLayout類代碼示例

    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);
    },

  /**
   * 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);
  }

 /**
  * Construct a new help widget.
  */
 constructor(url: string) {
   super();
   let layout = this.layout = new PanelLayout();
   let iframe = new IFrame();
   this.url = iframe.url = url;
   layout.addWidget(iframe);
 }

  /**
   * Create a dialog panel instance.
   *
   * @param options - The dialog setup options.
   */
  constructor(options: Dialog.IOptions={}) {
    super();
    this.addClass('jp-Dialog');
    options = Private.handleOptions(options);
    let renderer = options.renderer;

    this._host = options.host;
    this._defaultButton = options.defaultButton;
    this._buttons = options.buttons;
    this._buttonNodes = toArray(map(this._buttons, button => {
      return renderer.createButtonNode(button);
    }));
    this._primary = (
      options.primaryElement || this._buttonNodes[this._defaultButton]
    );

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

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

 /**
  * Insert an item into the toolbar at the specified index.
  *
  * @param index - The index at which to insert the item.
  *
  * @param name - The name of the item.
  *
  * @param widget - The widget to add.
  *
  * @returns Whether the item was added to the toolbar. Returns false if
  *   an item of the same name is already in the toolbar.
  *
  * #### Notes
  * The index will be clamped to the bounds of the items.
  */
 insertItem(index: number, name: string, widget: T): boolean {
   let existing = find(this.names(), value => value === name);
   if (existing) {
     return false;
   }
   widget.addClass(TOOLBAR_ITEM_CLASS);
   let layout = this.layout as PanelLayout;
   layout.insertWidget(index, widget);
   Private.nameProperty.set(widget, name);
   return true;
 }

  constructor(model: RenderableDiffModel<T>, editorClass: string[],
              rendermime: IRenderMimeRegistry, mimetype: string) {
    super();
    this.rendermime = rendermime;
    this.model = model;
    this.mimetype = mimetype;
    let bdata = model.base;
    let rdata = model.remote;
    this.layout = new PanelLayout();

    let ci = 0;
    if (bdata) {
      let widget = this.createSubView(bdata, model.trusted);
      this.layout.addWidget(widget);
      widget.addClass(editorClass[ci++]);
    }
    if (rdata && rdata !== bdata) {
      let widget = this.createSubView(rdata, model.trusted);
      this.layout.addWidget(widget);
      widget.addClass(editorClass[ci++]);
    }
  }

  /**
   * Create a dialog panel instance.
   *
   * @param options - The dialog setup options.
   */
  constructor(options: Partial<Dialog.IOptions<T>>={}) {
    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];

    if (options.focusNodeSelector) {
      let el = body.node.querySelector(options.focusNodeSelector);
      if (el) {
        this._primary = el as HTMLElement;
      }
    }
  }

 /**
  * Remove an item in the toolbar by value.
  *
  *  @param name - The name of the widget to remove from the toolbar.
  */
 removeItem(widget: T): void {
   let layout = this.layout as PanelLayout;
   layout.removeWidget(widget);
 }