tabelement is a non-visual view contained within a
<tabslider> that opens and closes when directed by a tabslider.
In practice, the tabelement class can be extended to
create whatever look and feel is desired. The following example demonstrates how
that is done.
<canvas height="200">
<include href="lz/tabslider.lzx"/>
<!-- Custom tabelement -->
<class name="mytabelement" extends="tabelement" bgcolor="blue">
<!-- classroot.parent = reference to tabslider -->
<view placement="header" bgcolor="red" height="100%" width="100%">
<text name="title" x="2" y="1" text="${classroot.text}"/>
</view>
</class>
<!-- Use custom tabelement -->
<tabslider bgcolor="yellow" width="100" height="200" spacing="2">
<mytabelement text="Tab 1">
<view bgcolor="white" width="30" height="30"/>
</mytabelement>
<mytabelement text="Tab 2"/>
<mytabelement text="Tab 3"/>
</tabslider>
</canvas>
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
defaultplacement
|
string | String | content | read/write |
| Default placement for views placed in tabelement is 'content'. | ||||
headerpadding
|
expression | any | 0 | read/write |
| Insets the header art on the x-axis. | ||||
inset_bottom
|
expression | any | parent.inset_bottom | read/write |
| The bottom inset for content appearing within a tabelement. Default is the containing tabslider's inset_bottom value. | ||||
inset_left
|
expression | any | parent.inset_left | read/write |
| The left inset for content appearing within a tabelement. Default is the containing tabslider's inset_left value. | ||||
inset_right
|
expression | any | parent.inset_right | read/write |
| The right inset for content appearing within a tabelement. Default is the containing tabslider's inset_right value. | ||||
inset_top
|
expression | any | parent.inset_top | read/write |
| The top inset for content appearing within a tabelement. Default is the containing tabslider's inset_top value. | ||||
shadowheight
|
expression | any | 4 | read/write |
| The height of the shadow. | ||||
shadowvisible
|
expression | any | true | read/write |
| Boolean to set the shadow of this tabelement. | ||||
text_x
|
expression | any | 4 | read/write |
| The x position of the text field in the header area. | ||||
text_y
|
expression | any | this.top.header.height/2 - this.top.header.txt.height/2 | read/write |
| The y position of the text field in the header area. Default is centered. | ||||
Attributes inherited from <basetabelement>
contentvisible, headerheight, height, hideonclose, itemclassname, minheight
Attributes inherited from <basecomponent>
doesenter, enabled, hasdefault, isdefault, style, styleable, text
Attributes inherited from <view>
aaactive, aadescription, aaname, aasilent, aatabindex, align, backgroundrepeat, bgcolor, cachebitmap, capabilities, clickable, clickregion, clip, colortransform, context, contextmenu, cornerradius, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hasdirectionallayout, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, shadowangle, shadowblurradius, shadowcolor, shadowdistance, showhandcursor, source, stretches, subviews, tintcolor, totalframes, unstretchedheight, unstretchedwidth, usegetbounds, valign, visibility, visible, width, x, xoffset, xscale, y, yoffset, yscale
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
Methods inherited from <basecomponent>
acceptValue, doEnterDown, doEnterUp, doSpaceDown, doSpaceUp, presentValue, setStyle, setTint, updateDefault
Methods inherited from <view>
bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getCurrentTime, getDepthList, getDisplayObject, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, isBehind, isInFrontOf, isMouseOver, measureHeight, measureWidth, play, proxyurl, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAccessible, setAttributeRelative, setColor, setColorTransform, setPan, setProxyPolicy, setSource, setVolume, shouldYieldFocus, stop, unload, updateResourceSize
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events
Events inherited from <view>
onaddsubview, onbackgroundrepeat, onblur, onclick, onclickable, onclip, oncontext, oncornerradius, ondblclick, onerror, onfocus, onframe, onframesloadratio, ongesture, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmousetrackout, onmousetrackover, onmousetrackup, onmouseup, onmouseupoutside, onopacity, onplay, onplaying, onremovesubview, onshadowangle, onshadowblurradius, onshadowcolor, onshadowdistance, onstop, ontimeout, ontouch, onvisible, onwidth, onx, ony