TypeScript tabbar.TabBar類代碼示例

  /**
   * Construct a new tab panel.
   *
   * @param options - The options for initializing the tab panel.
   */
  constructor(options: TabPanel.IOptions = {}) {
    super();
    this.addClass(TAB_PANEL_CLASS);

    // Create the tab bar and stacked panel.
    this._tabBar = new TabBar(options);
    this._tabBar.tabsMovable = true;
    this._tabBar.addClass(TAB_BAR_CLASS);
    this._tabContents = new EventedPanel();
    this._tabContents.addClass(TAB_CONTENTS_CLASS);

    // Connect the tab bar signal handlers.
    this._tabBar.tabMoved.connect(this._onTabMoved, this);
    this._tabBar.currentChanged.connect(this._onCurrentChanged, this);
    this._tabBar.tabCloseRequested.connect(this._onTabCloseRequested, this);

    // Connect the stacked panel signal handlers.
    this._tabContents.widgetRemoved.connect(this._onWidgetRemoved, this);

    // Get the data related to the placement.
    this._tabPlacement = options.tabPlacement || 'top';
    let direction = Private.directionFromPlacement(this._tabPlacement);
    let orientation = Private.orientationFromPlacement(this._tabPlacement);

    // Configure the tab bar for the placement.
    this._tabBar.orientation = orientation;
    this._tabBar.addClass(`p-mod-${this._tabPlacement}`);

    // Create the box layout.
    let layout = new PanelLayout();

    // Add the child widgets to the layout.
    layout.addWidget(this._tabBar);
    layout.addWidget(this._tabContents);

    // Install the layout on the tab panel.
    this.layout = layout;
  }

    /**
     * Called when view is rendered.
     */
    render() {
        var parent = this;

        this.el.classList.add('jupyter-widgets');
        this.el.classList.add('widget-tab');

        this.tabBar = new TabBar();
        this.tabBar.tabsMovable = false;
        this.tabBar.addClass('widget-tab-bar');
        this.tabBar.currentChanged.connect(this._onTabChanged, this);
        this.tabBar.tabCloseRequested.connect(this._onTabCloseRequested, this);

        this.tabContents = document.createElement('div');
        this.tabContents.className = 'widget-tab-contents';

        this.childrenViews.update(this.model.get('children'));

        this.displayed.then(function() {
            Widget.attach(parent.tabBar, parent.el)
            parent.el.appendChild(parent.tabContents);
        });
    }

 /**
  * Insert a widget into the tab panel at a specified index.
  *
  * @param index - The index at which to insert the widget.
  *
  * @param widget - The widget to insert into to the tab panel.
  *
  * #### Notes
  * If the widget is already contained in the panel, it will be moved.
  *
  * The widget's `title` is used to populate the tab.
  */
 insertWidget(index: number, widget: Widget): void {
   if (widget !== this.currentWidget) {
     widget.hide();
   }
   this._tabContents.insertWidget(index, widget);
   this._tabBar.insertTab(index, widget.title);
 }

  /**
   * Set the tab placement for the tab panel.
   *
   * #### Notes
   * This controls the position of the tab bar relative to the content.
   */
  set tabPlacement(value: TabPanel.TabPlacement) {
    // Bail if the placement does not change.
    if (this._tabPlacement === value) {
      return;
    }

    // Swap the internal values.
    let old = this._tabPlacement;
    this._tabPlacement = value;

    // Get the values related to the placement.
    let direction = Private.directionFromPlacement(value);
    let orientation = Private.orientationFromPlacement(value);

    // Configure the tab bar for the placement.
    this._tabBar.orientation = orientation;
    this._tabBar.removeClass(`p-mod-${old}`);
    this._tabBar.addClass(`p-mod-${value}`);

    // Update the layout direction.
    (this.layout as BoxLayout).direction = direction;
  }

 remove() {
     /*
      * The tab bar needs to be disposed before its node is removed by the
      * super call, otherwise phosphor's Widget.detach will throw an error.
      */
     this.tabBar.dispose();
     /*
      * We remove this widget before removing the children as an optimization
      * we want to remove the entire container from the DOM first before
      * removing each individual child separately.
      */
     super.remove();
     this.childrenViews.remove();
 }

 /**
  * Handle the `widgetRemoved` signal from the stacked panel.
  */
 private _onWidgetRemoved(sender: Panel, widget: Widget): void {
   this._tabBar.removeTab(widget.title);
 }