最近使用很多ide自带的组件,每个组件基本上都需要设置一下样式。这里,总结一下对于设置组件样式的一些方法。
组件都有(继承)一个 setStyle(style:String, value:Object):void 的方法。
第一点:设置组件的字体
(假设组件叫 myComponent ,字体样式叫 myTextFormat)
想改组件字体,那么就写 myComponent.setStyle(”textFormat”,myTextFormat);
这样,对于文本组件,如TextArea,Label,TextInput就达到修改字体样式的效果了;
部分组件有textField属性,那直接设置他也可以。
但是有些组件不简单是文本,比如List组件,就得使用他继承SelectableList的setRendererStyle(name:String, style:Object, column:uint = 0):void方法
myList.setRendererStyle(”textFormat”,myTextFormat);
而ComboBox组件是由 TextInput 和 List 组合而成的,那就需要分开设置
myComboBox.textField.setStyle(”textFormat”,myTextFormat);//顶部显示字体样式
myComboBox.dropdown.setRendererStyle(”textFormat”, myTextFormat);//下拉选相里的字体样式
第二点:更改组件的外观
拿ScrollPane举例,假如我们想更改这个组件的背景。打开帮助,找到介绍他样式的地方;通过说明一栏的介绍,知道负责背景的是upSkin的样式,知道了这个,我们可以动手写代码了:
//我们创造了一个具有红色背景的ScrollPane实例
import fl.containers.ScrollPane;
import flash.display.Shape;
import flash.display.Graphics;
var myBg:Shape=new Shape();
myBg.graphics.beginFill(0×990000);
myBg.graphics.drawRect(0,0,10,10);
myBg.graphics.endFill();
var myScrollPane:ScrollPane =new ScrollPane();
myScrollPane.setStyle(”upSkin”,myBg);
//myBg还可以是库里面导出的类(不需要实例化)
addChild(myScrollPane);
你还可以把myBg换成Sprite,MovieClip类型,创造复杂,甚至是动画的背景。
同理,可以改变其他地方的外观,比如上下方向键,滚动条等。
组件有非常多的样式,名字都记不住,用到的时候,重复上面的步骤,就可以了。
分享到:
相关推荐
主要介绍了微信小程序自定义组件components知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
vue样式的组件示例 基于Vue-CLI 3的vue样式化组件示例 项目设置 使用Vue-CLI 3创建Vue项目 vue create vue-styled-components-example cd vue-styled-components-example 添加vue样式的组件 yarn add vue-styled-...
添加自定义组件的方法
组件的wxml结构请看dist/components/下的组件 样式文件可直接引用dist/components/wux.wxss 插件及文档 ActionSheet - 上拉菜单 Backdrop - 背景幕 Barcode - 条形码 Button - 浮动按钮 Calendar - 日历 CountDown ...
components-arrange, 用于排列/对齐水平单元格的组件 CSS,有点像 flexbox 适合CSS组件排列 适用于水平和垂直排列单行单元格的CSS组件。 包含用于相等宽度单元格和分离单元格的修改器类。 使用 CSS table 布局。注意...
小程序 富文本转换 (修改版 - 已解决组件本身 IOS系统 文本不可选中的问题) 由 mp-html 官方下载后使用时发现问题后调整
Office Web Components是一组的COM控件,设计的目的是为众多的控件容器提供交互的电子表格建模,数据报表和数据可视化功能。OWC库包含四个主要的组件:电子表格组件,图表组件,透视表组件和数据源组件。
Esri的Calcite设计框架的共享Web组件。 要查看实际使用的组件,请。 草图库 提供了所有方解石组件,其中包含所有变体和大小。 安装 npm install --save @esri/calcite-components 脚本标签 方解石组件可以通过HTML...
运行 npm安装 npm运行开始 目录 import React from 'react' import { Route } from 'react-router...//高阶组件 Higher-Order Components import HOCDemo from './demos/components/hocdemo' ; //组件插槽 Higher-Order
styled-components-website, 样式化的组件网站和文档 styled-components.comstyled-components 网站使用 Next.js, Preact和( 当然) 样式组件构建 !感谢你为网站贡献了这么多 ! 在这个过程中,我们可以用手来做最好...
Android三种实现底部导航栏样式,BottomTabbar样式,viewpager+fragement实现底部导航栏,RadioGroup实现导航栏其中一个可以直接跳转到其他页面
JavaScript_網頁前端工程_Web_Components_原生組件簡介與實作_at_2021_05_29
此版本支持D7,内含序列号
Element Plus的axure资源 适用于Axure 9及以上版本 官方下载地址https://raw.githubusercontent.com/ElementUI/Resources/master/Element_Components_v2.1.0.rplib 由于网络,大家下载不是很方便,此处提供资源
Vue样式的组件 组件年龄的视觉图元。... 这是由和,并由和支持的原始样式组件的(功能。 感谢您使这个项目成为可能! 用法 首先在本地注册您的组件(请参阅 ) new Vue({ // ... components { 'styled-t
主要介绍了styled-components设置组件属性的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
样式文件可直接引用src/components/wux.wxss Components ActionSheet - 上拉菜单 Backdrop - 背景幕 Barcode - 条形码 Button - 浮动按钮 Calendar - 日历 CountDown - 倒计时 CountUp - 计数器 Dialog - 对话框 ...
在components目录创建组件,在页面中引入组件 例如引入公共导航栏 创建组件components/Nav.vue 引入组件layouts/default.vue 2,引入公共样式 assets/css/common.css 在nuxt.config.js中引入 若引入less或者sass...