tabview.labeltext.setAttribute('fgcolor',s.textcolor); setTint(tabview.left, s.basecolor); setTint(tabview.middle, s.basecolor); setTint(tabview.right, s.basecolor); setAttribute('tabstate', this._enabled ? 2 : 1); setAttribute('tabstate', 3); if (!this["selected"]) { setAttribute('tabstate',2); } tabview.labeltext.setAttribute('fgcolor', dohilite ? style.texthilitecolor : style.textcolor); The lz tab is used by tabs.

A tab is an LZ tab within <basetabsbar> or any object that extends this (such as <tabsbar>).

one two ]]> tabsbar tabpane tabs basetab super.init(); bringToFront(); The lz tabsbar class for laying out tab items.

A tabsbar is a container that uses a default x-axis with a spacing of -15 to lay out its tab children (which have extra spacing on each side) so they overlap.

This it the default tab bar created by tabpane. This class is dependent on tabs (or any subclass of basetabs) and shouldn't be used by itself. The default layout for its subviews is "class: simplelayout; axis: x; spacing: -15". You can pass the name of this class in the 'barclass' attribute of tabpane, basetabpane, basetabs, and tabs. Tabs uses this class as its default 'barclass'.

basetabs barclass=basetabsbar one two three basetabs barclass=tabsbar one two three ]]> tab tabs basetabsbar super.init(); // Set width attribute of associated tab if tabwidth is defined if (this.tabwidth > -1) { this.tab.setAttribute('width', this.tabwidth); } A tabpane houses content to be shown within a tabs component when its correlated tab is selected.

tabpane is the visual container for content in . The difference between this class and is that tabpane has a background that is set by whatever the default style is.

Note that the content of tabpane is initstage="late". You can override this by explicitly setting your initstage preference on tabpane.

]]>

For every tabpane declared, a corresponding is created.

First two are tabpanes, the last one is a basetabpane one two three ]]> The tabs content container for tabpanes.

tabscontent houses a stack of s for , which has a visual border and uses the default style's background color. When a tabspane is added to a tabs, its content are actually placed in tabscontent.

Said another way, tabscontent is the class used by tabs to place tabpanes. Visually, it contains a border. The size of the border is constrained by its parent's (tabs) bordersize attribute value. You can pass the name of this class in the 'contentclass' attribute of basetabs and tabs. Tabs uses this class as its default 'contentclass'.

contentclass=basetabscontent one two three contentclass=tabscontent one two three ]]> tabs tabpane basetabscontent super.init(); // This also calls _setTabAlign() this._setTabSpacing(this.tabspacing); this.tabalign = align; if (! _initcomplete) return; if (align == "center") { this.bar.setAttribute('x', Math.floor(this.width/2 - this.bar.width/2)); } else if (align == "right") { this.bar.setAttribute('x', this.width - this.bar.width + 7); } else { // left this.bar.setAttribute('x', -5); } this.tabspacing = s; if (! _initcomplete) return; this.bar.setAttribute('spacing', s); this._setTabAlign(tabalign); The tabs class takes tabpanes, and provides a tab for each one.

The tabs component contains a row of tabs that control the visibility of a stack of <tabpane>s. When a <tabpane> is added to a tabs component, a corresponding tab is created for that <tabpane>. The text which shows up in the tab is derived from the text attribute of the <tabpane>.

The tabs component will be sized automatically to the largest tabpane, unless an explicit height or width is specified within the tabs tag.

<canvas height="100"> <tabs> <tabpane text="one"> <button>press one</button> </tabpane> <tabpane text="two"> <button>press two</button> </tabpane> </tabs> </canvas>

See Also:

<tab>, <tabsbar>, <tabpane>, <tabscontent>, and <basetabs>