<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
viewSourceURL="srcview/index.html">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|TabBar s|ButtonBarButton:up
{
fontStyle:normal;
}
s|TabBar s|ButtonBarButton:upAndSelected,
s|ButtonBar s|ButtonBarButton:downAndSelected
{
fontStyle:italic;
font-weight:bold;
}
</fx:Style>
<fx:Declarations>
<s:ArrayCollection id="contacts"/>
</fx:Declarations>
<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Panel width="40%"
height="60%"
title="TabBar Demo"
backgroundColor="0x5a5a5a">
<s:TabBar id="tabs"
left="8"
y="2"
dataProvider="{vs}"
skinClass="Skin.TabBar"
cornerRadius="4" />
<mx:ViewStack id="vs"
width="95%"
height="90%"
left="8"
y="23">
<s:NavigatorContent label="User Login"
backgroundColor="0x789898" >
<s:BorderContainer borderColor="0x2a2f5f"
width="100%"
height="100%"
cornerRadius="4"
dropShadowVisible="true"
backgroundColor="0x789898"
borderVisible="false">
<s:layout>
<s:VerticalLayout paddingTop="10"
paddingLeft="5"/>
</s:layout>
<mx:Form>
<mx:FormItem label="User Name:">
<s:TextInput id="username"
width="100%"/>
</mx:FormItem>
<mx:FormItem label="Password:">
<s:TextInput id="userpassword"
width="100%"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<s:HGroup>
<s:Button label="Login"/>
</s:HGroup>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Registration"
backgroundColor="0xF9EBAE">
<s:BorderContainer borderColor="0x2a2f5f"
width="100%"
height="100%"
cornerRadius="4"
dropShadowVisible="true"
backgroundColor="0xF9EBAE"
borderVisible="false">
<s:layout>
<s:VerticalLayout paddingTop="10"
paddingLeft="5"/>
</s:layout>
<mx:Form>
<mx:FormItem label="First Name:">
<s:TextInput id="firstname"
width="100%"/>
</mx:FormItem>
<mx:FormItem label="Last Name:">
<s:TextInput id="lastname"
width="100%"/>
</mx:FormItem>
<mx:FormItem label="Email:">
<s:TextInput id="email"
width="100%"/>
</mx:FormItem>
<mx:FormItem label="Age:">
<s:TextInput id="age"
width="100%"/>
</mx:FormItem>
<mx:FormItem label="Contect Number:">
<s:TextInput id="contect"
width="100%"/>
</mx:FormItem>
<mx:FormItem label="Address:">
<s:TextArea id="address"
width="127"/>
</mx:FormItem>
<mx:FormItem label="State:">
<s:TextInput id="state"
width="100%"/>
</mx:FormItem>
<mx:FormItem label="Country:">
<s:TextInput id="country"
width="100%"/>
</mx:FormItem>
</mx:Form>
<s:HGroup>
<s:Button label="Save"/>
</s:HGroup>
</s:BorderContainer>
</s:NavigatorContent>
<s:NavigatorContent label="Admin Login"
backgroundColor="0xE8B54D">
<s:BorderContainer borderColor="0x2a2f5f"
width="100%"
height="100%"
cornerRadius="4"
dropShadowVisible="true"
backgroundColor="0xE8B54D"
borderVisible="false">
<s:layout>
<s:VerticalLayout paddingTop="10"
paddingLeft="5"/>
</s:layout>
<mx:Form>
<mx:FormItem label="Admin Name:">
<s:TextInput id="adminname"
width="100%"/>
</mx:FormItem>
<mx:FormItem label="Password:">
<s:TextInput id="password"
width="100%"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<s:HGroup>
<s:Button label="Login"/>
</s:HGroup>
</s:BorderContainer>
</s:NavigatorContent>
</mx:ViewStack>
</s:Panel>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.TabBar")]
]]>
</fx:Metadata>
<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>
<s:DataGroup id="dataGroup"
width="100%"
height="100%">
<s:layout>
<s:ButtonBarHorizontalLayout gap="-1"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ButtonBarButton chromeColor="{data.getStyle('backgroundColor')}"
color="{myColor}"
creationComplete="buttonbarbutton1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
[Bindable]
private var myColor:uint=0x000000;
import mx.events.FlexEvent;
protected function buttonbarbutton1_creationCompleteHandler(event:FlexEvent):void
{
switch (data.getStyle('backgroundColor'))
{
case (0x789898):
{
myColor=0xFFFFFF;
break;
}
default:
{
myColor=0x000000;
break;
}
}
}
]]>
</fx:Script>
</s:ButtonBarButton>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:Skin>
分享到：
相关推荐
在IT行业中，`flex tabBar`通常指的是使用Flex布局来实现的底部导航栏。这是一种常见的用户界面元素，尤其在移动应用中广泛使用，用于在多个页面或功能之间切换。`flex tabBar`利用CSS Flexible Box（Flexbox）布局...
《Flex4 TabBar组件的深度探索与应用实例》 在Adobe Flex 4中，TabBar是一种常见的用户界面组件，用于创建具有多个选项卡的应用界面，它允许用户在不同的视图或内容之间进行切换。TabBar组件是Spark组件库的一部分...
flex4 TabBar skin
在Flex开发中，TabBar组件通常用于创建带有多个选项卡的应用界面，每个选项卡代表一个独立的功能区域。然而，当TabBar中的标题数量过多时，可能会导致界面拥挤，影响用户体验。在这种情况下，开发者通常需要寻找一种...
在本文中，我们将深入探讨如何在Flex环境中创建一个垂直排列的按钮（Flex Vertical Button）以及一个包含垂直标签的TabNavigator组件。Flex是一个基于ActionScript 3.0的开放源代码框架，用于构建富互联网应用程序...
在Flex开发中，TabBar组件通常用于展示多个选项卡，用户可以轻松地在不同视图之间切换。然而，默认情况下，Flex的TabBar组件不会自动换行，而是将所有选项卡排列在同一行，如果选项卡数量过多，超出容器宽度，部分...
接下来，在你的Flex应用程序中，实例化TabNavigator并将其layout属性设置为刚刚创建的VerticalTabLayout类。这样，TabNavigator的标签就会按照垂直方向排列。 ```actionscript ()}"> 标签1" backgroundColor="#...
微信小程序tabBar模板用法实例分析 微信小程序tabBar模板是微信小程序中的一种常见的导航栏组件，用于在不同页面之间进行导航。tabBar模板的定义、配置、引用等操作技巧是微信小程序开发中非常重要的一部分，本文将...
Component Explorer 是 Flex 3 中的一个重要工具，它为开发者提供了所有可视控件的实例，方便学习和参考。这个工具让初学者能够快速理解和掌握每个控件的用法，通过实例化的展示来加速学习进程。 以下是 Component ...
这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图： wxml代码： <view class=top_...
在微信小程序开发中，TabBar 是一个至关重要的组件，它位于小程序页面的底部，用于展示主要功能模块的快捷入口，通常包含2-5个图标和文字。本资源包"小程序tabbar素材"提供了专为微信小程序设计的TabBar图形元素，以...
`tabBar`是UIKit框架中的`UITabBarController`类的一部分，它管理着一系列的`UIViewController`实例，每个控制器代表一个标签页。系统默认会为每个页面生成一个图标和标题，用户可以通过点击这些图标在各个页面之间...
每个Tab对应一个`UIViewController`实例，而TabBar上的图标和标题则通过`UITabBarItem`进行设置。 在Android开发中，我们可以使用`BottomNavigationView`来实现类似的功能。通过在布局文件中添加`BottomNavigation...
display: flex; justify-content: space-around; background-color: #fff; } .custom-tabbar .selected { color: #fa0; } .custom-tabbar .selected::before { content: ""; position: absolute; bottom: -...
在开发小程序时，UI设计和用户体验是至关重要的部分，而TabBar（标签栏）作为页面间的导航工具，其样式和功能的定制性直接影响了用户的交互体验。uni-app是一款多端开发框架，它允许开发者用一套代码实现跨平台的小...
4. **集成到`UITabBarController`**：在`UITabBarController`的代理方法中，替换默认的`tabBar.items`为自定义的`TabBarItem`实例。 5. **动态调整**：根据屏幕尺寸和内容的变化，动态调整`TabBarItem`的位置和大小...
### Flex 3 组件实例与应用（2009版） #### 一、概述 《Flex 3 组件实例与应用》是一本针对初学者学习Adobe Flex 3框架及其组件的指南书籍。这本书由作者Dason编写，内容覆盖了Flex 3中的多种组件及其用法，并通过...
本文将深入探讨如何实现这样一个自定义的左右滑动TabBar，并提供一个详细的实例来帮助你的项目提升用户体验。 首先，我们了解基本的TabBar工作原理。TabBar通常由`UITabBarController`管理，每个Tab对应一个`...