Name

basetabs — A non-visual container for basetabpanes.

Synopsis

LZX: basetabs
JavaScript: basetabs
Type: Class
Access: public
Topic: Components.Base Components
Declared in: lps/components/base/basetabs.lzx

Description

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 26. 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 basetabpanes 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 27. 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>
            

The base tabs object. This is the outermost containing component within which there are a basetabsbar and the basetabscontent.

Superclass Chain

node (LzNode) » view (LzView) » basecomponent » basetabs

Known Subclasses

Known Direct Subclasses: tabs

Details

Properties (11)

bar
<attribute name="bar" type="expression" value="null" />
public read-only var bar : Object;
This is a reference to its basetabsbar.
barclass
<attribute name="barclass" type="string" value="basetabsbar" />
public final var barclass : String;
Class to instantiate to contain tab items. Default is 'basetabsbar'.
bordersize
<attribute name="bordersize" type="number" value="0" />
public var bordersize : Number;
The size of the border surrounding a basetabpane. Default is 0.
content
<attribute name="content" type="expression" value="null" />
public read-only var content : Object;
This is a reference to basetab's content area. This is where all basetabpanes in tabs are placed.
contentclass
<attribute name="contentclass" type="string" value="basetabscontent" />
public final var contentclass : String;
Class to instantiate to contain basetabpanes.
inset_bottom
<attribute name="inset_bottom" type="number" value="8" />
public var inset_bottom : Number;
The bottom inset for content appearing within a basetabpane. Default is 8.
inset_left
<attribute name="inset_left" type="number" value="8" />
public var inset_left : Number;
The left inset for content appearing within a basetabpane. Default is 8.
inset_right
<attribute name="inset_right" type="number" value="8" />
public var inset_right : Number;
The right inset for content appearing within a basetabpane. Default is 8.
inset_top
<attribute name="inset_top" type="number" value="8" />
public var inset_top : Number;
The top inset for content appearing within a basetabpane. Default is 8.
layout
<attribute name="layout" value="class: simplelayout; axis: y; spacing: 0" />
public var layout;
Basetab's layout for its basetabsbar and basetabscontent area. Default is "class: simplelayout; axis: y; spacing: 0".
tabclass
<attribute name="tabclass" type="string" value="basetab" />
public final var tabclass : String;
Class to instantiate tab items for basetabsbar. Can be overridden by basetabpane. Default is 'basetab'.

LZX Synopsis

<class name="basetabs" extends=" basecomponent ">
  <attribute name=" bar " type="expression" value="null" />
  <attribute name=" barclass " type="string" value="basetabsbar" />
  <attribute name=" bordersize " type="number" value="0" />
  <attribute name=" content " type="expression" value="null" />
  <attribute name=" contentclass " type="string" value="basetabscontent" />
  <attribute name=" inset_bottom " type="number" value="8" />
  <attribute name=" inset_left " type="number" value="8" />
  <attribute name=" inset_right " type="number" value="8" />
  <attribute name=" inset_top " type="number" value="8" />
  <attribute name=" layout " value="class: simplelayout; axis: y; spacing: 0" />
  <attribute name=" tabclass " type="string" value="basetab" />
</class>

JavaScript Synopsis

public basetabs extends  basecomponent  {
  public read-only var bar  : Object;
  public final var barclass  : String;
  public var bordersize  : Number;
  public read-only var content  : Object;
  public final var contentclass  : String;
  public var inset_bottom  : Number;
  public var inset_left  : Number;
  public var inset_right  : Number;
  public var inset_top  : Number;
  public var layout ;
  public final var tabclass  : String;
}