如何使用Flex 4新的CSS语法,兼容halo组件

简介: 兼容halo组件,在css里把原来的Button.Ready改为 #btn_ready即可 前台   文章来源:http://www.colorhook.com/blog/?p=497 如何使用Flex 4新的CSS语法 2009年12月8日 ColorHook 发表评论 阅读评论 写在前面 今天在Adobe Develop Connection上有一篇关于如何使用Flex 4新的CSS语法的文章,顺便把它翻译过来。

兼容halo组件,在css里把原来的Button.Ready改为 #btn_ready即可

前台<mx:Button id="btn_ready">

 

文章来源:http://www.colorhook.com/blog/?p=497

如何使用Flex 4新的CSS语法

写在前面

今天在Adobe Develop Connection上有一篇关于如何使用Flex 4新的CSS语法的文章,顺便把它翻译过来。这是原文地址http://cookbooks.adobe.com/index.cfm?event=showdetails&postId=15726#ionComHeading

议题

CSS现在提供了高级选择,命名空间等许多特征,让我们看看如何使用它。

解决方案

我们在这里展示几个应用样式的方式:跟随命名空间的全局选择,ID选择,派生选择和状态选择。

详细介绍
我的应用

这个例子中,我使用了2个Button(1个是Halo主题,1个是spark主题)和1个在VGroup中的ProgressBar:

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024"minHeight="768">        <fx:Style source="global.css" />        <s:layout>                <s:VerticalLayout />        </s:layout>        <mx:Button label="Click me, I'm a Halo button!"id="haloButton" />        <s:Button label="Click me, I'm a spark cool and funkybutton !" id="sparkButton" />        <s:VGroup id="myBox">                <mx:ProgressBar />        </s:VGroup></s:Application>
命名空间声明
@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/halo";

在这种情况下,如果我要为1个组件应用样式,我必须在选择子前面声明命名空间(例如,s|Button{style…})。如果你确定你的项目中基本上都是使用Spark组件,可以把Spark命名空间做为默认命名空间:

@namespace "library://ns.adobe.com/flex/spark";

这样,对于前一个例子,你就不需要额外声明”s|”

全局选择
mx|Button{   color:#ffffff;}s|Button {   color:#000000;}

当然,也可以为组件声明一个stylename属性然后使用类选择器,语法如下:

.myStyleClass {   color:#ff0000;}
ID选择

我只想特定的组件改变基础色,于是我用ID的方式来选择:

#haloButton {   base-color:#0000ff;}#sparkButton{   base-color:#ffffff;}
派生选择

我想要VGroup中的ProgressBar的文字显示红色

s|VGroup#myBox mx|ProgressBar{   color:#ff0000;}
状态选择

我想要我的Spark Buttons的label在用户点击的时候(这是当前状态时”down”)显示绿色。

s|Button:down{   color:#33CC33;}
结论

假如在开发Flex之前,你有HTML/CSS的经验,那就知道以前的CSS功能十分有限。而现在新的语法会让组件换肤更加容易。

相关文章
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
1月前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
86 10
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
276 1
|
2月前
|
数据可视化 前端开发 搜索推荐
FLEX组件可视化设计器CSS3代码生成器
FLEX组件可视化设计器CSS3代码生成器
55 4
|
2月前
|
前端开发 开发者 容器
CSS3:flex&box-sizing
本文介绍了CSS中的Flex布局及其相关属性,如`flex-direction`、`flex-wrap`、`justify-content`等,并通过代码示例展示了如何使用这些属性来控制容器内的项目排列方式。同时,还讲解了`align-items`属性用于定义子元素在交叉轴上的对齐方式,以及`box-sizing`属性的不同取值对元素尺寸计算的影响。
|
2月前
|
数据可视化 前端开发 数据安全/隐私保护
DIY可视化快速组件CSS样式设计生成源码
DIY可视化快速组件CSS样式设计生成源码
42 0
|
2月前
|
前端开发 JavaScript
uniapp纯CSS实现圆形进度条组件
uniapp纯CSS实现圆形进度条组件
136 0
|
2月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
37 0
|
4月前
|
前端开发 JavaScript
|
5月前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。

热门文章

最新文章