| { "type": "class", | |
| "qname": "mx.containers.TabNavigator", | |
| "baseClassname": "mx.containers.ViewStack" | |
| , | |
| "description": "The MX TabNavigator container extends the MX ViewStack container by including a TabBar container for navigating between its child containers. <p><b>Note:</b> The direct children of an MX navigator container must be MX containers, either MX layout or MX navigator containers, or the Spark NavigatorContent container. You cannot directly nest a control or a Spark container other than the Spark NavigatorContent container within a navigator; they must be children of an child MX container.</p> <p>Like a ViewStack container, a TabNavigator container has a collection of child containers, in which only one child at a time is visible. Flex automatically creates a TabBar container at the top of the TabNavigator container, with a tab corresponding to each child container. Each tab can have its own label and icon. When the user clicks a tab, the corresponding child container becomes visible as the selected child of the TabNavigator container.</p> <p>When you change the currently visible child container, you can use the <code>hideEffect</code> property of the container being hidden and the <code>showEffect</code> property of the newly visible child container to apply an effect to the child containers. The TabNavigator container waits for the <code>hideEffect</code> of the child container being hidden to complete before it reveals the new child container. You can interrupt a currently playing effect if you change the <code>selectedIndex</code> property of the TabNavigator container while an effect is playing. </p> <p>To define the appearance of tabs in a TabNavigator, you can define style properties in a Tab type selector, as the following example shows:</p> <pre>\\n <fx:Style>\\n @namespace mx "library://ns.adobe.com/flex/mx"\\n mx|Tab {\\n fillColors: #006699, #cccc66;\\n upSkin: ClassReference("CustomSkinClass");\\n overSkin: ClassReference("CustomSkinClass");\\n downSkin: ClassReference("CustomSkinClass");\\n }\\n </fx:Style>\\n </pre> <p>The Tab type selector defines values on the hidden mx.controls.tabBarClasses.Tab class. The default values for the Tab type selector are defined in the defaults.css file.</p> <p>You can also define the styles in a class selector that you specify using the <code>tabStyleName</code> style property; for example:</p> <pre>\\n <fx:Style>\\n @namespace mx "library://ns.adobe.com/flex/mx"\\n mx|TabNavigator {\\n tabStyleName:myTabStyle;\\n }\\n \\n .myTabStyle {\\n fillColors: #006699, #cccc66;\\n upSkin: ClassReference("CustomSkinClass");\\n overSkin: ClassReference("CustomSkinClass");\\n downSkin: ClassReference("CustomSkinClass");\\n }\\n </fx:Style>\\n </pre> <p>A TabNavigator container has the following default sizing characteristics:</p> <table class="innertable"> <tr> <th>Characteristic</th> <th>Description</th> </tr> <tr> <td>Default size</td> <td>The default or explicit width and height of the first active child plus the tabs, at their default or explicit heights and widths. Default tab height is determined by the font, style, and skin applied to the TabNavigator container.</td> </tr> <tr> <td>Container resizing rules</td> <td>By default, TabNavigator containers are only sized once to fit the size of the first child container. They do not resize when you navigate to other child containers. To force TabNavigator containers to resize when you navigate to a different child container, set the resizeToContent property to true.</td> </tr> <tr> <td>Child layout rules</td> <td>If the child is larger than the TabNavigator container, it is clipped. If the child is smaller than the TabNavigator container, it is aligned to the upper-left corner of the TabNavigator container.</td> </tr> <tr> <td>Default padding</td> <td>0 pixels for the top, bottom, left, and right values.</td> </tr> </table> <p>The <code><mx:TabNavigator></code> tag inherits all of the tag attributes of its superclass, and adds the following tag attributes:</p> <pre>\\n <mx:TabNavigator\\n <b>Styles</b>\\n firstTabStyleName="<i>Value of the</i> <code>tabStyleName</code> <i>property</i>"\\n focusAlpha="0.4"\\n focusRoundedCorners="tl tr bl br"\\n horizontalAlign="left|center|right"\\n horizontalGap="-1"\\n lastTabStyleName="<i>Value of the</i> <code>tabStyleName</code> <i>property</i>"\\n selectedTabTextStyleName="undefined"\\n tabHeight="undefined"\\n tabOffset="0"\\n tabStyleName="<i>Name of CSS style declaration that specifies styles for the tabs</i>"\\n tabWidth="undefined"\\n >\\n ...\\n <i>child tags</i>\\n ...\\n </mx:TabNavigator>\\n </pre>", | |
| "tags": [ | |
| { "tagName": "includeExample", | |
| "values": ["examples/TabNavigatorExample.mxml"]}, | |
| { "tagName": "see", | |
| "values": ["mx.containers.ViewStack", "mx.controls.TabBar"]}, | |
| { "tagName": "mxml", | |
| "values": []}, | |
| { "tagName": "playerversion", | |
| "values": ["Flash 9", "AIR 1.1"]}, | |
| { "tagName": "productversion", | |
| "values": ["Flex 3"]}, | |
| { "tagName": "langversion", | |
| "values": ["3.0"]} ], | |
| "members": [ | |
| { "type": "method", | |
| "qname": "mx.containers.TabNavigator", | |
| "namespace": "", | |
| "bindable": [], | |
| "details": [], | |
| "deprecated": {}, | |
| "description": "Constructor.", | |
| "tags": [ | |
| { "tagName": "playerversion", | |
| "values": ["Flash 9", "AIR 1.1"]}, | |
| { "tagName": "productversion", | |
| "values": ["Flex 3"]}, | |
| { "tagName": "langversion", | |
| "values": ["3.0"]} ], | |
| "return": "", | |
| "params": []} | |
| , | |
| { "type": "method", | |
| "qname": "getTabAt", | |
| "namespace": "public", | |
| "bindable": [], | |
| "details": [], | |
| "deprecated": {}, | |
| "description": "Returns the tab of the navigator's TabBar control at the specified index.", | |
| "tags": [ | |
| { "tagName": "param", | |
| "values": ["index Index in the navigator's TabBar control."]}, | |
| { "tagName": "playerversion", | |
| "values": ["Flash 9", "AIR 1.1"]}, | |
| { "tagName": "productversion", | |
| "values": ["Flex 3"]}, | |
| { "tagName": "return", | |
| "values": ["The tab at the specified index."]}, | |
| { "tagName": "langversion", | |
| "values": ["3.0"]} ], | |
| "return": "mx.controls.Button", | |
| "params": [{ "name": "index", "type": "int"}]} | |
| , | |
| { "type": "accessor", | |
| "access": "read-only", | |
| "return": "int", | |
| "qname": "numElements", | |
| "namespace": "public", | |
| "bindable": [], | |
| "details": ["override"], | |
| "deprecated": {}, | |
| "description": "", | |
| "tags": [ | |
| { "tagName": "private", | |
| "values": []}, | |
| { "tagName": "royaleignorecoercion", | |
| "values": ["org.apache.royale.html.beads.TabNavigatorView"]} ]}] | |
| } |