TypeScript TabBar.addClass方法代码示例

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

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