[AIR/FLEX] WindowShade的样式

前端之家收集整理的这篇文章主要介绍了[AIR/FLEX] WindowShade的样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
项目中的部分页面采用了Flex进行表现,用到WindowShade控件,搜索引擎中相关的资料比较少,通过阅读部分相关文档并根据自己的应用经验,关于WindowShade的样式进行总结如下。(部分文字翻译自英文文档,可能有叙述不准确之处)

WindowShade组件显示为一个Button,点击时,Button下会有一个Panel如同拉窗帘(windowshade)般展开;如果这个Panel已经是显示状态了,点击按钮后便会收起,如同窗帘的卷起。如果多个WindowShade存在于一个VBox下,他们的表现就会像是Accordian,不同的是,多个WindowShade可以同时显示,而Accordian和Tabnavigator一样,每次只能显示一个Panel。
WindowShade组件已经被添加到了FlexLib(flexlib.net)
Styles
closeDuration   定义WindowShade关闭(收起)过渡的持续时间,单位是毫秒。值为0代表没有过渡,默认值为250
closeIcon   当WindowShade处于关闭(panel不显示)状态时显示在headerButton上图标
headerClass   取headerButton实例的样式(已经存在headerButton的实例,应用该实例的样式);headerClass的值必须是Button或者它的子样式类。默认值为Button
headerStyleName    为headerButton声明的特殊样式名。
headerTextAlign   headerButton上的文字对齐方式;有效值为left,right或center;默认值为right
openDuration   定义WindowShade显示(展开)过渡的持续时间,单位是毫秒。值为0代表没有过渡,默认值为250
openIcon   当WindowShade处于打开(Panel显示)状态时显示在headerButton上图标
toggleHeader   此属性的具体功能不详,欢迎补充
1.在使用中,推荐的方法是给WindowShade加个headerStyleName,如.WindowShadeHeader,然后在.WindowShadeHeader里定义headerButton的样式。这里要注意headerButton继承的是Button的样式。
2.针对headerButton的背景同样可以采用Scale9在WindowShadeHeader下定义upSkin,overSkin,downSkin。
3.如果在WindowShade中定义了border,要想headerButton不出现边框,可以在WindowShadeH中设置borderStyle: none
4.WindowShade的opened属性值为true时,状态为打开,false时为关闭
希望大家继续添加自己的经验,以上如有叙述不当之处,请指出。
本人刚接触Flex不久,主要是做Flex UI设计,希望能与对这方面有兴趣的朋友多交流。
原文地址: 《且听风吟》—— WindowShade的样式

猜你在找的Flex相关文章