Setting the border thickness in a Flex Panel container
The following example shows how you can set the border thickness of each edge (left, right, top, and bottom) separately on a Panel container in Flex by setting the <?xml version="1.0" encoding="utf-8"?>borderThicknessLeft
, borderThicknessRight
, borderThicknessTop
, and borderThicknessBottom
styles.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.nakedButton {
skin: ClassReference(null);
}
</mx:Style>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="borderThicknessLeft:"
direction="horizontal">
<mx:HSlider id="sliderLeft"
minimum="0"
maximum="50"
value="10"
snapInterval="1"
tickInterval="10"
liveDragging="true" />
<mx:Label text="{sliderLeft.value}" />
</mx:FormItem>
<mx:FormItem label="borderThicknessRight:"
direction="horizontal">
<mx:HSlider id="sliderRight"
minimum="0"
maximum="50"
value="10"
snapInterval="1"
tickInterval="10"
liveDragging="true" />
<mx:Label text="{sliderRight.value}" />
</mx:FormItem>
<mx:FormItem label="borderThicknessTop:"
direction="horizontal">
<mx:HSlider id="sliderTop"
minimum="0"
maximum="50"
value="0"
snapInterval="1"
tickInterval="10"
liveDragging="true" />
<mx:Label text="{sliderTop.value}" />
</mx:FormItem>
<mx:FormItem label="borderThicknessBottom:"
direction="horizontal">
<mx:HSlider id="sliderBottom"
minimum="0"
maximum="50"
value="10"
snapInterval="1"
tickInterval="10"
liveDragging="true" />
<mx:Label text="{sliderBottom.value}" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel id="panel"
title="The quick brown fox jumped over the lazy dog."
borderThicknessLeft="{sliderLeft.value}"
borderThicknessRight="{sliderRight.value}"
borderThicknessTop="{sliderTop.value}"
borderThicknessBottom="{sliderBottom.value}"
layout="absolute"
width="100%" height="100%">
<mx:Button label="borderThicknessLeft"
labelPlacement="right"
icon="@Embed('assets/arrow_left.png')"
styleName="nakedButton"
left="0"
verticalCenter="0"
toolTip="{sliderLeft.value}"
errorString="{sliderLeft.value}" />
<mx:Button label="borderThicknessRight"
labelPlacement="left"
icon="@Embed('assets/arrow_right.png')"
styleName="nakedButton"
right="0"
verticalCenter="0" />
<mx:Button label="borderThicknessTop"
labelPlacement="bottom"
icon="@Embed('assets/arrow_up.png')"
styleName="nakedButton"
top="0"
horizontalCenter="0" />
<mx:Button label="borderThicknessBottom"
labelPlacement="top"
icon="@Embed('assets/arrow_down.png')"
styleName="nakedButton"
bottom="0"
horizontalCenter="0" />
</mx:Panel>
</mx:Application>
10:46 AM
|
Labels:
Flex Controls Samples,
Flex LayoutContainer,
Flex Samples
|
This entry was posted on 10:46 AM
and is filed under
Flex Controls Samples
,
Flex LayoutContainer
,
Flex Samples
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
0 comments:
Post a Comment