IconItemRenderer  - AS3 Flex

Package	spark.components
Class	public class IconItemRenderer
Inheritance	IconItemRenderer LabelItemRenderer UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object
Implements	IGraphicElementContainer, ISharedDisplayObject

• An icon on the left defined by the iconField or iconFunction property.
• A single-line text label next to the icon defined by the labelField or labelFunction property.
• A multi-line message below the text label defined by the messageField or messageFunction property.
• A decorator icon on the right defined by the decorator property.

To apply CSS styles to the single-line text label, such as font size and color, set the styles on the IconItemRenderer class. To set styles on the multi-line message, use the messageStyleNameM style property. The following example sets the text styles for both the text label and message:

     <fx:Style>
         .myFontStyle { 
             fontSize: 15;
             color: #9933FF;
         }
  
     </fx:Style>
     
     <s:List id="myList"
         width="100%" height="100%"
         labelField="firstName">
         <s:itemRenderer>
             <fx:Component>
                 <s:IconItemRenderer messageStyleName="myFontStyle" fontSize="25"
                     labelField="firstName"
                     messageField="lastName" 
                     decorator="@Embed(source='assets/logo_small.jpg')"/>
             </fx:Component>
         </s:itemRenderer>
         <s:ArrayCollection>
             <fx:Object firstName="Dave" lastName="Duncam" company="Adobe" phone="413-555-1212"/>
             <fx:Object firstName="Sally" lastName="Smith" company="Acme" phone="617-555-1491"/>
             <fx:Object firstName="Jim" lastName="Jackson" company="Beta" phone="413-555-2345"/>
             <fx:Object firstName="Mary" lastName="Moore" company="Gamma" phone="617-555-1899"/>
         </s:ArrayCollection>
     </s:List>
  

Show MXML Syntax

Hide MXML Syntax

  <s:IconItemRenderer
   Properties
    decorator=""
    iconContentLoader="See property description"
    iconField="null"
    iconFillMode=""scale
    iconFunction="null"
    iconHeight="NaN"
    iconPlaceholder="null"
    iconScaleMode="stretch"
    iconWidth="NaN"
    label=""
    labelField="null"
    labelFunction="null"
    messageField="null"
    messageFunction="null"
 
   Common Styles
    horizontalGap="8"
    iconDelay="500"
    messageStyleName="iconItemRendererMessageStyle"
    verticalGap="6"
  >
  

View the examples

More examples

Related API Elements