HRule and VRule with Style in Flex:-

In this example you can see how to set style for HRule and VRule controls in your flex application. First we can create a style with the help of <mx:Style>tag and after that you can create a Rule component and apply styleName property for the Rule controls

Example for HRule:-

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

.HRule {strokeWidth:3}

HRule {strokeColor:#FF0000; shadowColor:#00FF00}

<mx:Panel width="200" height="200" title="HRule Example" horizontalAlign="center">

<mx:VBox>

<mx:Label text="HRule Upper Area"/>

<mx:HRule styleName="HRule"/>

<mx:Label text="HRule Lower Area"/>

</mx:VBox>

</mx:Panel>

In this example we have illustrate how we can use style for HRule component.

Example for VRule:-

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

.VRule {strokeWidth:3}

VRule {strokeColor:#FF0000; shadowColor:#00FF00}

<mx:Panel width="250" height="200" title="VRule Example" horizontalAlign="center">

<mx:HBox>

<mx:Label text="VRule Left Area"/>

<mx:VRule styleName="VRule"/>

<mx:Label text="VRule Right Area"/>

</mx:HBox>

</mx:Panel>

Output:-

for HRule:-

and for VRule:-

Related Tags for Flex Hrule and Vrule with Style: