Accordion Header Renderer Icon, Corner Radius Flash Builder Örnekleri

09 Nisan 2010
Posted by admin

Accordion Header Renderer Icon, Corner Radius

You can style the accordion via header renderer, i used a buton. You may use another things.

Turkish
Header renderer ile accordion menunun görünümünde değişiklik yapabiliriz

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:d="http://ns.adobe.com/fxg/2008/dt" 
			   xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
 
				backgroundColor="white">
 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
 
 
	<fx:Script>
		<![CDATA[
			[Bindable]
			[Embed(source="menu1.png")]
			private var Menu3:Class;
 
			[Bindable]
			[Embed(source="menu2.png")]
			private var Menu2:Class;
 
			[Bindable]
			[Embed(source="menu3.png")]
			private var Menu1:Class;
 
 
		]]>
	</fx:Script>
 
	<mx:Accordion id="accordion" backgroundAlpha="1.0"
				  height="100%"
				  width="100%"
				  headerHeight="32"
				  borderStyle="none" >
 
		<mx:headerRenderer>
			<fx:Component>
				<mx:Button fontWeight="normal"
						   labelPlacement="left"
						   textAlign="left"
						   cornerRadius="20" />
			</fx:Component>
		</mx:headerRenderer>
 
		<s:NavigatorContent label="About Us" icon="{Menu1}" width="100%" height="100%">
			<s:VGroup x="-1" y="0" width="199" height="300">
				<s:Label text="the flash builder / theflashbuilder.com" />
			</s:VGroup>
		</s:NavigatorContent>
 
 
		<s:NavigatorContent label="Projects" icon="{Menu2}" width="100%" height="100%">
			<s:VGroup x="-1" y="0" width="199" height="300">
				<s:Label text="the flash builder / theflashbuilder.com" />
			</s:VGroup>
		</s:NavigatorContent>
 
		<s:NavigatorContent label="Demo" icon="{Menu3}" width="100%" height="100%">
			<s:VGroup x="-1" y="0" width="199" height="300">
				<s:Label text="the flash builder / theflashbuilder.com" />
			</s:VGroup>
		</s:NavigatorContent>
 
	</mx:Accordion>
 
</s:Application>