`
ritlv97d
  • 浏览: 16653 次
社区版块
存档分类
最新评论

Flex组件:Style的使用

 
阅读更多

Flex组件:Style的使用
2010年11月01日
   由于样式章节的内容比较琐碎,也没有比较难的部分,用例子不好演示,就把在 flex 中应用样式相关的文字总结都放进了演示里面,左边的树形文档中列出了样式的各种使用方法,点击相应的树节点,右边就会把对应的文字内容显示出来。 
  实际的应用效果在 ViewStack 控件的各个子窗口中给出,可以更改里面的设置内容来查看不同的效果。 
       flex中要将标签定义成成:\n"; break; case 2: generalView.text=" 在flex中,从内部定义样式的方法为在flex中定义mxml标签的标签:\n\n Button{\n width:100;\n height:40;\n }\n"; break; case 3: generalView.text=" 选择器包含了各种要应用在控件对象上的样式属性,类选择器以自定义的名称作为样式的名称,样式名称前要加\".\"符号,类选择器的样式会应用在\"styleName\"属性被设置在为类名称的控件及其子类上:\n\n .myStyle{\n width:100;\n height:40;\n }\n"; break; case 4: generalView.text=" 选择器包含了各种要应用在控件对象上的样式属性,类型选择器直接以flex的控件类的类名作为样式名称,样式名称前不用加\".\"符号,类型选择器的样式会应用到该类控件及其子类中:\n\n Button{\n width:100;\n height:40;\n }\n"; break; case 5: generalView.text=" 选择器包含了各种要应用在控件对象上的样式属性,全局选择器的样式名称为\"global\",全局选择器的样式会应用到所有控件上:\n\n global{\n width:100;\n height:40;\n }\n"; break; case 6: generalView.text=" ActionScript中控件对象的属性与样式中的属性不同,有些属性不能在ActionScript中直接访问到,必须通过getStyle()、setStyle()方法访问和更改样式属性:\n 获取样式属性:getStyle(\"样式属性名\",\"样式属性值\")\n 获取样式属性:setStyle(\"样式属性名\",\"样式属性值\")进行设置。\n 若要访问现有的样式,可以使用\n StyleManager.getStyleDeclaration(\"选择器名\").getStyle(\"样式属性的字符串\")\n 改变现有样式的属性值可以使用:\n StyleManager.getStyleDeclaration(\"选择器名\").setStyle(\"样式属性字符串\",\"新的属性值\");"; break; case 7: generalView.text=" ActionScript中动态生成样式的做法:\n//声明一个CSSStyleDeclaration对象\n var newStyle:CSSStyleDeclaration=new CSSStyleDeclaration(\".myStyle\");\n\n //设置该样式对象的的样式属性\n newStyle.setStyle(\"width\",100);\n newStyle.setStyle(\"height\",40);\n\n //声明一个控件,操作对象也可以是已有的控件\n var btn:Button=new Button();\n\n //将生成的样式应用到控件上\n btn.styleName=\"myStyle\";"; break; case 8: generalView.text=" ActionScript中清除样式使用 clearStyle(propName:String)方法,如清除btn控件样式的width属性:btn.clearStyle(\"width\")"; break; } } ]]>  flex样式的使用" width="70%" height="60%" layout="horizontal">        Flex 样式" cIndex="0">                                                   
  以上描述了Style样式在Flex中的基本使用及Style的相关知识,主要有Style的定义、应用到控件的方法和如何在ActionScript中控制Style,可以结合源码及演示里面自带的效果展示一起阅读。 
  网页游戏开发系列教程 尽在eb163.com。 
  转载请保留出处:  http://www.eb163.com/ 
分享到:
评论

相关推荐

    flex 4.6Css

    为了方便使用,将Spark组件单独剥离出来,使用方案如下:(只限于spark组件) 引入: add silvergreen-spark-2.0.swc to libs 使用(SWC方案): 在IDE(如:Flash Builder)里面,增加一个编译参数: -theme ../...

    Flex3 Style Explorer

    时刻需要对容器、组件等显示样式进行定义,以达到美观的目的 ,flex bulider自己本身也支持 所见即所得的开发方式,但是支持力度不够对容器、组件的样式定义,我们常用的就是Flex3 Style Explorer. 这是adobe官方的...

    react-styled-flex:简单,轻便,不受限制,符合CSS标准的Flexbox组件,可用于使用样式化组件的React

    React式的柔韧性 简单,轻便,不受约束,符合CSS标准的Flexbox组件,使用进行特征小型且无依赖,最小约3 KB或最小约1.4 KB +压缩。 清理基础HTML DOM 。 没有道具泄漏到DOM。 支持功能。 对于不受支持的浏览器,它会...

    flex 一问一答

    6.问:Flex如果修改组件样式? 答:和as2里差不多.如:Alert组件,新建两个样式。 <mx:Style> AlertTitle{ font-size: 12pt; font-weight: bold; } AlertMessage{ font-size: 12pt; } <mx:Style/> Alert....

    styled-flex-component:Flex元素,不再编写更多自定义Flex样式,因为该死

    样式化的Flex组件 Flex元素,不再编写更多自定义Flex样式,因为该死安装yarn add styled-flex-componentornpm i styled-flex-component用法import React from 'react' ;import Flex , { FlexItem } from 'styled-...

    flex style explorer

    很强大的flex_css工具集,详细介绍FLEX中各种组件样式及演示。

    cron定时任务表达式组件(vue3+ts+naiveUI)

    3.需要传的值,maxHeight="450px"//最大高, @changeCron="changeCron"//方法,:cronValue="cronValue"//cron表达式, :showCronModal="showCronModal"//打开弹框,style="flex: 0.25"//样式 4.// cron子组件传的...

    Flex关于样式专题.pdf

    可以通过style 属性来更改Flex 组件的外观。这些样式属性能够定义Label 控件的字体大 小,或者Tree 控件的背景色。在Flex 中,一些样式从父容器传承给它们的子控件,并跨越了 样式类型和类。这意味着,样式能一次性...

    单一价格网格组件:FrontendMentor.io提出的新手布局挑战,以构建定价组件

    网格和Flex-Box; 移动优先; 后轮驱动; 附加效果: 卡覆盖颜色(第三张卡); 按钮变换:在鼠标悬停时将其向上移动,在单击时(活动状态)将其向下移动,并更改背景颜色; 页脚中的样式链接:添加了漂亮的颜色来...

    styled-style:CSS模块,例如样式组件

    您可以立即使用可读组件。安装 $ yarn add styled-style用法styles.module.css . center { display : flex; justify-content : center; align-items : center;}. btn { border-radius : 3 px ; padding : 0.25 em 1...

    fangshifeng#ReactNative#《ReactNative系列讲义》基础篇---05.Style and Flex

    一、简介每一个核心组件都自带一个style属性,用来添加组件的样式,比如字体大小、颜色、排列方式,组件的布局方式、位置等等。下面让我们一起来学习一下style样

    微信小程序使用map组件实现路线规划功能示例

    本文实例讲述了微信小程序使用map组件实现路线规划功能。分享给大家供大家参考,具体如下: 效果图 实现原理 1. 通过map组件标记起始点和绘制路线图; 2. 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和...

    Flex官方设置样式界面源码

    Flex 官方做的一个Demo,能个可视化的对Flex的大部分组件进行样式设置,设置之后能够生成样式表。

    svg-to-react:将SVG文件转换为React组件的工具

    将SVG文件转换为React组件的工具 安装 npm install -g @cpmech/svg-to-react 用法 $ svg-to-react 输出示例 SvgSync.tsx export interface SvgSyncProps { size ?: string ; // size of square container style ?...

    smashing-magazine:此项目是Smashing Magazine着陆页的克隆版本,用于了解任何网站的设计基础

    粉碎杂志克隆灰度 ... 该网站包含: 用flex制成的Navbar。... 检查style.css以编辑任何组件的样式。 :handshake: 贡献 欢迎贡献,问题和功能要求! 随时检查。 表示支持 给一个 :white_medium_star: 如果您喜

    微信小程序(十六)form组件详细介绍

    form表单组件 是提交form内的所有选中属性的值,注意每个form表单内的组件都必须有name属性指定否则提交不上去,button中的type两个submit,reset属性分别对应form的...label style=display: flex wx:for-items={{items

    关于皮肤 flex

    “施加皮肤”是通过改变或者替换组件的可视化元素来改变组件外观的过程。这些可视化 元素包括位图、SWF 文件,或者包含画矢量图的绘图方法的类文件。 皮肤能够定义组件在不同状态下的全部或部分外观。例如,Button ...

    wc-responsive-container:Web组件,允许作者根据包含元素的大小而不是用户视口的大小来控制样式

    wc响应式容器Web组件,允许作者根据包含元素的大小而不是用户视口的大小来控制样式。 基于Philip Walton的使用自定义元素和调整大小观察器。为什么? 如果容器位于会影响容器大小的动态应用程序布局内,例如布局具有...

    一个taro适配Android、iOS、微信小程序、H5最佳实践项目的脚手架

    主要涉及到了基础网络请求的封装、适配了多端的SafeArea安全区域、style工具样式引用替换scss的繁琐写法大幅度简化代码,同时解决了scss样式无法通过className进行属性传递的问题、自定义tabBar、全局模态对话框展示...

    c7:C7 是一个基于画布的 UI 工具包

    ) Flex 布局和常用的 CSS MVVM 开箱即用的脚手架和开发服务器(支持热重载) 预览地址: 用法使用npx c7 project-name创建一个项目使用vscode打开项目根目录享受代码高亮在项目根目录运行npm run build启动开发...

Global site tag (gtag.js) - Google Analytics