FXG for an arrow (chevron) and triangle

FXG for a right arrow (or chevron rotated to the right):

Ridght side decorator arrow

<s:Graphic width="100" height="100" >
	<s:Group width="100" height="100" >
		<s:Path data="M 0 0 L 50 50 L 0 100 L 50 50 L 0 0 z">
			<s:fill>
				<s:SolidColor color="#FF0000" />
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke weight="10" color="#FFFFFF" joints="round"/>
			</s:stroke>
		</s:Path>
	</s:Group>
</s:Graphic>

At a smaller size:

    <s:Graphic width="24" height="24">
       <s:Group width="100" height="100" >
          <s:Path data="M 0 0 L 50 50 L 0 100 L 50 50 L 0 0 z">
             <s:fill>
                <s:SolidColor color="#FF0000" />
             </s:fill>
             <s:stroke>
                <s:SolidColorStroke weight="10" color="#CCCCCC" joints="round"/>
             </s:stroke>
          </s:Path>
       </s:Group>
    </s:Graphic>

In an ItemRenderer that shows when the row is selected:

Item Renderer

	<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark"  
					width="100%"
					>
		<fx:Script>
			<![CDATA[
				override public function set selected(value:Boolean):void {
					super.selected = value;

					chevron.visible = value;
				}
			]]>
		</fx:Script>

			<s:Label id="labelDisplay" 
					 paddingBottom="10" paddingRight="10"
					 paddingLeft="20" paddingTop="10"
					 left="1" right="1"
					 top="1" bottom="1"
					 verticalAlign="middle" 
					 textAlign="left"
					 >

			</s:Label>

			<s:Graphic id="chevron" width="24" height="24" verticalCenter="0" right="5">
			   <s:Group width="100" height="100" >
			      <s:Path data="M 0 0 L 50 50 L 0 100 L 50 50 L 0 0 z">
			         <s:fill>
			            <s:SolidColor color="#FF0000" />
			         </s:fill>
			         <s:stroke>
			            <s:SolidColorStroke weight="10" color="#FFFFFF" joints="round"/>
			         </s:stroke>
			      </s:Path>
			   </s:Group>
			</s:Graphic>
	</s:ItemRenderer>

A triangle facing right:

Triangle

<s:Graphic id="triangle" width="50" height="50" >
	<s:Group width="100" height="100" >
		<s:Path data="M 0 0 L 50 50 L 0 100 z">
			<s:fill>
	  			<s:SolidColor color="#FF0000" />
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke weight="10" color="#FFFFFF" joints="round"/>
			</s:stroke>
		</s:Path>
	</s:Group>
</s:Graphic>

Triangle facing left:

Triangle

<s:Graphic id="triangle" width="50" height="50" >
	<s:Group width="100" height="100" >
		<s:Path data="M 0 50 L 50 100 L 50 0 z">
			<s:fill>
	  			<s:SolidColor color="#FF0000" />
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke weight="10" color="#FFFFFF" joints="round"/>
			</s:stroke>
		</s:Path>
	</s:Group>
</s:Graphic>

Triangle facing up:

Triangle

<s:Graphic id="triangle" width="50" height="50" >
	<s:Group width="100" height="100" >
		<s:Path data="M 0 50 L 100 50 L 50 0 z">
			<s:fill>
	  			<s:SolidColor color="#FF0000" />
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke weight="10" color="#FFFFFF" joints="round"/>
			</s:stroke>
		</s:Path>
	</s:Group>
</s:Graphic>

Triangle facing down:

Triangle

<s:Graphic id="triangle" width="50" height="50" >
	<s:Group width="100" height="100" >
		<s:Path data="M 0 0 L 50 50 L 100 0 z">
			<s:fill>
	  			<s:SolidColor color="#FF0000" />
			</s:fill>
			<s:stroke>
				<s:SolidColorStroke weight="10" color="#FFFFFF" joints="round"/>
			</s:stroke>
		</s:Path>
	</s:Group>
</s:Graphic>
This entry was posted in AIR, Flash, Flash Catalyst, Flex, FXG. Bookmark the permalink.

One Response to FXG for an arrow (chevron) and triangle

  1. Daniel says:

    Thanks for posting this! It was a big help for me.

Leave a Reply

Your email address will not be published. Required fields are marked *

Wrap your code before posting! Click the links below:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">