Search Flex Samples

Setting a Flex ProgressBar control’s text indent

The following example shows how you can control the amount of text indenting on a progress bar label.





<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white">



<mx:Script>

<![CDATA[

private function progressBar_creationComplete():void {

progressBar.setStyle("labelWidth", progressBar.width);

progressBar.setProgress(35, 100);

}



private function comboBox_change():void {

progressBar.labelPlacement = comboBox.selectedItem.toString();

}



private function slider_change():void {

progressBar.setStyle("textIndent", slider.value);

}

]]>

</mx:Script>



<mx:ApplicationControlBar dock="true">

<mx:Label text="textIndent:" />

<mx:HSlider id="slider"

minimum="0"

maximum="60"

liveDragging="true"

showTrackHighlight="true"

dataTipPrecision="0"

snapInterval="1"

tickInterval="10"

labels="[0,20,40,60]"

change="slider_change();" />



<mx:Spacer width="50" />



<mx:Label text="labelPlacement:" />

<mx:ComboBox id="comboBox"

selectedIndex="4"

change="comboBox_change();">

<mx:dataProvider>

<mx:Array>

<mx:String>left</mx:String>

<mx:String>center</mx:String>

<mx:String>right</mx:String>

<mx:String>top</mx:String>

<mx:String>bottom</mx:String>

</mx:Array>

</mx:dataProvider>

</mx:ComboBox>


</mx:ApplicationControlBar>

<mx:ProgressBar id="progressBar"

mode="manual"

label="%1 of %2 (%3%%)"

creationComplete="progressBar_creationComplete();" />


</mx:Application>

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples