Basetabs

The basetabs component conceptually houses a row of tabs that control the visibility of a stack of basetabpanes. When a basetabpane is added to the basetab component, a corresponding basetab is created for that basetabpane.

Due to the non-visual nature of basetab, a visible subclass of basetab is used in the next example to demonstrate the correlation between basetabpane and basetab items.

Example 1. introduction to basetabs

<canvas width="150" height="75">
  <include href="base"/>

  <class name="aquatab" extends="basetab" width="40" height="20" 
          bgcolor="aqua">
    <text>tab</text>
  </class>

  <basetabs x="10" y="10" tabclass="aquatab">
    <basetabpane>
      <text>one</text>
    </basetabpane>
    <basetabpane>
      <text>two</text>
    </basetabpane>
    <basetabpane>
      <text>three</text>
    </basetabpane>
  </basetabs>
</canvas>

As can be seen, three basetab items have been created for the three <basetabpane>s declared.

Though the <basetabpane> element is the child of a <basetab> element, in the runtime view hierarchy instances of basetabs are the immediate parents of a basetabsbar (where basetab components are placed and laid out) and basetabscontent (where the basetabpane components are placed and laid out).

The following diagram illustrates the correlation between basetabs, basetabsbar (the container for basetab items), and basetabscontent (the container for basetabpanes).

You can change the look and feel of your basetabs by using a different basetab, basetabsbar, and/or basetabscontent.

Example 2. modifying the basetabs look

<canvas width="150" height="75">
  <include href="base"/>
  
  <class name="mytab" extends="basetab" width="40" height="20" bgcolor="lime">
    <text>mytab</text>
  </class>
  
  <class name="mytabsbar" extends="basetabsbar" bgcolor="navy"
         layout="class: simplelayout; axis: x; spacing: 5"/>
  
  <class name="mytabscontent" extends="basetabscontent" bgcolor="silver"/>
  
  <basetabs x="10" y="10" tabclass="mytab" barclass="mytabsbar"
            contentclass="mytabscontent">
    <basetabpane>
      <text>one</text>
    </basetabpane>
    <basetabpane>
      <text>two</text>
    </basetabpane>
    <basetabpane>
      <text>three</text>
    </basetabpane>
  </basetabs>
</canvas>

See Also:

<basetab>, <basetabsbar>, <basetabpane>, and <basetabscontent>

Copyright © 2002-2005 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.

Attributes
Name	Usage	Type (Tag)	Type (JS)	Default	Category
bar	Tag & JS	expression	any	null	readonly
	This is a reference to its basetabsbar.

barclass	Tag only	string		basetabsbar	final
	Class to instantiate to contain tab items. Default is 'basetabsbar'.

bordersize	Tag & JS	number	Number	0	setter
	The size of the border surrounding a basetabpane. Default is 0.

content	Tag & JS	expression	any	null	readonly
	This is a reference to basetab's content area. This is where all basetabpanes in tabs are placed.

contentclass	Tag only	string		basetabscontent	final
	Class to instantiate to contain basetabpanes.

inset_bottom	Tag & JS	number	Number	8	setter
	The bottom inset for content appearing within a basetabpane. Default is 8.

inset_left	Tag & JS	number	Number	8	setter
	The left inset for content appearing within a basetabpane. Default is 8.

inset_right	Tag & JS	number	Number	8	setter
	The right inset for content appearing within a basetabpane. Default is 8.

inset_top	Tag & JS	number	Number		setter
	The top inset for content appearing within a basetabpane. Default is 8.

tabclass	Tag only	string		basetab	final
	Class to instantiate tab items for basetabsbar. Can be overridden by basetabpane. Default is 'basetab'.

<basetabs>

Methods