TabHost Class / dock_spawn Library / Dart Documentation

TabHost Class

Tab Host control contains tabs known as TabPages. The tab strip can be aligned in different orientations

Constructors

Code new TabHost([int tabStripDirection = TabHost.DIRECTION_BOTTOM, bool displayCloseButton = false]) #

Create a tab host with the tab strip aligned in the tabStripDirection direciton Only TabHost.DIRECTIONBOTTOM and TabHost.DIRECTIONTOP are supported

TabHost([int tabStripDirection = TabHost.DIRECTION_BOTTOM, this.displayCloseButton = false]) {
  pages = new List<TabPage>();
  hostElement = new DivElement();
  tabListElement = new DivElement();
  separatorElement = new DivElement();
  contentElement = new DivElement();
  createTabPage = _createDefaultTabPage;

  if (tabStripDirection == TabHost.DIRECTION_BOTTOM) {
    hostElement.nodes.add(contentElement);
    hostElement.nodes.add(separatorElement);
    hostElement.nodes.add(tabListElement);
  }
  else if (tabStripDirection == TabHost.DIRECTION_TOP) {
    hostElement.nodes.add(tabListElement);
    hostElement.nodes.add(separatorElement);
    hostElement.nodes.add(contentElement);
  }
  else {
    throw new DockException("Only top and bottom tab strip orientations are supported");
  }
  
  hostElement.classes.add("tab-host");
  tabListElement.classes.add("tab-handle-list-container");
  separatorElement.classes.add("tab-handle-content-seperator");
  contentElement.classes.add("tab-content");
}

Static Fields

Code final int DIRECTION_BOTTOM #

static final int DIRECTION_BOTTOM = 1;

Code final int DIRECTION_LEFT #

static final int DIRECTION_LEFT = 2;

Code final int DIRECTION_RIGHT #

static final int DIRECTION_RIGHT = 3;

Code final int DIRECTION_TOP #

static final int DIRECTION_TOP = 0;

Methods

Code void onTabPageSelected(TabPage page) #

void onTabPageSelected(TabPage page) {
  activeTab = page;
  pages.forEach((tabPage) {
    bool selected = (tabPage == activeTab); 
    tabPage.setSelected(selected);
  });
  
  // adjust the zIndex of the tabs to have proper shadow/depth effect
  int zIndexDelta = 1;
  int zIndex = 1000;
  pages.forEach((tabPage) {
    tabPage.handle.setZIndex(zIndex);
    bool selected = (tabPage == activeTab); 
    if (selected) zIndexDelta = -1;
    zIndex += zIndexDelta;
  });
  
}

Code void performLayout(List<IDockContainer> children) #

void performLayout(List<IDockContainer> children) {
  // Destroy all existing tab pages
  pages.forEach((tab) {
    tab.destroy();
  });
  pages.clear();
  
  TabPage oldActiveTab = activeTab;
  activeTab = null;
  
  List<IDockContainer> childPanels = children.filter((child) {
    return child.containerType == "panel";
  });
  
  if (childPanels.length > 0) {
    // Rebuild new tab pages
    childPanels.forEach((child) {
      var page = createTabPage(this, child);
      pages.add(page);
      
      // Restore the active selected tab
      if (oldActiveTab != null && page.container == oldActiveTab.container) {
        activeTab = page;
      }
    });
    _setTabHandlesVisible(true);
  }
  else {
    // Do not show an empty tab handle host with zero tabs
    _setTabHandlesVisible(false);
  }
  
  if (activeTab != null) {
    onTabPageSelected(activeTab);
  }
}

Code void resize(int width, int height) #

void resize(int width, int height) {
  hostElement.style.width = "${width}px";
  hostElement.style.height = "${height}px";
  
  int tabHeight = tabListElement.$dom_clientHeight;
  int separatorHeight = separatorElement.$dom_clientHeight;
  int contentHeight = height - tabHeight - separatorHeight;
  contentElement.style.height = "${contentHeight}px";
  
  if (activeTab != null) {
    activeTab.resize(width, contentHeight);
  }
}

Code void setActiveTab(IDockContainer container) #

void setActiveTab(IDockContainer container) {
  pages.forEach((page) {
    if (page.container == container) {
      onTabPageSelected(page);
      return;
    }
  });
}

Fields

Code TabPage activeTab #

TabPage activeTab = null;

Code DivElement contentElement #

DivElement contentElement;

Code CreateTabPage createTabPage #

CreateTabPage createTabPage;

Code bool displayCloseButton #

bool displayCloseButton;

Code DivElement hostElement #

DivElement hostElement;

Code List<TabPage> pages #

List<TabPage> pages;

Code DivElement separatorElement #

DivElement separatorElement;

Code DivElement tabListElement #

DivElement tabListElement;