Flex Hrule and Vrule with Style


 

Flex Hrule and Vrule with Style

In this tutorial we have discuss about how to use style with HRule and Vrule controls

In this tutorial we have discuss about how to use style with HRule and Vrule controls

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:-

<?xml version="1.0"?>

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

<mx:Style>

.HRule {strokeWidth:3}

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

</mx:Style>

<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>

</mx:Application>

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

Example for VRule:-

<?xml version="1.0"?>

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

<mx:Style>

.VRule {strokeWidth:3}

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

</mx:Style>

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

<mx:HBox>

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

0

<mx:VRule styleName="VRule"/>

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

</mx:HBox>

1

</mx:Panel>

</mx:Application>

Output:-

2

for HRule:-

and for VRule:-

3

Ads